/* Universal Dypilon Navy Footer — live chrome for every frontend surface.

   MODULE 3b (Brave-UI 2026 "Footer Cards" rework, superseding the single-row
   Module 3 layout): the footer is no longer one continuous row of brand /
   badges / legal text. It is now 4 independent floating "cards" inside the
   Navy footer band — brand, trust-signals, legal links, AI ledger — mirroring
   the Brave new-tab-page widget row (STATS / NEWS / VPN) the user referenced.
   Each card keeps its EXACT original class name (.dyp-footer__brand,
   .dyp-footer__badges, .dyp-footer__legal, .dyp-footer__ledger) so the
   existing report-canvas privacy-hardening rule (bottom of this file) and
   every translations.js selector keep working unchanged — only the visual
   treatment + internal layout direction changed. */
.dyp-footer {
  --rv1-navy: #0b1f3a;
  /* Module 3: copyright + Swiss claim recoloured from Tailwind slate-300
     (#cbd5e1) to slate-400 (#94a3b8) for a more discreet, elitaire tone —
     single variable, cascades to every consumer (.dyp-footer__copy,
     .dyp-footer__swiss, .dyp-footer__muted). */
  --dyp-footer-muted: #94a3b8;
  --dyp-footer-gold: #d4af37;
  /* Module 3c (user-requested contrast flip): the BAND behind the 4 cards
     is now the site's V6 Paper tone (#fbfaf7 — identical token used on the
     homepage, frontend/concepts/v6/v6.css --paper), while each individual
     card keeps its solid Dypilon Navy fill. "Navy badges on a paper band"
     reads calmer and more premium than navy-on-navy. Do NOT change the
     colour INSIDE the cards — only this outer band. */
  --dyp-footer-card-bg: #0b1f3a;
  --dyp-footer-card-border: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: 1.35rem 0;
  background: #fbfaf7;
  color: #0b1f3a;
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.35;
  flex-shrink: 0;
  border-top: 1px solid rgba(11, 31, 58, 0.08);
  -webkit-font-smoothing: antialiased;
}

.dyp-footer *,
.dyp-footer *::before,
.dyp-footer *::after {
  box-sizing: border-box;
}

body:has(> .dyp-footer) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:has(> .dyp-footer) > .dashboard,
body.dashboard-v1-body:has(> .dyp-footer) > .dv1-shell {
  flex: 1 1 auto;
  min-height: 0;
}

body.dashboard-v1-body:has(> .dyp-footer) .dv1-shell {
  min-height: 0;
}

/* ── The 4-card row — Brave-widget equal tiles ──
   User request: all 4 badges the same size (Brave STATS/NEWS/VPN row).
   CSS grid with 4 equal tracks + stretch is the measured way to force
   identical width AND height regardless of content length. Flex-basis
   264px still let the legal card render narrower than the ledger card. */
.dyp-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0 2rem;
}

/* Shared Brave-widget card chrome — every direct child of .dyp-footer__inner
   (.dyp-footer__brand / .dyp-footer__badges / .dyp-footer__ledger /
   .dyp-footer__legal) gets this via the universal child selector, so no
   extra classes had to be added in the 10 HTML sources beyond what already
   existed.
   User-requested fix: all 4 cards must render at the exact same size (the
   Brave reference has 3 equal cards). A content-based flex-basis
   (flex: 1 1 230px) let unequal text lengths pull cards to different final
   widths (measured: legal ~200px vs ledger ~281px). Switching to a FIXED
   flex-basis with grow/shrink disabled (flex: 0 1 264px) forces every card
   to the same 264px width regardless of its content — text simply wraps
   inside that fixed box. align-items: stretch (above) makes every card in
   the same row match the tallest card's height too, exactly like the Brave
   3-widget row. Because these cards are NOT flex-grow, when 2 of them are
   hidden on the report canvas (see report-canvas rule below) the remaining
   2 stay their normal fixed size and simply re-centre — no more
   half-empty-row artefact that a flex-grow or CSS-grid approach would
   have produced. */
