/* ============================================================
   eVolpe AI — Additional CSS for WordPress (Kadence)
   ============================================================
   Drop this whole file into:
     Appearance → Customize → Additional CSS
   OR
     Kadence Settings → Custom CSS
   OR (recommended) save as `style-evolpe.css` in your child theme
     and enqueue with wp_enqueue_style().

   It does three things:
     1. Self-hosts the four brand font files.
     2. Re-declares the design tokens as CSS custom properties
        (in case theme.json isn't picked up by all blocks).
     3. Adds utility classes used by the block patterns
        (.evolpe-eyebrow, .evolpe-grad-text, .evolpe-btn-primary, etc).
   ============================================================ */

/* ---------- 1. Fonts (self-hosted) ----------
   Upload these .woff2 files from `wordpress/fonts/` into your
   WP Media Library, then update the url() paths below to point
   at /wp-content/uploads/<year>/<month>/<file>.woff2
   OR drop them into a `fonts/` folder inside your child theme
   and reference them with theme_dir relative paths.

   The url() below assume the latter (child-theme fonts/ folder). */
@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/quicksand-400.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/quicksand-500.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/quicksand-600.woff2') format('woff2'); }
@font-face { font-family: 'Quicksand';  font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/quicksand-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist';      font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/geist-300.woff2') format('woff2'); }
@font-face { font-family: 'Geist';      font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist';      font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Geist';      font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Geist';      font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-mono-500.woff2') format('woff2'); }

