/* ==========================================================================
   Fastkava — global header (B1) + overlay nav
   Floating glass bar, single overlay menu used at every breakpoint.
   ========================================================================== */

/* Sticky wrapper — header floats, content scrolls underneath. The negative
   bottom margin pulls the hero up under the bar. */
.fk-header {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 0 -84px;
  /* Shared by the bar and the overlay sheet so the two always line up. */
  --fk-hdr-inline: clamp(14px, 3vw, 40px);
  padding: 24px var(--fk-hdr-inline) 0;
  pointer-events: none;
}
.fk-header > * { pointer-events: auto; }

/* Glass bar */
.fk-header__bar {
  position: relative;
  max-width: var(--fk-maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 16px 10px 20px;
  border-radius: 14px;
  /*
   * NOTE: the spec for this bar also carried `overflow: hidden`. It is
   * deliberately omitted — the language switcher's dropdown is absolutely
   * positioned at `top: calc(100% + 8px)`, i.e. *below* the bar, so clipping
   * the bar would make the menu invisible. Nothing here needs it: the rim is a
   * masked ::before at inset 0 and the background is already rounded.
   */
  background: var(--fk-glass-bar);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transition: background-color var(--fk-dur) var(--fk-ease);
}
:root[data-theme="light"] .fk-header__bar {
  box-shadow: 0 8px 32px rgba(26, 21, 18, 0.10);
}

/* Gradient rim: orange refraction from top-left, dim cream from bottom-right */
.fk-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 1.5px, and every stop lifted: at 1px the rim all but vanished against the
     page once the bar went translucent. The two hot spots keep their positions
     — only their strength and reach change. */
  padding: 1.5px;
  background:
    radial-gradient(560px 150px at calc(100% - 152px) 100%,
      rgba(246, 238, 226, 0.85) 0%,
      rgba(246, 238, 226, 0.58) 10%,
      rgba(246, 238, 226, 0.34) 24%,
      rgba(246, 238, 226, 0.18) 44%,
      rgba(246, 238, 226, 0.05) 72%),
    radial-gradient(760px 190px at 0% 0%,
      rgba(251, 83, 0, 1) 0%,
      rgba(251, 83, 0, 0.92) 8%,
      rgba(251, 83, 0, 0.70) 20%,
      rgba(251, 83, 0, 0.48) 36%,
      rgba(251, 83, 0, 0.30) 58%,
      rgba(251, 83, 0, 0.20) 100%);
  /* keeps only the 1px edge, punches out the middle */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* The cream half of the rim vanishes against a light page, so swap it for a
   warm dark tint and keep the orange refraction. */
:root[data-theme="light"] .fk-header__bar::before {
  background:
    radial-gradient(560px 150px at calc(100% - 152px) 100%,
      rgba(26, 21, 18, 0.52) 0%,
      rgba(26, 21, 18, 0.34) 10%,
      rgba(26, 21, 18, 0.20) 24%,
      rgba(26, 21, 18, 0.10) 44%,
      rgba(26, 21, 18, 0.04) 72%),
    radial-gradient(760px 190px at 0% 0%,
      rgba(251, 83, 0, 1) 0%,
      rgba(251, 83, 0, 0.88) 8%,
      rgba(251, 83, 0, 0.62) 20%,
      rgba(251, 83, 0, 0.40) 36%,
      rgba(251, 83, 0, 0.24) 58%,
      rgba(251, 83, 0, 0.16) 100%);
}


/* Firmer (but still see-through) once scrolled, and on pages with no hero
   behind the bar. Using the solid token here would undo the transparency. */
.fk-header.is-scrolled .fk-header__bar,
.fk-header--solid .fk-header__bar {
  background: var(--fk-glass-bar-scrolled);
}

/* ---- Logo ---------------------------------------------------------------- */
.fk-logo { display: flex; align-items: center; gap: 12px; }
/* Uploaded logo. Height-driven so any aspect ratio sits on the same baseline as
   the "F" it replaces; `width: auto` overrides the global `img { height: auto }`
   in base.css, which would otherwise win and let a wide logo blow the bar out. */
.fk-logo__img { height: 40px; width: auto; max-width: 190px; object-fit: contain; }
@media (max-width: 640px) { .fk-logo__img { height: 34px; max-width: 150px; } }
.fk-logo__mark {
  font-family: var(--fk-font-display);
  font-weight: 700; font-size: 34px; line-height: 1;
  color: var(--fk-accent);
}
.fk-logo__tag {
  font-size: 10px; line-height: 1.35;
  color: var(--fk-text-muted); max-width: 210px;
}

/* ---- Right-hand actions -------------------------------------------------- */
.fk-header__actions { --fk-hdr-gap: 12px; display: flex; align-items: center; gap: var(--fk-hdr-gap); }
/* No gap between the language switcher and the theme toggle — they sit flush.
   Flexbox has no per-item gap, so cancel it with a negative margin; the var
   keeps this in step with the narrower gap at the ≤720px breakpoint. */
.fk-themebtn { margin-left: calc(var(--fk-hdr-gap) * -1); }

/* Round icon buttons (social, theme, burger) */
.fk-iconbtn {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fk-surface-soft);
  border: 1px solid var(--fk-border-strong);
  color: var(--fk-text-strong);
  transition: background-color var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}
