/* ============================================================================
   Landingspagina sportforothers.app
   Installatiepagina voor de PassPoint-app (Sport for Others).

   De tokens hieronder zijn overgenomen uit src/styles/passpoint.css van de app,
   zodat deze pagina en de app uit dezelfde familie komen. Inter is meegeleverd
   (zelfde woff2's als de app) zodat de pagina geen enkel extern verzoek doet:
   dat houdt de CSP in _headers strak op 'self'.

   Afwijking van assets/branding/huisstijl.md, bewust: de CTA-knop is oranje
   #F9981C met DONKERBLAUWE tekst in plaats van witte. Wit op deze oranje haalt
   een contrast van ongeveer 2,2:1 en is daarmee slecht leesbaar in de zon op een
   parkeerplaats. Donkerblauw op oranje haalt ongeveer 7,9:1. De merkkleur blijft
   ongewijzigd, alleen de tekstkleur erop.
   ========================================================================== */

@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
    /* Merkkleuren (huisstijl.md + passpoint.css) */
    --navy-900: #17205C;
    --navy: #283583;
    --navy-700: #202B6D;
    --cyan: #00A2BF;
    --cyan-dark: #007A91;
    --cyan-soft: #6FD3E5;
    --cyan-100: #CCF0F7;
    --orange: #F9981C;
    --orange-dark: #E07D00;
    --orange-100: #FEF0DB;

    /* Neutralen (passpoint.css gray-schaal) */
    --paper: #F1F5F9;
    --surface: #FFFFFF;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;
    --ink: #0F172A;
    --ink-soft: #334155;
    --ink-muted: #64748B;

    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .05);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --content: 720px;
    --wide: 1120px;
    --section-y: clamp(48px, 8vw, 88px);
}

/* ============================ Basis ============================ */

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

/* Auteurs-CSS wint altijd van de browserstandaard, ook bij lagere specificiteit.
   Zonder deze regel negeert elk element met een eigen display-waarde (.notice,
   .standalone-alert) het hidden-attribuut en staat het altijd in beeld. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan-dark); }
a:hover { color: var(--navy); }

:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

.sprite { display: none; }

.ico {
    width: 1em; height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ico-sm  { width: 16px; height: 16px; }
.ico-lg  { width: 20px; height: 20px; }
.ico-xl  { width: 24px; height: 24px; }
.ico-2xl { width: 28px; height: 28px; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--surface);
    color: var(--navy);
    padding: 12px 18px;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Hulpveld voor het terugvalpad van "adres kopieren" in app.js. Staat hier en
   niet als inline style, conform de projectafspraak dat styling in CSS hoort. */