/* ---------- 2. Design tokens ---------- */
:root {
  /* Brand */
  --ev-brand-indigo:       #785EFF;
  --ev-brand-magenta:      #9E37B7;
  --ev-brand-violet:       #8B47DB;
  --ev-brand-violet-deep:  #6B2DA8;
  --ev-brand-violet-soft:  #B988E4;
  --ev-grad-mark:          linear-gradient(95deg, #785EFF 0%, #9E37B7 100%);
  --ev-grad-mark-diagonal: linear-gradient(135deg, #785EFF 0%, #9E37B7 100%);

  /* Ink */
  --ev-ink-900: #0B0B14;
  --ev-ink-700: #2A2A3A;
  --ev-ink-500: #5A5A6E;
  --ev-ink-300: #A4A4B5;
  --ev-ink-100: #E5E5EC;

  /* Paper */
  --ev-paper-0:   #FFFFFF;
  --ev-paper-50:  #FAFAF7;
  --ev-paper-100: #F4F2EC;
  --ev-paper-200: #ECE9E1;
  --ev-paper-line:#E4E1D7;

  /* Night */
  --ev-night-0:   #07060F;
  --ev-night-50:  #0E0B1C;
  --ev-night-100: #15112A;
  --ev-night-200: #1F1A3A;
  --ev-night-line:#2A2350;

  /* Semantic */
  --ev-risk-500: #DC2626;
  --ev-risk-50:  #FEF2F2;
  --ev-info-50:  #F4EBFB;
  --ev-ok-500:   #16A34A;
  --ev-ok-50:    #ECFDF3;
  --ev-warn-500: #D08400;
  --ev-warn-50:  #FFF6E5;

  /* Type */
  --ev-font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ev-font-display: 'Quicksand', var(--ev-font-sans);
  --ev-font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  /* Motion */
  --ev-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ev-t-fast:    120ms;
  --ev-t-base:    200ms;
  --ev-t-slow:    400ms;
}

/* ---------- 3. Global resets / element defaults ---------- */
body {
  font-family: var(--ev-font-sans);
  color: var(--ev-ink-900);
  background: var(--ev-paper-50);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
a  { color: var(--ev-brand-violet); text-underline-offset: 3px; }
a:hover { color: var(--ev-brand-violet-deep); }
::selection { background: rgba(139, 71, 219, 0.22); color: var(--ev-ink-900); }

/* ---------- 4. Utility classes used by block patterns ---------- */

/* Eyebrow — used above section headlines */
.evolpe-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ev-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.evolpe-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Brand gradient text */
.evolpe-grad-text {
  background: var(--ev-grad-mark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons — primary uses gradient, secondary is paper-card */
.evolpe-btn-primary,
.wp-block-button.is-style-evolpe-primary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--ev-font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  background: var(--ev-grad-mark);
  color: #fff;
  border: 0;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(11,11,20,0.06), 0 6px 16px -6px rgba(120, 94, 255, 0.45);
  transition: filter var(--ev-t-fast) var(--ev-ease-out), box-shadow var(--ev-t-fast) var(--ev-ease-out), transform var(--ev-t-fast) var(--ev-ease-out);
}
.evolpe-btn-primary:hover,
.wp-block-button.is-style-evolpe-primary .wp-block-button__link:hover {
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(11,11,20,0.06), 0 8px 20px -6px rgba(120, 94, 255, 0.55);
}
.evolpe-btn-primary:active,
.wp-block-button.is-style-evolpe-primary .wp-block-button__link:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.evolpe-btn-secondary,
.wp-block-button.is-style-evolpe-secondary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  font-family: var(--ev-font-sans);
  font-weight: 500;
  font-size: 14px;
  background: var(--ev-paper-0);
  color: var(--ev-ink-900);
  border: 1px solid var(--ev-paper-line);
  text-decoration: none;
  transition: border-color var(--ev-t-fast) var(--ev-ease-out);
}
.evolpe-btn-secondary:hover,
.wp-block-button.is-style-evolpe-secondary .wp-block-button__link:hover {
  color: var(--ev-ink-900);
  border-color: var(--ev-ink-700);
}

/* Pill / chip — used for pricing chips and badges */
.evolpe-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-info-50);
  color: var(--ev-brand-violet-deep);
  font-family: var(--ev-font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.evolpe-pill.is-dark    { background: var(--ev-ink-900); color: #fff; }
.evolpe-pill.is-risk    { background: var(--ev-risk-50); color: var(--ev-risk-700, #9B1C1C); }
.evolpe-pill.is-ok      { background: var(--ev-ok-50);   color: var(--ev-ok-700, #0F6E3C); }
.evolpe-pill.is-warn    { background: var(--ev-warn-50); color: var(--ev-warn-700, #8A4B00); }

/* Tier card with flagship ring */
.evolpe-tier-card {
  background: var(--ev-paper-0);
  border: 1px solid var(--ev-paper-line);
  border-radius: 12px;
  padding: 28px 24px 24px;
  position: relative;
}
.evolpe-tier-card.is-flagship {
  border: 1.5px solid var(--ev-brand-violet);
  box-shadow: 0 16px 32px -10px rgba(139, 71, 219, 0.22);
}
.evolpe-tier-card.is-flagship::before {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--ev-ink-900);
  color: #fff;
  font-family: var(--ev-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Numbered phase card — methodology timeline */
.evolpe-phase-card {
  background: var(--ev-paper-0);
  border-radius: 8px;
  border: 1px solid var(--ev-paper-line);
  padding: 20px 18px 22px;
}
.evolpe-phase-card .evolpe-phase-num {
  font-family: var(--ev-font-mono);
  font-size: 36px;
  line-height: 1;
  color: var(--ev-brand-violet);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Dark section helper — for AI Act + footer */
.evolpe-dark {
  background: var(--ev-night-50);
  color: #F4F2EC;
}
.evolpe-dark h1, .evolpe-dark h2, .evolpe-dark h3,
.evolpe-dark h4, .evolpe-dark h5, .evolpe-dark h6 { color: #FAFAF7; }
.evolpe-dark .evolpe-eyebrow { color: rgba(244,242,236,0.55); }
.evolpe-dark a { color: #fff; }

/* Trust strip (mono labels in a horizontal row) */
.evolpe-trust-strip {
  border-top: 1px solid var(--ev-paper-line);
  padding-top: 24px;
  font-family: var(--ev-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ev-ink-500);
}

/* Big stat number */
.evolpe-stat-num {
  font-family: var(--ev-font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.022em;
  line-height: 1;
}

/* ---------- 5. Block style registrations (visible in editor) ---------- */
/* These class names are referenced by `block-styles.php` (see INSTALL.md) */

.is-style-evolpe-pillar-divider > .wp-block-column:not(:first-child) {
  border-left: 1px solid var(--ev-paper-line);
  padding-left: 36px;
}
.is-style-evolpe-pillar-divider > .wp-block-column:not(:last-child) {
  padding-right: 36px;
}

/* ---------- 6. Header (sticky, blurs on scroll) ---------- */
.site-header { transition: background var(--ev-t-base), border-color var(--ev-t-base); border-bottom: 1px solid transparent; }
body.is-scrolled .site-header {
  background: rgba(250, 250, 247, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--ev-paper-line);
}

/* ---------- 7. Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 71, 219, 0.35);
  border-radius: 2px;
}

/* ---------- 8. Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .wp-block-button { display: none !important; }
  .evolpe-dark { background: #fff !important; color: #000 !important; }
  .evolpe-grad-text { color: #6B2DA8 !important; -webkit-text-fill-color: #6B2DA8; background: none !important; }
}

/* ---------- 9. Ukrycie domyślnej stopki Kadence ([0.4.6]) ----------
   Stopkę renderuje shortcode [evolpe_footer] przez hook wp_footer (inc/footer-shortcode.php).
   Domyślny footer Kadence (#colophon / .site-footer) chowamy — nasza stopka ma własną
   klasę .evolpe-site-footer, więc ta reguła jej nie dotyczy. */
footer#colophon,
.site-footer {
  display: none !important;
}
/* =========================================================================
   §10 — Site header (hook wp_body_open, [0.4.7])
   Pivot z Kadence Header Buildera (jak §9/footer). Wartości 1:1 ze specu
   kadence-header-footer-builder.json (DS v3.1.1). Scroll-state: body.is-scrolled.
   ========================================================================= */
/* Domyślny header Kadence — ukryty (sibling naszego; wzorzec §9). */
#masthead { display: none !important; }
.evolpe-site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--ev-t-base), border-color var(--ev-t-base);
}
body.admin-bar .evolpe-site-header { top: 32px; }
body.is-scrolled .evolpe-site-header {
  background: rgba(250, 250, 247, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: #E4E1D7;
}
.evolpe-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 88px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.evolpe-header-logo { display: flex; align-items: center; text-decoration: none; }
.evolpe-header-logo img {
  height: 32px; width: auto; display: block;
  transition: height var(--ev-t-base);
}
body.is-scrolled .evolpe-header-logo img { height: 28px; }
.evolpe-header-nav .evolpe-header-menu {
  display: flex; align-items: center; gap: 32px;
  list-style: none; margin: 0; padding: 0;
}
.evolpe-header-nav .evolpe-header-menu li { margin: 0; }
.evolpe-header-nav .evolpe-header-menu a {
  font-family: 'Geist', sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  color: #0B0B14; text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.evolpe-header-nav .evolpe-header-menu a:hover {
  color: #6B2DA8;
  border-bottom-color: currentColor;
}
/* Dropdowny 2. poziomu — ukryte do czasu hubów (P2+); itemy top-level wystarczą. */
.evolpe-header-nav .evolpe-header-menu .sub-menu { display: none; }
.evolpe-header-actions { display: flex; align-items: center; gap: 16px; }
/* [0.4.9] Logo i actions NAD drawerem (wspólny stacking context headera):
   drawer = fixed z-index 9990; rodzeństwo bez z-indexu malowało się pod nim
   => na mobile otwartego menu nie dało się zamknąć burgerem. */
.evolpe-header-logo,
.evolpe-header-actions { position: relative; z-index: 9995; }
.evolpe-header-cta { white-space: nowrap; }
/* Burger — widoczny tylko mobile. */
.evolpe-nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.evolpe-nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: #0B0B14; border-radius: 1px;
  transition: transform var(--ev-t-base), opacity var(--ev-t-base);
}
body.evolpe-nav-open .evolpe-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.evolpe-nav-open .evolpe-nav-toggle span:nth-child(2) { opacity: 0; }
body.evolpe-nav-open .evolpe-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
  .evolpe-header-inner { height: 64px; padding: 0 16px; }
  .evolpe-header-logo img { height: 28px; }
  .evolpe-nav-toggle { display: flex; }
  .evolpe-header-nav {
    display: none;
    position: fixed; inset: 0;
    z-index: 9990;
    padding: 96px 24px 32px;
    background: rgba(250, 250, 247, 0.96);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    overflow-y: auto;
  }
  body.evolpe-nav-open .evolpe-header-nav { display: block; }
  body.evolpe-nav-open { overflow: hidden; }
  .evolpe-header-nav .evolpe-header-menu {
    flex-direction: column; align-items: flex-start; gap: 20px;
  }
  .evolpe-header-nav .evolpe-header-menu a {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.012em;
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .evolpe-header-cta { display: none; } /* CTA zostaje w drawerze przyszłych iteracji; pasek = logo + burger. */
}
@media print {
  .evolpe-site-header { display: none !important; }
}
/* =========================================================================
   §11 — Wrappery iframe (Klasa B, phase2-handoff §3.2, [0.4.7])
   ========================================================================= */
.evolpe-mautic-form-wrapper {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 24px;
}
.evolpe-mautic-form-wrapper iframe {
  width: 100%;
  border: 0;
  min-height: 280px;
}
.evolpe-google-map-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--paper-100);
}
.evolpe-google-map-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.evolpe-calendly-inline-wrapper {
  position: relative;
  width: 100%;
  min-height: 680px;
  background: var(--wp--preset--color--paper-50);
  border: 1px solid var(--wp--preset--color--paper-line);
  border-radius: 12px;
  overflow: hidden;
}
.evolpe-calendly-inline-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   §12 — Ukrycie page-title bandu Kadence na froncie ([0.4.10])
   Front page (.home) ma pełnoekranowy hero (pattern 01) — Kadence drukował
   page-title „Home" jako band nad hero (duplikat H1 + zbędny pasek).
   Scope .home: inner pages zachowują pasek tytułu. Defensywnie pokrywa oba
   układy tytułu Kadence (Above Content / In Content). Selektory stabilne
   w Kadence 1.x; gate vr-shot na DEV potwierdza przed cutoverem.
   evolpe-front-title-hide
   ========================================================================= */
body.home .entry-hero-container-inner,
body.home .content-container > .entry-header,
body.home header.entry-header > .entry-title,
body.home .page-title.entry-header {
  display: none !important;
}

/* =========================================================================
   §13 — Tier-card CTA: stop pionowego łamania linku w wąskiej karcie ([0.4.11])
   Pattern 03-tiers: dolny wiersz karty = flex space-between [chip | link].
   Chip .evolpe-pill ma white-space:nowrap (sztywny ~190px); link bez nowrap
   ma zapadające się min-width (overflow-wrap z motywu) => w wąskiej karcie
   (4 kolumny na tablecie) link ściśnięty do ~1 znaku, łamie się pionowo.
   Fix: link nowrap (zostaje w linii) + wiersz flex-wrap:wrap (za ciasno =>
   chip i link na osobnych liniach, nie kolaps). flex-wrap/white-space nie są
   ustawione inline w patternie => reguła działa bez !important.
   Scope .evolpe-tier-card: zero kolateralu na inne linki.
   evolpe-tier-cta-fix
   ========================================================================= */
.evolpe-tier-card a[href] { white-space: nowrap; }
.evolpe-tier-card > div:last-child { flex-wrap: wrap; row-gap: 10px; }

/* =========================================================================
   §14 — Równe wysokości kart + dolne wyrównanie CTA ([0.4.12])
   .evolpe-tier-card/.evolpe-phase-card nie miały height:100% => nie wypełniały
   rozciągniętej kolumny (align-items:stretch domyślne w .wp-block-columns) =>
   nierówne doły kafelków. Fix: height:100% + flex-column; CTA (ostatni div karty
   tier: chip+link) na dół przez margin-top:auto => wspólny baseline CTA.
   evolpe-card-equal-height
   ========================================================================= */
.evolpe-tier-card,
.evolpe-phase-card { height: 100%; display: flex; flex-direction: column; }
.evolpe-tier-card > div:last-child { margin-top: auto; }

/* =========================================================================
   §15 — Ukrycie bandu page-title Kadence na stronach z własnym hero ([0.4.12])
   ZASTĘPUJE §12 (był .home-only i ukrywał tylko .entry-hero-container-inner/
   .entry-title => zostawiał wysokość outer .entry-hero = pusta przestrzeń na
   froncie; na podstronach band w ogóle widoczny). §15 ukrywa też outer
   .entry-hero => znika wysokość. Scope 5 page-id (Home 921, Methodology 917,
   Audit 918, Transformation 919, Contact 920) => blog/legacy/Terms/Privacy
   nietknięte. <h1> tytułu zostaje w DOM (ukryty) — świadomy kompromis launchu.
   §12 staje się redundantny (zostaje, nieszkodliwy; sprzątnięcie po launchu).
   evolpe-pagetitle-band-hide
   ========================================================================= */
.page-id-921 .entry-hero, .page-id-921 .entry-hero-container-inner, .page-id-921 .content-container > header.entry-header,
.page-id-917 .entry-hero, .page-id-917 .entry-hero-container-inner, .page-id-917 .content-container > header.entry-header,
.page-id-918 .entry-hero, .page-id-918 .entry-hero-container-inner, .page-id-918 .content-container > header.entry-header,
.page-id-919 .entry-hero, .page-id-919 .entry-hero-container-inner, .page-id-919 .content-container > header.entry-header,
.page-id-920 .entry-hero, .page-id-920 .entry-hero-container-inner, .page-id-920 .content-container > header.entry-header {
  display: none !important;
}

/* =========================================================================
   §16 — Rezerwacja wysokości fixed headera pod bandem tytułu ([0.5.1])
   Header (§10) jest position:fixed i NIC nie rezerwuje jego wysokości.
   Pięć stron z własnym hero wygląda dobrze wyłącznie dlatego, że §15 chowa
   im band, a ich pierwsza sekcja niesie własne padding-top. Każda pozostała
   strona (Thank you 933/934, Privacy, Terms, Company, Services, Approach)
   wsuwa band pod header: .entry-hero.page-hero-section .entry-header ma
   min-height:200px i wyśrodkowany <h1> 72px, więc tytuł startuje ~63px od
   góry przy headerze zajmującym 0–88px => nachodzenie na menu.

   Kadence MA na to własną regułę, ale jest bezwładna:
     .transparent-header .entry-hero .entry-hero-container-inner{padding-top:80px}
   wisi na klasie body, której Kadence nadaje tylko własnemu headerowi —
   a my go zastąpiliśmy (#masthead display:none w §10), więc klasa nigdy nie
   powstaje. Celujemy w TEN SAM element, domykając intencję motywu zamiast
   z nim walczyć. Wartości 1:1 z §10 (88px / 64px), nie 80px Kadence'a.

   Scope: .entry-hero renderuje się na KAŻDEJ stronie (zmierzone 8/8), ale
   na stronach z §15 jest display:none !important => reguła jest tam
   bezwładna i pięć stron z hero zostaje nietkniętych.
   Specyficzność body ... (0,3,1) > wariant transparent-header (0,3,0), więc
   wygrywa niezależnie od kolejności enqueue — i pozostaje poprawna, gdyby
   klasa transparent-header kiedyś jednak powstała.
   evolpe-header-offset
   ========================================================================= */
body .entry-hero .entry-hero-container-inner { padding-top: 88px; }

@media (max-width: 960px) {
  body .entry-hero .entry-hero-container-inner { padding-top: 64px; }
}

/* =========================================================================
   §17 — Odstępy na mobile ([0.5.3])
   Dwa defekty znalezione empirycznie na 375px (Chrome MCP, computed styles
   zmierzone bezpośrednio, nie wrażenie wizualne).

   Defekt A: sekcja .evolpe-dark (pattern 17-high-risk-callout, "AI Act
   enforcement...") ma na checkliście 6 pozycji inline
   `display:grid; grid-template-columns:1fr 1fr` — 2 kolumny niezależnie od
   szerokości ekranu. Na 375px kolumna ma ~128px, więc długie słowa
   ("documentation", "anonymization") łamią się w środku wyrazu (zmierzone:
   "System documentati|on", "Data anonymizatio|n (Presidio)"). Pattern
   ustawia wartość inline => override wymaga !important (ta sama zasada co
   §13/§15: nadpisujemy tylko tam, gdzie pattern faktycznie ustawia inline).

   Defekt B: widget antyspamowy Cap (custom element `cap-widget`, Shadow DOM)
   na formularzach 918/920 ma inline `--cap-widget-width:330px`. Host
   respektuje `max-width:100%` (zmierzone: 246px szerokości na 375px
   viewport, prawa krawędź w granicach ekranu), ale wewnętrzny <div> w Shadow
   DOM trzyma się sztywnych 330px niezależnie od hosta => treść (label
   "Confirm you are human" + atrybucja "Cap") wychodzi poza widoczny
   kontener, ucięta na prawej krawędzi. Custom properties przenikają Shadow
   DOM mimo enkapsulacji stylów, więc nadpisanie `--cap-widget-width` z
   zewnątrz działa: zmierzone po zmianie na `100%` — wewnętrzny div spada do
   246px, zero ucinania (zweryfikowane też wizualnie, tekst "Cap" w całości
   widoczny w obrębie ramki widgetu).

   evolpe-mobile-spacing
   ========================================================================= */
@media (max-width: 600px) {
  .evolpe-dark [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .mautic-cap-captcha-wrapper cap-widget {
    --cap-widget-width: 100% !important;
  }
}
