/* togo-bug-sweep.css
   ─────────────────────────────────────────────────────────────────
   Universal defensive sweep — pakt residual spacing/alignment bugs op
   die door inline styles, browser defaults of CSS-conflicten ontstaan.

   Geladen na alle andere polish-CSS zodat het wint bij gelijke specificity.

   Issues addressed:
   - Section spacing tussen inline `<section style="...">`
   - Centering issues op `<p style="text-align:center">` rows
   - Card alignment in arbitrary grids
   - Image alignment in articles
   - Form fields binnen `<div style="display:grid;">`
   - Inline buttons rows zonder gap
   - Headings zonder consistent margin
   ──────────────────────────────────────────────────────────────── */

/* ── Centered CTA rows: forceer flex + gap + center ── */
p[style*="text-align:center"]:has(> .btn + .btn),
p[style*="text-align: center"]:has(> .btn + .btn),
div[style*="text-align:center"]:has(> .btn + .btn) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px !important;
  margin-block: clamp(16px, 2.5vw, 24px) !important;
}
@media (max-width: 540px) {
  p[style*="text-align:center"]:has(> .btn + .btn),
  p[style*="text-align: center"]:has(> .btn + .btn),
  div[style*="text-align:center"]:has(> .btn + .btn) {
    flex-direction: column;
    align-items: stretch;
  }
  p[style*="text-align:center"]:has(> .btn + .btn) > .btn,
  div[style*="text-align:center"]:has(> .btn + .btn) > .btn {
    width: 100%;
  }
}

/* ── Card grids: gelijke kaart-hoogte sitewide ── */
.grid > .card,
.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card,
.entry-grid > .card {
  display: flex;
  flex-direction: column;
}
.grid > .card .card__body,
.grid-2 > .card .card__body,
.grid-3 > .card .card__body,
.grid-4 > .card .card__body,
.entry-grid > .card .card__body {
  flex: 1;
}

/* ── Images in artikelen / cards: nooit overflow ── */
img:not([class*="logo"]):not([class*="icon"]):not([class*="avatar"]) {
  max-width: 100%;
  height: auto;
}

/* ── Section + inline-styled section: consistent verticaal ritme ── */
section[style*="margin-block"],
section[style*="padding-block"] {
  /* Laat inline styles winnen, maar zorg dat children niet collapsen */
}
main > section + section,
main > .section + .section {
  margin-block-start: 0 !important; /* sections regelen zelf hun padding */
}

/* ── Headings: forceer consistent margin-bottom ── */
h1:not([class]):not([style*="margin"]) { margin: 0 0 clamp(12px, 2vw, 20px); }
h2:not([class]):not([style*="margin"]) { margin: clamp(24px, 4vw, 40px) 0 clamp(10px, 1.5vw, 16px); }
h3:not([class]):not([style*="margin"]) { margin: clamp(20px, 3vw, 28px) 0 clamp(8px, 1.2vw, 12px); }
h4:not([class]):not([style*="margin"]) { margin: clamp(16px, 2.5vw, 24px) 0 8px; }

/* ── Paragraphs in body content ── */
.article-body p,
.prose p,
main > .container > .stack-lg > div > p,
main > section > .container > .stack > p {
  line-height: 1.65;
  margin-block: 0 16px;
}

/* ── Lists in body content ── */
main ul:not([class]):not([role="list"]),
main ol:not([class]):not([role="list"]),
.article-body ul:not([class]),
.article-body ol:not([class]) {
  margin-block: 0 16px;
  padding-inline-start: 22px;
  line-height: 1.65;
}
main ul:not([class]) > li + li,
main ol:not([class]) > li + li,
.article-body ul:not([class]) > li + li,
.article-body ol:not([class]) > li + li {
  margin-top: 6px;
}

/* ── Form rows: consistent stack-spacing ── */
form .form-field + .form-field,
form .field + .field,
form .form-row + .form-row {
  margin-top: clamp(12px, 2vw, 18px);
}
form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 500;
}

/* ── Button rows in success/track pages ── */
.action-row,
.button-row,
.cta-row,
[class*="actions"]:not([class*="__"]) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 540px) {
  .action-row,
  .button-row,
  .cta-row,
  [class*="actions"]:not([class*="__"]) {
    flex-direction: column;
    align-items: stretch;
  }
  .action-row > .btn,
  .button-row > .btn,
  .cta-row > .btn,
  [class*="actions"]:not([class*="__"]) > .btn {
    width: 100%;
  }
}