.dyp-footer__inner > * {
  background: #0b1f3a;
  background: var(--dyp-footer-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 1px solid var(--dyp-footer-card-border);
  border-radius: 14px;
  padding: 0.95rem 1.15rem;
  min-width: 0;
  width: auto;
  height: 100%;
  box-sizing: border-box;
}

/* Source-order safety: Privacy/Legal is always visual slot 4 so
   Data-processing (slot 2) sits directly beside In-cooperation (slot 3),
   even on pages whose HTML still lists legal before ledger. */
.dyp-footer__brand { order: 1; }
.dyp-footer__badges { order: 2; }
.dyp-footer__ledger { order: 3; }
.dyp-footer__legal { order: 4; }

/* ── Card 1: Brand (logo / copyright / Swiss claim) ── */
.dyp-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.dyp-footer__logo {
  display: block;
  height: 60px;
  width: auto;
  flex: none;
}

.dyp-footer__copy {
  margin: 0;
  color: #94a3b8;
  color: var(--dyp-footer-muted);
  font-weight: 500;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Module 3 — Swiss Bank Guarantee claim, same discreet slate-400 tone as
   the copyright line right above it, sitting in the brand card. */
.dyp-footer__swiss {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #94a3b8;
  color: var(--dyp-footer-muted);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  white-space: normal;
  overflow-wrap: break-word;
}

.dyp-footer__swiss::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23FF0000'/%3E%3Crect x='13' y='6' width='6' height='20' fill='%23fff'/%3E%3Crect x='6' y='13' width='20' height='6' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Card 2: Trust signals — vertical list of icon-badge + label rows
   (was a 2-column grid; a single card column reads far cleaner). ── */
.dyp-footer__badges {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  color: #ffffff;
}

.dyp-footer__badge {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  column-gap: 0.55rem;
  align-items: center;
  width: 100%;
  color: #ffffff;
  text-align: left;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.28;
}

/* 2026 icon badge — small squircle, thin gold line-art icon, subtle glow.
   Replaces the previous emoji glyph (🇪🇺 ⚖️ 🔒 🛡️) with hand-drawn SVG
   pictograms in the same visual language as the AI Ledger logos below,
   inspired by the reference "Access Control / Fingerprint / Key Card /
   CCTV" squircle badges (thin gold outline on a dark facet, no solid
   colour fill, no emoji). */
.dyp-footer__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

.dyp-footer__badge-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: #d4af37;
  stroke: var(--dyp-footer-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2.5px rgba(212, 175, 55, 0.55));
}

.dyp-footer__badge-text {
  display: block;
  text-align: left;
  line-height: 1.28;
}

/* Shared 2026 gold outline icon — same stroke language as footer badges.
   Used on trust labels, payment chrome, forensic locks, and voice buttons
   so leftover emoji (🔒 🛡️ 💳 🇪🇺 ⚖️ 📞) never reappear. */
.dyp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}
.dyp-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: #d4af37;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dyp-icon--lg svg {
  width: 1.35rem;
  height: 1.35rem;
}
.dyp-icon--facet {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

/* ── Card 3: Legal links — vertical list (was a 2x2 grid with vertical
   divider borders that assumed an inline row; a stacked card list is
   both simpler and matches the other 3 cards' rhythm). ── */
.dyp-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: #ffffff;
}

