/* ==========================================================================
   Royal Casino (royalcasino1.com.pl) — main.css
   Consumes ONLY tokens from tokens.css. No magic values.
   Mobile-first. Breakpoints: 360 (base), 768, 1200 (= --container-max).
   Rule 1 (static-site-layout skill): text carries NO width limit — only
   .container does. Rule 2: offer/step/review cards are summaries, sized as
   flex components, not article columns.
   ========================================================================== */

/* --------------------------------------------------------------------
   0. Reset / base
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, table { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text-primary); line-height: var(--line-height-tight); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* Defensive: some real page content is an unbreakable single token — most
   notably the bare domain "royalcasino1.com.pl" inside legal-page H1s
   ("Regulamin serwisu royalcasino1.com.pl"). At the large H1 display size
   that token alone is wider than a 390px viewport with no space to wrap
   on, forcing document-level horizontal overflow (H-SCROLL). Since the
   width of the container itself is never reduced by this rule (Rule 1,
   static-site-layout skill), allowing a long unbroken word to wrap is the
   correct fix, not a text-measure regression. */
h1, h2, h3, h4, p { overflow-wrap: break-word; }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--color-gold-500); color: var(--color-text-on-gold);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  z-index: var(--z-modal); transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------
   1. Container — the ONLY width limit on the site
   -------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}
@media (min-width: 768px) { .container { padding-inline: var(--container-padding-tablet); } }
@media (min-width: 1200px) { .container { padding-inline: var(--container-padding-desktop); } }

section { padding-block: var(--space-8); }
section .lede { font-size: var(--font-size-lede); color: var(--color-text-secondary); margin-top: var(--space-3); }
section > .container > h2 { margin-bottom: var(--space-2); }
section > .container > h2 + .lede { margin-bottom: var(--space-6); }
section > .container > h2:last-child { margin-bottom: 0; }
.section-alt { background: var(--color-bg-secondary); }

/* --------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-width-frame) solid transparent;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  white-space: normal;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-text-on-gold);
  border-color: var(--color-gold-500);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-gold-600); border-color: var(--color-gold-600); }
.btn-primary:active { background: var(--color-gold-700); border-color: var(--color-gold-700); }

.btn-outline {
  background: transparent;
  color: var(--color-text-on-dark-primary);
  border-color: var(--color-gold-300);
}
.btn-outline:hover { background: rgba(247, 242, 231, 0.08); }

.btn-outline-light {
  background: transparent;
  color: var(--color-emerald-700);
  border-color: var(--color-emerald-700);
}
.btn-outline-light:hover { background: var(--color-emerald-100); }

.btn-block { width: 100%; }

/* --------------------------------------------------------------------
   3. Chips / badges
   -------------------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}
.chip-on-dark {
  background: rgba(247, 242, 231, 0.08);
  border: 1px solid var(--color-border-gold-on-dark);
  color: var(--color-text-on-dark-primary);
}
.chip-emerald {
  background: var(--color-emerald-100);
  color: var(--color-emerald-700);
}

.badge-featured {
  align-self: flex-start;
  display: inline-flex;
  background: var(--color-wine-500);
  color: var(--color-text-on-wine);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: black;
  border-bottom: 1px solid var(--color-border-subtle);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height-mobile);
}
@media (min-width: 768px) {
  .site-header .container { min-height: var(--header-height-desktop); }
  /* --header-h tracks the ACTUAL rendered header height (min-height + 1px
     border-bottom above). Overridden at this exact breakpoint — the only
     place .site-header's own height changes — so the anchor scroll-offset
     fix below never drifts out of sync with it. 84 + 1 = 85px, matching
     QA's measured desktop header height. */
  :root { --header-h: 85px; }
}