/* ── Trust pills sitewide consistent gap ── */
.tgp-trust-pills,
.trust-row,
[class*="trust-pills"]:not([class*="__"]) {
  gap: clamp(8px, 1.5vw, 12px);
}

/* ── Card badges: never overflow card ── */
.card .card__badge,
.card .badge,
.card [class*="badge"]:not([class*="__"]) {
  max-width: calc(100% - 16px);
}

/* ── Anchor link icons sitewide ── */
.togo-anchor-link,
.h-anchor {
  opacity: 0;
  transition: opacity 160ms ease;
  margin-left: 6px;
  font-size: 0.8em;
}
h1:hover .togo-anchor-link,
h2:hover .togo-anchor-link,
h3:hover .togo-anchor-link,
h1:focus-within .togo-anchor-link,
h2:focus-within .togo-anchor-link,
h3:focus-within .togo-anchor-link {
  opacity: 1;
}

/* ── Footer column gaps consistent ── */
.site-footer__columns {
  gap: clamp(24px, 4vw, 48px) !important;
}

@media (min-width: 768px) {
  .site-footer__grid {
    gap: clamp(24px, 4vw, 48px) !important;
  }
}

/* ── Sub-nav active/hover consistency op alle pages ── */
.sub-nav a:hover,
.sub-nav a:focus-visible,
[class*="subnav"] a:hover,
[class*="subnav"] a:focus-visible {
  color: var(--color-text);
}

