/* Hand-written layer. Loaded last, after every generated stylesheet.
 *
 * HARD RULE: nothing in this file may reference a generated class
 * (.sXXXXXXX / .cXXXXXXX / .mXXXXXXX). Those names are content-addressed
 * SHA-1 of their declaration text (convert_handoff.py cls_for), so any rule
 * keyed on one stops matching the moment a designer nudges a pixel — silently,
 * with no build error. tools/preview.py asserts this file contains none.
 *
 * Durable selectors only:
 *   .d-sec-{hero,highlight,about,colleges,news,identity,contact}
 *   element semantics — a[href], button, input, .nav-toggle, #csForm
 *   .layout-wide / .layout-compact
 */

:root {
  /* From the design system, panel 06 (SUSS Design System.dc.html:296-302). */
  --ease:       cubic-bezier(.2, .75, .25, 1);
  --hover-dur:  .18s;
  --reveal-y:   1.625rem;   /* 26px at root 16 — see sussRise below */
  --reveal-dur: .6s;
}

@media (min-width: 1680px) {
  .layout-wide {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: clip;
  }
}

/* ── entrance keyframes ───────────────────────────────────────────────────
 * base.css ships this as translateY(26px). That literal survives because
 * px_to_rem only rewrites style *attributes*, and a @keyframes block arrives
 * through the helmet reset — so the one piece of motion in the design was also
 * the one piece that never scaled with the root font-size. Redeclaring the
 * animation here replaces the earlier one wholesale, which is cheaper and far
 * less risky than special-casing the generator.
 */
@keyframes sussRise {
  from { opacity: 0; transform: translateY(var(--reveal-y)); }
  to   { opacity: 1; transform: none; }
}

/* ── interaction feedback, compact layout ─────────────────────────────────
 * The tablet and mobile references carry zero style-hover attributes and zero
 * transition declarations, so — unlike desktop, where the hover rules existed
 * but were never attached to an element — there is nothing here to restore.
 * It has to be authored.
 *
 * Scoped with :where() so specificity stays at 0, letting every generated
 * class continue to win on any property it actually declares.
 */
.layout-compact :where(a[href], button, [role="button"], .nav-toggle) {
  transition: background-color var(--hover-dur) var(--ease),
              color            var(--hover-dur) var(--ease),
              border-color     var(--hover-dur) var(--ease),
              transform        .16s var(--ease),
              box-shadow       .2s  var(--ease);
  /* Tinted rather than removed: on Android the default highlight is the only
   * press feedback the page has, and suppressing it without replacing it
   * makes touch feel more dead, not less. */
  -webkit-tap-highlight-color: rgba(185, 167, 121, .25);
}

/* Press feedback. No :active rule exists anywhere in the generated CSS, at any
 * breakpoint, so a tap currently produces no response whatsoever. A 1px nudge
 * reads correctly on both a text link and a CTA without needing to know which
 * one it is — telling them apart needs the semantic hooks that arrive later.
 */
.layout-compact :where(a[href], button, [role="button"], .nav-toggle):active {
  transform: translateY(1px);
}

/* Hover, and only where a pointer can hover. Without the query, mobile Safari
 * latches :hover after a tap and the control keeps its hover state until
 * something else is tapped.
 *
 * Buttons are brightened rather than assigned a colour: their backgrounds are
 * set by generated classes this file must not name, and they differ per
 * control (dark green submit, gold CTA), so there is no single correct value
 * to write. brightness() is background-agnostic. Nav links get the design's
 * gold, which is the one hover colour the design system does specify.
 */
