/* pozornice.hr — chrome: utility bar, header, mega menu, drawer, footer · v2
   Requires poz-tokens.css. Behaviour lives in poz-nav.js.

   v2: the mega rail is a real tablist (roving tabindex — one tab stop for
   nine categories), the drawer is a real modal dialog, and every chrome
   transition collapses under prefers-reduced-motion. Annotated graphics
   inside chrome keep their labels in RESERVED LANES — never two label
   kinds in one horizontal band, since caption width varies by language.

   Chrome heights are declared ONCE, in poz-tokens.css. This file only
   composes them — do not re-declare a height here. Desktop chrome is
   30 + 108 = 138px; at ≤900px the header drops to 76px, so chrome is
   106px and every offset below follows automatically. */

:root {
  --poz-chrome-h: calc(var(--poz-utility-h) + var(--poz-header-h));
}
@media (max-width: 900px) { :root { --poz-header-h: var(--poz-header-h-sm); } }

/* Anchored sections must clear the fixed chrome. */
:target, [id] { scroll-margin-top: var(--poz-anchor-top); }

/* ============================ UTILITY BAR ============================ */
.poz-utility {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--poz-utility-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(20px, 3.4vw, 56px);
  background: var(--poz-ink); color: var(--poz-text-3);
  font: 400 8px/1 var(--poz-font-mono);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.poz-utility a { color: inherit; text-decoration: none; transition: color 0.28s; }
.poz-utility a:hover { color: #FFFFFF; }
.poz-utility__group { display: flex; align-items: center; gap: 22px; }
.poz-utility__lang { display: flex; align-items: center; gap: 8px; }
.poz-utility__lang [aria-current="true"] { color: #FFFFFF; }
@media (max-width: 700px) { .poz-utility__seller { display: none; } }

/* ============================ HEADER ============================ */
.poz-header {
  position: fixed; top: var(--poz-utility-h); left: 0; right: 0; z-index: 70;
  height: var(--poz-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 0 clamp(20px, 3.4vw, 56px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--poz-line);
  transition: background 0.4s, border-color 0.4s;
}
.poz-header__logo { display: block; flex: 0 0 auto; }
/* Set ONE dimension — height — and let the width scale. */
.poz-header__logo img { height: var(--poz-logo-h); width: auto; }
@media (max-width: 900px) { .poz-header__logo img { height: var(--poz-logo-h-sm); } }

.poz-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 40px); }
@media (max-width: 1180px) { .poz-nav { display: none; } }

.poz-nav__link,
.poz-nav__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 9px/1.5 var(--poz-font-display);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--poz-text); text-decoration: none; white-space: nowrap;
  transition: color 0.3s;
}
.poz-nav__link:hover,
.poz-nav__trigger:hover,
.poz-nav__trigger[aria-expanded="true"] { color: var(--poz-accent-ink); }

.poz-nav__caret {
  display: block; width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-nav__trigger[aria-expanded="true"] .poz-nav__caret { transform: rotate(225deg) translateY(-2px); }

.poz-header__actions { display: flex; align-items: center; gap: 14px; }

.poz-burger {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.poz-burger span {
  display: block; width: 24px; height: 1px; margin: 0 auto;
  background: var(--poz-text); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s;
}
.poz-burger span + span { margin-top: 6px; }
.poz-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.poz-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.poz-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1180px) { .poz-burger { display: block; } }

/* ============================ SCRIM ============================ */
.poz-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12,13,16,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ============================ MEGA MENU ============================
   Full-width panel below the header. Three columns:
   rail (categories) · subs (second level) · preview (product stage). */

.poz-mega {
  position: fixed; top: var(--poz-chrome-h); left: 0; right: 0; z-index: 65;
  max-height: calc(100vh - var(--poz-chrome-h));
  overflow-y: auto;
  background: var(--poz-page);
  border-bottom: 1px solid var(--poz-line);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.2,0.8,0.2,1), transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-mega.is-open { opacity: 1; transform: none; pointer-events: auto; }
.poz-mega[hidden] { display: none; }

.poz-mega__panel {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 420px;
  max-width: 2040px; margin: 0 auto;
}
@media (max-width: 1560px) { .poz-mega__panel { grid-template-columns: 268px minmax(0, 1fr) 360px; } }
@media (max-width: 1320px) {
  .poz-mega__panel { grid-template-columns: 250px minmax(0, 1fr); }
  .poz-mega__preview { grid-column: 1 / -1; border-top: 1px solid var(--poz-line); }
}

/* ——— search bar across the top of the panel ——— */
.poz-mega__search {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 14px clamp(22px, 4vw, 40px);
  background: var(--poz-panel); border-bottom: 1px solid var(--poz-line);
}
.poz-mega__search-glyph { font: 400 16px/1 var(--poz-font-mono); color: var(--poz-text-2); }
.poz-mega__search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font: 400 12px/1.5 var(--poz-font-display); letter-spacing: 0.04em; color: var(--poz-text);
}
.poz-mega__search input::placeholder { color: var(--poz-text-2); }
.poz-mega__search input:focus-visible { outline: 2px solid var(--poz-accent); outline-offset: 4px; }

