/* ================================================================
   SECURITY SYSTEMS — PREMIUM UPGRADE LAYER
   Loaded last on every page. Additive only — brand colors & logo
   unchanged. Built with emil-design-eng (easing, press feedback,
   custom curves) + ui-ux-pro-max (a11y focus, perf, motion tokens).
   ================================================================ */

:root {
  /* Custom easing curves — the built-in CSS easings are too weak
     (emil): expo-out for entrances, in-out for on-screen movement. */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;

  /* alias used by some legacy hover rules (was undefined → no-op) */
  --text-light: var(--text-primary);

  /* refined elevation scale (consistent shadows, ux-pro-max) */
  --shadow-1: 0 2px 8px rgba(0,0,0,.30);
  --shadow-2: 0 12px 32px rgba(0,0,0,.40);
  --shadow-3: 0 24px 60px rgba(0,0,0,.50);
}

/* Sticky-header aware anchor scrolling + smooth in-page jumps */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h, 74px) + 14px); }

/* ================================================================
   BUTTONS — specific transitions, press feedback, focus, sheen
   ================================================================ */
.btn {
  border-radius: 999px;   /* full pill — ASNET-grade clean CTA (site-wide) */
  transition:
    transform        var(--dur-base) var(--ease-out),
    box-shadow       var(--dur-base) var(--ease-out),
    background-color  var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    color            var(--dur-base) var(--ease-out);
}
/* Buttons must feel responsive to press (emil) */
.btn:active { transform: scale(0.97); transition-duration: var(--dur-fast); }
.btn-primary:active { transform: scale(0.97); }

/* Premium sheen sweep across the primary CTA on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 32%,
              rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after { transform: translateX(130%); }
}

/* ================================================================
   ACCESSIBILITY — visible keyboard focus ring everywhere
   (ux-pro-max §1 — never remove focus states)
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ================================================================
   HEADER — frosted glass + smooth elevation on scroll
   ================================================================ */
.site-header {
  background: rgba(6, 8, 15, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
/* Fallback for browsers without backdrop-filter — stay opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(6, 8, 15, 0.97); }
}

/* ================================================================
   CARDS — harmonise motion to the premium easing curve
   ================================================================ */
.card, .photo-card {
  transition:
    transform   380ms var(--ease-out),
    box-shadow  380ms var(--ease-out),
    border-color 380ms var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-3), 0 0 0 1px rgba(255,107,0,.14); }

/* ================================================================
   HERO — cinematic staggered load-in (plays once, motion-safe)
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * {
    opacity: 0;
    animation: ss-rise 720ms var(--ease-out) forwards;
  }
  .hero-content > *:nth-child(1) { animation-delay: 60ms; }
  .hero-content > *:nth-child(2) { animation-delay: 140ms; }
  .hero-content > *:nth-child(3) { animation-delay: 220ms; }
  .hero-content > *:nth-child(4) { animation-delay: 300ms; }
  .hero-content > *:nth-child(5) { animation-delay: 380ms; }
  .hero-content > *:nth-child(6) { animation-delay: 460ms; }
}
@keyframes ss-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   LINKS — refined underline reveal on in-content anchors
   (nav/buttons/cards excluded — they carry their own styling)
   ================================================================ */
.article-body a:not(.btn):not(.card-link),
.prose a:not(.btn) {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 260ms var(--ease-out), color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .article-body a:not(.btn):not(.card-link):hover,
  .prose a:not(.btn):hover { background-size: 100% 1.5px; }
}

/* ================================================================
   COMPARISON TABLES — extractable, citable (ai-seo skill)
   dark/orange theme, responsive (scrolls on mobile), a11y headers
   ================================================================ */
.compare-wrap {
  overflow-x: auto;
  margin: 30px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,107,0,.16);
  box-shadow: var(--shadow-2);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
  font-size: .92rem;
}
.compare-table caption {
  text-align: left;
  padding: 16px 18px 4px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.compare-table th, .compare-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.compare-table thead th {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  color: var(--text-primary);
  background: rgba(255,107,0,.08);
  border-bottom: 1px solid rgba(255,107,0,.28);
}
.compare-table thead th:first-child { color: var(--text-muted); }
.compare-table tbody th {
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,.02);
}
.compare-table td { color: var(--text-muted); }
.compare-table tbody tr { transition: background var(--dur-base) var(--ease-out); }
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th { background: rgba(255,107,0,.045); }
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-bottom: none; }

/* ================================================================
   CINEMATIC ENGINE — pre-hide reveal targets ONLY when JS+motion on
   (html.cin-on is set by cinematic.js; no-JS/reduced-motion = visible)
   ================================================================ */