.fk-iconbtn:hover { background: var(--fk-surface-hover); color: var(--fk-text-strong); }
.fk-iconbtn svg { width: 1.15em; height: 1.15em; }

/* Theme toggle — keeps the 38px hit area of its neighbours but drops the ring
   and plate, so it reads as a bare glyph. The icon shows what a click GIVES
   you (sun while dark, moon while light), which is what the aria-label says. */
.fk-themebtn {
  position: relative;
  background: transparent;
  border-color: transparent;
}
.fk-themebtn:hover { background: transparent; color: var(--fk-accent); }
.fk-themebtn__icon {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--fk-dur) var(--fk-ease), transform var(--fk-dur) var(--fk-ease);
}
/* Hidden half of the pair: rotate + shrink away, so the swap reads as one
   glyph turning into the other rather than a straight cross-fade. */
.fk-themebtn__icon--moon { opacity: 0; transform: rotate(-70deg) scale(.55); }
:root[data-theme="light"] .fk-themebtn__icon--sun { opacity: 0; transform: rotate(70deg) scale(.55); }
:root[data-theme="light"] .fk-themebtn__icon--moon { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fk-themebtn__icon { transition: none; transform: none; }
  :root[data-theme="light"] .fk-themebtn__icon--sun { transform: none; }
}

/* Phone pill */
.fk-phone {
  display: inline-flex; align-items: center;
  background: var(--fk-surface-soft);
  border: 1px solid var(--fk-border-strong);
  color: var(--fk-text-strong);
  font-weight: 700; font-size: 15px;
  padding: 10px 22px; border-radius: var(--fk-radius);
  white-space: nowrap;
}
.fk-phone:hover { background: var(--fk-surface-hover); color: var(--fk-text-strong); }

/* Compact counterpart to the pill — hidden until the pill gives way at 720px. */
.fk-phonebtn { display: none; }

/* Language + theme inside the burger sheet — hidden until the bar sheds them
   at 720px (see that breakpoint). Sits under the nav columns, separated by a
   hairline so it reads as a utility row rather than another menu group. */
.fk-nav-overlay__tools {
  display: none;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--fk-border);
}

