/* ---------------------------------------------------------------------------
   White sticky header, progress bar, language switch, mobile menu
   --------------------------------------------------------------------------- */

.aps-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-orange), var(--color-gold));
  z-index: var(--z-progress);
  transition: width 0.05s linear;
}

.aps-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--t-slow) var(--ease),
              background var(--t-slow) var(--ease);
}
.aps-header.is-scrolled {
  background: var(--color-header-bg);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  box-shadow: var(--shadow-header);
  border-bottom-color: transparent;
}

/* Row 1 is [logo] [slogan] [switch]. Grid tracks run along the inline axis, so
   under [dir="rtl"] column 1 is the right-hand side and the whole row mirrors
   with no RTL-specific rule. */
.aps-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

/* The wordmark is 2175x764 (2.85:1); height is the constraint, not width. */
.aps-header__brand {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.aps-header__brand img {
  /* 54px -> 64px, about +19%. The wordmark is 2.85:1 so this costs ~28px of
     width, which the left column has to spare. --header-h is raised to match,
     because .aps-site-main uses it as its top padding and the header is fixed. */
  max-height: 64px;
  width: auto;
  max-width: 100%;
}
.aps-header__brand-text {
  color: var(--color-navy);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

/* Row 2 is [free] [nav] [staff portals]. The three tracks keep the nav list
   optically centred no matter how wide the portal pills get, which a plain
   flex row with space-between would not. */
.aps-header__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.aps-header__nav .aps-nav__list { grid-column: 2; }
.aps-header__nav .aps-staff { grid-column: 3; justify-self: end; }

/* --------------------------------------------------------------------------
   Brand slogan: a two-line phrase that builds up a word at a time, holds, then
   clears and repeats. Every word keeps its place in the layout at all times and
   only opacity/transform change, so the header cannot reflow mid-sequence.

   The diamond brand mark from the single-line version was dropped: against a
   centred two-line block it sat off-axis and read as a stray bullet. The navy /
   orange split between the two lines carries the brand instead.
   -------------------------------------------------------------------------- */
.aps-slogan {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  text-align: center;
  /* A brand line, not body copy: it stays in the latin face and stays LTR even
     on the Persian site, where --font-sans is Vazirmatn. */
  font-family: var(--font-en);
  direction: ltr;
  line-height: 1.32;
}
.aps-slogan__line {
  display: block;
  white-space: nowrap;
}
.aps-slogan__word {
  display: inline-block;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  /* 350ms against the 500ms step, so each word finishes settling before the
     next starts. At 450ms the two always overlapped and the build read as a
     smear rather than as words arriving one at a time. */
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.aps-slogan__word.is-in { opacity: 1; transform: none; }
.aps-slogan__word + .aps-slogan__word { margin-inline-start: 0.7em; }

/* 19px at weight 600 clears the 18.66px bar for WCAG "large text", which is
   what lets line 2 be orange - orange on white measures 3.45:1, fine at 3:1
   for large text but not at the 4.5:1 small-text bar. */
.aps-slogan__line--1 {
  color: var(--color-navy);
  font-size: var(--fs-md);
}
.aps-slogan__line--2 {
  color: var(--color-orange);
  font-size: var(--fs-md);
}

@media (prefers-reduced-motion: reduce) {
  /* app.js never starts the sequence; this shows the finished phrase at once
     rather than leaving three invisible words behind. */
  .aps-slogan__word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.aps-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
  margin: 0;
  padding: 0;
  list-style: none;
}
.aps-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--color-navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}
.aps-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--color-orange);
  transition: width var(--t-base) var(--ease);
}
/* The current item is persistent 13px text, so it takes the ink. Hover is a
   momentary highlight and keeps the brand orange - it is listed second so it
   still wins when you hover the current item (equal specificity, later rule). */
.aps-nav__list .current-menu-item > a,
.aps-nav__list .is-current > a { color: var(--color-orange-ink); }
.aps-nav__list a:hover { color: var(--color-orange); }
.aps-nav__list a:hover::after,
.aps-nav__list .current-menu-item > a::after,
.aps-nav__list .is-current > a::after { width: 100%; }

