/* ============================================================================
 * marketing-mobile.css — BoekEerlijk Mobile Design System v1
 * ----------------------------------------------------------------------------
 * Loaded by 38 static marketing pages in /public/.
 * MUST be the LAST CSS asset in <head> (after all inline <style> blocks)
 * so this layer overrides page-level styles without !important warfare.
 *
 * Scope: 360-430px primary, 431-600px secondary, 601-700px nav transition.
 * Desktop (>=701px) is untouched — pages still render exactly as before.
 *
 * NOT loaded by widget.html (per memory/feedback_widget_untouchable.md)
 * or admin SPA (index.html).
 *
 * Audit gates:
 *   tests/unit/marketing-mobile-system-fence.test.js (static, regex)
 *   tests/unit/marketing-mobile-layout.test.js       (Playwright, runtime)
 *
 * Inject via: scripts/inject-marketing-mobile-system.mjs
 * Last update: v2.1 — 2026-05-15
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Design tokens — single source of truth
 * ------------------------------------------------------------------------ */
:root {
  /* Brand */
  --ink: #1d1814;
  --ink-soft: #3d342d;
  --ink-muted: #5f554c;
  --ink-faint: #8a7e74;
  --warm: #fff7ea;
  --warm-line: #e8d5a8;
  --warm-faint: #f0e8d8;
  --accent: #8f6f17;
  --accent-soft: #ecd6a3;
  --gold: #f2ddb0;
  --bg: #fdfaf3;
  --paper: #ffffff;

  /* Type scale */
  --text-xs: 0.82rem;
  --text-sm: 0.92rem;
  --text-base: 1.05rem;
  --text-lg: 1.18rem;
  --text-xl: 1.45rem;
  --text-2xl: 1.9rem;
  --text-3xl: 2.4rem;

  /* Spacing */
  --mobile-page-padding: clamp(1rem, 4vw, 1.35rem);
  --mobile-section-gap: 3rem;
  --mobile-card-radius: 18px;

  /* Tap-target minimums (per founder spec) */
  --mobile-tap-cta: 48px;
  --mobile-tap-nav: 44px;
  --mobile-tap-footer: 40px;
}

/* ---------------------------------------------------------------------------
 * Defensive baseline — applies at every viewport
 * (iframe height: auto is INTENTIONALLY NOT here per v2.1 lock #7)
 * ------------------------------------------------------------------------ */
html, body { overflow-x: hidden; }       /* failsafe only; real check is Playwright scrollWidth */
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 0; }    /* scoped — no global height: auto */
table { max-width: 100%; }

/* Comparison-table scroll wrapper (used on all tables) */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin: 1rem 0 2rem;
}
.table-scroll-wrap > table {
  width: max-content;        /* v2 lock #8 — load-bearing for real horizontal scroll */
  min-width: 100%;
}

/* Mobile-only blocks — base visibility set FIRST, @media overrides come later.
 * (Cascade order matters: same-specificity later rules win, so the base
 *  visibility must precede the mobile @media block.) */
.mobile-compare-cards { display: none; }
.hero-demo-mobile { display: none; }
.hero-demo-desktop { display: block; }

