/**
 * Glass Surface (2026-08-25, TRIAL) — ported from reactbits.dev's
 * GlassSurface React component (github.com/DavidHDev/react-bits,
 * src/content/Components/GlassSurface/{GlassSurface.jsx,GlassSurface.css})
 * to plain CSS + vanilla JS (assets/js/glass-surface.js), since this
 * project has no React/build step. This is an ADDITIVE trial, not a
 * replacement: the original navbar markup/CSS (components.css's
 * .site-navbar__row background/border-radius/padding) is untouched — see
 * src/partials/navbar.php (kept as the backup) vs. navbar-glass.php (the
 * trial variant), switched by the one flag at the top of header.php.
 *
 * How it works: a per-instance SVG <filter> (built by glass-surface.js)
 * renders a displacement map from gradient rects sized to the element's
 * own live bounding box, then splits it into R/G/B feDisplacementMap
 * passes with slightly different scales — a chromatic-aberration-like
 * refraction of whatever sits BEHIND the element — recombined via feBlend.
 * That filter is referenced from `backdrop-filter: url(#id)` below.
 *
 * KNOWN, UNFIXABLE LIMITATION (disclosed, not a bug): `backdrop-filter:
 * url(#svg-filter)` only works in Chromium browsers (Chrome/Edge/Opera).
 * Safari and Firefox do not support an SVG filter reference inside
 * backdrop-filter at all — glass-surface.js feature-detects this
 * (matching the original component's own detection) and applies
 * .glass-surface--fallback instead, a plain blur+saturate+brightness
 * frosted look with no distortion. There is no CSS-only way to close this
 * gap; it's inherent to the technique itself, not something introduced by
 * this port.
 */
.glass-surface {
  position: relative;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface--svg {
  background: rgba(255, 255, 255, var(--glass-frost, 0));
  backdrop-filter: var(--filter-id, none) saturate(var(--glass-saturation, 1));
  -webkit-backdrop-filter: saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px rgba(0, 0, 0, 0.08) inset,
    0 0 10px 4px rgba(0, 0, 0, 0.04) inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05);
}

/* Non-Chromium fallback (Safari/Firefox — see the file-level note above):
   no SVG filter reference support, so this is a plain frosted-glass look
   with no refraction/distortion, closest in spirit to the site's original
   .site-navbar__row treatment it's standing in for. */
.glass-surface--fallback {
  background: rgba(245, 245, 247, 0.55);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(245, 245, 247, 0.85);
  }
}

/* Layout restructure for the glass variant (2026-08-25 follow-up, user
   request): Kontakt separated out to sit beside the glass pill instead of
   inside it, the pill's height matched to Kontakt's, and the first link
   pushed away from the pill's left edge. Everything here is scoped under
   .site-navbar--glass (only present on navbar-glass.php's <header>) so
   components.css's shared .site-navbar__bar/__row/__actions rules — which
   navbar.php (the backup) still relies on as-is — are read but never
   overridden for that variant.
   .site-navbar__bar becomes the flex row that used to live on
   .site-navbar__row (mobile: wraps, actions-first/row-second so Kontakt+
   hamburger show immediately and the pill drops below when opened;
   desktop: side by side, pill first). align-items is left at its flex
   default (stretch, not overridden) specifically so the pill and the
   Kontakt/actions block equalize to whichever is naturally taller —
   self-adjusting if either side's padding changes later, rather than a
   hardcoded height duplicated in two places that could drift out of sync. */
/* Mobile-only Kontakt/logo/hamburger row (2026-09-11, user request) — see
   the markup note in navbar-glass.php. Grid, not flex, so the logo lands
   on the row's true center regardless of Kontakt/hamburger's unequal
   widths: each outer column is 1fr (equal), the middle auto column hugs
   the logo, and justify-self on each item pins it to its own edge. */
.site-navbar__mobile-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

/* Icon-only pill -> square icon button (2026-09-11, user request) — same
   36px box as .site-navbar__toggle beside it (8px padding + a 20px icon,
   see .site-navbar__cta-icon below), scoped to this mobile row only so
   the desktop "Kontakt" text pill (.site-navbar__actions .site-navbar__cta)
   is untouched. white-space/font-size from the base .site-navbar__cta rule
   are harmless leftovers now that there's no text content. */
.site-navbar__mobile-bar .site-navbar__cta {
  justify-self: start;
  padding: 8px;
  border-radius: 8px;
}

.site-navbar__cta-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.site-navbar__mobile-bar .site-navbar__brand {
  justify-self: center;
}

.site-navbar__mobile-bar .site-navbar__toggle {
  justify-self: end;
}