html.cin-on [data-reveal],
html.cin-on [data-reveal-group] > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.cin-on [data-reveal],
  html.cin-on [data-reveal-group] > * { opacity: 1 !important; }
}

/* ================================================================
   IMAGE RENDERING — crisp scaling for the logo raster
   ================================================================ */
.logo img, .site-logo img { image-rendering: -webkit-optimize-contrast; }

/* ================================================================
   REDUCED MOTION — reinforce for legacy pages lacking the guard
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content > * { opacity: 1; animation: none; }
  .btn-primary::after { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   PREMIUM HEADER & NAVIGATION  (site-wide; overrides base style.css)
   Owner: current menu "nie premium". Root fixes: oversized logo (96px)
   + tall bar (110px) read dated; flat dropdowns; cheap text caret.
   Motion = emil-design-eng (ease-out, transform/opacity, press);
   pattern = ui-ux-pro-max nav (pill hover + material mega-menu).
   Reduced-motion + mobile handled. --hdr-h drives scroll-padding above.
   ================================================================ */
:root { --hdr-h: 94px; }

/* material: refined glass + hairline + soft separation shadow */
.site-header {
  background: linear-gradient(180deg, rgba(9,12,21,.82) 0%, rgba(6,8,15,.62) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
  border-bottom: 1px solid rgba(255,255,255,.05);
  box-shadow: none;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* elevate only after scrolling (JS toggles .scrolled) — ASNET-style lift */
.site-header.scrolled {
  background: linear-gradient(180deg, rgba(9,12,21,.94) 0%, rgba(7,9,16,.9) 100%);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 34px -20px rgba(0,0,0,.85);
}
.site-header .container { height: var(--hdr-h); gap: 30px; }

/* logo — the REAL tight WEBP (padding cropped) via background-image, HEADER
   only (footer keeps its own), proportions locked by aspect-ratio. Desktop
   height fits the nav; mobile bumps it up. Unified mobile↔desktop. */
.site-header .logo {
  display: block; height: 46px; aspect-ratio: 1781 / 360;
  background: url("../img/logo-horizontal-tight.webp") left center / contain no-repeat;
  transition: opacity .25s var(--ease-out);
}
.site-header .logo:hover { opacity: .86; }
.site-header .logo .logo-full, .site-header .logo .logo-compact { display: none !important; }

/* nav links: refined tracking + Linear-style pill hover/active */
.main-nav > ul { gap: 4px; }
.main-nav > ul > li > a {
  display: inline-flex; align-items: center;   /* caret (::before, order:9) sits AFTER the label */
  font-size: .76rem;
  letter-spacing: 1.1px;
  color: var(--text-secondary);
  padding: 9px 15px;
  border-radius: 10px;
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.main-nav > ul > li > a:hover { color: var(--text-primary); background: rgba(255,255,255,.055); }
.main-nav > ul > li > a.active { color: var(--text-primary); background: rgba(255,107,0,.12); }
/* retire the base full-width underline — the pill replaces it */
.main-nav a.active::after, .main-nav li:hover > a::after { display: none !important; }

/* dropdown caret: crisp CSS chevron that rotates open */
.has-dropdown > a::before {
  content: "";
  width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  display: inline-block; transform: translateY(-2px) rotate(45deg);
  opacity: .55; transition: transform .26s var(--ease-out), opacity .2s, border-color .2s;
  order: 9;   /* keep caret last even when the mobile row is a flex layout */
}
.has-dropdown:hover > a::before,
.has-dropdown.open > a::before { transform: translateY(1px) rotate(225deg); opacity: 1; border-color: var(--accent); }

/* dropdown panels: elevated surface + SOFT shadow + air (ASNET-clean) */
.dropdown, .dropdown-mega {
  background: #171d2a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.78);
  top: calc(100% + 12px);
  transform: translateY(8px);
  transition: opacity .2s var(--ease-out), transform .24s var(--ease-out), visibility .2s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:hover .dropdown-mega { transform: translateY(0); }

/* dropdown items: calm, restrained highlight (no slide) */
.dropdown li a, .dropdown-col ul li a {
  display: block;
  padding: 10px 12px; border-radius: 10px;
  font-size: .82rem; letter-spacing: .3px; text-transform: none; color: var(--text-secondary);
  transition: color .16s var(--ease-out), background-color .16s var(--ease-out);
}
.dropdown li a:hover, .dropdown-col ul li a:hover {
  background: rgba(255,107,0,.09); color: var(--accent);
}

/* mega-menu: airy columns, no hard dividers, muted titles */
.dropdown-mega { min-width: 780px; padding: 16px; }
.dropdown-mega-cols { gap: 22px; }
.dropdown-mega-top {
  border-radius: 10px; color: var(--text-primary); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 10px;
  transition: background-color .16s var(--ease-out);
}
.dropdown-mega-top:hover { background: rgba(255,107,0,.09); color: var(--accent); }
.dropdown-mega-top svg { color: var(--accent); }
.dropdown-col + .dropdown-col { border-left: none; padding-left: 0; }
.dropdown-col-title {
  color: var(--text-muted); opacity: .9;
  font-size: .64rem; letter-spacing: 1.6px; padding: 6px 12px 8px;
}

/* header CTA: match the slimmer bar */
.header-cta .btn { padding: 10px 22px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .dropdown, .dropdown-mega { transition: opacity .01ms, visibility .01ms; transform: none; }
  .dropdown li a:hover, .dropdown-col ul li a:hover { transform: none; }
  .has-dropdown > a::before, .logo, .main-nav > ul > li > a { transition: none; }
}

/* MOBILE (<=860px): premium glass sheet + animated hamburger→X */
@media (max-width: 860px) {
  .main-nav {
    top: var(--hdr-h);
    bottom: auto;
    height: calc(100vh - var(--hdr-h));
    height: calc(100dvh - var(--hdr-h));   /* stretch reliably (top+bottom didn't) + mobile chrome-safe */
    background: #080b12;                    /* fully opaque — no hero bleed-through */
    padding: 22px 22px 44px;
  }
  .main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.06); }
  .main-nav > ul > li > a { font-size: .95rem; letter-spacing: 1px; padding: 15px 4px; border-radius: 0; }
  .main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { background: transparent; color: var(--accent); }
  .dropdown, .dropdown-mega { transform: none; box-shadow: none; border: none; background: transparent; border-radius: 0; padding: 2px 0 8px 14px; }
  .dropdown::before, .dropdown-mega::before { display: none; }
  /* stack the mega-menu categories vertically on mobile (were overflowing) */
  .dropdown-mega-cols { flex-direction: column; gap: 0; }
  .dropdown-col { min-width: 0; }
  .dropdown-col + .dropdown-col { border-left: none; margin-top: 4px; }
  .dropdown-col-title { padding-left: 4px; margin-top: 6px; }
  .header-cta-mobile .btn { border-radius: 12px; padding: 15px 20px; }
  /* animated hamburger → X (JS toggles .nav-toggle.open) */
  .nav-toggle span { transition: transform .28s var(--ease-out), opacity .18s var(--ease-out); transform-origin: center; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ================================================================
   MOBILE MENU — clean premium: REAL logo + hierarchy + left accent.
   (Icons removed: their data-URI backgrounds tiled/ghosted in the
   embedded preview and were never requested; clean text reads premium
   and renders reliably. Can re-add later as inline SVG in the HTML.)
   ================================================================ */
@media (max-width: 860px) {
  /* mobile has NO nav bar (hamburger) → room for a big logo. Taller header
     so the real wordmark + the "Bezpieczeństwo bez kompromisów" tagline are
     both readable (owner: "masz dużo miejsca, wykorzystaj je"). */
  :root { --hdr-h: 86px; }
  /* Owner: "logo jest święte — use the real PNG, recompose tight into a new
     WEBP." Done: `logo-horizontal-tight.webp` is the REAL logo with its ~50%
     black padding cropped off. Shown via background-image so there is NO
     per-page HTML edit (a real file, not a data-URI → reliable). Height tuned
     down (owner: "za duże"); aspect-ratio keeps the exact proportions. */
  .site-header .logo { height: 56px; max-width: 82vw; }

  .main-nav > ul > li > a {
    display: flex; align-items: center;
    padding: 16px 4px;
    font-size: 1rem; font-weight: 500;
    border-left: 2px solid transparent;
    transition: color .18s var(--ease-out), border-color .18s var(--ease-out), padding-left .18s var(--ease-out);
  }
  .main-nav > ul > li > a:hover, .main-nav > ul > li > a.active { border-left-color: var(--accent); padding-left: 10px; }
  /* caret (::before) sits at the far right of the flex row */
  .has-dropdown > a::before { margin-left: auto; float: none; }

  /* calmer sub-items in the expanded panels */
  .dropdown li a, .dropdown-col ul li a { padding: 11px 12px; font-size: .92rem; }
  .dropdown-col-title { font-size: .66rem; }
}