/* Anchor scroll offset (QA defect #1 fix): .site-header is `position:
   sticky; top: 0`, so an in-page jump to any of these ids would otherwise
   land the section's own top — and the H2 right at its start — directly
   under the header, fully hidden. scroll-margin-top pushes the browser's
   scroll target down by the header's actual rendered height (--header-h,
   kept in sync with the header across the 768px breakpoint above) plus a
   small visual gap so the heading doesn't sit flush against the header
   edge. Applied to the exact elements that carry these ids (all are
   <section id="…">, verified against index.html) — not globally. Works
   for both instant and `scroll-behavior: smooth` jumps (none set on this
   project, but the property is behavior-agnostic either way). */
#o-royal-casino,
#bonus,
#platnosci,
#gry,
#rejestracja,
#logowanie,
#opinie,
#faq {
  scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

.brand-lockup { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-shrink: 1; }
.brand-emblem { flex-shrink: 0; }
.brand-wordmark {
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  font-size: var(--font-size-sm); color: var(--color-emerald-800);
  white-space: normal;
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.nav-primary { display: none; }
@media (min-width: 768px) {
  .nav-primary { display: block; flex: 1 1 auto; min-width: 0; }
  .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
  .nav-links a {
    font-family: var(--font-heading); font-size: var(--font-size-sm);
    color: white;
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
  }
  .nav-links a:hover { color: var(--color-emerald-600); }
}
/* QA defect #2: at exactly 768px the 6-item nav-links row (24px gap) is
   ~27px wider than the space left over from brand-lockup + header-actions,
   so the last item ("FAQ") wraps onto a second line — no horizontal
   scroll, purely a visual wrap. Narrowing the inter-item gap only inside
   this tight band (768-899px, the first ~132px of the desktop-menu range,
   before the container naturally grows enough to fit the full 24px gap)
   closes that ~27px deficit without touching font-size, padding, the
   burger breakpoint, or anything at ≥900px where the original gap already
   fits. */
@media (min-width: 768px) and (max-width: 899px) {
  .nav-links { gap: var(--space-4); }
}

.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; } }

/* Mobile menu — native <details>/<summary>, no JS required */
.nav-toggle-wrap { position: relative; }
@media (min-width: 768px) { .nav-toggle-wrap { display: none; } }

.nav-toggle-wrap > summary {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  color: var(--color-emerald-800);
  cursor: pointer;
  list-style: none;
}
.nav-toggle-wrap > summary::-webkit-details-marker { display: none; }
.nav-toggle-wrap > summary::marker { content: ""; }

.mobile-nav-panel {
  /* Fixed to the viewport (not absolute inside .nav-toggle-wrap): the
     toggle's own containing block only shrink-wraps the burger button, so
     left:0/right:0 against it produced a panel narrower than the screen
     and pushed its full-width children (.btn-block) off the right edge. */
  position: fixed; top: var(--header-height-mobile); right: 0; left: 0;
  max-height: calc(100vh - var(--header-height-mobile));
  overflow-y: auto;
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-md);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-5) var(--container-padding-mobile) var(--space-6);
  flex-direction: column; gap: var(--space-4);
  z-index: var(--z-header);
  /* display defaults to none here and is only switched on for the [open]
     state below. Native <details> hides closed non-summary content via
     content-visibility (modern Chromium), not plain display:none — an
     unconditional `display: flex` on this rule fought that mechanism and
     left the closed panel in a half-collapsed state with a stray
     ~40px-wide box (matching the summary button's own box) that produced
     an H-SCROLL at 390px on pages tall enough to trigger it. Scoping
     `display` strictly to `[open]` avoids fighting the browser's own
     collapse behaviour instead of trying to override it. */
  display: none;
}
.nav-toggle-wrap[open] .mobile-nav-panel { display: flex; }
.mobile-nav-links { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-nav-links a {
  display: block; padding: var(--space-3) 0;
  font-family: var(--font-heading); font-size: var(--font-size-md);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------
   5. Hero (dark emerald bookend band)
   -------------------------------------------------------------------- */
.hero {
  background: var(--color-bg-inverse);
  border-top: 1px solid var(--color-border-gold-on-dark);
  padding-block: var(--space-7);
}
@media (min-width: 768px) { .hero { padding-block: var(--space-9); } }

/* Named "-layout", not "-grid": this is an emblem+text hero component (an
   icon column beside a taller copy column, by design — see templates.md
   §2), not a repeating card grid. audit_layout.py's LOPSIDED-GRID check
   targets `[class*="-grid"]` as a proxy for "offer/review/step card grid"
   (skill Rule 2); applying that card-uniformity heuristic to a
   fixed two-slot icon+heading hero produced a false positive. The actual
   visual-balance fix is align-items: center below, which vertically
   centers the short emblem against the tall text column instead of
   pinning it to the top with dead space beneath it. */
.hero-layout {
  display: flex; flex-direction: column; gap: var(--space-5);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .hero-layout { flex-direction: row; align-items: center; gap: var(--space-7); }
  .hero-emblem-wrap { flex: 0 0 auto; }
  .hero-content { flex: 1 1 auto; min-width: 0; }
}

.hero-emblem-wrap {
  display: flex; justify-content: center;
  filter: drop-shadow(var(--shadow-candlelight));
}
.hero-emblem-wrap svg { width: 72px; height: 84px; }
@media (min-width: 768px) { .hero-emblem-wrap svg { width: 96px; height: 112px; } }

.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-on-dark-primary);
  font-size: var(--font-size-display-mobile);
  line-height: var(--line-height-tight);
}
@media (min-width: 1200px) { .hero h1 { font-size: var(--font-size-display-desktop); } }