/* ---- Language switcher --------------------------------------------------- */
.fk-lang { position: relative; }
.fk-lang__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: var(--fk-text-strong);
  font-weight: 700; font-size: 15px; padding: 8px 10px; border-radius: 10px;
}
.fk-lang__toggle:hover { background: var(--fk-surface-soft); }
.fk-lang__chev { width: 11px; height: 11px; transition: transform var(--fk-dur) var(--fk-ease); }
.fk-lang.is-open .fk-lang__chev { transform: rotate(180deg); }
.fk-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 150px; padding: 6px;
  background: var(--fk-glass-solid);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--fk-border-strong); border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  display: none; flex-direction: column; gap: 2px; z-index: 5;
}
.fk-lang.is-open .fk-lang__menu { display: flex; }
.fk-lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: var(--fk-radius-sm);
  color: var(--fk-text-muted); font-weight: 600; font-size: 14px;
  white-space: nowrap;
}
/* Tick on the active language. Sized here, not on the <svg> — see the note in
   language-switcher.php. */
.fk-lang__check { flex: none; width: 13px; height: 13px; color: var(--fk-accent); }
.fk-lang__menu a:hover { background: var(--fk-surface-hover); color: var(--fk-text-strong); }
.fk-lang__menu .current-lang,
.fk-lang__menu .current_lang a,
.fk-lang__menu a[aria-current="true"] {
  background: var(--fk-accent-soft); color: var(--fk-text-strong); font-weight: 700;
}

/*
 * Inside the burger sheet the menu opens UPWARDS.
 *
 * The sheet scrolls (`overflow-y: auto` on .fk-nav-overlay__panel) and this
 * control is the last row in it, so a menu dropping downwards is cut off by the
 * panel's own bottom edge — measured at 390x844: the panel ends at y=525 and the
 * open menu ran to y=683, losing 158 of its 176px. The free space below the
 * panel is irrelevant, because the clip is the panel's, not the viewport's.
 *
 * Opening upwards puts it in the space the sheet already occupies (the toggle
 * sits at y=464 with the panel starting at y=88 — room for four times this
 * menu), so nothing is clipped and nothing has to escape the scroll container.
 *
 * Left-aligned rather than right-aligned: in the bar this control is at the
 * right edge, but in the sheet it is the leftmost item, and anchoring the
 * menu's right edge to it pushed the wider menu out past the panel padding.
 *
 * The max-height is the guard for a fifth language: past that the menu scrolls
 * itself instead of growing beyond the sheet.
 */
.fk-nav-overlay__tools .fk-lang__menu {
  top: auto;
  bottom: calc(100% + 8px);
  right: auto;
  left: 0;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Opaque, not glass. Everywhere else this menu floats over page background
     and 88% + a blur reads fine; here it lands directly on the navigation
     columns, and the link text showed straight through it. Same call as
     .fk-vend__body at 900px — drop the backdrop-filter, raise the fill until it
     is legible — and it removes a blur from a scrolling container as a bonus. */
  background: var(--fk-bg-elev);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- Overlay nav --------------------------------------------------------- */
.fk-burger { display: inline-flex; position: relative; }
.fk-burger__lines { display: flex; flex-direction: column; gap: 3.5px; }
.fk-burger__lines span { width: 16px; height: 2px; border-radius: 2px; background: currentColor; }

/* Open state: the trigger becomes the filled ✕ from the design. Driven off
   aria-expanded, which the script already maintains — no extra class needed. */
.fk-burger__x { display: none; width: 13px; height: 13px; }
.fk-burger__x svg { width: 100%; height: 100%; display: block; }
.fk-burger[aria-expanded="true"] .fk-burger__lines { display: none; }
.fk-burger[aria-expanded="true"] .fk-burger__x { display: block; }
.fk-burger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}
:root[data-theme="light"] .fk-burger[aria-expanded="true"] {
  background: rgba(26, 21, 18, 0.14);
  border-color: rgba(26, 21, 18, 0.24);
  color: var(--fk-text-strong);
}

/*
 * Design 2a. Not a dropdown on the right — a sheet the full width of the header
 * bar, dropped 10px below it.
 *
 * Both the sheet and the scrim are absolutely positioned against .fk-header
 * (sticky, so it is a containing block). `top: 100%` is therefore the bar's own
 * lower edge at every breakpoint, with no hard-coded offsets to drift: the
 * header's padding-bottom is 0, so its height IS padding-top + bar.
 */
