/* Shared base styles, linked from every page before the page's own <style>.
   Page-specific styles still live inside each page. */

/* Yellow box on a word inside a heading (.hl, em): an inline box paints its background over the
   font's full height, which for tall fonts (Oswald, Inter) reaches into the line above and covers it.
   inline-block makes the line grow around the box instead, so the box can never cover other text,
   in any language or font. max-width: a long highlight ("llave en mano") wraps inside its own box. */
/* margin-block: a small gap above and below, because letters of the neighbouring lines can reach
   slightly outside their own line. !important: some pages set "display: inline" on their own
   highlight (e.g. .hero-title .hl). */
:is(h1, h2, h3):not(.hero-title) :is(.hl, em) { display: inline-block !important; max-width: 100%; margin-block: .1em; }
/* The home hero's highlight is often two words that wrap on phones ("llave en mano"): there it stays
   inline with one box per line (clone), and the heading gets enough line height that the boxes stay
   clear of the line above (checked for all four languages, phone to desktop). */
.hero-title .hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
h1.hero-title { line-height: 1.14; }

/* Big headings: Bebas Neue has no Cyrillic letters, so on Russian pages they fell back to a plain
   system font (and "BMW ДЛЯ КЛИЕНТА" mixed two fonts). Russian pages use Oswald, a similar narrow
   font with Cyrillic, loaded by each page's Google Fonts link (weight 600 only). */
:root:lang(ru) { --ff: 'Oswald', 'Bebas Neue', sans-serif; --font-display: 'Oswald', 'Bebas Neue', sans-serif; }
/* Oswald letters are taller than Bebas: headings set with line-height ≤ 1 (and a yellow highlight
   on one line) would touch the line above, so Russian headings get a little more room. */
:root:lang(ru) .page-title, :root:lang(ru) .about-hero-title, :root:lang(ru) .details-title,
:root:lang(ru) .cta-band-title, :root:lang(ru) .del-hero-title, :root:lang(ru) .featured-title,
:root:lang(ru) .test-title, :root:lang(ru) .story-title, :root:lang(ru) .contact-title,
:root:lang(ru) .values-title, :root:lang(ru) .trust-title, :root:lang(ru) .clients-title { line-height: 1.12; }
/* Headings with a yellow box on a word (.hl): Oswald's box is taller, so these need more room */
:root:lang(ru) .about-hero-title { line-height: 1.28; }
:root:lang(ru) .story-title, :root:lang(ru) .values-title,
:root:lang(ru) .clients-title, :root:lang(ru) .page-title { line-height: 1.25; }
/* "К ЭКСПОРТУ" in Oswald is wider than the 220px side column at 44px */
:root:lang(ru) .featured-title { font-size: clamp(28px, 2.5vw, 38px); }

/* Links to a section (#process, #values…) stop below the fixed top menu, not under it. */
[id] { scroll-margin-top: 80px; }

/* Top menu: solid white (it was 85% see-through and looked grey over dark sections). */
nav#mainNav { background: #fff; }

/* Footer on phones: two short columns instead of one long list, and the social links only once. */
@media (max-width: 600px) {
  body footer .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  body footer .footer-top > div:first-child { grid-column: 1 / -1; }
  body footer .footer-socials { display: none; }
}

/* "Skip to content" link: off-screen until a keyboard user tabs to it. */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 10000;
  background: #0A0A0F; color: #fff; padding: 10px 16px; border-radius: 8px;
  font: 600 14px/1.2 'Inter', sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Top menu: the page links (Главная · Каталог · Контакты) sit in the exact centre
   of the screen from 1024px up. Below 1024px there isn't room next to the right-hand buttons,
   so the normal flow is kept; on phones the links are in the burger menu. */
@media (min-width: 1024px) {
  nav .nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
}
/* 1024–1279px: a little tighter on the right (padding, buttons), so the centred links and the
   language menu never touch. #mainNav beats each page's own nav rules. */