.copy-helper { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

.section-inner {
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================ Topbar ============================ */

.topbar {
    background: var(--navy-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    padding-top: max(12px, env(safe-area-inset-top));
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

.brand-mark { width: 26px; height: 30px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

.brand-sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan-soft);
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-full);
}
/* Dekkende hoverkleur (navy-900 met 10% wit ervoor) in plaats van een
   doorschijnende laag, zodat het contrast met de witte tekst vastligt. */
.topbar-link:hover { background: #2E366C; color: #fff; }

/* ==================== Vangnet: pagina staat op beginscherm ==================== */

.standalone-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--orange-100);
    border-bottom: 1px solid #F3D9AE;
    color: #6B4708;
    padding: 16px 20px;
}
.standalone-alert .ico { color: var(--orange-dark); margin-top: 2px; }
.standalone-alert-body { display: grid; gap: 8px; font-size: 14px; }
.standalone-alert-title { font-weight: 700; font-size: 15px; color: #4A3105; }

/* ============================ Knoppen ============================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--orange); color: var(--navy-900); }
.btn-primary:hover { background: var(--orange-dark); color: var(--navy-900); }

.btn-ghost {
    background: var(--surface);
    color: var(--navy);
    border-color: var(--border-strong);
    min-height: 44px;
    font-size: 15px;
}
.btn-ghost:hover { background: var(--paper); color: var(--navy); }

.btn-alert {
    background: var(--navy);
    color: #fff;
    min-height: 44px;
    font-size: 15px;
    justify-self: start;
}
.btn-alert:hover { background: var(--navy-900); color: #fff; }

/* ============================ Hero ============================ */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 15% 0%, #31409B 0%, rgba(49, 64, 155, 0) 60%),
        linear-gradient(170deg, var(--navy) 0%, var(--navy-900) 100%);
    color: #fff;
    padding: clamp(40px, 9vw, 76px) 0 clamp(44px, 9vw, 80px);
}

.hero-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero-route-line {
    fill: none;
    stroke: rgba(255, 255, 255, .17);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: route-draw 1.7s .1s cubic-bezier(.32, .72, 0, 1) forwards;
}
/* De tussenpunten blijven wit en gedempt: ze horen bij de lijn en mogen op geen
   enkele schermbreedte als los element boven de tekst uit springen. Alleen het
   eindpunt is oranje, en dat valt op elke breedte in de open ruimte rechts. */
.hero-route-dot {
    fill: #fff;
    opacity: 0;
    animation: route-dot .45s .95s forwards;
}
.hero-route-dot-end {
    fill: var(--orange);
    animation: route-dot-end .45s 1.35s forwards;
}

@keyframes route-draw   { to { stroke-dashoffset: 0; } }
@keyframes route-dot    { from { opacity: 0; } to { opacity: .38; } }
@keyframes route-dot-end { from { opacity: 0; } to { opacity: .9; } }

.hero-inner {
    position: relative;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: clamp(28px, 6vw, 40px);
}

/* min-width:0 houdt lange woorden binnen de kolom op brede schermen. */
.hero-copy { min-width: 0; }

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan-soft);
    margin-bottom: 14px;
}

.hero h1 {
    font-size: clamp(2rem, 7.6vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
    text-wrap: balance;
}

.lead {
    margin-top: 16px;
    font-size: clamp(1rem, 3.4vw, 1.125rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
    max-width: 46ch;
}

.hero-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
}

.hero-platforms {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, .6);
}

/* Voorbeeldtegel: hoe het icoon straks op het beginscherm staat */
.hero-preview {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.tile {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 152px;
    padding: 18px 14px 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
}

.tile-icon {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-xl);
}

.tile-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .92); }

.tile-caption {
    font-size: 13px;
    color: rgba(255, 255, 255, .58);
    text-align: center;
}

/* ============================ Stappen ============================ */

.steps { padding: var(--section-y) 0 clamp(36px, 6vw, 56px); }

.steps h2, .features h2, .faq h2 {
    font-size: clamp(1.4rem, 5.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.section-lead {
    margin-top: 12px;
    color: var(--ink-soft);
    max-width: 52ch;
}

/* Segmented control: iPhone of Android */
.switch {
    display: inline-flex;
    margin-top: 26px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.switch-btn {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-muted);
    padding: 10px 22px;
    min-height: 44px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.switch-btn:hover { color: var(--navy); }
.switch-btn[aria-selected="true"] { background: var(--navy); color: #fff; }

.panel { margin-top: 24px; }

/* De route: elke stap is een punt dat je passeert, zoals de PassPoints
   op de eventroute. De verbindingslijn loopt achter de markers door. */
.route {
    list-style: none;
    margin: 0;
    padding: 24px 20px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.route-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    padding-bottom: 30px;
}
.route-step:last-child { padding-bottom: 16px; }

.route-step::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 8px;
    bottom: -8px;
    width: 2px;
    background: var(--cyan-100);
}
.route-step:last-child::before { display: none; }

.route-marker {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cyan);
    color: #fff;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px var(--surface);
}
.route-marker-finish { background: var(--orange); color: var(--navy-900); }

.route-body { display: grid; gap: 8px; align-content: start; padding-top: 6px; }

.route-body h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.route-body p { color: var(--ink-soft); font-size: 15px; }

.route-body .btn { justify-self: start; margin-top: 4px; }

.route-url {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-muted);
    /* anywhere in plaats van break-all: de browser breekt dan liefst na een
       schuine streep en pas als het niet anders kan midden in een woord. */
    overflow-wrap: anywhere;
}

.route-note {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--paper);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--ink-soft);
}