/* ── Stick/sticky elements safe-area ── */
.sticky-bar:not(.pay-sticky-cta),
.sticky-cta:not(.pay-sticky-cta),
[class*="sticky"][class*="bar"]:not(.pay-sticky-cta),
[class*="sticky"][class*="cta"]:not(.pay-sticky-cta) {
  bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Mobile reading width: lange paragraafs niet door breakpoint draaien ── */
@media (max-width: 540px) {
  main .container,
  main > section > .container {
    padding-inline: 16px;
  }
}

/* ── Print: hide UI chrome op alle pages ── */
@media print {
  .site-header,
  .site-footer,
  .togo-cookie-banner,
  .togo-floater,
  .togo-feedback-fab,
  .togo-back-to-top,
  .togo-compare-footer,
  .togo-mobile-nav,
  .tgp-mobile-nav,
  .lang-banner,
  .announcement-bar,
  .sticky-bar,
  .pay-sticky-cta {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  a { text-decoration: underline; color: black; }
  img { max-width: 100%; page-break-inside: avoid; }
}

/* ── Focus-visible sitewide ── */
*:focus-visible {
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Reduced motion respect sitewide ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Stack hub: force equal-height cards in grid-3 (mobile rail) */
@media (max-width: 640px) {
  body[data-page="stacks"] .grid.grid-3 {
    align-items: stretch;
  }
  body[data-page="stacks"] .grid.grid-3 > .card,
  body[data-page="stacks"] .grid.grid-3 > .stack-card {
    display: flex !important;
    flex-direction: column;
    min-height: 140px;
    height: 100%;
  }
  body[data-page="stacks"] .grid.grid-3 .card__body,
  body[data-page="stacks"] .grid.grid-3 .stack-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  body[data-page="stacks"] .grid.grid-3 .card__body-text,
  body[data-page="stacks"] .grid.grid-3 .stack-card__lead {
    flex: 1;
  }
}

/* Account settings cards uniform height */
body[data-page="account"] .acct-settings-grid {
  align-items: stretch;
}
body[data-page="account"] .acct-settings-grid > * {
  display: flex;
  flex-direction: column;
}
body[data-page="account"] .acct-settings-grid > * > * {
  flex: 1;
}

/* Stack-detail tier-cards uniform height */
body[data-page$="-stack"] .tier-grid,
body[data-page$="-stack"] [class*="tier-grid"] {
  align-items: stretch;
}
body[data-page$="-stack"] .tier-card,
body[data-page$="-stack"] [class*="tier-card"] {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
body[data-page$="-stack"] .tier-card__body,
body[data-page$="-stack"] [class*="tier-card__body"] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body[data-page$="-stack"] .tier-card .tier-card__cta,
body[data-page$="-stack"] [class*="tier-card"] [class*="cta"] {
  margin-top: auto;
}

/* Homepage process steps + trust pills uniform heights op mobile */
@media (max-width: 640px) {
  body[data-page="home"] .process-steps {
    align-items: stretch;
  }
  body[data-page="home"] .process-step {
    min-height: 324px;
    display: flex;
    flex-direction: column;
  }
  body[data-page="home"] .process-step__body {
    flex: 1;
  }
  body[data-page="home"] .tgp-trust-pills {
    align-items: stretch;
  }
  body[data-page="home"] .tgp-trust-pills__pill {
    min-height: 90px;
  }
  body[data-page="home"] .trust-stat {
    min-height: 80px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AGGRESSIVE EQUAL-HEIGHT — alle visuele kaart-grids forceren
   gelijke hoogtes via flex-column + flex-grow.
   ═══════════════════════════════════════════════════════════════ */

/* Alle multi-column grids: items stretch */
.grid,
.grid-2, .grid-3, .grid-4,
.entry-grid,
[class*="grid-"]:not([class*="__"]),
[class*="-grid"]:not([class*="__"]) {
  align-items: stretch !important;
}

/* Alle direct-child cards/tiles in grids: flex-column met flex-grow */
.grid > [class*="card"]:not([class*="__"]),
.grid-2 > [class*="card"]:not([class*="__"]),
.grid-3 > [class*="card"]:not([class*="__"]),
.grid-4 > [class*="card"]:not([class*="__"]),
.entry-grid > [class*="card"]:not([class*="__"]),
[class*="-grid"]:not([class*="__"]) > [class*="card"]:not([class*="__"]),
[class*="-grid"]:not([class*="__"]) > [class*="tile"]:not([class*="__"]),
[class*="-grid"]:not([class*="__"]) > [class*="step"]:not([class*="__"]) {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/* Buttons in same actions-row: align center + same height */
.hero__actions,
.cta-row,
.action-row,
.button-row,
[class*="actions"]:not([class*="__"]) {
  align-items: center;
}

/* Text-align center: force balance */
[style*="text-align: center"],
[style*="text-align:center"] {
  text-wrap: balance;
}

/* Sections that follow each other: no compounding margins */
section + section,
.section + .section {
  margin-top: 0 !important;
}

/* Headings in body content: balanced wrap */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* Container internal padding consistency */
.container > .section__head,
.container > .section-head,
.container > .stack-lg,
.container > .stack {
  width: 100%;
}

/* Universal text overflow prevention */
p, li, td, dd, .card__body-text,
[class*="__body"]:not([class*="-body"]),
[class*="__lead"],
[class*="__text"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* All cards: never let absolute children escape */
.card,
[class*="card"]:not([class*="__"]) {
  position: relative;
  overflow: hidden;
}

/* Specifically allow .card__media to NOT be clipped if it has carousel arrows */
.card .card__media,
[class*="card"]:not([class*="__"]) [class*="__media"] {
  overflow: hidden;
  position: relative;
}

/* Product-card media preview is an overlay, not a card container. */
.card .card__media > .togo-card-preview,
.shop-grid .card .card__media > .togo-card-preview,
#category-grid .card .card__media > .togo-card-preview,
.category-top-picks .card .card__media > .togo-card-preview {
  position: absolute !important;
  inset: auto 8px 8px 8px !important;
  max-width: calc(100% - 16px);
  justify-content: flex-end;
  overflow: visible;
}

@media (min-width: 768px) {
  .card .card__media > .togo-card-preview,
  .shop-grid .card .card__media > .togo-card-preview,
  #category-grid .card .card__media > .togo-card-preview,
  .category-top-picks .card .card__media > .togo-card-preview {
    bottom: 34px !important;
  }
}

/* Force consistent gap on horizontal flex rows */
.flex-row,
[class*="row"]:not([class*="__"]):not(td):not(tr),
.actions,
.hero__actions {
  gap: clamp(8px, 1.5vw, 16px);
}

/* Image proper aspect ratios where set inline */
img[width][height]:not([class*="logo"]):not([class*="icon"]) {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}