/* ============================================================================
 * SERVARI · servari-lang.css — 4-language switcher + visibility overlay
 * Pairs with servari-lang.js. Mobile-first, a11y, DOM-safe.
 *
 * Adds to (does not replace) the existing bilingual hooks in redesign.css.
 * The engine sets html[data-css-lang="mk|en"] (sq/tr ride the "mk" slot, then
 * JS overwrites the MK spans with sq/tr text or swaps in the EN sibling). This
 * overlay makes the legacy Mechanism A + B spans honour data-css-lang so the
 * real html[lang] can stay the true BCP-47 code (mk/sq/tr/en) for a11y + SEO.
 * ========================================================================== */

/* --- Mechanism A overlay: drive [data-lang-*] off data-css-lang ----------- */
html[data-css-lang="mk"] [data-lang-mk] {
  display: inline;
}
html[data-css-lang="mk"] [data-lang-mk].block {
  display: block;
}
html[data-css-lang="mk"] [data-lang-en] {
  display: none;
}
html[data-css-lang="en"] [data-lang-en] {
  display: inline;
}
html[data-css-lang="en"] [data-lang-en].block {
  display: block;
}
html[data-css-lang="en"] [data-lang-mk] {
  display: none;
}

/* --- Mechanism B overlay: drive .lang-*-only off data-css-lang ------------ */
html[data-css-lang="mk"] .lang-en-only {
  display: none;
}
html[data-css-lang="en"] .lang-mk-only {
  display: none;
}
/* JS may set inline display on a per-element basis (source-text fallback);
   inline styles win over these rules, which is intended. */

/* ---------------------------------------------------------------------------
 * THE 4-LANGUAGE HEADER SWITCHER
 * Works on dark headers (white text) by default. Compact, touch-friendly.
 * ------------------------------------------------------------------------- */
.srv-lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.srv-lang button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
  min-width: 38px; /* >= comfortable tap target width */
  min-height: 36px;
  transition: background 0.15s ease, color 0.15s ease;
}
.srv-lang button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.srv-lang button:hover {
  color: #fff;
}
.srv-lang button.is-active,
.srv-lang button.on {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.srv-lang button:focus-visible {
  outline: 3px solid var(--smash-gold-bright, #f0c64b);
  outline-offset: -3px;
}

/* Light-header variant (use class .srv-lang--light on a light surface) */
.srv-lang--light {
  border-color: rgba(26, 20, 17, 0.18);
  background: rgba(26, 20, 17, 0.04);
}
.srv-lang--light button {
  color: rgba(26, 20, 17, 0.6);
}
.srv-lang--light button + button {
  border-left-color: rgba(26, 20, 17, 0.12);
}
.srv-lang--light button:hover {
  color: var(--smash-ink, #1a1411);
}
.srv-lang--light button.is-active,
.srv-lang--light button.on {
  background: var(--smash-orange, #d9480f);
  color: #fff;
}

/* Tighten on very small screens so 4 buttons never overflow the header */
@media (max-width: 380px) {
  .srv-lang button {
    padding: 8px 7px;
    min-width: 32px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* ---------------------------------------------------------------------------
 * CYRILLIC-CAPABLE DISPLAY TYPE  (fixes MK headings rendering as tofu)
 * Anton has NO Cyrillic glyphs, so Macedonian display headings fell back to
 * Impact / box-glyphs. When Cyrillic is shown we route display type through
 * Oswald (full Cyrillic, condensed bold — the closest match to Anton's mood).
 * Latin pages keep Anton. Toggled by data-css-lang via the var override.
 * ------------------------------------------------------------------------- */
:root {
  --smash-font-display-cyr: "Oswald", "Anton", Impact, "Haettenschweiler",
    "Arial Narrow Bold", sans-serif;
}
/* When the visible slot is MK (mk/sq still show Cyrillic where untranslated,
   and MK proper nouns stay Cyrillic), prefer the Cyrillic-capable stack for
   the display family so no glyph ever boxes out. */
html[data-css-lang="mk"] {
  --smash-font-display: var(--smash-font-display-cyr);
}

/* Oswald weight hierarchy for Cyrillic display headings (site-wide; both home +
 * menu load this file). Anton renders heavy at 400 so Latin pages carry the
 * hierarchy by SIZE; Oswald at 400 reads thin, so for MK we set an intentional,
 * premium two-step:
 *   TIER 1 (700) — page H1/H2 + the order-band shout: the loud marks.
 *   TIER 2 (600) — H3/H4: clean section heads, present but not shouting.
 * Page-local rules (e.g. redesign-home.css) may go heavier still on the hero
 * wordmark; this is the shared floor so no MK heading ever renders thin. */
html[data-css-lang="mk"] .rd-h1,
html[data-css-lang="mk"] .rd-h2,
html[data-css-lang="mk"] .rd-band h2 {
  font-weight: 700;
}
html[data-css-lang="mk"] .rd-h3,
html[data-css-lang="mk"] .rd-h4 {
  font-weight: 600;
}