.site-navbar--glass .site-navbar__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.site-navbar--glass .site-navbar__row {
  order: 2;
  flex-basis: 100%;
  justify-content: flex-start;
}

.site-navbar--glass .site-navbar__actions {
  order: 1;
  margin-left: auto;
}

@media (min-width: 992px) {
  .site-navbar--glass .site-navbar__bar {
    flex-wrap: nowrap;
    /* center, not space-between (that pushed Kontakt to the far right
       edge) and not flex-start either (2026-08-25 follow-up: that packed
       the whole [pill + Kontakt] group against the bar's left edge instead
       of centering it as one unit) — center keeps Kontakt close beside the
       pill via the small gap below, with the pair centered as a whole
       within .site-navbar__bar's own (already page-centered) box. */
    justify-content: center;
    gap: 24px;
  }

  .site-navbar--glass .site-navbar__row {
    order: 1;
    flex-basis: auto;
    /* .site-navbar__row is now the Bootstrap collapse target (see
       navbar-glass.php) — its toggle button only exists on mobile
       (.d-lg-none), so nothing ever adds Bootstrap's own .show class at
       this breakpoint; this !important is the same override
       components.css already uses on .site-navbar__links-collapse for
       the identical reason, just moved to whichever element is the
       collapse target in this variant. */
    display: flex !important;
    /* Pushes the first/last link away from the pill's edges (user
       request) — symmetric on both sides (2026-08-25 follow-up: only the
       left side had been added, leaving "Aktualności" flush against the
       right edge). */
    padding-left: 32px;
    padding-right: 32px;
    /* Slightly taller than Kontakt on purpose (2026-08-25 follow-up):
       pixel-equal height (a prior request) reads as visibly SHORTER than
       Kontakt once the glass surface's translucency is added — the eye
       judges a glass pill's apparent edge by its (softer, blurred) content
       contrast, not just its actual box edge, so an identical box height
       looks smaller next to Kontakt's solid, high-contrast fill. 17px (was
       15px) makes the pill ~64px vs. Kontakt's own ~58px — a real, small,
       deliberate difference instead of a coincidental one, tuned to fix
       that specific illusion without becoming visually obvious on its own. */
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .site-navbar--glass .site-navbar__actions {
    order: 2;
    margin-left: 0;
  }
}

/* ---------- Full-screen mobile menu (2026-09-08, user request) ---------- */
/* See Screeny/menu.png for the reference. Independent of the glass-pill
   dropdown above (desktop's #mainNav collapse, untouched) — this is a
   brand-new full-page overlay, mobile-only, opened/closed via
   [data-mobile-menu-toggle] in main.js. Lives in this file (not
   components.css) because it's markup only navbar-glass.php has — the
   plain navbar.php backup doesn't render it at all. */
.site-navbar__toggle-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.site-navbar__toggle-icon--close {
  display: none;
}

.site-navbar__toggle.is-open .site-navbar__toggle-icon--menu {
  display: none;
}

.site-navbar__toggle.is-open .site-navbar__toggle-icon--close {
  display: block;
}

.site-navbar__mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* 2026-10-10 (user request): original 0.85 white kept, plus a backdrop
     blur so the page behind reads as a soft frosted glow instead of text
     competing with the menu (briefly tried 0.96 — owner preferred this). */
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}

/* Hides the real navbar row (Kontakt + the original hamburger-now-X
   button) AND the real logo once the overlay is open (2026-09-08 fix,
   logo added as a follow-up — .site-navbar__brand is a SIBLING of
   .site-navbar__bar, not inside it, so the first pass at this rule missed
   it and the logo still doubled up faintly) — at 85% opacity these were
   still faintly visible THROUGH the overlay, doubling up with its own
   logo+close row sitting on top of the same spot. visibility, not
   display:none, so the header doesn't change height/reflow anything
   underneath while this is toggled. Mobile-only, matching where the
   toggle button itself is only ever clickable.
   .site-navbar__mobile-bar (2026-09-11 follow-up) — Kontakt/logo/hamburger
   moved out of .site-navbar__bar into this new mobile-only row (see
   navbar-glass.php), so it needs the same treatment; without it the real
   Kontakt pill + toggle-now-X icon were showing faintly through the
   overlay, doubled up with the overlay's own close icon. The overlay has
   its own dedicated close button (.site-navbar__mobile-menu__close), so
   hiding the real toggle entirely here doesn't strand the user. */
@media (max-width: 991.98px) {
  body.mobile-menu-open .site-navbar__bar,
  body.mobile-menu-open .site-navbar__brand,
  body.mobile-menu-open .site-navbar__mobile-bar {
    visibility: hidden;
  }
}