/* --- language switch --- */
.aps-lang {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.aps-lang__item {
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text-mut);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.aps-lang__item:hover { color: var(--color-orange); }
.aps-lang__item.is-active {
  background: var(--color-orange);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Staff portals. Outlined pills, deliberately unlike the nav links: uppercase,
   bordered and carrying an external-link arrow, so they read as somewhere you
   go rather than as another page of the site.
   -------------------------------------------------------------------------- */
.aps-staff {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.aps-staff__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 5px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--t-base) var(--ease),
              color        var(--t-base) var(--ease),
              background   var(--t-base) var(--ease);
}
/* Persian is neither uppercased nor tracked out - both wreck the joins. */
html[dir="rtl"] .aps-staff__link {
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-sm);
}
.aps-staff__link:hover,
.aps-staff__link:focus-visible {
  border-color: var(--color-orange);
  color: var(--color-orange-ink);
  background: #fff;
}
/* The arrow is bidi-neutral, so it lands at the visual end in both scripts. */
.aps-staff__ext { font-size: 0.95em; opacity: 0.65; }

/* --- hamburger --- */
.aps-burger {
  /* Sits at the end of row 1 on mobile, beside the switch. Hidden on desktop,
     where the nav is a full row of its own. */
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
}
.aps-burger__bar,
.aps-burger__bar::before,
.aps-burger__bar::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-navy);
  transition: transform var(--t-base) var(--ease),
              opacity   var(--t-base) var(--ease);
}
.aps-burger__bar { margin-inline: auto; position: relative; }
.aps-burger__bar::before,
.aps-burger__bar::after { content: ''; position: absolute; inset-inline-start: 0; }
.aps-burger__bar::before { transform: translateY(-6px); }
.aps-burger__bar::after  { transform: translateY(6px); }

.aps-burger[aria-expanded="true"] .aps-burger__bar { background: transparent; }
.aps-burger[aria-expanded="true"] .aps-burger__bar::before { transform: rotate(45deg); }
.aps-burger[aria-expanded="true"] .aps-burger__bar::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile: a real off-canvas panel. Absolute, not fixed - when the header
   carries a backdrop-filter it becomes the containing block for fixed
   children and the panel would collapse to a single row.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* [logo] [slogan] [switch] [burger] - logo start, burger end, as asked. */
  .aps-header__inner {
    grid-template-columns: auto 1fr auto auto;
    min-height: var(--header-h-mobile);
  }
  .aps-header__brand { grid-column: 1; }
  .aps-header__brand img { max-height: 50px; }   /* 42 -> 50, same ~19% */
  .aps-lang { grid-column: 3; justify-self: end; }
  .aps-burger { display: block; }

  .aps-header__nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: calc(100vh - var(--header-h-real, var(--header-h-mobile)));
    height: calc(100dvh - var(--header-h-real, var(--header-h-mobile)));
    z-index: var(--z-menu);
    display: block;
    padding: var(--space-5) var(--container-pad) var(--space-8);
    background: #fff;
    box-shadow: var(--shadow-header);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility var(--t-base) var(--ease);
  }
  .aps-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .aps-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .aps-nav__list li { border-bottom: 1px solid var(--color-border); }
  .aps-nav__list a {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--fs-base);
    letter-spacing: var(--ls-normal);
    text-transform: none;
  }
  .aps-nav__list a::after { display: none; }

  /* The panel is display:block, so the row-2 grid placement no longer applies -
     but justify-self does still apply to a block-level box in a block
     container, and `end` would shrink-wrap the pair against the panel edge.
     Reset it so the two pills share the full width instead. */
  .aps-header__nav .aps-staff {
    justify-self: stretch;
    margin-block-start: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .aps-staff__link {
    flex: 1 1 40%;
    justify-content: center;
    padding-block: var(--space-3);
    font-size: var(--fs-sm);
  }

  .aps-lang__item { padding: 4px var(--space-2); }
}

/* The breakpoint moved from 620px to 768px with the two-line version.
   "INNOVATION CREATIVITY" at 19px/0.16em measures ~285px, and the rest of the
   row (logo 108 + switch 76 + burger 44 + three gaps) takes ~276px. At 768px
   that leaves ~460px of middle - comfortable. At 620px it leaves ~310px, which
   fits only just and crowds the switch, so the slogan is dropped there rather
   than shrunk below the size that makes the orange line legible. */
@media (max-width: 768px) {
  .aps-slogan { display: none; }
}

@media (max-width: 420px) {
  .aps-header__brand img { max-height: 44px; }   /* 38 -> 44 */
  .aps-header__brand-text { display: none; }
}