/* Header, mobile menu, footer, sticky call. Buttons keep their own look from buttons.css. */
.wordmark {
  font: 700 1.25rem/1 var(--font-head); letter-spacing: .01em; color: #fff; text-decoration: none; padding-block: 12px;
  outline: none; transition: color .25s, text-shadow .25s, translate .25s;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark-mark { display: block; flex: none; width: 27px; height: 26px; }
/* focus: lift + soft cyan light under the text, never a ring (Global Constraints) */
.wordmark:focus-visible { color: var(--cyan-bright); text-shadow: 0 4px 14px rgba(0, 224, 255, .5); translate: 0 -1px; }

/* ---------- skip link: hidden until a keyboard user reaches it; then a solid neumorphic chip, lifted, cyan text, no ring ---------- */
.skip-link {
  position: fixed; top: 12px; left: max(12px, env(safe-area-inset-left)); z-index: 200;
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 20px; border-radius: 14px;
  background: var(--neu); color: var(--cyan-bright); font: 600 1.0625rem/1.2 var(--font-text); text-decoration: none; outline: none;
  transform: translateY(-2px); text-shadow: 0 0 12px rgba(0, 224, 255, .45);
  box-shadow: 0 10px 24px -8px rgba(0, 224, 255, .55), 5px 5px 12px var(--neu-dark), -4px -4px 10px var(--neu-light);
}
.skip-link:not(:focus-visible) { clip-path: inset(50%); width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; white-space: nowrap; }
main:focus { outline: none; } /* the skip link's target; tabindex=-1, never in the Tab order */

/* ---------- header ---------- */
.site-nav {
  position: sticky; top: 12px; z-index: 50;
  width: min(1160px, 100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin: 12px auto 0; min-height: 68px; padding: 0 12px 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 24px; background: rgba(8, 14, 30, 0); /* approved proto: the nav is pure WebGL glass, no DOM tint */
  transition: background-color .25s, box-shadow .25s;
}
/* scrolled: page text passes under it and must not show through. .85 let card titles read and even .98 left a
   readable ghost on a dark screen, so the tint is opaque; a blue top light and a soft drop shadow keep it a panel, no white */
.site-nav.is-scrolled { background: rgba(8, 14, 30, 1); box-shadow: inset 0 1px 0 rgba(46, 86, 150, .30), 0 12px 32px rgba(0, 0, 0, .5); }
/* scrolled: the panel floats 12 px (phones 8 px) below the screen edge, and text used to pass through that strip.
   A full-width band in the page colour fills it, down past the panel's rounded corners, then fades out beside the panel.
   It sits under the header (z 49) and only exists once the page is scrolled: at the top the header stays pure glass. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 49; height: 52px; pointer-events: none;
  background: linear-gradient(var(--base) 36px, rgba(2, 1, 4, 0)); opacity: 0; transition: opacity .25s;
}
body:has(> .site-nav.is-scrolled)::before { opacity: 1; }
.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 14px; border-radius: 12px;
  font-weight: 500; font-size: 1.0625rem; color: #e4eefc; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  transition: color .25s, text-shadow .25s;
}
.nav-links a:is(:hover, :focus-visible) { color: var(--cyan-bright); text-shadow: 0 0 14px rgba(0, 224, 255, .45); outline: none; }
.nav-tools { display: flex; align-items: center; gap: 12px; }
/* the number itself next to «Обадете се»: a desktop without a phone app cannot use tel:, the visitor dials from the mobile */
.nav-phone {
  display: none; align-items: center; min-height: 2.75rem; padding: 0 4px; color: var(--cyan-bright); text-decoration: none; outline: none;
  font: 600 1.0625rem/1.2 var(--font-text); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  transition: color .25s, text-shadow .25s, translate .25s;
}
.nav-phone:is(:hover, :focus-visible) { color: #fff; text-shadow: 0 4px 14px rgba(0, 224, 255, .6); translate: 0 -1px; }
@media (min-width: 1200px) {
  .nav-phone { display: inline-flex; }
  .nav-tools { gap: 10px; }
  .nav-tools > * { flex: none; }      /* the BG/EN segment must never wrap into two rows */
  .nav-links a { padding: 0 8px; }    /* room for the number (about 30 px spare at 1160 px) */
}
.nav-burger { display: none; }

/* below 1200 px the full row (wordmark, 5 links, BG/EN, number, call) does not fit: BG/EN wrapped into two rows and the
   tools spilled out of the panel at 900. So the header uses the burger like phones; the menu carries the links and English */
@media (max-width: 1199px) {
  .site-nav { min-height: 60px; }
  .nav-links, .nav-tools .seg { display: none; }
  .nav-burger { display: inline-grid; }
  .nav-tools { margin-left: auto; }
}
@media (max-width: 640px) {
  .wordmark-mark { width: 25px; height: 24px; }
  .site-nav { top: 8px; margin-top: 8px; min-height: 60px; padding: 0 8px 0 18px; border-radius: 20px; width: calc(100% - 16px); }
  body::before { height: 44px; background: linear-gradient(var(--base) 28px, rgba(2, 1, 4, 0)); }
  .nav-tools .seg, .nav-tools .nav-call { display: none; } /* the sticky call button and the menu carry these on phones */
}

/* ---------- mobile menu: solid #0b1220, no glass ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100; background: #0b1220; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.mobile-menu[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.menu-links { display: flex; flex-direction: column; margin-block: 16px 24px; }
.menu-link {
  display: flex; align-items: center; min-height: 3.5rem; font: 600 1.375rem/1.2 var(--font-text); color: #e4eefc; text-decoration: none;
  border-bottom: 1px solid rgba(46, 86, 150, .28); transition: color .25s;
}
.menu-link:is(:hover, :focus-visible) { color: var(--cyan-bright); outline: none; }
.menu-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.menu-bottom .btn-primary { width: 100%; }
.menu-lang {
  align-self: center; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--text-soft); font-weight: 500; text-decoration: none;
  outline: none; transition: color .25s, text-shadow .25s, translate .25s;
}
.menu-lang:is(:hover, :focus-visible) { color: var(--cyan-bright); text-shadow: 0 4px 14px rgba(0, 224, 255, .5); translate: 0 -1px; }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(56px, 8vw, 112px); padding-top: 56px; background: #05070d; border-top: 1px solid rgba(46, 86, 150, .22); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1.2fr; gap: 36px; }
.footer-brand p { margin-top: 14px; color: var(--text-soft); font-size: 1.0625rem; }
.footer-h { font: 600 1rem/1.2 var(--font-head); letter-spacing: .04em; color: var(--cyan-bright); margin-bottom: 10px; }
/* 48 px rows with 8 px between them: phone, WhatsApp and e-mail sit in one list, and a mis-tap opens the wrong app */
.site-footer ul { list-style: none; display: grid; gap: 8px; justify-items: start; }
.site-footer li { display: flex; }
.site-footer .footer-note { margin-top: -8px; color: var(--text-soft); font-size: 1.0625rem; line-height: 1.4; } /* sits under its link */
.site-footer li a, .footer-legal a {
  display: inline-flex; align-items: center; min-height: 3rem; min-width: 2.75rem; color: #cfdcef; text-decoration: none; font-size: 1.0625rem; transition: color .25s;
}
.site-footer li a:is(:hover, :focus-visible), .footer-legal a:is(:hover, :focus-visible) { color: var(--cyan-bright); text-decoration: underline; text-underline-offset: 4px; outline: none; }
.footer-legal {
  margin-top: 36px; padding-block: 18px 28px; border-top: 1px solid rgba(46, 86, 150, .22);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; color: var(--text-soft); font-size: 1.0625rem;
}
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  /* room under the footer so the sticky call button never hides the legal links */
  .site-footer { padding-bottom: 8px; }
}

/* ---------- sticky call: phones only ---------- */
body > .btn-call-sticky {
  /* viewport-fit=cover makes env() real: 16 px clear of the home indicator, not on its edge */
  display: none; position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  translate: -50% 0; transition: opacity .2s, visibility .2s, transform .25s, box-shadow .25s;
}
@media (max-width: 640px) { body > .btn-call-sticky { display: inline-flex; } }
/* stepping aside is instant: a 250 ms fade always ran mid-scroll, a half-clear button sliding over the text (owner video).
   Coming back fades in, but only once the scroll has stopped (menu.js) */
body > .btn-call-sticky.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s, box-shadow .25s; }