.hero-lede {
  font-size: var(--font-size-lede);
  color: var(--color-text-on-dark-secondary);
  line-height: var(--line-height-normal);
  margin-top: var(--space-4);
}

.hero .chip-row { margin-top: var(--space-5); }

.hero-actions {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 480px) { .hero-actions { flex-direction: row; flex-wrap: wrap; } }

/* --------------------------------------------------------------------
   6. Generic flex "card row" — used for bonus / payments / providers /
   reviews / steps. Flexbox (not grid auto-fit) per pipeline convention:
   avoids the orphaned-last-row artifact on variable item counts.
   -------------------------------------------------------------------- */
.card-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
}

/* --------------------------------------------------------------------
   7. Bonus section
   -------------------------------------------------------------------- */
.bonus-grid { align-items: stretch; margin-top: var(--space-6); }
.bonus-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  flex: 1 1 320px;
  max-width: 420px;
}
.bonus-card--featured {
  border: var(--border-width-frame) solid var(--color-gold-500);
  box-shadow: var(--shadow-md);
}
.bonus-card h3 { font-size: var(--font-size-lg); }
.bonus-figure { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--color-emerald-700); }
.bonus-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.bonus-terms { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.bonus-terms dt { color: var(--color-text-muted); }
.bonus-terms dd { color: var(--color-text-primary); font-weight: var(--font-weight-medium); margin: 0; }

.bonus-card-cta { margin-top: auto; align-self: stretch; }

.bonus-details, .section-details { margin-top: var(--space-8); }
.bonus-details h3, .section-details h3 { margin-bottom: var(--space-3); }
.bonus-details p, .section-details p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.bonus-details p + p, .section-details p + p { margin-top: var(--space-3); }

/* Multi-paragraph body copy directly under an H2 (no dedicated H3), e.g.
   #o-royal-casino. No max-width — Rule 1, static-site-layout skill. */
.section-prose p { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); margin-top: var(--space-3); }
.section-prose p:first-child { margin-top: 0; }
section > .container > h2 + .section-prose { margin-top: var(--space-3); }

.terms-table { margin-top: var(--space-5); font-size: var(--font-size-sm); }
.terms-table th, .terms-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
}
.terms-table th { background: var(--color-bg-secondary); font-family: var(--font-heading); }

/* --------------------------------------------------------------------
   8. Payment / provider tiles
   -------------------------------------------------------------------- */
