/* ============================================================
   Rijnstraat PWA — styles
   Waterthema-blauw met rustige typografie, mobile-first.
   ============================================================ */

:root {
    --bg: #f4f7fb;
    --bg-elev: #ffffff;
    --fg: #0e1a2b;
    --fg-muted: #54657a;
    --fg-faint: #8a99ad;
    --accent: #1a4d7a;
    --accent-2: #2f6fa3;
    --accent-soft: #d6e6f3;
    --border: #d6dee8;
    --shadow-sm: 0 1px 2px rgba(14,26,43,.06), 0 1px 1px rgba(14,26,43,.04);
    --shadow-md: 0 4px 14px rgba(14,26,43,.08), 0 2px 4px rgba(14,26,43,.04);
    --radius: 14px;
    --radius-sm: 8px;
    --transition: 200ms ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d141d;
        --bg-elev: #161e29;
        --fg: #e6ecf3;
        --fg-muted: #a3afbe;
        --fg-faint: #6c7888;
        --accent: #4ea3d6;
        --accent-2: #6fb6e2;
        --accent-soft: #1c2a3b;
        --border: #23303f;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
        --shadow-md: 0 4px 14px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    }
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.25;
    color: var(--fg);
    margin-top: 2.2em;
    margin-bottom: 0.5em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-top: 0; }
h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
em { font-style: italic; }
strong { font-weight: 700; }
a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); }
a:hover, a:focus { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

.container { max-width: 920px; margin: 0 auto; padding: 2rem 1.25rem; }
.container.narrow { max-width: 680px; }

/* ============================
   HERO (homepage)
   ============================ */
.hero {
    position: relative;
    background: linear-gradient(180deg, #1a4d7a 0%, #2f6fa3 100%);
    color: white;
    padding: 4.5rem 1.25rem 5rem;
    overflow: hidden;
}
.hero-inner { max-width: 920px; margin: 0 auto; }
.hero .kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: .82rem; opacity: .8; margin: 0 0 .5rem; font-weight: 600; }
.hero h1 { color: white; margin-bottom: 0.5rem; font-weight: 800; }
.hero .lead { max-width: 640px; font-size: 1.15rem; opacity: .92; margin-bottom: 1.6rem; }
.hero-nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-nav a {
    color: white;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    padding: .55rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: background var(--transition), border-color var(--transition);
}
.hero-nav a:hover, .hero-nav a:focus { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; color: var(--bg); }

/* ============================
   PAGE HEADER (interior pages)
   ============================ */
.page-header {
    background: linear-gradient(180deg, #1a4d7a 0%, #2f6fa3 100%);
    color: white;
    padding: 3rem 1.25rem 3.5rem;
}
.page-header h1 { color: white; margin: 0 0 .5rem; }
.page-header .lead { opacity: .92; max-width: 680px; margin: 0; }
.back {
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: .9rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.back:hover { color: white; }

/* ============================
   INTRO & TEXT
   ============================ */
.intro p { font-size: 1.05rem; }
.kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: .78rem;
    color: var(--accent);
    font-weight: 700;
    margin: 1.6em 0 0.3em;
}

.quote {
    margin: 3rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--bg-elev);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.quote blockquote { margin: 0; font-style: italic; font-size: 1.1rem; }
.quote cite { display: block; margin-top: .6rem; color: var(--fg-muted); font-size: .85rem; font-style: normal; }

.callout {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ============================
   QUICK CARDS
   ============================ */
.quick-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 2rem 0 1rem;
}
.card {
    display: block;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.4rem;
    text-decoration: none;
    color: var(--fg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    box-shadow: var(--shadow-sm);
}
.card:hover, .card:focus { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-soft); }
.card-icon { font-size: 1.7rem; display: inline-block; margin-bottom: .5rem; }
.card h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--accent); }
.card p { margin: 0; color: var(--fg-muted); font-size: .95rem; }

/* ============================
   FACTS GRID
   ============================ */
.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 2rem 0;
}
.fact {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem 1.4rem 1.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.fact-number {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    font-family: ui-monospace, monospace;
    font-size: 1.6rem;
    color: var(--accent-soft);
    font-weight: 700;
}
.fact h3 { margin: 0 0 .6rem; padding-right: 2.5rem; }

/* ============================
   BLUEPRINT PLACEHOLDER
   ============================ */
.blueprint {
    margin: 2rem 0;
    border-radius: var(--radius);
    background: var(--bg-elev);
    border: 1px dashed var(--accent-2);
    overflow: hidden;
}
.blueprint-inner {
    padding: 2.5rem 2rem;
    text-align: center;
    color: var(--fg-muted);
}
.blueprint-icon {
    width: 80px;
    height: 80px;
    color: var(--accent-2);
    opacity: .6;
    margin: 0 auto 1.2rem;
}
.blueprint h3 { color: var(--fg); margin: 0 0 .6rem; }
.blueprint p { max-width: 460px; margin: 0 auto .8rem; }
.blueprint .meta { font-size: .88rem; color: var(--fg-faint); font-style: italic; }
.blueprint figcaption {
    padding: .6rem 1rem;
    background: var(--accent-soft);
    color: var(--fg-muted);
    font-size: .85rem;
    text-align: center;
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 2rem 1.25rem;
    margin-top: 3rem;
}
.site-footer p { margin: 0; font-size: .9rem; color: var(--fg-muted); text-align: center; }
.site-footer .muted { font-size: .8rem; color: var(--fg-faint); margin-top: .25rem; }

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 540px) {
    .hero { padding: 3rem 1rem 4rem; }
    .page-header { padding: 2.25rem 1rem 2.75rem; }
    body { font-size: 16px; }
    .blueprint-inner { padding: 1.75rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
}