/* ---------------------------------------------------------------------------
 * MOBILE NAV (<= 700px) — sticky logo + primary CTA + <details> menu
 * Replaces horizontal-scroll nav per v2 lock #2.
 * ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  html { scroll-padding-top: 82px; }      /* v2.1 #6 — anchor offset under sticky nav */

  nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem var(--mobile-page-padding);
    background: rgba(255, 250, 243, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(74, 57, 42, 0.09);
    text-align: left;                    /* override desktop center-align */
  }

  /* Existing desktop nav-links hidden on mobile */
  nav.site-nav .nav-links { display: none !important; }

  /* Brand on mobile: tighter. !important needed because page-level inline CSS
   * uses `nav.site-nav a.brand` (higher specificity by one element selector). */
  nav.site-nav a.brand,
  nav.site-nav .brand {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.4rem !important;
    font-size: 1.2rem !important;
  }
  nav.site-nav a.brand span,
  nav.site-nav .brand span {
    display: none !important;            /* hide "RESERVEREN VOOR DE HORECA" tagline on mobile */
  }

  /* Mobile-only primary CTA (injected by script) */
  .mobile-nav-cta {
    min-height: var(--mobile-tap-nav);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
  }
  .mobile-nav-cta:hover { color: #ffffff; text-decoration: none; }

  /* Mobile-only details menu (injected by script) — anchor for the panel */
  .mobile-menu { position: relative; }   /* v2.1 #1 */
  .mobile-menu > summary {
    min-height: var(--mobile-tap-nav);
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--warm-line);
    background: var(--paper);
    list-style: none;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary::after {
    content: '☰';
    font-size: 1rem;
    line-height: 1;
    color: var(--accent);
  }
  .mobile-menu[open] > summary::after { content: '✕'; }

  .mobile-menu-panel {
    position: absolute;
    right: 0;                            /* v2.1 #1 — align to button, NOT page edge */
    top: calc(100% + 0.5rem);
    width: min(82vw, 320px);
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    background: var(--paper);
    border: 1px solid var(--warm-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(29, 24, 20, 0.14);
  }
  .mobile-menu-panel a {
    min-height: var(--mobile-tap-nav);
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
  }
  .mobile-menu-panel a:hover { background: var(--warm); color: var(--ink); text-decoration: none; }
  .mobile-menu-panel a.primary { color: var(--accent); }
  .mobile-menu-panel a.active { color: var(--ink); background: var(--warm); }
}

/* Hide mobile-only nav additions on desktop */
@media (min-width: 701px) {
  .mobile-nav-cta { display: none !important; }
  .mobile-menu { display: none !important; }
}

/* ---------------------------------------------------------------------------
 * MOBILE TYPOGRAPHY + LAYOUT (<= 600px)
 * ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  body {
    font-size: var(--text-base);
    line-height: 1.65;
    overflow-wrap: break-word;
  }

  main, main.container, .container {
    padding-left: var(--mobile-page-padding);
    padding-right: var(--mobile-page-padding);
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    hyphens: auto;                       /* Dutch compound words break at proper points */
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-top: 3.25rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
  h3 {
    font-size: 1.15rem;
    line-height: 1.25;
  }
  p, li {
    font-size: var(--text-base);
    line-height: 1.65;
  }

  /* Section rhythm — subtle divider between back-to-back sections */
  section, .section {
    padding-block: 2.75rem;
  }
  section + section,
  .section + .section {
    border-top: 1px solid rgba(74, 57, 42, 0.09);
  }

  /* Cards — softened on mobile */
  .card, .feature-card, .pricing-card, .comparison-card {
    border-radius: 20px;
    padding: 1.25rem;
  }

  /* ---- CTAs — buttons that look like buttons ---- */
  a.cta, .cta, .cta-light, .cta-outline, .cta-dark,
  .cta-block a, .cta-row a, .read-link, .hero-actions a,
  .pricing-cta a {
    min-height: var(--mobile-tap-cta);
    padding: 0.95rem 1.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 800;
    line-height: 1.2;
  }

  .cta-row, .cta-block, .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .cta-row a, .cta-block a, .hero-actions a { width: 100%; }

  /* ---- Trust + press strip — readable but quiet ---- */
  .trust-row {
    gap: 0.6rem 1rem;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
  }
  .press-strip { font-size: 0.88rem; }
  .press-strip__label { font-size: 0.82rem; }   /* v2.1 #5 — must stay >=13px */

  /* ---- Comparison-table scroll affordance ---- */
  .table-scroll-wrap::after {
    content: '← veeg om te vergelijken →';
    display: block;
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    font-size: var(--text-xs);
    color: var(--ink-faint);
    background: var(--warm);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    pointer-events: none;
  }

  /* ---- Mobile comparison cards (used on prijzen + beste-… pages) ---- */
  .mobile-compare-cards {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  .mobile-compare-cards article {
    background: var(--paper);
    border: 1px solid var(--warm-line);
    border-radius: var(--mobile-card-radius);
    padding: 1.25rem;
  }
  .mobile-compare-cards article h3 {
    margin: 0 0 0.5rem;
    font-size: var(--text-lg);
  }
  .mobile-compare-cards article .price {
    font-family: Fraunces, serif;
    font-size: var(--text-2xl);
    color: var(--accent);
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.1;
  }
  .mobile-compare-cards article .tagline {
    color: var(--ink-muted);
    font-size: var(--text-base);
    margin: 0 0 0.8rem;
  }
  .mobile-compare-cards article ul {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
  }
  .mobile-compare-cards article ul li {
    padding: 0.4rem 0;
    font-size: var(--text-base);
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-bottom: 1px solid var(--warm-faint);
  }
  .mobile-compare-cards article ul li:last-child { border-bottom: none; }
  .mobile-compare-cards article ul li::before {
    content: '✓';
    color: var(--accent);
    font-weight: 800;
    flex-shrink: 0;
  }

  /* prijzen.html: hide the desktop table on mobile (cards REPLACE it) */
  .desktop-compare-table.compare-table-replace { display: none; }

  /* ---- Hero replacement on home.html ---- */
  .hero-demo-mobile {
    display: block;
    margin-top: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--warm-line);
    border-radius: var(--mobile-card-radius);
    padding: 1.25rem;
  }
  .hero-demo-mobile .eyebrow {
    font-size: var(--text-xs);
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
  }
  .hero-demo-mobile h2 {
    margin: 0 0 1rem;
    font-size: var(--text-lg);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .hero-demo-mobile img {
    width: 100%;
    max-width: 360px;
    border-radius: var(--mobile-card-radius);
    box-shadow: 0 12px 30px rgba(29, 24, 20, 0.12);
  }
  .hero-demo-mobile .demo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    min-height: var(--mobile-tap-nav);
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
  }

  .hero-demo-desktop { display: none; }
  .hero-demo-desktop iframe { display: none; }

  /* ---- Footer — single-column stack ---- */
  footer.page-footer {
    padding: 3rem var(--mobile-page-padding) 1.5rem;
  }
  footer.page-footer .footer-grid,
  footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  footer.page-footer h4,
  footer h4 {
    font-size: 0.92rem;                  /* v2.1 — must stay >=13px */
    letter-spacing: 0.05em;
    margin-bottom: 0.9rem;
  }
  footer.page-footer ul li,
  footer ul li {
    margin-bottom: 0.65rem;
  }
  footer.page-footer ul li a,
  footer ul li a {
    min-height: var(--mobile-tap-footer);
    display: inline-flex;
    align-items: center;
    font-size: 0.98rem;
  }
  footer.page-footer .footer-bottom,
  footer .footer-bottom {
    flex-direction: column;
    gap: 0.5rem 0;
    text-align: center;
    padding-top: 1.2rem;
    font-size: var(--text-sm);          /* 14.72px — was 12.8px page-default, fails <13 audit */
  }
  footer.page-footer .footer-bottom *,
  footer .footer-bottom * {
    font-size: var(--text-sm);
  }

  /* Page-level inline-CSS sometimes sets specific small-text spans below 13px.
   * Catch common offenders without !important warfare. */
  .footer-cities { font-size: var(--text-sm) !important; }

  /* UI-chrome label bumps — page-level inline-CSS often sets these too small
   * (0.7-0.8rem = 11-13px). Bump to 13px minimum for readability + Playwright audit. */
  .updated, .eyebrow, .step-num, .stat .label, .hero-badge, .url, .hero-demo-bar .url,
  .contact-item .label, .audience-card span, footer .footer-bottom span,
  .author-block .role, .scoring-table td, thead strong,
  .updates-teaser ul li strong {
    font-size: var(--text-xs) !important;   /* 0.82rem = 13.12px */
  }

  /* Footer-bottom inline links (Privacy / Terms / Pers / Wat is nieuw) +
   * footer-cities links + any other inline footer <a> — give them tap padding.
   * Uses :where() so specificity stays low. */
  footer a:not(:where(.nav-links a, .mobile-menu-panel a, .mobile-nav-cta, .brand)) {
    min-height: var(--mobile-tap-footer);
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
  }
  footer .footer-cities a {
    margin: 0.15rem;
  }
  footer .footer-bottom a {
    margin: 0.2rem;
  }
}

