/* ==========================================================================
   MANGO — components
   Button heights 38 / 46 / 57 (from the Figma set); primary is 65 tall in
   the page context per the measured reference (205x65, radius 14).
   ========================================================================== */

/* ------------------------------------------------------------- buttons */
.btn{
  --h:48px;                                   /* client-set */
  display:inline-flex;align-items:center;gap:var(--space-3);
  height:var(--h);padding-inline:var(--space-6);
  border:0;border-radius:var(--radius-full);   /* pill, per the reference */
  font-family:var(--font-fa);font-size:var(--fs-body);font-weight:700;
  line-height:1;cursor:pointer;white-space:nowrap;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn--sm{--h:38px;font-size:var(--fs-body-sm);padding-inline:var(--space-5)}
/* --lg now matches the base height; it keeps its wider inline padding, which is
   what still separates it from a default button. */
.btn--lg{--h:48px;padding-inline:var(--space-8)}

/* The halo: a band outside the pill rather than a border, so it does not eat
   into the fill or shift the label. */
.btn--primary{background:var(--accent-default);color:var(--fg-on-accent);box-shadow:0 0 0 3px var(--ring-accent)}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 0 0 5px var(--ring-accent)}
.btn--primary:active{background:var(--accent-pressed);transform:translateY(0)}

.btn--secondary{background:var(--bg-panel-dark);color:var(--fg-on-dark);box-shadow:0 0 0 3px var(--ring-dark)}
.btn--secondary:hover{background:var(--ink-800);transform:translateY(-2px);box-shadow:0 0 0 5px var(--ring-dark)}