/* Opacity fade guarded behind prefers-reduced-motion (2026-09-08 default,
   same convention as .hero-scroll-icon/.finansowanie-steps__item) — under
   reduced motion the menu has no opacity:0 initial state at all, so
   [hidden]'s own display:none is the only thing controlling it (instant
   show/hide, JS skips the matching close delay too — see main.js). */
@media (prefers-reduced-motion: no-preference) {
  .site-navbar__mobile-menu {
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .site-navbar__mobile-menu.is-open {
    opacity: 1;
  }
}

/* Grid layout (2026-09-11 rewrite, user request: "ikona wyjścia z menu w
   tej samej pozycji co ikona hamburger menu") — deliberately mirrors
   .site-navbar__mobile-bar's own 1fr/auto/1fr grid + 16px/20px padding
   exactly, cell for cell (empty left column, logo center, close-button
   right column), instead of the previous flex + absolute-centered-brand
   approach. That earlier version got the horizontal logo centering right
   but left the close button's box (20px, no padding, .section-column's
   32px side padding) structurally different from the real hamburger
   button's box (36px, 8px padding, 20px padding) — close enough to look
   plausible but not pixel-identical, so the icon visibly jumped position
   on open/close. Building this row from the *same* grid recipe as the
   real one guarantees the two buttons land in the exact same spot by
   construction, not by coincidentally matching numbers that could drift
   apart again later. */
.site-navbar__mobile-menu__top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 20px;
}

.site-navbar__mobile-menu__brand {
  grid-column: 2;
  justify-self: center;
}

.site-navbar__mobile-menu__close {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.4);
  color: var(--color-black);
  cursor: pointer;
}

.site-navbar__mobile-menu__close svg {
  width: 20px;
  height: 20px;
}

/* Spacing corrected against Screeny/menu.png (2026-09-08 follow-up — a
   first pass, per Screeny/menudopoprawy.png, read as noticeably more
   compressed than the reference). Was a single uniform flex `gap:40px`
   between .__body's 4 direct children (label, links, and the 2 .__block
   divs) — but that also stretched the "Menu" label's own gap down to its
   links list, which the user never flagged as wrong (56px = the label's
   own 16px margin-bottom + the 40px gap). Restructured so .__label's own
   16px margin-bottom is now the ONLY source of label-to-its-own-content
   spacing everywhere (kept tight, unchanged) — the bigger "start of a new
   section" gaps come from .__block's own margin-top below instead, so the
   two kinds of spacing can be tuned independently. */
.site-navbar__mobile-menu__body {
  padding-top: 60px;
  padding-bottom: 48px;
  display: flex;
  flex-direction: column;
}

.site-navbar__mobile-menu__label {
  margin: 0 0 16px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.site-navbar__mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navbar__mobile-menu__links a {
  display: block;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
}

.site-navbar__mobile-menu__links a.active {
  color: var(--color-primary);
}

/* margin-top (not the old shared flex gap, see .__body above) is what
   creates the bigger "new section" gap above each block — both the
   links-list→Porozmawiajmy and Porozmawiajmy→Social Media gaps come from
   this same rule, since both are ".__block" instances. */
.site-navbar__mobile-menu__block {
  display: flex;
  flex-direction: column;
  margin-top: 68px;
}

.site-navbar__mobile-menu__contact {
  display: block;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--color-black);
  text-decoration: none;
}

.site-navbar__mobile-menu__contact + .site-navbar__mobile-menu__contact {
  margin-top: 8px;
}

/* Inline SVG, not the shared icon-facebook.svg/icon-instagram.svg <img>
   files (2026-09-08, user request: icons should be --color-primary here)
   — those files have fill="white" hardcoded, which an externally
   <img>-referenced SVG can't be restyled past from page CSS at all
   (currentColor inside a file loaded via <img src> resolves against the
   SVG's OWN initial value, not the embedding page's color). Copied the
   same path data inline with fill="currentColor" instead — same
   established pattern as .hero-scroll-icon/the mobile-menu close icon
   above — so `color` here actually works, while the shared .svg files
   (still used as-is by the footer/.hero-socials elsewhere) are untouched. */
.site-navbar__mobile-menu__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* color on the <a> itself, not just the parent (2026-09-08 fix) —
   Bootstrap's default anchor color (blue) sets its own explicit `color`
   on every <a>, which wins over inheriting the parent's color down to the
   SVG's currentColor; setting it here instead is what actually reaches
   the icon. */
.site-navbar__mobile-menu__socials a {
  color: var(--color-primary);
}

.site-navbar__mobile-menu__socials svg {
  display: block;
  width: 36px;
  height: 36px;
}