@media (hover: hover) and (pointer: fine) {
  .layout-compact :where(button, [role="button"]):hover { filter: brightness(1.08); }
  .layout-compact .d-nav-weight:hover { color: #b9a779; }
}

/* ── iOS zoom-on-focus ────────────────────────────────────────────────────
 * Mobile Safari zooms the viewport when a focused field's computed font-size
 * is below 16px. The compact form fields are 14px, so every tap into the
 * contact form yanks the page. A literal 16px rather than 1rem, because below
 * 768px the root is exactly 16px and `1rem` would sit right on the threshold;
 * max() keeps larger roots winning once the root becomes fluid.
 */
.layout-compact :where(input, textarea, select) {
  font-size: max(16px, 1rem);
}

/* ── hero sizing ──────────────────────────────────────────────────────────
 * The compact hero is pinned to 35rem (mobile) / 45rem (tablet) while its
 * content occupies a constant 28.4rem and 31.8rem respectively — measured, not
 * estimated, at 360/390/414/768/834/1024/1280/1440/1600. That left 105px of
 * empty tinted photo on a phone and 211-259px on everything larger: 19% and
 * 29% of the hero doing nothing.
 *
 * Both the content and the box are expressed in rem, so a rem min-height keeps
 * the same ~2rem of breathing room at every root rather than reintroducing the
 * gap as the root grows. Sized from the measurement plus a margin, not from
 * the viewport, because the hero is a banner rather than a splash screen —
 * pinning it to svh would push the sections below it off the fold on short
 * landscape viewports.
 */
.layout-compact .d-sec-hero { min-height: 30.5rem; }

/* Room under the fixed compact chrome (header used to sit in-flow). */
.layout-compact .d-sec-hero {
  padding-top: 5.25rem;
}

@media (min-width: 768px) {
  .layout-compact .d-sec-hero { min-height: 34rem; padding-top: 7rem; }
}

/* ── navigation at laptop widths ──────────────────────────────────────────
 * The compact DOM now serves up to 1679, which means a laptop would otherwise
 * get a five-item menu folded behind a burger — a control that exists because
 * a 390px phone has no room for a nav bar, not because the nav wants hiding.
 * Above 1024 there is room, so lay it out.
 *
 * The desktop DOM's horizontal nav cannot be borrowed: it lives inside a
 * canvas pinned to Figma coordinates. This restyles the compact drawer, whose
 * markup is already a list of links.
 *
 * nav.js needs no change — it decides whether the compact layout is on screen
 * by asking whether the toggle is visible, so hiding the toggle here also
 * makes it stand down, and a drawer left open while resizing past 1024 is
 * closed by its own resize handler.
 */
/* The ministry lockup (gold mark + wordmark). Visible at every compact width,
 * including phones — the labels scale down so they fit between crest and toggle.
 */
.compact-ministry-lockup {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  justify-content: flex-end;
  color: #fff;
}
.compact-ministry-mark {
  display: block !important;
  flex: 0 0 auto;
  width: 2.35rem;
  height: auto;
  max-height: 2rem;
  object-fit: contain;
  margin: 0 !important;
  opacity: 1;
  visibility: visible;
}
.compact-ministry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  text-align: end;
  min-width: 0;
  flex: 0 1 auto;
}
.compact-ministry > :first-child {
  font-weight: 700;
  font-size: clamp(0.62rem, 2.9vw, 0.88rem);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-ministry > :last-child {
  font-weight: 700;
  font-size: clamp(0.55rem, 2.5vw, 0.75rem);
  color: #b9a779;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 600px) {
  .compact-ministry-mark {
    width: 3rem;
    max-height: 2.4rem;
  }
  .compact-ministry > :first-child { font-size: clamp(0.75rem, 1.8vw, 1rem); }
  .compact-ministry > :last-child  { font-size: clamp(0.65rem, 1.5vw, 0.85rem); }
}

@media (min-width: 768px) {
  .compact-ministry > :first-child {
    font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  }
  .compact-ministry > :last-child {
    font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  }
  .compact-ministry-lockup { gap: 0.5rem; }
  .compact-ministry-mark {
    width: 3.75rem;
    max-height: 2.85rem;
  }
}

@media (min-width: 1024px) {
  .compact-ministry > :first-child { font-size: 1.125rem; }
  .compact-ministry > :last-child  { font-size: 1rem; }
  .compact-ministry-mark {
    width: 4.125rem;
    max-height: 3.125rem;
  }
  .compact-ministry-lockup { gap: 0.625rem; }

  .layout-compact .nav-toggle { display: none; }

  .layout-compact [data-nav-panel] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .75rem 3rem 0;
    padding: 0;
    background: none;
    border: 0;
    animation: none;
  }
}