/* ——— configurator tiles in the panel footer ——— */
.poz-conf-grid {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 1px;
  background: var(--poz-line-dark); border-top: 1px solid var(--poz-line);
}
.poz-conf {
  position: relative; display: block; min-height: 188px; overflow: hidden;
  padding: 16px 18px 18px; background: var(--poz-ink-2); text-decoration: none;
  transition: background 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-conf:hover,
.poz-conf:focus-visible { background: var(--poz-ink-3); }
.poz-conf__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}
.poz-conf__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 88% 12%, var(--acc) 0%, rgba(16,17,20,0) 62%);
  opacity: 0.18; transition: opacity 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-conf:hover .poz-conf__glow,
.poz-conf:focus-visible .poz-conf__glow { opacity: 0.32; }
.poz-conf__num { position: relative; font: var(--poz-eyebrow); letter-spacing: 0.16em; color: var(--acc-ink); }
.poz-conf__name {
  position: relative; display: block; margin-top: 14px; max-width: 16ch;
  font: 400 12px/1.42 var(--poz-font-display); letter-spacing: 0.02em; color: #FFFFFF;
}
.poz-conf__spec {
  position: relative; display: block; margin-top: 10px;
  font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--poz-text-3);
}
.poz-conf__foot {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.poz-conf__rule { display: block; height: 1px; width: 0; background: var(--acc); transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.poz-conf:hover .poz-conf__rule,
.poz-conf:focus-visible .poz-conf__rule { width: 100%; }
.poz-conf__arrow { flex: 0 0 auto; font: 400 13px/1 var(--poz-font-mono); color: var(--poz-text-3); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), color 0.3s; }
.poz-conf:hover .poz-conf__arrow,
.poz-conf:focus-visible .poz-conf__arrow { transform: translateX(6px); color: #FFFFFF; }

/* ——— floating contact button ——— */
.poz-fab { position: fixed; right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px); z-index: 75; display: grid; justify-items: end; gap: 8px; }
.poz-fab__panel {
  display: grid; gap: 1px; min-width: 268px; background: var(--poz-line-dark);
  border: 1px solid var(--poz-line-dark);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.2,0.8,0.2,1), transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-fab.is-open .poz-fab__panel { opacity: 1; transform: none; pointer-events: auto; }
.poz-fab__row { display: block; padding: 14px 18px; background: var(--poz-ink); text-decoration: none; transition: background 0.3s; }
.poz-fab__row:hover { background: var(--poz-ink-3); }
.poz-fab__label { display: block; font: var(--poz-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--poz-text-3); }
.poz-fab__value { display: block; margin-top: 7px; font: 400 11px/1.4 var(--poz-font-display); color: #FFFFFF; }
.poz-fab__btn {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px;
  border: 0; border-radius: 4px; background: var(--poz-ink); color: #FFFFFF; cursor: pointer;
  font: 400 9px/1 var(--poz-font-display); letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-fab__btn:hover { background: var(--poz-accent-ink); }
.poz-fab__dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc-lifting); }

/* ——— rail ——— */
.poz-mega__rail {
  border-right: 1px solid var(--poz-line);
  background: var(--poz-panel);
  padding: 22px 0 26px;
}
.poz-mega__cat {
  position: relative; display: grid; grid-template-columns: 26px 1fr;
  gap: 12px; align-items: center; width: 100%;
  padding: 13px 22px; border: 0; background: transparent; cursor: pointer;
  text-align: left; text-decoration: none;
  font: 400 10px/1.5 var(--poz-font-display); letter-spacing: 0.05em;
  color: var(--poz-text-2);
  transition: background 0.3s, color 0.3s;
}
.poz-mega__cat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc); transform: scaleY(0); transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
/* Full opacity always: the ink twins exist to make these legible, and an
   opacity multiplier cancels that. Inactive state is carried by the rail
   background and the spine, which is enough. */