.btn--ghost{background:transparent;color:var(--fg-primary);box-shadow:inset 0 0 0 1px var(--border-strong)}
.btn--ghost:hover{background:var(--bg-subtle)}
.on-dark .btn--ghost{color:var(--fg-on-dark);box-shadow:inset 0 0 0 1px var(--border-on-dark)}
.on-dark .btn--ghost:hover{background:rgba(255,255,255,.08)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* --- the signature CTA: amber rounded rect with a dark circular capsule
       holding the arrow at its LEADING end (RTL -> the right).           */
/* 48px, client-set — down from 57, which was itself down from the reference's
   measured 65. The capsule keeps its ~75% ratio to the button height. */
.btn--cta{
  --h:48px;
  height:var(--h);
  /* RTL: the capsule sits on the LEFT, so it hugs the inline-END edge */
  padding-inline-end:var(--space-2);
  padding-inline-start:var(--space-6);
  border-radius:var(--radius-full);
  background:var(--accent-default);color:var(--fg-on-accent);
  box-shadow:0 0 0 3px var(--ring-accent);
  font-size:var(--fs-body);font-weight:800;
  gap:var(--space-4);
}
.btn--cta:hover{box-shadow:0 0 0 5px var(--ring-accent)}
.btn--cta .cap{
  flex:0 0 auto;
  width:36px;height:36px;border-radius:var(--radius-full);   /* ~75% of 48 */
  background:var(--ink-950);color:var(--white);
  display:grid;place-items:center;
  font-size:17px;line-height:1;
  transition:transform .3s var(--ease);
}
/* btn--sm had no effect here: .btn--cta sets --h after .btn--sm, so the filter
   bar's small CTA was rendering at the full 65px with a 49px capsule and towered
   over the links beside it. The signature amber-plus-capsule shape is kept; only
   its scale changes. */
.btn--cta.btn--sm{
  --h:44px;
  font-size:var(--fs-body);
  padding-inline-start:var(--space-6);
  gap:var(--space-3);
}
.btn--cta.btn--sm .cap{width:32px;height:32px;font-size:14px}

.btn--cta:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn--cta:hover .cap{transform:translateX(-5px)}   /* RTL: arrow drifts left */
.btn--cta:active{transform:translateY(0)}

/* Arrow glyphs sit as the first child so they render on the leading side. */
.btn .arw{display:inline-flex;font-size:1.05em;line-height:1;transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(-4px)}

/* --- icons ------------------------------------------------------------
   Drawn SVG, not a glyph font. An inline <svg> with no intrinsic size fills
   100% of its container, which made every affordance a 44px arrow crammed
   edge to edge — so the size is set here, in em, and each context sets the
   em it wants via font-size. */
.ico{
  width:1em;height:1em;
  flex:0 0 auto;
  display:block;
  overflow:visible;          /* round joins are not clipped at the box edge */
}

/* --- the repeated card affordance: an arrow in a rounded square -------- */
.affordance{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--radius-sm);
  display:grid;place-items:center;
  font-size:18px;line-height:1;
  background:var(--bg-subtle);color:var(--fg-primary);
  box-shadow:inset 0 0 0 1px var(--border-hairline);
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.on-dark .affordance{background:rgba(255,255,255,.10);color:var(--fg-on-dark);box-shadow:inset 0 0 0 1px var(--border-on-dark)}

/* ---------------------------------------------------------------- cards */
.card{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  /* 430 was measured off the reference, whose cards carry an illustration in
     the upper half. These do not, so `margin-top:auto` on the title pushed the
     copy to the floor and left 166px — 39% of the card — as a hole that reads
     like something failed to load. The card now sizes to its own content, with
     a floor so a short one still holds the row's rhythm. */
  min-height:264px;
  padding:var(--space-8);
  border-radius:var(--radius-lg);        /* measured: 20 */
  background:var(--bg-surface);
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.card:hover .affordance{background:var(--accent-default);color:var(--fg-on-accent);transform:rotate(-45deg)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.card__n{font-family:var(--font-en-mono);font-size:12px;letter-spacing:.12em;color:var(--fg-muted)}
.card__title{margin-top:auto;font-size:var(--fs-h3);font-weight:800;line-height:1.4;letter-spacing:-.01em}
.card__desc{margin-top:var(--space-4);color:var(--fg-muted);font-size:var(--fs-body-sm);line-height:1.9}

.card--dark{background:var(--bg-panel-dark);color:var(--fg-on-dark)}
.card--dark .card__desc{color:var(--fg-on-dark-muted)}
.card--dark .card__n{color:rgba(255,255,255,.55)}

/* --- featured card: a solid navy block offset up-and-outward BEHIND card 1.
       This — not a bleeding row — is what creates the bleed impression.
       `.featured` must be a WRAPPER, not the card itself: `.card` sets
       z-index, which would make a ::before inside it paint over the copy. */
.featured{position:relative;display:flex}
.featured>.card{flex:1 1 auto;z-index:1}
.featured::before{
  content:"";position:absolute;z-index:0;
  /* offset up and OUTWARD; outward in RTL is to the right */
  top:-16px;bottom:16px;right:-18px;left:18px;
  border-radius:var(--radius-lg);
  background:var(--bg-panel-dark);
}

/* --------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg-page) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  transition:background-color .3s var(--ease);
}
/* The stuck hairline was a real border, which made the header 87px while the
   drawer and the anchor offsets were all written against 86 — a one-pixel seam
   under a sticky bar that is visible on every scroll. Drawing it as an overlay
   keeps the header exactly --header-h tall in both states. */
.site-header::after{
  content:"";
  position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--border-hairline);
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none;
}
.site-header.is-stuck::after{opacity:1}
.nav{display:flex;align-items:center;gap:var(--space-8);height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--space-3);flex:0 0 auto}
.brand img{height:52px;width:auto}
.nav__list{display:flex;align-items:center;gap:var(--space-6);margin-inline-start:var(--space-6)}
.nav__link{
  font-size:var(--fs-body);font-weight:600;    /* measured: 16px w500-600 */
  color:var(--fg-muted);                       /* measured: #a2a5ad */
  padding-block:var(--space-2);
  position:relative;transition:color .22s var(--ease)
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--fg-primary)}
.nav__link::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  background:var(--accent-default);transform:scaleX(0);transform-origin:right;
  transition:transform .28s var(--ease)
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-3)}

/* --- mega menu --------------------------------------------------------- */
.has-mega{position:relative}
/* `.sub-menu` is what wp_nav_menu emits for a child list; `.mega` is what
   the hand-written fallback emits. Both are the same panel. */
.mega,
.has-mega > .sub-menu{
  /* physical `right`: inset-inline-end resolves to the LEFT in RTL, which
     threw the panel 400px off the right edge of the canvas */
  position:absolute;top:calc(100% + 10px);right:0;left:auto;
  width:min(720px,88vw);padding:var(--space-6);
  background:var(--bg-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega,
.has-mega:hover > .sub-menu,.has-mega:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.has-mega > .sub-menu li{display:block}
.mega a,
.has-mega > .sub-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-sm);
  font-weight:600;font-size:var(--fs-body-sm);
  transition:background-color .2s var(--ease),color .2s var(--ease)
}
.mega a:hover,
.has-mega > .sub-menu a:hover{background:var(--bg-subtle);color:var(--accent-text)}
.mega a span,
.has-mega > .sub-menu a span{color:var(--fg-muted);font-size:14px;transition:transform .2s var(--ease)}
.mega a:hover span,
.has-mega > .sub-menu a:hover span{transform:translateX(-4px);color:var(--accent-text)}