.route-step-finish .route-body h3 { color: var(--orange-dark); }

/* "Zoek dit teken": toont de glyph waar de gebruiker naar moet zoeken */
.glyph-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    font-size: 14px;
    color: var(--ink-muted);
}

.glyph {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--navy);
}

/* Meldingen binnen de stappen */
.notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.notice p { font-size: 14px; }
.notice .btn { margin-top: 10px; }

.notice-warning {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #78410A;
}
.notice-warning .ico { color: #B45309; margin-top: 2px; }

.notice-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }

/* Losse melding voor desktopbezoekers */
.desk-note {
    margin-top: 24px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.desk-note p { color: var(--ink-soft); font-size: 15px; }
.desk-note .notice-title { color: var(--ink); }
.desk-note .btn { margin-top: 14px; }

.desk-url {
    font-family: var(--mono);
    font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    font-weight: 600;
    color: var(--navy);
    margin-top: 12px;
    letter-spacing: -0.01em;
}

/* ============================ Kaarten ============================ */

.features { padding: clamp(24px, 5vw, 40px) 0 var(--section-y); }

.cards {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.card-icon { color: var(--cyan); margin-bottom: 12px; }

.card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.card p { color: var(--ink-soft); font-size: 15px; }

/* ============================ Vragen ============================ */

.faq { padding: 0 0 var(--section-y); }

.faq-item {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.faq-item:first-of-type { margin-top: 26px; }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 48px 16px 20px;
    font-weight: 600;
    font-size: 15px;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq-item[open] summary { color: var(--navy); }

.faq-item p {
    padding: 0 20px 18px;
    color: var(--ink-soft);
    font-size: 15px;
}

/* ============================ Footer ============================ */

.site-footer {
    background: var(--navy-900);
    color: rgba(255, 255, 255, .78);
    padding: clamp(32px, 6vw, 48px) 0;
    padding-bottom: max(clamp(32px, 6vw, 48px), env(safe-area-inset-bottom));
}

.footer-inner { display: grid; gap: 10px; }

.footer-claim {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.015em;
}

.footer-line { font-size: 14px; }

.footer-links { font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-links a { color: var(--cyan-soft); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-sep { color: rgba(255, 255, 255, .3); }

/* ============================ Breder scherm ============================ */

@media (min-width: 700px) {
    .hero-inner {
        max-width: var(--wide);
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 56px;
    }
    .hero-preview { justify-self: end; }
    .section-inner { max-width: var(--content); }
    .cards { grid-template-columns: repeat(3, 1fr); }
    .route { padding: 30px 28px 12px; }
    .card { padding: 24px; }
}

@media (min-width: 1000px) {
    .topbar { padding-left: 40px; padding-right: 40px; }
}

/* ============================ Bewegingsvoorkeur ============================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-route-line { animation: none; stroke-dashoffset: 0; }
    .hero-route-dot { animation: none; opacity: .38; }
    .hero-route-dot-end { animation: none; opacity: .9; }
    .btn, .switch-btn, .faq-item summary::after { transition: none; }
    .btn:active { transform: none; }
}

/* ============================ Afdrukken ============================ */
/* De stappen worden ook uitgeprint en meegegeven aan vrijwilligers die het
   liever op papier hebben. Beide platformpanelen en alle antwoorden open. */

@media print {
    .topbar-link, .hero-route, .switch, .desk-note, .skip-link { display: none; }
    .hero, .site-footer { background: #fff; color: #000; }
    .hero h1, .lead, .tile-label, .tile-caption, .footer-claim,
    .footer-line, .site-footer { color: #000; }
    .panel[hidden] { display: block; }
    .faq-item summary::after { display: none; }
    .faq-item:not([open]) > p { display: block; }
    .route, .card, .faq-item { box-shadow: none; break-inside: avoid; }
}