/* ---------------------------------------------------------------------------
 * Hero iframe handling — scoped to .hero-demo-desktop ONLY
 * (per v2 lock #7 — no global iframe height rules)
 * Base visibility set near top of file; this section only adds desktop iframe sizing.
 * ------------------------------------------------------------------------ */
@media (min-width: 601px) {
  .hero-demo-desktop iframe {
    width: 100%;
    min-height: 520px;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile-full-compare <details> (beste-reserveringssysteem-horeca.html)
 * Cards FIRST, full table accessible via collapsible <details> on mobile.
 * Desktop bypasses the details and shows the table inline.
 * ------------------------------------------------------------------------ */
.mobile-full-compare > summary {
  min-height: var(--mobile-tap-cta);
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--warm-line);
  background: var(--paper);
  cursor: pointer;
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.mobile-full-compare > summary::-webkit-details-marker { display: none; }
.mobile-full-compare > summary::after { content: ' ↓'; margin-left: 0.4rem; }
.mobile-full-compare[open] > summary::after { content: ' ↑'; }

@media (min-width: 601px) {
  .mobile-full-compare > summary { display: none; }
  .mobile-full-compare > .table-scroll-wrap { display: block !important; }
  .mobile-full-compare > .table-scroll-wrap::after { display: none; }
}

/* ---------------------------------------------------------------------------
 * End of marketing-mobile.css v1
 * ------------------------------------------------------------------------ */