.dyp-footer__legal-item {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.dyp-footer__legal a.dyp-footer__legal-item:hover,
.dyp-footer__legal a.dyp-footer__legal-item:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dyp-footer__muted {
  color: #cbd5e1;
  color: var(--dyp-footer-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: default;
}

@media (max-width: 1100px) {
  .dyp-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dyp-footer__inner {
    padding: 0 1.25rem;
    grid-template-columns: 1fr;
  }

  .dyp-footer__inner > * {
    width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .dyp-footer__brand {
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MODULE 3 — AI Ledger card content (icon + name rows, same rhythm as
   the trust-badge card for visual consistency across all 4 cards).
   ══════════════════════════════════════════════════════════════════ */
.dyp-footer__ledger {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: #94a3b8;
  color: var(--dyp-footer-muted);
}

.dyp-footer__ledger-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: normal;
  color: #94a3b8;
  color: var(--dyp-footer-muted);
}

.dyp-footer__ledger-logos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dyp-footer__ai-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #94a3b8;
  color: var(--dyp-footer-muted);
  white-space: nowrap;
}

.dyp-footer__ai-icon {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  box-sizing: border-box;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  padding: 0.42rem;
  fill: none;
  stroke: #d4af37;
  stroke: var(--dyp-footer-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2.5px rgba(212, 175, 55, 0.55));
}

.dyp-footer__ai-logo-text {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Privacy hardening: on an active report canvas (/results/ with
   ?scanresult= or ?product=, flagged by dypilon-footer.js via the
   .dyp-footer--report-canvas class) the trust-signals card AND the legal
   card are fully, irrevocably removed from the render tree — not just
   locked to plain text — for a clean, distraction-free canvas. The brand
   card and the AI Ledger card stay. Homepage and every non-report surface
   keep all 4 cards visible and clickable, unaffected by this rule.
   Selectors are unchanged from Module 3 (.dyp-footer__badges /
   .dyp-footer__legal) — only their visual treatment became "card-shaped"
   above, so this rule keeps working with zero JS changes. */
.dyp-footer--report-canvas .dyp-footer__badges,
.dyp-footer--report-canvas .dyp-footer__legal {
  display: none !important;
}

/* Conversion funnel — scan results (free AND paid), checkout and
   confirmation carry NO footer at all. From the scan panel through to the
   confirmation the user must not be offered a single exit; the whole band
   goes, not just the badge + legal cards the report-canvas rule above
   removes. The dashboard is deliberately NOT in this set: once someone has
   paid, the footer is normal chrome again. Set as a static class in each
   page's own HTML rather than by path-sniffing JS, so the band never
   flashes in before a script can hide it. */
.dyp-footer--funnel-hidden {
  display: none !important;
}

/* Chat-FAB safe zone. The Personal Protection Advisor button is
   position:fixed bottom-right at z-index 250 (styles.css .ai-chat-widget),
   and the legal card is the rightmost card — so at the bottom of the page the
   pill sat on top of the last legal links. Measured at 1920x1080: the FAB
   occupied y 1020-1056 while "Algemene Voorwaarden" (y 1022-1036) and
   "Cookiebeleid" (y 1045-1060) fell underneath it, making both unclickable
   (document.elementFromPoint returned the FAB, not the anchor).
   The FAB sits at most 1.5rem from the bottom and is ~2.25rem tall, so
   reserving 4.75rem of footer padding keeps every link clear of it with
   room to spare. Raising the footer's z-index instead would only move the
   problem onto the FAB. Scoped with :has() so pages without the widget keep
   their compact footer. */
body:has(.ai-chat-fab) .dyp-footer {
  padding-bottom: 4.75rem;
}

/* Two remaining cards (brand + ledger) stay equal-sized, not stretched
   across the full paper band. */
.dyp-footer--report-canvas .dyp-footer__inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 36rem;
  margin-inline: auto;
}

/* German Zero-Scroll compression — footer sits below the fold already so
   this is a light touch, not a hard requirement, but keeps the longer
   German copy from stretching the cards unnecessarily tall on laptops. */
.lang-de .dyp-footer__ledger-label,
.lang-de .dyp-footer__badge {
  font-size: 0.68rem;
}
.lang-de .dyp-footer__ai-logo-text {
  font-size: 0.68rem;
}

@media print {
  .dyp-footer.no-print,
  .no-print {
    display: none !important;
  }
}