.fk-nav-overlay { display: none; }
.fk-nav-overlay.is-open { display: block; }

/* Full-viewport width, starting under the bar — the strip above the bar stays
   undimmed, as in the design. */
.fk-nav-overlay__scrim {
  position: absolute;
  top: 100%; left: 50%;
  width: 100vw; height: 100vh;
  transform: translateX(-50%);
  background: var(--fk-overlay);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

.fk-nav-overlay__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: var(--fk-hdr-inline); right: var(--fk-hdr-inline);
  max-width: var(--fk-maxw); margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(20px, 2.1vw, 30px) clamp(22px, 2.8vw, 40px) clamp(24px, 2.5vw, 36px);
  border-radius: var(--fk-radius-lg);
  background: var(--fk-glass-bar);
  -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  display: flex; align-items: flex-start; gap: clamp(36px, 4.4vw, 64px);
}
:root[data-theme="light"] .fk-nav-overlay__panel { box-shadow: 0 24px 60px rgba(26, 21, 18, 0.16); }

/* Same masked gradient rim as the header bar, so the two read as one system. */
.fk-nav-overlay__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(150deg,
    rgba(251, 83, 0, 0.45), rgba(255, 255, 255, 0.16) 30%,
    rgba(251, 83, 0, 0.09) 55%, rgba(255, 160, 90, 0.4) 85%, rgba(255, 255, 255, 0.18));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  pointer-events: none;
}

.fk-nav-overlay__kicker {
  flex: none; padding-top: 4px; white-space: nowrap;
  color: var(--fk-accent);
  font-size: clamp(11px, 0.85vw, 12px); font-weight: 700; letter-spacing: 2.5px;
}

.fk-navgroups {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 2.8vw, 40px);
}
.fk-navgroup { display: flex; flex-direction: column; gap: clamp(11px, 0.85vw, 12px); }
.fk-navgroup__title {
  margin-bottom: 4px;
  font-size: clamp(10px, 0.78vw, 11px); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fk-text-muted);
}
.fk-navgroup__link {
  font-size: clamp(14px, 1.05vw, 15px); font-weight: 600;
  color: var(--fk-text-strong);
}
.fk-navgroup__link:hover { color: var(--fk-accent); }
.fk-navgroup__link.is-current { color: var(--fk-accent); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .fk-logo__tag { display: none; }
}
@media (max-width: 720px) {
  /* The number pill gives way to a round dial button. Swapped at exactly the
     width the pill stops fitting, so the phone is never absent — a gap between
     the two breakpoints would leave narrow tablets with no way to call. */
  .fk-phone { display: none; }
  .fk-phonebtn { display: inline-flex; }
  .fk-header__actions { --fk-hdr-gap: 8px; }

  /*
   * Language and theme move into the burger menu.
   *
   * Same width as the phone swap, so the bar simplifies in one step rather than
   * shedding controls at three different sizes. What is left in the bar is the
   * logo, the three contact icons and the burger.
   *
   * Scoped with `.fk-header__bar >` so it only hides the copies in the bar —
   * the pair inside the overlay panel carries the identical classes and must
   * stay visible.
   */
  .fk-header__bar .fk-lang,
  .fk-header__bar .fk-themebtn { display: none; }
  .fk-nav-overlay__tools { display: flex; }
}

/*
 * Small phones: the bar now carries FIVE controls (Telegram, WhatsApp,
 * Instagram, phone, burger). At 38px with an 8px gap that row is 222px, which
 * still clears a 360px viewport but starts crowding the logo below it — so trim
 * both a notch rather than dropping a control. The logo is a near-square lockup
 * (121x120), so it only asks for ~34px of width and is not what runs out.
 */