.poz-mega__cat-num {
  font: var(--poz-eyebrow); letter-spacing: 0.14em;
  color: var(--acc-ink);
}
.poz-mega__cat:hover,
.poz-mega__cat.is-active { background: var(--poz-page); color: var(--poz-text); }
/* The rail is one tab stop; arrows move within it. The focused tab must
   read as focused even though it is also the active one. */
.poz-mega__cat:focus-visible { outline: 2px solid var(--poz-accent); outline-offset: -2px; }
.poz-mega__cat.is-active::before { transform: scaleY(1); }

/* ——— second level ——— */
.poz-mega__subs { padding: 26px clamp(20px, 2.4vw, 40px) 30px; }
.poz-mega__subgroup { display: none; }
.poz-mega__subgroup.is-active {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 4px 26px;
}
.poz-mega__sub {
  position: relative; display: grid; grid-template-columns: 22px 1fr;
  gap: 10px; align-items: baseline;
  padding: 11px 0; text-decoration: none; color: var(--poz-text);
  font: 400 11px/1.5 var(--poz-font-display); letter-spacing: 0.02em;
  border-bottom: 1px solid var(--poz-line-soft);
  transition: color 0.3s, padding-left 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-mega__sub:hover { color: var(--acc-ink); padding-left: 6px; }
.poz-mega__sub-num { font: var(--poz-label); letter-spacing: 0.1em; color: var(--poz-text-2); }
.poz-mega__subs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--poz-line);
}

/* ——— preview stage ——— */
.poz-mega__preview {
  padding: 26px clamp(20px, 3.4vw, 56px) 30px 34px;
  border-left: 1px solid var(--poz-line);
}
.poz-mega__stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--poz-page); border: 1px solid var(--poz-line-soft);
}
.poz-mega__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 8%; box-sizing: border-box;
  transition: opacity 0.55s cubic-bezier(0.2,0.8,0.2,1), transform 1.4s cubic-bezier(0.2,0.8,0.2,1);
}
.poz-mega__shot[data-poz-shot="b"] { opacity: 0; }
.poz-mega__preview:hover .poz-mega__shot { transform: scale(1.045); }
.poz-mega__wipe {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #FFFFFF 45%, rgba(255,255,255,0) 100%);
  transform: translateX(-110%);
}
.poz-mega__wipe.is-running { animation: pozWipe 0.62s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes pozWipe { to { transform: translateX(110%); } }

.poz-mega__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(76% 66% at 50% 46%,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.92) 100%);
}
.poz-mega__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; }
.poz-mega__title { font: 400 13px/1.4 var(--poz-font-display); letter-spacing: 0.02em; color: var(--poz-text); }
.poz-mega__count { font: var(--poz-label); letter-spacing: 0.14em; color: var(--poz-text-2); }
.poz-mega__spec { margin: 12px 0 0; font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--poz-text-2); }

/* ============================ DRAWER (≤1180px) ============================
   Stepped reveal: level 0 = destinations, level 1 = categories,
   level 2 = sub-categories. One panel slides at a time. */

.poz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(460px, 92vw); box-sizing: border-box;
  display: flex; flex-direction: column;
  background: var(--poz-page); border-left: 1px solid var(--poz-line);
  transform: translateX(101%); transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
  overflow: hidden;
}
.poz-drawer.is-open { transform: none; }
/* Matches the mobile header height — the drawer opens under it, so the two
   must stay equal. Take the token, never the number. */
