/*
 * WordPress integration overrides.
 *
 * Keep client-owned bundle.css immutable. Root overflow uses `clip` here
 * because `hidden` creates a scroll container that breaks sticky sidebars.
 */
html,
body {
  overflow-x: clip;
}

/* Front sync: prevent long client-style card content from changing grid rhythm. */
.bwp-course-card p,
.course-card p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 345px) {
  .footer-container {
    padding-inline: 0.75rem;
  }
}

/* Utilities the templates use that assets/css/bundle.css does not carry.

   bundle.css is compiled from front/ alone — the theme's own files are never
   scanned — so a Tailwind class that appears only in our markup produces no rule
   and silently does nothing. A sweep of every class in the front-end templates
   found fifty-four of them. Most were swapped for a utility the bundle already
   has; these are the ones with no equivalent, so they are written out by hand
   under their Tailwind names and behave as the generated utilities would.

   Two rules of thumb for anything added here:
   - if front/ uses the class, it belongs in the bundle, not in this file;
   - if the class is absent from the bundle because the client's Tailwind config
     never defines it (text-red-500, w-16, bg-gradient-to-t), leaving it in the
     markup is faithful to front/ and it stays inert on their side too. */
.bg-current { background-color: currentColor; }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-\[\#EBF9F1\] { background-color: #EBF9F1; }
.bg-\[\#F2F2F2\] { background-color: #F2F2F2; }
.text-\[\#D9D9D9\] { color: #D9D9D9; }
.dark .dark\:text-\[\#4b4b4b\] { color: #4b4b4b; }
.text-\[5\.4px\] { font-size: 5.4px; }

/* Collapsed course description (single-course.php).

   The box used to hide the description outright and show a one-line excerpt, so
   the «مشاهده بیشتر» button sat directly under a single truncated sentence. The
   client asked for six or seven lines to be readable before the button, so the
   collapsed state now crops the real description instead of replacing it.

   A height rather than -webkit-line-clamp: the description is arbitrary editor
   HTML — paragraphs, lists, headings — and line-clamp only counts lines inside
   one block. `em` follows the element's own font-size, so the same rule yields
   seven lines at the mobile text-sm and at the desktop lg:text-base, and 1.7
   matches the leading-[170%] the markup sets. */
.course-description.course-description-collapsed {
  max-height: calc(7 * 1.7em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* The landing footer's social buttons. `bg-footer-*` is not in the client's
   Tailwind config, so the bundle carries no rule and the three tiles render as
   white-on-white — which is what the client reported. They are not inert on
   their side either: bahmanaicourse.ir, the page the landing is modelled on,
   defines them in its own theme and shows brand-coloured tiles. These are that
   site's own declarations, copied verbatim so the two pages stay identical. */
.bg-footer-youtube   { background-image: linear-gradient(180deg, #fe0034, #ff456b); }
.bg-footer-telegram  { background-image: linear-gradient(180deg, #03b8ff, #23a0dd); }
.bg-footer-instagram { background-image: linear-gradient(180deg, #fc01c6, #ffc500); }

.inline-block { display: inline-block; }
.flex-row-reverse { flex-direction: row-reverse; }
.text-left { text-align: left; }
.underline { text-decoration-line: underline; }
.hover\:underline:hover { text-decoration-line: underline; }
.mr-auto { margin-right: auto; }
.h-40 { height: 10rem; }
.w-\[44px\] { width: 44px; }
.pb-16 { padding-bottom: 4rem; }
.py-\[2px\] { padding-top: 2px; padding-bottom: 2px; }
.border-r-\[3px\] { border-right-width: 3px; }
.aspect-\[379\/230\] { aspect-ratio: 379 / 230; }
.scroll-mt-24 { scroll-margin-top: 6rem; }

.first\:pt-0:first-child { padding-top: 0; }
.first-of-type\:mt-0:first-of-type { margin-top: 0; }
.disabled\:opacity-50:disabled { opacity: 0.5; }

@media (min-width: 640px) {
	.sm\:h-\[15\.38px\] { height: 15.38px; }
}

@media (min-width: 1024px) {
	.lg\:gap-x-4\.5 { column-gap: 1.125rem; }
	.lg\:mt-\[60px\] { margin-top: 60px; }
	.lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
	.lg\:w-\[112px\] { width: 112px; }
}