/* ==========================================================================
   Layout — header, navigation, side rail, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

.site-header.is-stuck {
  border-block-end-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  /*
   * Flex items shrink; gaps do not. At 320px the brand (147px), language
   * switcher (133px) and menu button (16px) leave 24px for three gaps, so a
   * fixed 40px gap forced the document to 397px and the whole page scrolled
   * sideways. Scaling the gap with the viewport keeps it generous on desktop
   * and out of the way on a phone.
   */
  gap: clamp(0.5rem, 3vw, var(--space-xl));
  block-size: var(--header-h);
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}

/*
 * Beat base.css `img[width][height] { block-size: auto }` (0,2,1) and the
 * max-inline-size:100% shrink-to-fit trap that collapsed the SVG to 0×0
 * inside the header flex row.
 */
img.brand__logo[width][height] {
  display: block;
  block-size: 40px;
  inline-size: auto;
  max-inline-size: min(168px, 42vw);
  aspect-ratio: 704 / 205;
  flex-shrink: 0;
  object-fit: contain;
}

img.brand__logo--footer[width][height] {
  block-size: 48px;
  max-inline-size: min(200px, 70vw);
}

img.brand__logo.hero__logo[width][height] {
  block-size: clamp(2.6rem, 5vw, 3.25rem);
  max-inline-size: min(240px, 72vw);
}

.brand__icon,
.brand__mark {
  display: block;
  block-size: auto;
  inline-size: auto;
  flex-shrink: 0;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  color: var(--tr-teal-700);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
}
.brand__sub {
  font-size: var(--fs-micro);
  color: var(--tr-gray);
}

/* --- Primary navigation --------------------------------------------------- */

.nav-primary {
  margin-inline-start: auto;
}

.nav-primary ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-primary a {
  display: block;
  padding-block: 0.4rem;
  color: var(--tr-charcoal);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a {
  border-block-end-color: var(--tr-teal);
  color: var(--tr-charcoal);
}

/*
 * The parent-item chevron. tr_nav_chevron() injects it via tr_icon(), which
 * emits an <svg> — and base.css sets `svg { display:block }`, so without this
 * the chevron dropped onto its own line under every parent label and the whole
 * bar rendered as a jagged double row. Keep it inline, small and muted; it
 * points down at rest and flips up when the submenu is open.
 */
.nav-primary .nav-chevron {
  display: inline-block;
  vertical-align: middle;
  inline-size: 0.85em;
  block-size: 0.85em;
  margin-inline-start: 0.3rem;
  color: var(--tr-gray);
  transition:
    transform var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.nav-primary li:hover > a .nav-chevron,
.nav-primary li:focus-within > a .nav-chevron {
  transform: rotate(180deg);
  color: var(--tr-teal-700);
}

/* Submenus */
.nav-primary .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-start: 0;
  min-inline-size: 15rem;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  /* An energized rail across the top ties the panel to the brand signal. */
  border-block-start: 2px solid var(--tr-teal);
  padding: 0.5rem 0;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
}

.nav-primary li {
  position: relative;
}

.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-primary .sub-menu a {
  padding: 0.5rem 1rem;
  border-block-end: 0;
  font-size: 0.875rem;
}

.nav-primary .sub-menu a:hover {
  background: var(--color-bg-alt);
  color: var(--tr-teal-700);
}

/* --- Language switcher ---------------------------------------------------- */

/*
 * A segmented readout of the four languages — one control, not four loose
 * chips. The hairline frame and internal dividers make it read as a switch.
 */
.lang-switch {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lang-switch li + li {
  border-inline-start: 1px solid var(--color-border);
}

.lang-switch a {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--readout-size);
  letter-spacing: 0.08em;
  color: var(--tr-gray);
  text-decoration: none;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.lang-switch a:hover {
  background: var(--color-bg-alt);
  color: var(--tr-charcoal);
}

.lang-switch [aria-current="true"] {
  background: var(--tr-charcoal);
  color: #fff;
}

/*
 * The <abbr> around each code carries the language's native name as a tooltip,
 * but browsers give it a dotted underline by default — which read as broken
 * text sitting under TR / AR / EN. It is purely a title host here.
 */
.lang-switch abbr {
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

/* --- Mobile drawer -------------------------------------------------------- */

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  padding: 0.5rem;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: #fff;
  padding: var(--space-xl) var(--gutter);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base);
  overflow-y: auto;
}

[dir="rtl"] .drawer {
  transform: translateX(-100%);
}

.drawer.is-open {
  transform: none;
  visibility: visible;
}

.drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer a {
  display: block;
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--bp-line);
  color: var(--tr-charcoal);
  text-decoration: none;
  font-size: 1.0625rem;
}

@media (max-width: 900px) {
  .nav-primary {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

/*
 * Below 560px the four language chips (133px) plus the wordmark no longer fit
 * beside the menu button, and the header pushed the document wider than the
 * viewport. The drawer already contains the same switcher, so hiding this one
 * loses nothing — it is the same control, one tap away.
 */
@media (max-width: 560px) {
  .site-header .lang-switch {
    display: none;
  }
  .brand__sub {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Side rail — section progress
   Real anchors in a labelled nav, not decoration. Hidden on narrow screens
   where there is no room, but never aria-hidden.
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  inset-inline-end: var(--space-lg);
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rail a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  justify-content: flex-end;
}

.rail__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  border: 1px solid var(--tr-light-gray);
  background: transparent;
  transition:
    background var(--dur-base),
    border-color var(--dur-base);
}

.rail__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--tr-gray);
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity var(--dur-base),
    transform var(--dur-base);
  white-space: nowrap;
}

[dir="rtl"] .rail__label {
  transform: translateX(-6px);
}

.rail a:hover .rail__label,
.rail a[aria-current="true"] .rail__label {
  opacity: 1;
  transform: none;
}

.rail a[aria-current="true"] .rail__dot {
  background: var(--tr-teal);
  border-color: var(--tr-teal);
}

@media (max-width: 1200px) {
  .rail {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--tr-charcoal);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer h3 {
  color: #fff;
  font-size: var(--fs-small);
  margin-block-end: var(--space-md);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: var(--fs-small);
}
.site-footer a:hover {
  color: var(--tr-teal);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-xl);
  padding-block-end: var(--space-2xl);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-micro);
  /*
   * 0.45 alpha measured 4.18:1 on charcoal and failed AA. Legal text is small
   * and low-priority, which is exactly why it must not also be hard to read.
   * 0.55 gives 5.4:1 and still recedes.
   */
  color: rgba(255, 255, 255, 0.55);
}

/* Phone numbers stay LTR even inside RTL copy. */
.tel {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}