/* Keep crest + toggle from collapsing on narrow phones. */
.layout-compact .adm-compact-chrome header > a,
.layout-compact .d-sec-hero header > a,
.layout-compact .nav-toggle {
  flex: 0 0 auto;
}

.layout-compact .adm-compact-chrome header,
.layout-compact .d-sec-hero header {
  direction: ltr;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 0.5rem;
}
.layout-compact .compact-ministry-lockup {
  margin-inline-start: auto;
  margin-inline-end: 0;
}
html[lang="ar"] .layout-compact .compact-ministry {
  direction: rtl;
  text-align: end;
}
html[lang="en"] .layout-compact .compact-ministry , html[lang="tr"] .layout-compact .compact-ministry {
  direction: ltr;
  text-align: end;
}

/* Menu toggle: transparent + gold rim (not a white filled chip). */
.layout-compact .nav-toggle {
  background: transparent !important;
  border: 1px solid rgba(185, 167, 121, 0.85) !important;
  border-radius: 0.5rem;
  box-shadow: none;
  color: #fff;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.layout-compact .nav-toggle .c961bfea {
  background: #b9a779;
  width: 1.05rem;
  height: 0.125rem;
  border-radius: 1px;
}
.layout-compact .nav-toggle[aria-expanded="true"] {
  border-color: #b9a779 !important;
  background: rgba(185, 167, 121, 0.12) !important;
}

/* ── compact section responsiveness ───────────────────────────────── */