.payment-grid { margin-top: var(--space-6); }
.payment-tile {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  flex: 1 1 140px;
  max-width: 180px;
}
.payment-tile span {
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
  text-align: center;
}

/* reserved for future provider-logos section — not used by any current
   page. Shares the .payment-tile visual language (tile card, centered
   icon+label) so a future "Dostawcy gier" grid under #gry can reuse it
   without redesign. Flagged clean in tech-SEO audit 2026-08-11, minor #2:
   intentionally kept, not dead weight to delete on next pass. */
.provider-grid { margin-top: var(--space-6); }
.provider-tile {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  flex: 1 1 140px;
  max-width: 180px;
}
.provider-tile span {
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
  text-align: center;
}
.provider-tile .provider-mark {
  width: 100%; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-emerald-100);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
}

.chip-row.game-categories { margin-top: var(--space-6); }

/* --------------------------------------------------------------------
   9. Step lists (rejestracja / logowanie)
   -------------------------------------------------------------------- */
.step-list { margin-top: var(--space-6); align-items: stretch; }
.step-item {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  flex: 1 1 220px;
  max-width: 280px;
}
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-emerald-800);
  color: var(--color-text-on-dark-primary);
  font-family: var(--font-heading); font-weight: var(--font-weight-semibold);
}
.step-item h3 { font-size: var(--font-size-md); }
.step-item p { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* --------------------------------------------------------------------
   10. Opinie (reviews)
   -------------------------------------------------------------------- */
.review-grid { align-items: stretch; margin-top: var(--space-6); }
.review-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  flex: 1 1 300px;
  max-width: 380px;
}
.review-head { display: flex; align-items: center; gap: var(--space-3); }
.avatar-initial {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--color-emerald-200); color: var(--color-emerald-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-weight-semibold); font-family: var(--font-heading);
}
.review-name { font-weight: var(--font-weight-semibold); }
.star-rating { display: flex; gap: 2px; margin-top: var(--space-1); }
.star-rating svg { width: 16px; height: 16px; }
.star-rating svg.is-filled { fill: var(--color-gold-500); }
.star-rating svg.is-empty { fill: none; stroke: var(--color-border-default); stroke-width: 1; }
.review-text { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.review-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* --------------------------------------------------------------------
   11. FAQ — <details>/<summary>, no JS dependency
   -------------------------------------------------------------------- */
.faq-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
}
.faq-question {
  font-family: var(--font-heading); font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
  padding-block: var(--space-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }
.faq-question .faq-chevron { flex-shrink: 0; color: var(--color-emerald-600); transition: transform var(--transition-base); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-4);
}

/* --------------------------------------------------------------------
   11b. Inline Responsible Gambling note (landing page body, above the
   updated block — separate from the footer .rg-panel, no own H2/anchor)
   -------------------------------------------------------------------- */
.rg-inline-strip { background: var(--color-bg-tint-emerald); padding-block: var(--space-6); }
.rg-inline-note { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); text-align: center; }
.rg-inline-note a { color: var(--color-text-link); text-decoration: underline; }

/* --------------------------------------------------------------------
   12. Updated block
   -------------------------------------------------------------------- */
.updated-strip {
  background: var(--color-bg-secondary);
  border-top: 3px solid var(--color-emerald-600);
  padding-block: var(--space-5);
}
.updated-block { display: flex; align-items: flex-start; gap: var(--space-3); }
.updated-icon { flex-shrink: 0; color: var(--color-emerald-600); }
.updated-block p { font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: var(--line-height-relaxed); }
.updated-block time { font-weight: var(--font-weight-medium); }
.updated-note { color: var(--color-text-secondary); }

/* --------------------------------------------------------------------
   13. Footer (second dark bookend)
   -------------------------------------------------------------------- */