.poz-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--poz-header-h-sm); padding: 0 20px;
  border-bottom: 1px solid var(--poz-line); flex: 0 0 auto;
}
.poz-drawer__back {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--poz-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--poz-text-2);
}
.poz-drawer__close { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font: 400 16px/1 var(--poz-font-mono); color: var(--poz-text); }
.poz-drawer__track { position: relative; flex: 1 1 auto; overflow: hidden; }
.poz-drawer__level {
  position: absolute; inset: 0; overflow-y: auto;
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), opacity 0.35s;
}
.poz-drawer__level.is-current { transform: none; opacity: 1; pointer-events: auto; }
.poz-drawer__level.is-past { transform: translateX(-30%); opacity: 0; }
.poz-drawer__item {
  display: grid; grid-template-columns: 26px 1fr 16px; gap: 12px; align-items: center;
  width: 100%; min-height: 56px; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--poz-line-soft);
  background: none; cursor: pointer; text-align: left; text-decoration: none;
  font: 400 11px/1.5 var(--poz-font-display); letter-spacing: 0.03em; color: var(--poz-text);
}
.poz-drawer__item-num { font: var(--poz-label); letter-spacing: 0.1em; color: var(--acc-ink, var(--poz-text-2)); }
.poz-drawer__item-caret { font: 400 12px/1 var(--poz-font-mono); color: var(--poz-text-2); }
.poz-drawer__foot { flex: 0 0 auto; padding: 18px 20px; border-top: 1px solid var(--poz-line); display: grid; gap: 8px; }