/* Compact hero title must stay inside the viewport — never clip sideways. */
.layout-compact .ccc302d5,
.layout-compact .m2d55a7b {
  max-width: 100%;
  overflow: hidden;
  padding-inline: 0.25rem;
  box-sizing: border-box;
}
.layout-compact .cdd7261f,
.layout-compact .m94e394d {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* News CTA: sit at the inline-start (right in AR). */
.layout-compact .v2-news-cta-c {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.layout-compact .v2-hero-ctas-c {
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  z-index: 5;
}
.layout-compact .d-sec-highlight {
  position: relative;
  z-index: 4;
}
.layout-compact .v2-hero-ctas-c > a {
  width: auto;
  min-width: min(12.5rem, 100%);
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.layout-compact .v2-footer-c {
  background: #fff !important;
}
.layout-compact .v2-footer-c-texture {
  display: none !important;
}
.layout-compact .v2-footer-c-panel {
  position: relative;
  background: #fff;
  border: 0.2rem solid #b9a779;
  border-radius: 1.25rem;
  overflow: hidden;
}
.layout-compact .v2-footer-c-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/assets/v2/page-pattern.png);
  background-repeat: repeat;
  background-size: 22rem auto;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.layout-compact .v2-footer-c-panel > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .layout-compact .d-footer-groups {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem !important;
    text-align: center;
  }
  html[lang="ar"] .layout-compact .d-footer-groups > :nth-child(1) { order: 3; }
  html[lang="ar"] .layout-compact .d-footer-groups > :nth-child(2) { order: 2; }
  html[lang="ar"] .layout-compact .d-footer-groups > :nth-child(3) { order: 1; }
  html[lang="en"] .layout-compact .d-footer-groups,
  html[lang="tr"] .layout-compact .d-footer-groups {
    align-items: flex-start;
    text-align: start;
  }
  html[lang="en"] .layout-compact .d-footer-groups > :nth-child(1),
  html[lang="tr"] .layout-compact .d-footer-groups > :nth-child(1) { order: 3; }
  html[lang="en"] .layout-compact .d-footer-groups > :nth-child(2),
  html[lang="tr"] .layout-compact .d-footer-groups > :nth-child(2) { order: 2; }
  html[lang="en"] .layout-compact .d-footer-groups > :nth-child(3),
  html[lang="tr"] .layout-compact .d-footer-groups > :nth-child(3) { order: 1; }
  .layout-compact .d-footer-groups > div {
    width: 100%;
    max-width: 22rem;
    text-align: center;
  }
  html[lang="en"] .layout-compact .d-footer-groups > div,
  html[lang="tr"] .layout-compact .d-footer-groups > div {
    text-align: start;
    max-width: none;
  }
  .layout-compact .d-footer-groups a {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .layout-compact .d-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .layout-compact .d-colleges-grid,
  .layout-compact .d-news-grid {
    grid-template-columns: 1fr !important;
  }

  .layout-compact .v2-gallery-grid {
    grid-template-columns: 1fr;
  }

  .layout-compact .d-sec-contact input,
  .layout-compact .d-sec-contact textarea,
  .layout-compact .d-sec-contact button[type="submit"] {
    max-width: 100%;
  }

  .layout-compact .v2-hero-ctas-c > a {
    width: min(18rem, 100%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .layout-compact .v2-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .layout-compact .d-colleges-grid,
  .layout-compact .d-news-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* The hero search field was drawn to span an 834px tablet frame. The compact
 * canvas is released to fluid width, so on a laptop it stretches to ~1380px —
 * a search box wider than most of the content it searches. Cap it at roughly
 * the proportion it was drawn with. The wrapper is the visible white box; the
 * input inside it is transparent and flex:1, so the wrapper is what to size.
 */
@media (min-width: 768px) {
  .layout-compact .d-sec-hero :has(> input) {
    max-width: 44rem;
    margin-inline: auto;
  }
}

/* ── footer join ──────────────────────────────────────────────────────────
 * The desktop footer carries margin-top:6.25rem, straight from the Figma,
 * which lands as a band of page background between the contact section's photo
 * and the footer's patterned panel — 100px at 1920, 88px at 1680. It reads as
 * a gap rather than as breathing room because both neighbours are full-bleed
 * and the strip between them belongs to neither.
 *
 * The compact footer already sits flush at every width; this brings the wide
 * one into line. Targeted through the element rather than its generated class,
 * which is a content hash and would move.
 */
.layout-wide footer { margin-top: 0; }

/* ── Turnstile ────────────────────────────────────────────────────────────
 * Cloudflare renders the widget as a fixed 300px iframe, but its container is
 * sized in rem and shrinks with the root — 302px at 1920 (2px of slack) and
 * 227px at 1440 under the old zoom, so the human-check box spilled out of the
 * form card at essentially every desktop width. Moving the breakpoint removes
 * the cause; this makes the failure impossible to reintroduce.
 */
.cs-turnstile { min-width: 300px; }

/* The widget's container is a fixed 302x76 box, drawn for the tick-box
 * placeholder it originally held. With 14px of padding either side that leaves
 * 272px of content width for a 300px iframe, so the widget has never fitted —
 * not at 1440 (container 227px under the old zoom) and not at 1920 either.
 * Let the box size to its contents and wrap instead of pinning it to a
 * placeholder's dimensions.
 *
 * :has() rather than a generated hook: the container is the parent of an
 * element the generator already creates, and the regex that creates it does
 * not reach the parent. Where :has() is unsupported the rule simply does not
 * apply and the box behaves exactly as it does today — no worse. */
:has(> .cs-turnstile) {
  /* fit-content, not auto: the box is a block-level flex container, so `auto`
   * makes it span the whole form column — a 1220px field wrapped around a
   * 300px widget. It now hugs the widget, with max-width keeping it inside the
   * card on narrow screens. */
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
  flex-wrap: wrap;
  row-gap: .5rem;

  /* The design gave this box a border, a background and a radius because it
   * was drawing a form field around a tick-box. Turnstile renders its own
   * bordered, filled panel, so keeping ours produced two nested boxes with two
   * radii. Cloudflare's cannot be removed — it is inside the iframe — so ours
   * goes and the widget becomes the field.
   *
   * Dropping the padding also removes the reason the widget used to be short
   * of room on narrow phones: 14px either side was exactly what pushed a 300px
   * widget past a ~310px container. */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Below ~380px the card is narrower than the widget however the padding is
 * spent, so scale it instead of letting it spill. Origin follows the RTL
 * reading direction so it shrinks toward the side the form is anchored to. */
@media (max-width: 380px) {
  .cs-turnstile { transform: scale(.9); transform-origin: right center; }
}
@media (max-width: 340px) {
  /* 320px viewport leaves ~230px of content width; 300 x .75 = 225. */
  .cs-turnstile { transform: scale(.75); }
}

/* ── scroll reveal ────────────────────────────────────────────────────────
 * Values from the design system (SUSS Design System.dc.html:296-302), which
 * specified a reveal that was never implemented. README §8 says .8s; the
 * design system file is the authority and says .6s.
 *
 * These selectors match ONLY `[data-reveal]`, and only assets/reveal.js ever
 * writes that attribute. Nothing is hidden until a script has run and decided
 * to hide it, so a missing or blocked reveal.js leaves the page fully visible.
 * Do not invert this into `.no-js`-style hiding.
 */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity   var(--reveal-dur) var(--ease),
              transform var(--reveal-dur) var(--ease);
}
[data-reveal="in"] { opacity: 1; transform: none; }

/* Stagger as classes rather than per-element inline styles: `style-src 'self'`
 * makes any inline style attribute a CSP question, and this way the delays are
 * legible in devtools. */
[data-reveal-i="1"] { transition-delay: .06s; }
[data-reveal-i="2"] { transition-delay: .12s; }
[data-reveal-i="3"] { transition-delay: .18s; }

/* ── reduced motion ───────────────────────────────────────────────────────
 * base.css already resets animation and transition on *, but scroll-behavior
 * is a property on the root element rather than an animation, so it survived
 * that reset — a reduced-motion visitor still got smooth-scrolled by every
 * in-page nav anchor.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* reveal.js bails before marking anything, so this should never have work to
   * do. It is here for the case where the preference is turned on after the
   * page has loaded and elements are already marked — a third guard, because a
   * vestibular-disorder accommodation that only mostly works is not one. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── bidi ─────────────────────────────────────────────────────────────────
   dir="auto" resolves an element's direction from its own text, which is what
   makes a bilingual page with partial translation readable: an untranslated
   Arabic paragraph keeps its punctuation at the correct end inside an English
   page, and vice versa.

   It loses, though, to a `direction` declaration on the same element — and the
   handoff puts one on fifteen containers. The result was an Arabic copyright
   line rendering left-to-right on /en/, with its symbols at the wrong end.

   `unicode-bidi: plaintext` is the fix rather than more specific `direction`
   rules: it takes each paragraph's direction from its content and explicitly
   IGNORES the direction property, so it cannot be out-specified by a generated
   class whose name changes every time the designer nudges a value. */
[dir="auto"] { unicode-bidi: plaintext; }

/* ── news cards ───────────────────────────────────────────────────────────
 * Long Turkish/English titles used to flex-shrink and paint over the excerpt.
 * Keep the designed type size; clamp the title (and excerpt) with an ellipsis
 * so the card layout stays stable without shrinking the font.
 */
.layout-wide .v2-news-title {
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-wide .v2-news-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-height: 0;
}
/* Designed excerpt line-height is ~2× the font, so the clamp ellipsis often
 * lands alone on a third line as spaced dots. For LTR trees, tighten type a
 * little and use a normal line-height so "…" sits on the last text line. */
html[lang="en"] .layout-wide .v2-news-excerpt,
html[lang="tr"] .layout-wide .v2-news-excerpt {
  font-size: 1.25rem;
  line-height: 1.55;
  -webkit-line-clamp: 3;
}
.layout-compact .v2-news-title-c {
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-compact .v2-news-excerpt-c {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[lang="en"] .layout-compact .v2-news-excerpt-c,
html[lang="tr"] .layout-compact .v2-news-excerpt-c {
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* ── language switcher ────────────────────────────────────────────────────
 * Self-names are the visible label (WCAG 2.5.3).
 *
 * Placement follows the compact chrome's own breakpoint (1024):
 *   • desktop (layout-wide) + tablet (≥1024 compact) → header dropdown
 *   • phone (<1024 compact) → flat options inside the hamburger drawer
 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  color: #fff;
  position: relative;
}
.layout-wide .lang-switch { margin-top: 3rem; }
.layout-compact .adm-compact-chrome header .lang-switch--header,
.layout-compact .d-sec-hero header .lang-switch--header {
  margin-top: 0;
  flex: 0 0 auto;
}
.lang-switch-globe {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  opacity: 0.9;
}
.lang-switch-caret {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: transform .18s ease;
}
.lang-switch-dd[open] .lang-switch-caret { transform: rotate(180deg); }

.lang-switch-dd { position: relative; }
.lang-switch-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.375rem;
  padding: 0 0.75rem 0 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0.625rem;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.lang-switch-summary::-webkit-details-marker { display: none; }
.lang-switch-summary::marker { content: ""; }
.lang-switch-current { white-space: nowrap; }

/* Dropdown panel (desktop / tablet / article bars). */
.lang-switch--dropdown .lang-switch-list {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0.625rem;
  background: rgba(12, 28, 24, 0.96);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}
.lang-switch--dropdown .lang-switch-dd:not([open]) .lang-switch-list {
  display: none;
}
.lang-switch--dropdown .lang-switch-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: 0.4rem;
  transition: color .18s ease, background-color .18s ease;
}
.lang-switch--dropdown .lang-switch-item:hover {
  color: var(--v2-gold, #b9a779);
  background: rgba(185, 167, 121, 0.12);
}
.lang-switch--dropdown .lang-switch-item.is-current,
.lang-switch--dropdown .lang-switch-item[aria-current="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.lang-switch-code { display: none; }
.lang-switch-name { display: inline; }

/* Drawer: segmented pill options (phones only). */
.lang-switch--drawer .lang-switch-list {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 0.625rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.lang-switch--drawer .lang-switch-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  padding: 0 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.35);
  transition: color .18s ease, background-color .18s ease;
}
.lang-switch--drawer .lang-switch-item:last-child { border-inline-end: 0; }
.lang-switch--drawer .lang-switch-item:hover {
  color: var(--v2-gold, #b9a779);
  background: rgba(185, 167, 121, 0.1);
}
.lang-switch--drawer .lang-switch-item.is-current,
.lang-switch--drawer .lang-switch-item[aria-current="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Drawer copy is inert above the hamburger breakpoint. */
.layout-compact .lang-switch--drawer { display: none; }

@media (max-width: 1023px) {
  /* Phone: options live in the menu, not the crowded header. */
  .layout-compact .lang-switch--header { display: none !important; }
  .layout-compact .lang-switch--drawer {
    display: flex;
    width: 100%;
    margin: 0.625rem 0 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-sizing: border-box;
  }
  .layout-compact .lang-switch--drawer .lang-switch-list {
    flex: 1 1 auto;
    width: 100%;
  }
  .layout-compact .lang-switch--drawer .lang-switch-item {
    flex: 1 1 0;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch-item:hover { filter: none; }
}