/*
Theme Name: SMC Theme
Description: Custom WordPress theme for SMC (Sepehr Meshgat Caspian) — bilingual (Farsi/English) marketing agency site. Built from the site's original static HTML/CSS/JS prototype; all the scroll-scrubbed hero video, background crossfade, course-orbit circle, services coverflow, and testimonial marquee behavior is preserved exactly, with Courses, Lessons, Reviews, and Services now pulled from the SMC Content plugin's custom post types instead of being hardcoded.
Author: SMC
Version: 1.0.0
Text Domain: smc-theme
Requires Plugins: smc-content
*/

/* ============================================================
   Everything below this line is the site's actual design system
   (colors, layout, components, animations) — ported as-is from
   the static prototype. See functions.php for how it's enqueued
   and header.php/footer.php/front-page.php for the markup that
   uses these classes.
   ============================================================ */

  :root{
    --ink:#17181A;
    --emerald-a:#0B3D2E;
    --emerald-b:#1FAE73;
    --emerald-grad:linear-gradient(135deg,var(--emerald-a) 0%,var(--emerald-b) 100%);
    --emerald-solid:#157550;
    --saffron:#D4A94C;
    --parchment:#F6F2E9;
    --stone:#8B8578;
    --rainbow:linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  #bg-layer{position:fixed;inset:0;z-index:-1;background:#2e2621;} /* matches the hero video's own tone; JS keeps this in sync from here on */
  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:'Vazirmatn',sans-serif;
    line-height:1.7;
    overflow-x:hidden;
  }
  .num{font-family:'Fraunces',serif;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
  section{position:relative;}

  /* ---- Header ---- */
  header{
    position:fixed;top:0;right:0;left:0;z-index:100;
    background:rgba(23,24,26,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .header-inner{max-width:1160px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
  header svg{height:26px;width:auto;display:block;}
  nav{display:flex;gap:28px;align-items:center;}
  nav a{color:var(--parchment);font-size:14.5px;font-weight:500;opacity:.9;transition:opacity .2s;}
  nav a:hover{opacity:1;color:var(--emerald-b);}
  .lang-switch{display:flex;gap:6px;font-size:13px;color:var(--stone);}
  .lang-switch span{padding:2px 6px;}
  .lang-switch .active{color:var(--parchment);font-weight:700;border-bottom:2px solid var(--emerald-b);}
  /* Hamburger / close icon: three bars that rotate into an X via CSS alone
     (no icon font/SVG swap) when the button gets .open, toggled by JS. */
  .nav-toggle{
    display:none;
    flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:38px;height:38px;padding:0;border:none;background:transparent;cursor:pointer;
  }
  .nav-toggle span{
    display:block;width:22px;height:2px;border-radius:2px;background:var(--parchment);
    transition:transform .25s ease,opacity .25s ease;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---- Hero ---- */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:140px 0 80px;
    text-align:center;
  }
  .hero h1{
    font-size:clamp(34px,6vw,72px);
    font-weight:900;
    line-height:1.25;
    margin:0 auto 26px;
    max-width:920px;
  }
  .hero p.sub{
    font-size:clamp(16px,2vw,20px);
    color:#4a4a45;
    max-width:640px;
    margin:0 auto 42px;
    line-height:1.9;
  }
  .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .btn{
    display:inline-block;padding:15px 34px;border-radius:100px;
    font-weight:700;font-size:15.5px;
    transition:transform .2s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-secondary{border:1.5px solid var(--ink);color:var(--ink);}

  /* ---- CTA buttons: animated rainbow-gradient border ----
     True border-only ring (not a full glow patch — an earlier version of
     this used pseudo-elements with a negative z-index, which per the CSS
     stacking spec actually paints *above* the element's own background,
     not behind it, so the "ring" ended up filling the whole button face).
     This version uses the standard double-background trick instead: two
     background layers on the same element, a solid colour clipped to
     padding-box (stops at the inner edge of the border) painted over an
     animated rainbow layer clipped to border-box (fills the full box,
     border included). The solid layer never reaches under the border, so
     only that border strip ever shows the rainbow — the middle stays a
     plain solid fill. Needs an actual `border` width to create the ring;
     the border's own colour is irrelevant since both background layers
     paint over it (kept transparent here). Scoped to .btn-primary (filled
     buttons: hero, courses, final CTA) and the hero's outline button
     (.btn-secondary.btn-on-video), which uses a translucent dark fill
     instead of solid emerald so it still reads as "over video" rather
     than a fully opaque button. */
  .btn-primary,
  .btn-secondary.btn-on-video{
    border:2px solid transparent;
    background-size:100% 100%, 400% 400%;
    animation:rainbow-border-spin 20s linear infinite;
  }
  .btn-primary{
    background-image:var(--emerald-grad), var(--rainbow);
    background-origin:padding-box, border-box;
    background-clip:padding-box, border-box;
    color:var(--parchment);
  }
  .btn-secondary.btn-on-video{
    background-image:linear-gradient(rgba(23,24,26,.45), rgba(23,24,26,.45)), var(--rainbow);
    background-origin:padding-box, border-box;
    background-clip:padding-box, border-box;
  }

  /* ---- Hero video (scroll-scrubbed) ---- */
  .hero-video{
    position:relative;height:100vh;overflow:hidden;
  }
  /* Fades the video + scrim to transparent over the section's own bottom
     ~9% — the shared background layer (#bg-layer, fixed behind everything)
     shows through wherever this goes transparent. With no section in
     between hero and value-props anymore, this is what makes that handoff
     read as a blend instead of a hard cut: value-props has no background
     of its own, so it always sits on whatever colour #bg-layer currently
     is; the crossfade below (VIDEO_END -> PARCHMENT) is timed to finish
     *before* the hero unpins, so by the time this fade strip scrolls past,
     it's revealing solid parchment — the video visually dissolves into the
     next section's own tone rather than being sharply cropped by it. Kept
     to a slim band (not the whole section) so it reads as a subtle bottom
     vignette during normal playback, not a premature fade of the video
     itself.
     Same effect for both the actual video and its scrim; masking each
     rather than the whole `.hero-video` element leaves `.hero-content`
     unaffected, so headline/CTA/scroll-hint opacity is controlled purely
     by their own fade-in logic. */
  .hero-video video,
  .hero-video .scrim{
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 91%, transparent 100%);
  }
  .hero-video video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .hero-video .scrim{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(23,24,26,.62) 0%, rgba(23,24,26,.12) 42%, rgba(23,24,26,.72) 100%);
  }
  .hero-content{
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding-top:70px;
  }
  .hero-content h1{
    font-size:clamp(34px,6vw,72px);font-weight:900;line-height:1.25;
    margin:0 auto 26px;max-width:920px;color:var(--parchment);
  }
  .hero-content p.sub{
    font-size:clamp(16px,2vw,20px);color:#e4e2da;max-width:640px;
    margin:0 auto 42px;line-height:1.9;
  }
  .hero-fade-el{opacity:0;transform:translateY(24px);}
  .btn-on-video{border-color:var(--parchment);color:var(--parchment);}
  .scroll-hint{
    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
    font-size:13px;color:var(--parchment);opacity:.75;letter-spacing:.05em;
  }

  /* ---- generic section styling ---- */
  /* padding-top/-bottom only (not the `padding` shorthand) — every section
     that uses this also carries .wrap for its horizontal padding+max-width
     (padding:0 32px). Two shorthand `padding` declarations on the same
     element fight at the whole-property level, so whichever rule is later
     in the stylesheet wins ALL FOUR sides, silently zeroing out .wrap's
     left/right padding. That was invisible on desktop (.wrap's max-width
     still centres the block with room either side) but on mobile, where
     the block is narrower than max-width and padding is what keeps text
     off the screen edges, it meant every section's copy ran edge-to-edge
     with zero side margin. Using the longhand properties here means only
     top/bottom compete with .wrap's (unset) top/bottom, leaving its
     left/right untouched. */
  .section{padding-top:110px;padding-bottom:110px;}
  .section-tight{padding-top:70px;padding-bottom:70px;}
  .eyebrow{
    font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--emerald-solid);font-weight:700;margin-bottom:16px;
  }
  h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.35;margin:0 0 18px;}

  /* ---- Value props ---- */
  .value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:50px;}
  .value-card{background:#fff;border-radius:20px;padding:38px 32px;border:1px solid rgba(0,0,0,.06);}
  .value-card .n{font-size:15px;color:var(--stone);margin-bottom:16px;letter-spacing:.05em;}
  .value-card h3{font-size:20px;font-weight:800;margin:0 0 12px;}
  .value-card p{color:#4a4a45;font-size:15px;margin:0;line-height:1.85;}
  .reveal{opacity:0;transform:translateY(36px);}

  /* ---- Services snapshot ---- */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;}
  .service-tile{background:var(--ink);color:var(--parchment);border-radius:18px;padding:30px 26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;}
  .service-tile h3{font-size:17px;font-weight:800;margin:0 0 10px;}
  .service-tile p{font-size:13.5px;color:#c9c7c0;margin:0;line-height:1.7;}

  /* ---- Services — coverflow carousel ---- */
  .coverflow{--cf-card:clamp(150px,20vw,230px);position:relative;margin-top:56px;}
  .coverflow-frame{
    cursor:grab;overflow:hidden;padding:36px 0;outline:none;
    perspective:calc(var(--cf-card) * 3);
    touch-action:pan-y;
  }
  .coverflow-frame:active{cursor:grabbing;}
  .coverflow-track{position:relative;height:var(--cf-card);transform-style:preserve-3d;}
  .coverflow-card{
    position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1/1;
    overflow:hidden;border-radius:20px;background:var(--ink);
    box-shadow:0 20px 40px rgba(23,24,26,.25);will-change:transform;
  }
  .coverflow-card img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none;}
  .cf-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:200;
    width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(246,242,233,.9);color:var(--ink);font-size:20px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.14);transition:background .2s;
    direction:ltr;unicode-bidi:isolate;
  }
  .cf-nav:hover{background:#fff;}
  .cf-prev{left:0;}
  .cf-next{right:0;}
  .cf-caption{text-align:center;margin-top:26px;}
  .cf-caption h3{font-size:19px;font-weight:800;margin:0 0 8px;}
  .cf-caption p{font-size:14.5px;color:var(--stone);margin:0 auto;max-width:420px;line-height:1.8;}
  .cf-dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px;}
  .cf-dots button{
    width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:var(--ink);opacity:.28;transition:opacity .2s;
  }
  .cf-dots button.active{opacity:1;}
  @media(max-width:720px){
    .cf-nav{display:none;}
  }

  /* ---- Tutorial teaser: course orbit (scroll-morph circle -> arc) ----
     Ported from a pasted framer-motion/React spec — same core idea (a ring
     of flip-cards that morphs into a bottom arc and rotates through as you
     scroll) rebuilt on GSAP/ScrollTrigger, which this project already uses
     for every other scroll-scrub effect, instead of adding a second,
     competing scroll-hijacking system. Scaled from 20 generic stock photos
     to the 6 real course topics SMC actually teaches, one card each,
     flip-to-reveal the course name. The original's separate
     scatter->line->circle intro sequence (a few seconds, non-skippable)
     was designed for a one-time page-load hero; replayed every time a
     visitor scrolls past a normal page section it'd be annoying, so
     that's simplified to a single quick converge-and-fade-in instead. */
  .course-orbit{
    position:relative;
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    /* Vertical (not diagonal) gradient, weighted toward the darker
       --emerald-a at the bottom instead of the brighter --emerald-b: this
       section is pinned while its content is on screen, so its background
       never visibly moves, but its BOTTOM edge is what's on screen the
       instant the pin releases and the shared crossfade layer takes over
       at EMERALD_DARK (= --emerald-a). Matching that here means there's no
       colour seam at the handoff — the darker green the user liked on the
       section right after this one now IS this section's own tone by the
       time it hands off, and the black fade that follows continues an
       already-darkening green instead of starting from a lighter one. */
    background:linear-gradient(180deg, var(--emerald-b) 0%, var(--emerald-a) 78%, var(--emerald-a) 100%);
    color:var(--parchment);
  }
  .course-orbit-stage{position:absolute;inset:0;}
  .course-card{
    position:absolute;left:50%;top:50%;
    width:74px;height:100px;margin:-50px 0 0 -37px;
    perspective:900px;
    cursor:pointer;
  }
  .course-card-inner{
    position:relative;width:100%;height:100%;
    transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.4,.2,.2,1);
  }
  .course-card:hover .course-card-inner{transform:rotateY(180deg);}
  .course-card-face{
    position:absolute;inset:0;
    border-radius:12px;overflow:hidden;
    backface-visibility:hidden;
    box-shadow:0 10px 26px rgba(11,61,46,.35);
  }
  .course-card-face img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none;}
  .course-card-face.back{
    transform:rotateY(180deg);
    background:var(--ink);
    display:flex;align-items:center;justify-content:center;
    padding:8px;text-align:center;
    border:1px solid rgba(246,242,233,.14);
  }
  .course-card-face.back span{font-size:10.5px;font-weight:800;line-height:1.5;color:var(--parchment);}
  .course-orbit-content{
    position:absolute;left:50%;top:16%;transform:translate(-50%,0);
    width:100%;max-width:600px;text-align:center;padding:0 24px;
    opacity:0;pointer-events:none;
    transition:opacity .4s ease;
  }
  .course-orbit-content.show{opacity:1;pointer-events:auto;}
  .course-orbit-content .eyebrow{color:var(--saffron);}
  .course-orbit-content h2{color:var(--parchment);margin-bottom:16px;}
  .course-orbit-content p{max-width:520px;margin:0 auto 30px;font-size:15.5px;opacity:.95;line-height:1.9;}
  @media(max-width:720px){
    .course-card{width:56px;height:76px;margin:-38px 0 0 -28px;}
  }

  /* ---- Proof ---- */
  .proof-label{
    text-align:center;font-size:13px;color:var(--stone);margin-bottom:44px;
    border:1px dashed var(--stone);border-radius:10px;padding:10px 16px;display:inline-block;
  }
  .proof-wrap{text-align:center;}
  .marquee-wrap{
    margin-top:20px;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track{
    display:flex;gap:20px;width:max-content;direction:ltr;
    animation:marquee-scroll 42s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{animation-play-state:paused;}
  @keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @keyframes rainbow-border-spin{
    0%{background-position:0 0;}
    50%{background-position:400% 0;}
    100%{background-position:0 0;}
  }
  .testimonial-card{
    direction:rtl;text-align:right;width:300px;flex:0 0 auto;
    background:#fff;border-radius:16px;padding:26px;border:1px solid rgba(0,0,0,.06);
  }
  .testimonial-card .tc-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .testimonial-card .tc-avatar{
    width:42px;height:42px;border-radius:50%;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    color:var(--parchment);font-weight:800;font-size:15px;
  }
  .testimonial-card .tc-name{font-weight:700;font-size:14px;color:var(--ink);}
  .testimonial-card .tc-role{font-size:12.5px;color:var(--stone);margin-top:2px;}
  .testimonial-card p{font-size:14px;color:#4a4a45;line-height:1.85;margin:0;}
  .stat-row{display:flex;justify-content:center;gap:60px;margin-top:56px;flex-wrap:wrap;}
  .stat{text-align:center;}
  .stat .num{font-size:40px;font-weight:900;color:var(--emerald-solid);display:block;}
  .stat span.label{font-size:13px;color:var(--stone);}

  /* ---- FAQ ---- */
  .faq{max-width:760px;margin:50px auto 0;}
  details{border-bottom:1px solid rgba(0,0,0,.1);padding:22px 0;}
  summary{
    cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+";font-size:22px;color:var(--emerald-solid);font-weight:400;transition:transform .25s;}
  details[open] summary::after{transform:rotate(45deg);}
  details p{margin:14px 0 0;color:#4a4a45;font-size:15px;line-height:1.85;}

  /* ---- Dark theme for everything from #work onward ----
     #work, #about and #contact used to sit on the shared layer's default
     parchment (light) colour with dark-ink text — now that the shared
     layer fades to solid ink right after the courses section (see
     initBackgroundCrossfade below), these three need the inverse: light
     parchment text by default, with the handful of elements that had an
     explicit dark colour (FAQ answers, the FAQ divider line) swapped for a
     light-on-dark equivalent. Testimonial cards are deliberately left
     alone — a solid white card with its own dark text reads fine floating
     on a dark section and needs no change. Accent colours (the small
     eyebrow labels, the stat numbers, the FAQ's +/× icon) used
     --emerald-solid, which is a little low-contrast on near-black, so
     those move to the brighter --saffron/--emerald-b already used
     elsewhere in the design for text-on-dark accents (e.g. course-orbit's
     own eyebrow). */
  #work,
  #about,
  #contact{color:var(--parchment);}
  #work .eyebrow,
  #about .eyebrow{color:var(--saffron);}
  #work .stat .num{color:var(--emerald-b);}
  #about details{border-bottom-color:rgba(246,242,233,.16);}
  #about summary::after{color:var(--emerald-b);}
  #about details p{color:#c9c7c0;}

  /* ---- Final CTA ---- */
  /* No background of its own — this section (like work/about right before
     it) now rides the shared crossfade layer, which has already finished
     fading to solid ink well before this point. See the dark-section colour
     overrides further below for #work/#about/#contact. */
  .final-cta{text-align:center;}
  .final-cta h2{max-width:600px;margin:0 auto 30px;}

  /* ---- Footer ---- */
  footer{color:#a9a79f;padding:64px 0 30px;}
  footer > .wrap > svg{height:24px;width:auto;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:36px 0 40px;border-bottom:1px solid rgba(255,255,255,.08);}
  .footer-brand svg{height:22px;width:auto;display:block;margin-bottom:16px;}
  .footer-brand-desc{font-size:14px;color:#9d9b93;line-height:1.9;max-width:320px;margin:0;}
  .footer-col h4{font-size:14px;font-weight:700;color:var(--parchment);margin:0 0 18px;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
  .footer-col a{font-size:14px;color:#a9a79f;transition:color .2s;}
  .footer-col a:hover{color:var(--parchment);}
  .footer-social a{display:flex;align-items:center;gap:10px;}
  .footer-social svg{width:17px;height:17px;flex:0 0 auto;color:#9d9b93;}
  .footer-social a:hover svg{color:var(--emerald-b);}
  .newsletter-desc{font-size:13.5px;color:#9d9b93;line-height:1.8;margin:0 0 16px;max-width:300px;}
  .newsletter-form{position:relative;max-width:320px;}
  .newsletter-row{display:flex;gap:8px;}
  .newsletter-input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 14px;font-family:inherit;font-size:13.5px;color:var(--parchment);outline:none;transition:border-color .2s;}
  .newsletter-input::placeholder{color:#77756e;}
  .newsletter-input:focus{border-color:var(--emerald-b);}
  .newsletter-submit{white-space:nowrap;padding:11px 18px;border-radius:10px;border:none;background:var(--emerald-grad);color:var(--parchment);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s;}
  .newsletter-submit:disabled{opacity:.6;cursor:default;}
  .newsletter-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(23,24,26,.94);text-align:center;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:0 12px;}
  .newsletter-status.show{opacity:1;}
  .newsletter-status.success{color:#5fd394;}
  .newsletter-status.error{color:#e9776b;}
  @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}
  .footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;}
  .footer-links a:hover{color:var(--parchment);}
  .footer-bottom{padding-top:24px;font-size:12.5px;color:#6d6b64;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

  @media(max-width:860px){
    .value-grid{grid-template-columns:1fr;}
    .header-inner{padding:14px 20px;}
    .section{padding-top:70px;padding-bottom:70px;}
    .nav-toggle{display:flex;}
    /* Collapsible dropdown panel instead of the always-visible desktop
       nav. Kept in the DOM and off-screen-height (max-height:0, not
       display:none) rather than removed, so the height transition has
       something to animate — display:none can't transition. */
    nav{
      position:fixed;top:67px;right:0;left:0;z-index:99;
      flex-direction:column;align-items:stretch;gap:0;
      max-height:0;overflow:hidden;
      /* Fully solid, no backdrop-filter — this panel sits directly over
         the hero video, and combining a translucent background with
         overflow:hidden clipping (needed for the max-height collapse
         animation) on a fixed element let the video show through much
         more than the alpha value alone would suggest. Solid avoids the
         ambiguity entirely and reads as more legible menu anyway. */
      background:var(--ink);
      border-bottom:1px solid rgba(255,255,255,.06);
      transition:max-height .3s ease;
    }
    nav.open{max-height:360px;}
    nav a{
      padding:16px 20px;font-size:15.5px;
      border-top:1px solid rgba(246,242,233,.08);
    }
  }

/* ============================================================
   COURSE / LESSON TEMPLATES
   New pages that didn't exist in the original one-page prototype
   (single course, single lesson, course archive) — built with the
   same design tokens/typography as everything above so they read
   as part of the same site rather than a bolted-on admin theme.
   ============================================================ */

.smc-page-header{padding:150px 0 60px;text-align:center;}
.smc-page-header .eyebrow{justify-content:center;}
.smc-page-header h1{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.3;margin:0 0 14px;}
.smc-page-header p{color:var(--stone);max-width:640px;margin:0 auto;font-size:15.5px;line-height:1.85;}

.smc-course-cover{width:100%;max-width:900px;margin:0 auto 50px;border-radius:20px;overflow:hidden;aspect-ratio:16/7;}
.smc-course-cover img{width:100%;height:100%;object-fit:cover;display:block;}

.smc-course-body{max-width:760px;margin:0 auto 70px;font-size:16px;line-height:2;color:var(--ink);}
.smc-course-body p{margin:0 0 20px;}

.smc-lesson-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.smc-lesson-list h3{font-size:15px;color:var(--stone);margin:0 0 18px;font-weight:700;}
.smc-lesson-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;border-radius:14px;background:#fff;border:1px solid rgba(23,24,26,.08);
  text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s;
}
.smc-lesson-item:hover{border-color:var(--emerald-solid);transform:translateX(-2px);}
[dir="rtl"] .smc-lesson-item:hover{transform:translateX(2px);}
.smc-lesson-item .smc-lesson-num{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:var(--parchment);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--emerald-solid);
}
.smc-lesson-item .smc-lesson-title{flex:1;font-size:15px;font-weight:600;}
.smc-lesson-item .smc-lesson-duration{font-size:12.5px;color:var(--stone);white-space:nowrap;}
.smc-no-lessons{text-align:center;color:var(--stone);padding:30px 0;}

/* Lesson single */
.smc-lesson-wrap{max-width:900px;margin:0 auto 70px;}
.smc-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--ink);margin-bottom:28px;}
.smc-video-embed iframe,.smc-video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.smc-video-native video{object-fit:contain;background:#000;}
.smc-no-video{padding:60px 20px;text-align:center;color:var(--stone);background:var(--ink);border-radius:16px;margin-bottom:28px;}

.smc-lesson-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.smc-lesson-meta .smc-badge{
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;
  background:var(--parchment);color:var(--emerald-solid);
}
.smc-back-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--stone);text-decoration:none;margin-bottom:24px;transition:color .2s;}
.smc-back-link:hover{color:var(--emerald-solid);}
.smc-lesson-body{font-size:15.5px;line-height:1.95;color:var(--ink);}
.smc-lesson-body p{margin:0 0 18px;}

.smc-lesson-nav{display:flex;justify-content:space-between;gap:16px;margin-top:50px;padding-top:30px;border-top:1px solid rgba(23,24,26,.08);}
.smc-lesson-nav a{font-size:14px;color:var(--ink);text-decoration:none;font-weight:600;}
.smc-lesson-nav a:hover{color:var(--emerald-solid);}
.smc-lesson-nav .smc-nav-label{display:block;font-size:12px;color:var(--stone);font-weight:400;margin-bottom:4px;}

/* Course archive grid */
.smc-course-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;
  max-width:1160px;margin:0 auto;padding-bottom:100px;
}
.smc-course-tile{
  display:block;text-decoration:none;color:var(--ink);border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid rgba(23,24,26,.08);transition:transform .25s,box-shadow .25s;
}
.smc-course-tile:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(23,24,26,.12);}
.smc-course-tile .smc-tile-img{aspect-ratio:4/3;overflow:hidden;}
.smc-course-tile .smc-tile-img img{width:100%;height:100%;object-fit:cover;display:block;}
.smc-course-tile .smc-tile-body{padding:20px 22px 26px;}
.smc-course-tile h3{font-size:17px;font-weight:700;margin:0 0 8px;}
.smc-course-tile p{font-size:13.5px;color:var(--stone);line-height:1.8;margin:0;}

@media(max-width:640px){
  .smc-page-header{padding:120px 0 40px;}
  .smc-lesson-item{padding:14px 16px;}
}

/* language switch links (FA / EN versions of the agency) */
.lang-switch a{color:inherit;text-decoration:none;opacity:.7;transition:opacity .2s}
.lang-switch a:hover{opacity:1}


/* Light Services section → green Courses section: a tall, eased gradient band instead of a hard edge.
   Many in-between stops keep the change even (no visible stripe); it ends exactly on the green
   the Courses section starts with. */
.smc-fade-to-green{
  height:clamp(180px,32vh,340px);
  margin-top:-60px;            /* starts inside the bottom padding of Services, so the change begins earlier */
  position:relative;z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(246,242,233,0) 0%,
    #F3F1E6 10%,
    #E7EEDF 24%,
    #CFE6D3 38%,
    #ABDABF 52%,
    #80CBA5 66%,
    #52BD8B 80%,
    #33B47D 90%,
    #1FAE73 100%);
}
.smc-fade-to-green + .course-orbit{margin-top:-1px;} /* no hairline between the band and the section */


/* Green Courses section → dark section below: the same kind of soft gradient band.
   It starts on the green the Courses section ends with and ends on the dark page colour;
   the page's colour layer switches to dark while this band covers the screen (js/main.js). */
.smc-fade-to-ink{
  height:clamp(180px,32vh,340px);
  margin-top:-1px;
  pointer-events:none;
  background:linear-gradient(180deg,
    #0B3D2E 0%,
    #0B3C2D 10%,
    #0D382B 24%,
    #0F3128 38%,
    #112923 52%,
    #14221F 66%,
    #161C1C 80%,
    #17191B 90%,
    #17181A 100%);
}


/* Bigger course cards in the rotating Courses section */
.course-card{width:100px;height:136px;margin:-68px 0 0 -50px;}
.course-card-face{border-radius:14px;}
.course-card-face.back span{font-size:12px;}
@media (max-width:767px){
  .course-card{width:84px;height:114px;margin:-57px 0 0 -42px;}
  .course-card-face.back span{font-size:11px;}
}