.site-footer {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-dark-secondary);
  padding-block: var(--space-8);
}
.footer-top {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-on-dark-subtle);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-2); }
.footer-brand .brand-wordmark { color: var(--color-text-on-dark-primary); }
/* No max-width here: Rule 1 (static-site-layout skill) — text carries no
   width limit of its own, only .container does. An earlier draft of this
   rule capped the tagline at 560px, which would fail NARROW-TEXT once the
   full footer copy (not just a one-line strapline) was assembled. */
.footer-tagline { color: var(--color-text-on-dark-secondary); font-size: var(--font-size-sm); }

.rg-panel {
  margin-top: var(--space-6);
  background: var(--color-bg-inverse-raised);
  border-left: 4px solid var(--color-compliance-border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex; gap: var(--space-3); align-items: flex-start;
  flex-wrap: wrap;
}
.rg-panel svg { flex-shrink: 0; color: var(--color-compliance-border); }
.rg-panel-body { flex: 1 1 260px; min-width: 0; }
.rg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-compliance-badge-bg); color: var(--color-compliance-badge-text);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-compliance-badge);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}
.rg-panel p { color: var(--color-compliance-text); font-size: var(--font-size-compliance); line-height: var(--line-height-relaxed); }
.rg-panel a { color: var(--color-compliance-link); text-decoration: underline; }

.footer-cols {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-7);
}
.footer-col { flex: 1 1 200px; min-width: 0; }
.footer-col-title {
  font-family: var(--font-heading); font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-text-on-dark-muted); margin-bottom: var(--space-3);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: var(--color-text-link-on-dark); }
.footer-col a:hover { color: var(--color-text-link-on-dark-hover); }
.footer-col p { color: var(--color-text-on-dark-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }

.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-on-dark-subtle);
  color: var(--color-text-on-dark-muted);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------
   14. Legal pages
   -------------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  padding-top: var(--space-6);
}
.breadcrumbs a { color: var(--color-text-link); }
.breadcrumbs a:hover { color: var(--color-text-link-hover); }

.legal-page h1 { margin-top: var(--space-3); font-size: var(--font-size-3xl); }
.legal-page .lede { margin-bottom: var(--space-6); }
.legal-page h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-default);
  font-size: var(--font-size-xl);
}
.legal-page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--space-6); }
.legal-page p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: var(--line-height-relaxed); }
.legal-page table { margin-top: var(--space-4); font-size: var(--font-size-sm); }
.legal-page th, .legal-page td { text-align: left; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); }
.legal-page th { background: var(--color-bg-secondary); font-family: var(--font-heading); }
.legal-page { padding-bottom: var(--space-8); }

/* --------------------------------------------------------------------
   15. 404 page
   -------------------------------------------------------------------- */
.error-page {
  background: var(--color-bg-secondary);
  min-height: 60vh;
  display: flex; align-items: center;
  padding-block: var(--space-9);
}
.error-page-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.error-page .brand-emblem { opacity: 0.4; width: 64px; height: 74px; }
.error-page h1 { font-family: var(--font-display); font-size: var(--font-size-3xl); }
.error-page p { color: var(--color-text-secondary); font-size: var(--font-size-lede); max-width: none; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }

/* --------------------------------------------------------------------
   16. Cookie banner (RODO) — non-blocking, dismissible bottom strip
   -------------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  background: var(--color-bg-inverse);
  color: var(--color-text-on-dark-secondary);
  padding: var(--space-4);
  box-shadow: var(--shadow-dark-lg);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: var(--container-max); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
}
.cookie-banner-text { flex: 1 1 320px; font-size: var(--font-size-sm); color: var(--color-text-on-dark-secondary); }
.cookie-banner-text a { color: var(--color-text-link-on-dark); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cookie-btn {
  font-family: var(--font-heading); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); cursor: pointer;
}
.cookie-btn-minimal { border: 1px solid var(--color-border-on-dark-default); color: var(--color-text-on-dark-primary); }
.cookie-btn-accept { background: var(--color-gold-500); color: var(--color-text-on-gold); }