@media (max-width: 400px) {
  .fk-header__actions { --fk-hdr-gap: 6px; }
  .fk-header__bar .fk-iconbtn { width: 34px; height: 34px; }
}
/* Below ~360px the 34px row still runs 25px past the bar's right edge (measured
   at 320px). One more notch clears it rather than dropping a contact icon. */
@media (max-width: 359px) {
  .fk-header__actions { --fk-hdr-gap: 5px; }
  .fk-header__bar .fk-iconbtn { width: 30px; height: 30px; }
}

/*
 * Mobile (design's 390 frame): the "НАВІГАЦІЯ" label moves above the columns
 * instead of sitting beside them, and four columns become two.
 */
@media (max-width: 620px) {
  .fk-nav-overlay__panel { flex-direction: column; gap: 0; }
  .fk-nav-overlay__kicker { padding-top: 0; margin-bottom: 18px; }
  .fk-navgroups { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .fk-navgroup { gap: 10px; }

  /* With the sheet open the header keeps only the logo and the ✕ — the other
     controls are inside the sheet's reach and just crowd a 390px bar.
     Scoped to the BAR: .fk-header.is-nav-open is an ancestor of the sheet too,
     so an unscoped selector also hid the language and theme controls that now
     live inside the sheet, collapsing that row to nothing. */
  .fk-header.is-nav-open .fk-header__bar .fk-lang,
  .fk-header.is-nav-open .fk-header__bar .fk-themebtn,
  .fk-header.is-nav-open .fk-header__actions > .fk-iconbtn:not(.fk-burger) { display: none; }
}

/* The sheet can outgrow a short viewport (landscape phone, small laptop). */
.fk-nav-overlay__panel { max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }

body.admin-bar .fk-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fk-header { top: 46px; } }

/* On pages without a hero behind the bar, push content below the fixed header */
body:not(.fkl-front) .fk-site-main {
  padding-top: calc(var(--fk-header-h) + 40px);
}

/* Temporary placeholder footer (replaced by B14) */
.fk-mini-footer {
  border-top: 1px solid var(--fk-border);
  padding-block: 28px;
  color: var(--fk-text-dim);
  font-size: 13px;
}

/* The cream spot is centred on the phone number (152px in from the bar's right
   edge — a fixed distance, unlike a percentage, which drifts as the bar
   resizes). Below 720px the phone is hidden, so it re-centres on the burger. */
@media (max-width: 720px) {
  .fk-header__bar::before,
  :root[data-theme="light"] .fk-header__bar::before {
    background-position-x: 0;
  }
  .fk-header__bar::before {
    background:
      radial-gradient(320px 120px at calc(100% - 35px) 100%,
        rgba(246, 238, 226, 0.52) 0%, rgba(246, 238, 226, 0.22) 18%,
        rgba(246, 238, 226, 0.06) 44%, rgba(246, 238, 226, 0) 72%),
      radial-gradient(760px 190px at 0% 0%,
        rgba(251, 83, 0, 0.98) 0%, rgba(251, 83, 0, 0.70) 8%,
        rgba(251, 83, 0, 0.40) 20%, rgba(251, 83, 0, 0.20) 36%,
        rgba(251, 83, 0, 0.10) 58%, rgba(251, 83, 0, 0.06) 100%);
  }
  :root[data-theme="light"] .fk-header__bar::before {
    background:
      radial-gradient(320px 120px at calc(100% - 35px) 100%,
        rgba(26, 21, 18, 0.30) 0%, rgba(26, 21, 18, 0.14) 18%,
        rgba(26, 21, 18, 0.04) 44%, rgba(26, 21, 18, 0) 72%),
      radial-gradient(760px 190px at 0% 0%,
        rgba(251, 83, 0, 0.90) 0%, rgba(251, 83, 0, 0.62) 8%,
        rgba(251, 83, 0, 0.34) 20%, rgba(251, 83, 0, 0.18) 36%,
        rgba(251, 83, 0, 0.09) 58%, rgba(251, 83, 0, 0.05) 100%);
  }
}