/* ---------------------------------------------------------------
   Oudercomité - basisstijl
   ------------------------------------------------------------- */

:root {
    --clr-primary: #0AB0DA;
    --clr-primary-dark: #086e88;
    --clr-accent: #e8a33d;
    --clr-accent-dark: #c9860f;
    --clr-accent-text: #4a2f05;
    --clr-bg: #faf9f6;
    --clr-card: #ffffff;
    --clr-text: #2b2b2b;
    --clr-muted: #6b6b6b;
    --clr-border: #e3e0d8;
    --clr-red: #d64545;
    --clr-red-bg: #fdeceb;
    --clr-orange: #b8720b;
    --clr-orange-bg: #fdf1dc;
    --clr-green-bg: #eef7ee;
    --font-heading: 'Baloo 2', "Segoe UI", Arial, Helvetica, sans-serif;
    --font-body: 'Quicksand', "Segoe UI", Arial, Helvetica, sans-serif;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.55;
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 { line-height: 1.25; font-family: var(--font-heading); }
h1 { font-size: 1.9rem; margin: 0.4em 0 0.3em; }
h2 { font-size: 1.4rem; margin: 1.2em 0 0.5em; }

a { color: var(--clr-primary-dark); }

/* ---- Header / footer ---------------------------------------- */

.site-header {
    background: #ffffff;
    color: var(--clr-primary-dark);
    border-bottom: 3px solid var(--clr-primary);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
}
.site-header .brand {
    color: var(--clr-primary-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1.15;
}
.brand-sub {
    display: inline-block;
}
h1 .h1-sub {
    display: inline-block;
}
.site-logo {
    height: 56px;
    width: auto;
    display: block;
    border-radius: 4px;
}
.site-header nav a {
    color: var(--clr-primary-dark);
    text-decoration: none;
    margin-left: 18px;
    opacity: 0.85;
    font-weight: 600;
}
.site-header nav a:hover { opacity: 1; text-decoration: underline; }

.site-footer {
    margin-top: 60px;
    padding: 24px 0;
    color: var(--clr-muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--clr-border);
}

/* ---- Bestuur / kaarten ----------------------------------------- */

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 20px 0 40px;
}
.board-card {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    text-align: center;
}
.board-card img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 12px;
    background: var(--clr-border);
}
.board-card .role {
    color: var(--clr-primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---- Campagnes / acties overzicht ------------------------------ */

.campaign-card {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    margin: 18px 0;
}
.campaign-card .deadline,
.deadline {
    color: var(--clr-muted);
    font-size: 0.9rem;
}
.deadline.urgent {
    color: var(--clr-accent-dark);
    font-weight: 700;
}
.campaign-image {
    max-width: 360px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 14px;
    display: block;
}
.btn {
    display: inline-block;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 10px;
}
.btn:hover { background: var(--clr-primary-dark); }
.btn-secondary {
    background: transparent;
    color: var(--clr-primary-dark);
    border: 1px solid var(--clr-primary-dark);
}
.btn-secondary:hover { background: #f0f6f6; }
.btn-cta {
    background: var(--clr-accent);
    color: var(--clr-accent-text);
    font-weight: 700;
}
.btn-cta:hover { background: var(--clr-accent-dark); }

.notice {
    background: var(--clr-orange-bg);
    border: 1px solid #f0d8a8;
    color: var(--clr-orange);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin: 20px 0;
}
.notice.error {
    background: var(--clr-red-bg);
    border-color: #f0c0bc;
    color: var(--clr-red);
}
.notice.success {
    background: var(--clr-green-bg);
    border-color: #cfe6cf;
    color: #2e6b2e;
}

/* ---- Formulieren ------------------------------------------------- */

form.stack { max-width: 560px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; }
.hint { color: var(--clr-muted); font-size: 0.85rem; margin-top: 4px; }
.field input[type=text],
.field input[type=email],
.field input[type=number],
.field input[type=password],
.field input[type=date],
.field input[type=datetime-local],
.field select,
.field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.radio-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.product-row {
    display: grid;
    grid-template-columns: 1fr auto 100px;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--clr-border);
}
.product-row .price { color: var(--clr-muted); text-align: right; }

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    overflow: hidden;
}
.qty-stepper .qty-btn {
    background: var(--clr-bg);
    border: none;
    color: var(--clr-primary-dark);
    font-size: 1.2rem;
    font-weight: 700;
    width: 40px;
    min-height: 40px;
    cursor: pointer;
    line-height: 1;
}
.qty-stepper .qty-btn:hover { background: #eaf6f9; }
.qty-stepper .qty-btn:active { background: #d9eef3; }
.qty-stepper .qty-input {
    width: 54px;
    border: none;
    border-left: 1px solid var(--clr-border);
    border-right: 1px solid var(--clr-border);
    text-align: center;
    padding: 9px 4px;
    font-size: 1rem;
    font-family: inherit;
    /* verberg de standaard spinner-pijltjes: de +/- knoppen doen dat werk al */
    -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (max-width: 480px) {
    .product-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label label"
            "stepper price";
        row-gap: 6px;
    }
    .product-row label { grid-area: label; }
    .product-row .qty-stepper { grid-area: stepper; }
    .product-row .price { grid-area: price; }
    .qty-stepper .qty-btn { width: 44px; min-height: 44px; }
}

.order-total {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: right;
    margin: 16px 0;
    padding-top: 12px;
    border-top: 2px solid var(--clr-border);
}

/* ---- Bevestigingspagina ------------------------------------------ */

.confirmation-box {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px;
}
.qr-block { text-align: center; margin: 22px 0; }
.qr-block img { border: 1px solid var(--clr-border); border-radius: 6px; }
.reference-badge {
    display: inline-block;
    background: #eef4f4;
    color: var(--clr-primary-dark);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 1.05rem;
}

/* ---- Admin: layout ------------------------------------------------ */

.admin-body { background: #f4f5f6; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 220px;
    background: #1f2d2d;
    color: #dfe7e7;
    flex-shrink: 0;
    padding: 18px 0;
}
.admin-sidebar .brand { color: #fff; font-weight: 700; padding: 0 18px 18px; display: block; text-decoration: none; }
.admin-sidebar a {
    display: block;
    color: #cfdbdb;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 0.95rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--clr-primary); color: #fff; }
.admin-main { flex: 1; padding: 26px 32px; max-width: 1200px; }
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.admin-topbar .user { color: var(--clr-muted); font-size: 0.9rem; }

.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.stat-card .num { font-size: 1.6rem; font-weight: 700; color: var(--clr-primary-dark); }
.stat-card .label { color: var(--clr-muted); font-size: 0.85rem; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data-table th, table.data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--clr-border); }
table.data-table th a { color: var(--clr-text); text-decoration: none; }
table.data-table th a:hover { text-decoration: underline; }
table.data-table th .arrow { color: var(--clr-primary); }
table.data-table tr.status-onvolledig { background: var(--clr-red-bg); }
table.data-table tr.status-open { background: var(--clr-red-bg); }
table.data-table tr.status-teveel { background: var(--clr-orange-bg); }
table.data-table tr.status-ok { background: var(--clr-green-bg); }
table.data-table tr:hover { filter: brightness(0.97); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge.status-ok { background: #cfe8cf; color: #2e6b2e; }
.badge.status-onvolledig { background: #f6c9c5; color: #a33025; }
.badge.status-teveel { background: #f5dca3; color: #8a5a06; }
.badge.status-open { background: #f6c9c5; color: #a33025; }

.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }
.filter-bar .field { margin-bottom: 0; min-width: 150px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

@media (max-width: 720px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; }
    table.data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===============================================================
   Samengevoegd uit style.css
   Bestand 2 blijft de leidende stijl (lichtblauw).
   =============================================================== */

.campaign-card .deadline {
    color: var(--clr-muted);
    font-size: 0.9rem;
}

.field .hint {
    color: var(--clr-muted); font-size: 0.85rem; margin-top: 4px;
}

.product-label {
    min-width: 0;
}

.product-info-details {
    margin-top: 2px;
    font-size: 0.82rem;
}

.product-info-details summary {
    color: var(--clr-primary-dark);
    text-decoration: underline;
    cursor: pointer;
}

.product-info {
    background: var(--clr-bg);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 0.88rem;
    color: var(--clr-muted);
}

/* ---- Toegankelijkheid ------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--clr-primary);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .site-header .wrap {
        flex-wrap: wrap;
        gap: 8px;
    }

    .site-header nav {
        width: 100%;
    }

    .site-header nav a {
        display: inline-block;
        margin-left: 0;
        margin-right: 14px;
    }
}

/* ===============================================================
   Homepage redesign - beheerbaar via admin/website.php
   Geen JavaScript nodig: alle content, thema's en kleuren komen uit
   de database en worden server-side in CSS-variabelen gezet.
   =============================================================== */

.home-page {
    --home-radius: 22px;
    --home-shadow: 0 14px 40px rgba(7, 59, 92, .10);
    --home-soft: color-mix(in srgb, var(--site-primary) 8%, white);
    background: #f8fbfc;
}

.home-page .wrap { max-width: 1180px; }
.home-page .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(7,59,92,.08);
    box-shadow: 0 4px 18px rgba(7,59,92,.05);
}
.home-page .site-header .wrap { padding-top: 10px; padding-bottom: 10px; }
.home-page .site-header-inner { min-height: 72px; }
.home-page .site-header nav { display:flex; align-items:center; gap: 6px; }
.home-page .site-header nav a {
    color: var(--site-dark);
    margin: 0;
    padding: 10px 12px;
    border-radius: 999px;
    opacity: 1;
}
.home-page .site-header nav a:hover,
.home-page .site-header nav a:focus-visible { background: rgba(10,176,218,.09); text-decoration:none; }
.home-page .site-logo { height: 58px; width:auto; object-fit:contain; }

.home-hero {
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
    min-height: 510px;
    margin: 24px 0 34px;
    overflow:hidden;
    border-radius: 30px;
    background: linear-gradient(125deg, #fff 0%, #f2fbfd 58%, rgba(10,176,218,.12) 100%);
    box-shadow: var(--home-shadow);
    position:relative;
}
.home-hero:before,
.home-hero:after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.home-hero:before { width:220px; height:220px; background:rgba(255,211,78,.24); left:-100px; bottom:-120px; }
.home-hero:after { width:180px; height:180px; background:rgba(10,176,218,.10); right:42%; top:-100px; }
.hero-copy { padding: 68px 46px 60px 60px; align-self:center; position:relative; z-index:1; }
.hero-kicker,
.section-kicker {
    display:inline-block;
    color:var(--site-primary);
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:.78rem;
    font-weight:800;
}
.hero-copy h1 {
    color:var(--site-dark);
    font-size:clamp(2.4rem, 5vw, 4.4rem);
    line-height:1.02;
    margin:.25em 0 .3em;
    max-width: 650px;
}
.hero-copy p { color:#31556b; font-size:1.12rem; max-width:590px; margin:0 0 24px; }
.btn-hero,
.btn-card {
    background:var(--site-primary);
    color:#fff;
    border-radius:999px;
    padding:13px 22px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(10,176,218,.22);
}
.btn-hero:hover,.btn-card:hover { background:var(--site-dark); transform:translateY(-1px); }
.btn-hero span,.btn-card span { margin-left:8px; }
.hero-visual { min-height:100%; position:relative; overflow:hidden; }
.hero-photo { width:100%; height:100%; min-height:510px; object-fit:cover; display:block; }
.hero-logo-stage {
    height:100%; min-height:510px; display:grid; place-items:center; position:relative;
    background: radial-gradient(circle at 50% 40%, #fff 0 28%, transparent 29%), linear-gradient(145deg, rgba(10,176,218,.16), rgba(7,59,92,.04));
}
.hero-logo { width:min(58%, 330px); max-height:340px; object-fit:contain; filter: drop-shadow(0 20px 20px rgba(7,59,92,.12)); }
.hero-note {
    position:absolute; right:26px; top:28px; padding:15px 18px; border-radius:22px 22px 22px 6px;
    background:#fff; color:var(--site-dark); font-family:'Patrick Hand',cursive; font-size:1.25rem; line-height:1.05;
    transform:rotate(4deg); box-shadow:0 12px 28px rgba(7,59,92,.10);
}
.scribble { position:absolute; color:var(--site-primary); font-size:3rem; }
.scribble-one { left:18%; top:17%; transform:rotate(-12deg); }

.home-features {
    display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0 0 72px;
    background:#fff; border-radius:24px; box-shadow:0 8px 30px rgba(7,59,92,.06); overflow:hidden;
}
.feature-item { padding:28px 24px; text-align:center; position:relative; }
.feature-item + .feature-item:before { content:""; position:absolute; left:0; top:26%; height:48%; width:1px; background:#e6f0f4; }
.feature-icon { width:58px; height:58px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:rgba(10,176,218,.10); color:var(--site-primary); }
.feature-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.feature-item h2 { font-size:1.05rem; color:var(--site-dark); margin:.2em 0 .35em; }
.feature-item p { margin:0; color:#567080; font-size:.9rem; }

.home-section { padding:0 0 72px; scroll-margin-top:100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.section-heading h2 { color:var(--site-dark); font-size:clamp(2rem,4vw,2.8rem); margin:.05em 0 .08em; }
.section-heading p { margin:0; color:#617987; }
.campaign-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.campaign-card-modern { margin:0; padding:0; overflow:hidden; background:#fff; border:0; border-radius:var(--home-radius); box-shadow:var(--home-shadow); transition:transform .18s ease, box-shadow .18s ease; }
.campaign-card-modern:hover { transform:translateY(-4px); box-shadow:0 18px 46px rgba(7,59,92,.15); }
.campaign-media {
    height:210px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(10,176,218,.18), rgba(255,211,78,.35));
    display:flex;
    align-items:center;
}
/* Elke afbeelding wordt onafhankelijk van andere acties gestyled.
   Geen globale width/height-regels buiten de gekozen modus. */
.campaign-media img {
    display:block;
    flex:0 0 auto;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}
.campaign-media-size-original img {
    width:auto;
    height:auto;
}
.campaign-media-size-width img {
    width:var(--campaign-image-size);
    height:auto;
}
.campaign-media-size-height img {
    width:auto;
    height:var(--campaign-image-size);
}
.campaign-media-size-cover img {
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
}
.campaign-media-size-cover.campaign-media-align-left img { object-position:left center; }
.campaign-media-size-cover.campaign-media-align-center img { object-position:center center; }
.campaign-media-size-cover.campaign-media-align-right img { object-position:right center; }
.campaign-media-align-left { justify-content:flex-start; }
.campaign-media-align-center { justify-content:center; }
.campaign-media-align-right { justify-content:flex-end; }

.campaign-placeholder { height:100%; display:grid; place-items:center; color:var(--site-primary); font-size:4rem; font-family:'Patrick Hand',cursive; }
.deadline-badge { position:absolute; left:16px; top:16px; padding:8px 12px; border-radius:999px; background:#fff; color:var(--site-dark); font-size:.78rem; font-weight:800; box-shadow:0 6px 14px rgba(0,0,0,.10); }
.deadline-badge.urgent { background:#e9475d; color:#fff; }
.deadline-badge.closed { background:#f0f2f3; color:#53626a; }
.campaign-body { padding:23px; }
.campaign-body h3 { color:var(--site-dark); font-size:1.45rem; margin:0 0 5px; }
.campaign-body > p { color:#5b7180; margin:0 0 12px; }
.campaign-deadline { font-size:.82rem !important; color:#758892 !important; }
.campaign-closed { font-size:.85rem; padding:10px 12px; margin:10px 0 0; }
.btn-card { display:flex; justify-content:center; align-items:center; width:100%; margin-top:18px; }
.empty-state { background:#fff; padding:40px; border-radius:var(--home-radius); text-align:center; box-shadow:var(--home-shadow); }
.empty-state h3 { color:var(--site-dark); margin-top:0; }

.support-banner {
    scroll-margin-top:100px; display:grid; grid-template-columns:1fr 280px; gap:30px; align-items:center;
    background:var(--site-dark); color:#fff; border-radius:28px; padding:48px 54px; margin-bottom:72px; overflow:hidden; position:relative;
}
.support-banner:after { content:""; position:absolute; width:340px; height:340px; border:60px solid rgba(10,176,218,.22); border-radius:50%; right:-160px; top:-160px; }
.support-copy { position:relative; z-index:1; }
.support-copy .section-kicker { color:var(--site-accent); }
.support-copy h2 { font-size:clamp(2rem,4vw,3rem); margin:.1em 0 .2em; color:#fff; }
.support-copy p { max-width:700px; color:#dceaf1; font-size:1.05rem; }
.btn-light { background:#fff; color:var(--site-dark); border-radius:999px; font-weight:800; padding:12px 20px; }
.btn-light:hover { background:var(--site-accent); color:var(--site-dark); }
.support-art { position:relative; z-index:1; height:190px; }
.support-art span { position:absolute; font-family:'Patrick Hand',cursive; color:var(--site-accent); font-size:5rem; }
.support-art span:nth-child(1) { left:65px; top:35px; }
.support-art span:nth-child(2) { left:145px; top:80px; transform:rotate(20deg); }
.support-art span:nth-child(3) { left:40px; top:115px; font-size:3rem; }

.board-section { scroll-margin-top:100px; }
.board-grid-modern { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin:0; }
.board-grid-modern .board-card { border-radius:20px; padding:20px; box-shadow:0 8px 28px rgba(7,59,92,.07); }
.board-grid-modern .board-card img,.board-placeholder { width:100px; height:100px; object-fit:cover; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:rgba(10,176,218,.12); color:var(--site-primary); font-size:2rem; }
.board-grid-modern .role { color:var(--site-primary); }

.site-footer { margin-top:0; padding:52px 0 0; background:var(--site-dark); color:#dbeaf1; border:0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.footer-logo { width:130px; max-height:100px; object-fit:contain; object-position:left center; filter:brightness(0) invert(1); opacity:.96; }
.footer-tagline { color:#bcd5df; margin:.5em 0 0; font-family:'Patrick Hand',cursive; font-size:1.3rem; }
.footer-grid strong { display:block; color:#fff; margin-bottom:12px; }
.footer-grid a { display:block; color:#dbeaf1; text-decoration:none; margin:6px 0; }
.footer-grid a:hover { color:var(--site-accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.15); padding:16px 20px; display:flex; justify-content:space-between; gap:15px; font-size:.8rem; color:#a9c3cf; }

.site-theme-strict .hero-visual { background:#eef7fa; }
.site-theme-strict .home-hero { border-radius:18px; }
.site-theme-strict .hero-note,.site-theme-strict .scribble { display:none; }
.site-theme-strict .campaign-card-modern:hover { transform:none; }
.site-theme-strict .feature-item { padding-top:22px; padding-bottom:22px; }

.site-theme-playful .home-hero { border-radius:32px 14px 32px 14px; }
.site-theme-playful .hero-copy h1 { font-family:'Patrick Hand',var(--font-heading); font-weight:400; font-size:clamp(2.8rem,5vw,4.8rem); }
.site-theme-playful .section-heading h2 { font-family:'Patrick Hand',var(--font-heading); font-weight:400; }
.site-theme-playful .campaign-card-modern:nth-child(2) { transform:rotate(1deg); }
.site-theme-playful .campaign-card-modern:nth-child(3) { transform:rotate(-1deg); }
.site-theme-playful .feature-icon { border-radius:42% 58% 50% 45%; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 900px) {
    .home-hero { grid-template-columns:1fr; }
    .hero-copy { padding:46px 38px 36px; }
    .hero-visual,.hero-photo,.hero-logo-stage { min-height:360px; }
    .home-features { grid-template-columns:repeat(2,1fr); }
    .feature-item:nth-child(3) { border-top:1px solid #e6f0f4; }
    .feature-item:nth-child(4) { border-top:1px solid #e6f0f4; }
    .feature-item:nth-child(3):before { display:none; }
    .campaign-grid { grid-template-columns:1fr 1fr; }
    .support-banner { grid-template-columns:1fr; }
    .support-art { display:none; }
}

@media (max-width: 650px) {
    .home-page .site-header { position:static; }
    .home-page .site-header-inner { align-items:center; }
    .home-page .site-header nav { width:100%; overflow:auto; padding-bottom:2px; }
    .home-page .site-header nav a { white-space:nowrap; padding:7px 9px; font-size:.82rem; }
    .home-page .site-logo { height:50px; }
    .home-hero { margin-top:12px; border-radius:22px; }
    .hero-copy { padding:36px 25px 30px; }
    .hero-copy h1 { font-size:2.65rem; }
    .hero-copy p { font-size:1rem; }
    .hero-photo,.hero-logo-stage { min-height:280px; }
    .home-features { grid-template-columns:1fr; margin-bottom:52px; }
    .feature-item + .feature-item:before { display:none; }
    .feature-item + .feature-item { border-top:1px solid #e6f0f4; }
    .home-section { padding-bottom:52px; }
    .campaign-grid { grid-template-columns:1fr; }
    .campaign-media { height:220px; }
    .support-banner { padding:34px 25px; margin-bottom:52px; border-radius:22px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .footer-grid > :first-child { grid-column:1/-1; }
    .footer-bottom { flex-direction:column; }
}

/* ---- Admin: homepage editor ------------------------------------- */
.admin-color-grid { display:grid; grid-template-columns:repeat(3, minmax(120px, 1fr)); gap:16px; }
.admin-color-grid input[type=color] { width:100%; height:46px; padding:3px; }
.website-feature-editor { border-top:1px solid var(--clr-border); padding-top:18px; margin-top:18px; }
.website-image-preview { margin:8px 0 14px; }
.website-image-preview img { display:block; max-width:360px; width:100%; max-height:180px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
@media (max-width:720px) { .admin-color-grid { grid-template-columns:1fr; } }


.image-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:700px) { .image-settings-grid { grid-template-columns:1fr; } }