/* ============================ FOOTER ============================ */
.poz-footer { background: var(--poz-ink-2); color: var(--poz-text-3); }
.poz-footer__band { max-width: 2040px; margin: 0 auto; padding: clamp(40px, 4vw, 72px) clamp(20px, 3.4vw, 56px); }
.poz-footer__band + .poz-footer__band { border-top: 1px solid var(--poz-line-dark); }
.poz-footer__statement { font: 400 clamp(17px, 2vw, 34px)/1.24 var(--poz-font-display); letter-spacing: 0.02em; color: #FFFFFF; max-width: 26ch; }
.poz-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.poz-footer__colhead { font: var(--poz-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--poz-text-3); }
.poz-footer a { color: var(--poz-text-3); text-decoration: none; transition: color 0.28s; }
.poz-footer a:hover { color: #FFFFFF; }
.poz-footer__legal { font: var(--poz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--poz-text-3); }

/* ============================ REDUCED MOTION ============================
   Chrome still changes state — it just arrives without travel. */
@media (prefers-reduced-motion: reduce) {
  .poz-mega,
  .poz-drawer,
  .poz-drawer__level,
  .poz-fab__panel,
  .poz-mega__shot,
  .poz-conf,
  .poz-conf__rule,
  .poz-conf__arrow,
  .poz-mega__sub,
  .poz-mega__cat,
  .poz-mega__cat::before,
  .poz-burger span { transition: none !important; }
  .poz-mega { transform: none !important; }
  .poz-drawer.is-open { transform: none !important; }
  .poz-drawer__level.is-current { transform: none !important; }
  .poz-mega__wipe.is-running { animation: none !important; }
  .poz-mega__preview:hover .poz-mega__shot { transform: none !important; }
}

/* ============================ DARK BAND ============================
   Any full-bleed dark section. Put .poz-dark on it so the token set flips. */
.poz-dark {
  background: var(--poz-ink); color: #FFFFFF;
  --poz-text: #FFFFFF;
  --poz-text-2: var(--poz-text-3);
  --poz-line: var(--poz-line-dark);
  --poz-line-soft: var(--poz-line-dark-soft);
  --poz-page: var(--poz-ink);
  --poz-panel: var(--poz-ink-2);
}
/* Accent TEXT on a dark band uses the tint twin, never the ink twin.
   The per-category mapping lives in poz-tokens.css (.poz-dark .poz-acc--*)
   because a descendant accent class re-declares --acc-ink in its own scope. */
.poz-dark { --acc-ink: var(--poz-accent-tint); }

/* ============================================================================
   R6-B — frosted glass chrome (Sven, 2026-08-01): the menu bar reads like the
   planner windows — a true frosted pane rather than a near-opaque white strip.
   The utility bar, the header, the mega panel and the drawer all share one
   recipe: translucent ground + heavy blur and saturation + a hairline that
   catches light. Solid fallbacks keep the text legible where backdrop-filter
   is unsupported, and the whole set collapses to opaque for reduced-data.
   ========================================================================== */
.poz-utility {
  background: rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.poz-header {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  border-bottom: 1px solid rgba(22, 23, 27, 0.09);
  box-shadow: 0 12px 34px -28px rgba(10, 12, 18, 0.55);
}
/* scrolled (poz-nav.js sets .is-scrolled): the pane firms up so long pages
   keep their contrast under dense content */
.poz-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 40px -28px rgba(10, 12, 18, 0.6);
}
.poz-mega {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border-bottom: 1px solid rgba(22, 23, 27, 0.09);
  box-shadow: 0 28px 60px -40px rgba(10, 12, 18, 0.5);
}
.poz-drawer {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border-left: 1px solid rgba(22, 23, 27, 0.1);
  box-shadow: -30px 0 70px -50px rgba(10, 12, 18, 0.6);
}
/* the scrim behind the glass leans lighter so the blur has something to chew */
.poz-scrim { background: rgba(12, 13, 16, 0.38); }
/* mega panel internals sit on the glass, not on their own white — the rail
   keeps a whisper of tint so the three columns still read apart */
.poz-mega__search, .poz-mega__subs, .poz-mega__preview,
.poz-drawer__head, .poz-drawer__panel { background: transparent; }
.poz-mega__rail { background: rgba(248, 250, 252, 0.5); }
/* no backdrop-filter (older Firefox/Safari): fall back to a solid pane */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .poz-utility { background: var(--poz-ink); }
  .poz-header, .poz-header.is-scrolled { background: rgba(255, 255, 255, 0.97); }
  .poz-mega, .poz-drawer { background: var(--poz-page); }
}

/* R8-M (Sven, 2026-08-01): hide the legacy floating contact.
   The pozornice.hr Core plugin renders its own fixed "Kontakt" FAB (.pz-qc,
   right/bottom 20px, z-index 9990) which sat directly on top of the theme's
   own on-brand "Javite nam se" button (.poz-fab). Two contact bubbles in one
   corner, and the off-brand one on top.
   This lives in the THEME stylesheet, which only loads with the preview theme
   active, so the unflagged live site keeps its plugin FAB untouched. */
.pz-qc { display: none !important; }

/* ==================================================================
   THE BAR READS ITS GROUND (2026-08-27)
   The header is glass. Over light content it stays the pale pane it has
   always been; when a dark band passes under it, it crossfades to dark
   frosted glass and every mark on it — wordmark, links, pills, buttons —
   crosses with it. poz-nav.js adds .is-over-dark; the zones it watches are
   the ones the theme already marks dark, plus anything opting in with
   [data-poz-header="dark"].
   ================================================================== */
.poz-header__logo{position:relative;display:inline-block;line-height:0;}
.poz-header__logo-img{transition:opacity .42s cubic-bezier(.2,0,0,1);}
.poz-header__logo-img--on-dark{position:absolute;left:0;top:0;opacity:0;pointer-events:none;}
.poz-header.is-over-dark .poz-header__logo-img--on-light{opacity:0;}
.poz-header.is-over-dark .poz-header__logo-img--on-dark{opacity:1;}

.poz-header{transition:background .42s cubic-bezier(.2,0,0,1),border-color .42s ease,box-shadow .42s ease;}
.poz-header.is-over-dark{background:rgba(14,16,20,.56);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border-bottom-color:rgba(255,255,255,.10);box-shadow:0 18px 44px -30px rgba(0,0,0,.9);}
.poz-header.is-over-dark.is-scrolled{background:rgba(11,13,17,.76);box-shadow:0 22px 50px -30px rgba(0,0,0,.95);}

.poz-header.is-over-dark .poz-nav__link,
.poz-header.is-over-dark .poz-nav__trigger{color:var(--poz-text-on-dark-2,#B3BAC5);}
.poz-header.is-over-dark .poz-nav__link:hover,
.poz-header.is-over-dark .poz-nav__trigger:hover,
.poz-header.is-over-dark .poz-nav__trigger[aria-expanded="true"]{color:var(--poz-text-on-dark,#fff);}

.poz-header.is-over-dark .poz-btn--secondary{border-color:rgba(255,255,255,.30);color:var(--poz-text-on-dark,#fff);}
.poz-header.is-over-dark .poz-btn--secondary:hover{border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.09);}

.poz-header.is-over-dark .pzl-lang{border-color:rgba(255,255,255,.18);}
.poz-header.is-over-dark .pzl-lang__opt{color:var(--poz-text-on-dark-2,#B3BAC5);}
.poz-header.is-over-dark .pzl-lang__opt:hover{color:#fff;}
.poz-header.is-over-dark .pzl-lang__opt[aria-current="true"]{background:rgba(255,255,255,.16);color:#fff;}

/* the range pill is near-black by design — on a dark bar it becomes a lit outline */
.poz-header.is-over-dark .poz-cats-launch{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;}
.poz-header.is-over-dark .poz-cats-launch:hover{background:rgba(255,255,255,.17);}
.poz-header.is-over-dark .poz-burger{color:var(--poz-text-on-dark,#fff);}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .poz-header.is-over-dark,.poz-header.is-over-dark.is-scrolled{background:rgba(11,13,17,.97);}
}
@media (prefers-reduced-motion: reduce){
  .poz-header,.poz-header__logo-img{transition:none;}
}

/* ==================================================================
   DARK GROUND v2 — the bar's visible pane is .poz-header::before (the
   floating rounded card the mega-menu layer owns), not the header box
   itself. The dark state therefore has to repaint the card, its hairline,
   the actions pill and the language pill — everything that is a light
   surface in the light state.
   ================================================================== */
.poz-header.is-over-dark::before{
  background:linear-gradient(112deg,rgba(20,23,28,.88),rgba(15,17,22,.80) 48%,rgba(11,13,17,.74));
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 48px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.45);
}
.poz-header.is-over-dark::after{opacity:.5;background:linear-gradient(90deg,rgba(255,255,255,.85) 0 68px,rgba(255,255,255,.30) 140px,transparent 31%);}

/* the actions cluster and the language pill are light plates in the light state */
.poz-header.is-over-dark .poz-header__actions{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
.poz-header.is-over-dark .pzl-lang{background:rgba(255,255,255,.07);}
.poz-header.is-over-dark .pzl-lang__opt{color:rgba(255,255,255,.72);}
.poz-header.is-over-dark .pzl-lang__opt:hover{color:#fff;}
.poz-header.is-over-dark .pzl-lang__opt[aria-current="true"]{background:rgba(255,255,255,.92);color:#0C0D10;}

/* both wordmarks share one grid cell, so the crossfade cannot shift the mark */
.poz-header__logo{display:grid;place-items:center;}
.poz-header__logo .poz-header__logo-img{grid-area:1/1;position:static;}

/* ---- DARK GROUND v3 — the mega-menu layer owns these with !important, so the
     dark state has to answer in the same voice ---- */
.poz-header .poz-header__logo{display:grid !important;place-items:center;}
.poz-header .poz-header__logo .poz-header__logo-img{grid-area:1/1;position:static !important;}
.poz-header.is-over-dark .poz-header__actions{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.14) !important;}
.poz-header.is-over-dark .pzl-lang{background:rgba(255,255,255,.07) !important;}
.poz-header.is-over-dark .pzl-lang__opt{color:rgba(255,255,255,.72) !important;}
.poz-header.is-over-dark .pzl-lang__opt:hover{color:#fff !important;}
.poz-header.is-over-dark .pzl-lang__opt[aria-current="true"]{background:rgba(255,255,255,.92) !important;color:#0C0D10 !important;}
.poz-header.is-over-dark .poz-btn--secondary{color:#fff !important;}
.poz-header.is-over-dark .poz-cats-launch{background:rgba(255,255,255,.12) !important;color:#fff !important;}
.poz-header.is-over-dark .poz-cats-launch:hover{background:rgba(255,255,255,.19) !important;}
.poz-header.is-over-dark .poz-burger{color:#fff !important;}