@media (min-width: 1024px) and (max-width: 1279px) {
  nav#mainNav { padding-left: 24px; padding-right: 24px; }
  #mainNav .nav-links { gap: 24px; }
  #mainNav .nav-cta { padding-left: 13px; padding-right: 13px; }
  #mainNav .nav-actions { gap: 6px; }
  #mainNav .lang-menu { margin-right: 0; }
}
/* Tablets (until the burger takes over): less side padding and tighter links, so the logo,
   the links, the language menu and the buttons don't touch. #mainNav beats each page's own nav rules. */
@media (min-width: 769px) and (max-width: 1000px) {
  nav#mainNav { padding-left: 24px; padding-right: 24px; }
  #mainNav .nav-links { gap: 20px; }
}

/* Language menu (built by build/lib.mjs from {{langSwitch}}): a "RU ▾" button next to the
   menu buttons; the list opens on hover, on keyboard focus, or on tap (.open, set by nav.js).
   inline-block: some pages lay out .nav-actions as plain inline content, not flex. */
.lang-menu { position: relative; display: inline-block; vertical-align: middle; margin-right: 4px; font: 600 12px/1 'Inter', sans-serif; }
.lang-menu-current { display: inline-flex; align-items: center; gap: 5px; padding: 9px 8px; border: 0; border-radius: 6px; background: none; color: #0A0A0F; font: inherit; letter-spacing: .03em; cursor: pointer; }
.lang-menu-current:hover, .lang-menu.open .lang-menu-current { background: rgba(0,0,0,.05); }
.lang-menu-list {
  position: absolute; top: 100%; right: 0; z-index: 1002; min-width: 120px; padding: 4px;
  display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.lang-menu:hover .lang-menu-list, .lang-menu:focus-within .lang-menu-list, .lang-menu.open .lang-menu-list { opacity: 1; pointer-events: auto; transform: none; }
.lang-menu.shut .lang-menu-list { opacity: 0; pointer-events: none; }
.lang-menu-list a { padding: 9px 12px; border-radius: 6px; color: #374151; text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.lang-menu-list a:hover { background: rgba(0,0,0,.05); color: #0A0A0F; }
.lang-menu-list a.active { color: #0A0A0F; font-weight: 700; }

/* Phone menu (burger): a calm list, like a settings screen — normal-size text, one row per page
   with an arrow, the two contact buttons side by side, the languages as one segmented switch.
   #mobileMenu beats each page's own (old, 48px) menu rules. Colours come from --mm-* so a dark
   page (delivered) only redefines the tokens. */
#mobileMenu {
  --mm-fg: #0A0A0F; --mm-muted: #6B7280; --mm-line: rgba(0,0,0,.08); --mm-chip: #F3F4F6; --mm-chip-on: #0A0A0F; --mm-chip-on-fg: #fff;
  padding: 80px 20px 28px; overflow-y: auto;
}
#mobileMenu .mobile-nav-links { margin: 0; padding: 0; }
#mobileMenu .mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 4px; border-bottom: 1px solid var(--mm-line);
  font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--mm-fg); text-decoration: none;
}
#mobileMenu .mobile-nav-link::after {
  content: ''; flex-shrink: 0; width: 7px; height: 7px; margin-right: 4px;
  border-top: 1.6px solid var(--mm-muted); border-right: 1.6px solid var(--mm-muted); transform: rotate(45deg);
}
#mobileMenu .mobile-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 20px; }
#mobileMenu .mobile-cta { display: flex; align-items: center; justify-content: center; padding: 13px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; }
#mobileMenu .mobile-menu-label { margin: 28px 0 8px; font: 600 12px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-muted); }
#mobileMenu .lang-switch-mobile {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 4px;
  background: var(--mm-chip); border-radius: 10px; font: 600 14px/1 'Inter', sans-serif;
}
#mobileMenu .lang-switch-mobile a { padding: 11px 0; border: 0; border-radius: 7px; text-align: center; color: var(--mm-muted); text-decoration: none; letter-spacing: .03em; }
#mobileMenu .lang-switch-mobile a.active { background: var(--mm-chip-on); color: var(--mm-chip-on-fg); }

/* Respect the system "reduce motion" setting: no smooth scrolling, no animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}