/* --- burger / mobile drawer -------------------------------------------- */
.nav__close{display:none;border:0;background:transparent;cursor:pointer;color:var(--fg-primary);padding:0}
.burger{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;
  border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--border-hairline)}
.burger span{display:block;width:20px;height:2px;margin:4px auto;background:var(--fg-primary);
  transition:transform .28s var(--ease),opacity .2s var(--ease)}
.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1100px){
  .burger{display:block}

  /* Client-set: burger on the leading edge, logo on the trailing one — the
     reverse of the desktop bar. order + space-between rather than swapping the
     markup, so the DOM keeps the logo first for assistive tech. */
  .nav{justify-content:space-between}
  .nav__end{order:0;margin-inline-start:0}
  .brand{order:1}

  /* The close control sits in the drawer's top corner, over the panel. It only
     exists while the drawer is open; the burger underneath is covered by it. */
  .nav__close{
    position:fixed;top:0;inset-inline-start:0;z-index:3;
    width:var(--header-h);height:var(--header-h);
    place-items:center;
    opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;
  }
  .is-open .nav__close{display:grid;opacity:1;visibility:visible}
  /* Client-set: a drawer off the right edge rather than a sheet dropping from
     the top. Right is the near side in an RTL layout — the thumb is already
     there, and it is the side the burger sits on.

     translateX is physical, not logical, so +100% parks it off the right edge
     in either direction; using a logical offset here would send it the wrong
     way the moment the document is LTR. */
  /* HEIGHT IS EXPLICIT ON PURPOSE.
     .site-header carries a backdrop-filter, and a filtered element becomes the
     containing block for its position:fixed descendants. So this drawer resolves
     against the header, not the viewport: `bottom:0` left it one pixel
     tall and it opened as a sliver under the header. Anchoring to the header is
     fine — it is sticky at the top — but the height has to come from the
     viewport itself. */
  /* Client-set: the panel now fills the screen and is flush with the top rather
     than hanging below the header. The header's own height is reserved as top
     padding so the first link clears the close button. */
  .nav__list{
    position:fixed;top:0;right:0;left:0;bottom:auto;
    height:100dvh;width:auto;
    /* the desktop rule adds a leading margin; left in place it inset the
       full-width panel and let a strip of the page show through. */
    margin-inline-start:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-surface);
    padding:var(--header-h) var(--space-6) var(--space-10);
    box-shadow:var(--shadow-lift);
    border-inline-start:0;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);opacity:0;visibility:hidden;
    transition:opacity .26s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .is-open .nav__list{opacity:1;visibility:visible;transform:translateX(0)}
  .nav__list>li{border-bottom:1px solid var(--border-hairline)}
  .nav__link{display:block;padding-block:var(--space-4);font-size:var(--fs-body-lg)}
  .nav__link::after{display:none}
  .mega,.has-mega > .sub-menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 var(--space-4);grid-template-columns:1fr;background:transparent;
    max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .has-mega.is-expanded .mega,.has-mega.is-expanded > .sub-menu{max-height:600px}
  .nav__end .btn{display:none}
}

/* Kept OUT of the width query on purpose: plain CSS has no nested @media, and
   nesting one silently voided every rule after it in that block — the drawer
   lost its open state and its list items and rendered as a one-line strip. */
@media (prefers-reduced-motion:reduce){
  .nav__list{transition-duration:.01ms}
}


/* --- label roll on hover -------------------------------------------------
   The reference masks and rolls each LETTER of a button label, staggered.
   That technique cannot be used here: Persian is a joining script, and putting
   every letter in its own element breaks the cursive joins — each letter would
   render in its isolated form and the word would fall apart. Rolling the whole
   label keeps the same motion with the text intact.

   Two stacked copies in one grid cell: the live one leaves upward, the
   duplicate arrives from below. inline-grid so the box still sizes to the text
   and the button keeps hugging its label. */
/* 1.9, not 1.5. The mask is the line box, and Persian descenders (the tail of
   ی, ج, ...) sit well below the baseline — at 1.5 they were being sliced off
   along the bottom edge of the mask. The button's fixed height absorbs the
   taller box, so nothing else moves. */
.btn__roll{display:inline-grid;overflow:hidden;line-height:1.9}
.btn__roll-in{grid-area:1/1;transition:transform .4s var(--ease)}
.btn__roll-in--dup{transform:translateY(115%)}
.btn:hover .btn__roll-in,
.btn:focus-visible .btn__roll-in{transform:translateY(-115%)}
.btn:hover .btn__roll-in--dup,
.btn:focus-visible .btn__roll-in--dup{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .btn__roll-in{transition:none}
  .btn__roll-in--dup{display:none}
}