/* Language switcher (i18n.js) and layout guards for longer Uzbek / Russian copy.
   Loaded after polish.css. Without JavaScript the switcher stays hidden and the page is English. */

/* A stored non-English choice hides the page until i18n.js has swapped the text.
   If the script never runs, the animation below shows the page anyway after a moment. */
html.i18n-pending body { visibility: hidden; animation: i18n-failsafe 0s linear 1.2s forwards; }
@keyframes i18n-failsafe { to { visibility: visible; } }

/* ---------- Switcher: a small segmented control at the right edge of the header ---------- */
.lang-switch {
  display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid rgba(23, 52, 58, .2); border-radius: 100px;
  background: rgba(255, 254, 250, .65);
}
.lang-switch[hidden] { display: none; }
.lang-switch button {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; cursor: pointer;
  min-width: 36px; height: 30px; padding: 0 9px; border-radius: 100px;
  background: transparent; color: var(--ink);
  font: 700 .72rem/1 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; letter-spacing: .06em;
  transition: background-color .3s var(--p-spring, ease), color .3s var(--p-spring, ease), transform .3s var(--p-spring, ease);
}
.lang-switch { position: relative; z-index: 70; }
.lang-switch button:hover { background: rgba(23, 52, 58, .08); }
.lang-switch button:active { transform: scale(.94); transition-duration: .12s; }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--white); cursor: default; }
.lang-switch button:focus-visible { outline: 3px solid #a97728; outline-offset: 2px; }

/* Tablet and small desktop: the menu button takes over, so pin the switcher beside it on the right. */
@media (max-width: 1200px) {
  .lang-switch { margin-left: auto; }
  .mobile-nav { margin-left: 0; }
  .mobile-nav > nav { z-index: 3; }
}

/* Phones: logo on the left, social icons beside it, and a right-hand column with
   the menu button above the language switcher. The header keeps its height. */
@media (max-width: 540px) {
  .header-inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand social menu" "brand social lang";
    column-gap: 14px; row-gap: 8px; align-content: center;
  }
  .brand { grid-area: brand; }
  .social-icons { grid-area: social; justify-self: start; }
  .mobile-nav { grid-area: menu; justify-self: end; }
  .lang-switch { grid-area: lang; justify-self: end; margin: 0; }
  .mobile-nav summary { padding: 8px 14px; }
  .lang-switch button { min-width: 38px; height: 32px; padding: 0 8px; }
}

/* ---------- Longer translated copy ---------- */
/* Long Russian / Uzbek words may break rather than push a heading past the viewport. */
html:not([lang="en"]) :is(h1, h2, h3, .main-nav a, .footer-grid a) { overflow-wrap: break-word; }
/* Desktop nav label widths live in the header section at the end of this file. */

/* Russian has a long unbreakable hero word at the narrowest supported width. */
html[lang="ru"] .xseed-hero h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
html[lang="ru"] .xseed-hero-grid,
html[lang="ru"] .hero-grid { min-width: 0; }

/* Keep Cyrillic headings optically consistent instead of mixing Latin and system glyphs. */
html[lang="ru"] body,
html[lang="ru"] h1,
html[lang="ru"] h2,
html[lang="ru"] h3,
html[lang="ru"] p,
html[lang="ru"] a,
html[lang="ru"] button,
html[lang="ru"] input,
html[lang="ru"] textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ru"] h1,
html[lang="ru"] h2 { letter-spacing: -.035em; }

@media (prefers-reduced-motion: reduce) {
  .lang-switch button { transition: background-color .15s ease, color .15s ease !important; }
  .lang-switch button:active { transform: none; }
}
@media print { .lang-switch { display: none !important; } }

/* ---------- Header navigation in every language ----------
   Desktop labels stay on one line. Only where Russian runs out of room (1201-1319px) do its two
   two-word labels break, each onto two tight lines so the chevron and underline hug the words.
   The Curriculum dropdown sizes to its one link and hangs directly under its trigger. */
@media (min-width: 1201px) {
  .main-nav { gap: clamp(14px, 1.25vw, 20px); }
  .main-nav > a, .main-nav .nav-group > a { white-space: nowrap; max-width: none; line-height: 1.3; }
  .main-nav .nav-group > a::before { right: 2px; } /* rotated chevron stays inside the link box */
  .main-nav .nav-group > a::after { right: 14px; }
}
@media (min-width: 1201px) and (max-width: 1319px) {
  html[lang="ru"] .main-nav :is(.nav-group > a, a[href="programs.html"]) {
    white-space: normal; width: min-content; text-align: center;
  }
}

.main-nav .nav-sub {
  top: calc(100% + 2px); min-width: 0; width: max-content; max-width: min(340px, calc(100vw - 48px));
  padding: 6px; border-radius: 14px;
  background: rgba(251, 248, 241, .98); border: 1px solid rgba(23, 52, 58, .09);
  box-shadow: 0 1px 2px rgba(23, 52, 58, .06), 0 12px 32px rgba(23, 52, 58, .12);
}
/* Invisible bridge so the pointer can travel from the trigger into the panel. */
.main-nav .nav-sub::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
html .main-nav .nav-sub a {
  display: block; max-width: none; white-space: nowrap; text-align: left; line-height: 1.3;
  padding: 9px 12px; border-radius: 9px; transition: background-color .2s ease;
}
.main-nav .nav-sub a::after { display: none; }
.main-nav .nav-sub a:hover { background: rgba(23, 52, 58, .06); }
.main-nav .nav-sub a[aria-current] { color: #427875; background: rgba(66, 120, 117, .1); }
.main-nav .nav-sub a:focus-visible { outline: 2px solid #a97728; outline-offset: -2px; }

/* Menu button widths: the panel hangs under the whole header, right-aligned to the content edge,
   so it never lands on the language switcher, and it uses the dropdown's surface. */
@media (max-width: 1200px) {
  .header-inner { position: relative; }
  .mobile-nav { position: static; }
  .mobile-nav > nav {
    top: calc(100% + 8px); right: 0; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 14px; border: 1px solid rgba(23, 52, 58, .09);
    box-shadow: 0 1px 2px rgba(23, 52, 58, .06), 0 12px 32px rgba(23, 52, 58, .12);
  }
  .mobile-nav > nav a:last-child { border-bottom: 0; }
}

/* Phones: logo left; menu button on top right; social icons and the language switcher share
   the second row. The logo gives up width first so nothing leaves the screen at 320px. */
@media (max-width: 540px) {
  .header-inner {
    grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto auto;
    grid-template-areas: "brand . menu menu" "brand . social lang";
    column-gap: 10px;
  }
  .brand { width: auto; }
  .social-icons { justify-self: end; }
  .social-icons img { max-width: none; } /* icons keep their size; the logo is the part that shrinks */
}
@media (max-width: 380px) {
  .header-inner { column-gap: 8px; }
  .social-icons { gap: 8px; }
  .lang-switch button { min-width: 32px; height: 30px; padding: 0 6px; }
}