/* Open dag in het portaal (oktober 2026): de inschrijfpagina's voor bezoekers, in de huisstijl van 2026
   (connected-huisstijl, kennis 01 en 04). Dezelfde kleurnamen als site/themes/2026 en het portaal. */
:root {
    --salie: #9CBF95; --perzik: #E9B58F; --terra: #C67E13; --terra-tekst: #A46A13;
    --ivoor: #FAF6EC; --espresso: #3A2E27; --den: #385043; --pistache: #D8E2C1; --nude: #F3DCC7;
    --perzik-op-den: #F4B57A; --licht: #FBF7F0; --lijn: #E7DFD0; --zacht: #6B5E54; --kaart: #FFFDF8;
    --kop: 'Cormorant Garamond', Georgia, serif; --tekst: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.od { margin: 0; background: var(--ivoor); color: var(--espresso); font: 17px/1.6 var(--tekst); -webkit-font-smoothing: antialiased; }
/* Cormorant heeft standaard mediaevalcijfers ("8 november" met een zwevende 8): overal gewone cijfers. */
body.od, body.od * { font-variant-numeric: lining-nums; }
.od h1, .od h2, .od h3 { font-family: var(--kop); font-weight: 500; line-height: 1.1; margin: 0 0 .4em; font-variant-numeric: lining-nums; }
.od p { margin: 0 0 1em; }
.od a { color: var(--terra-tekst); }
.od img { max-width: 100%; display: block; }
.od-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* balk */
.od-bar { background: var(--den); color: var(--licht); }
.od-bar__in { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.od-bar__merk { font: 500 21px/1 var(--kop); color: var(--licht) !important; text-decoration: none; letter-spacing: .01em; }
.od-bar__taal { font-size: 14px; color: var(--licht) !important; opacity: .85; }

/* kop: Dennengroen met de uitstraling, zoals de save the date */
.od-held { background: var(--den); color: var(--licht); padding: 18px 0 0; overflow: hidden; }
.od-held__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: center; }
.od-held__kicker { font: 600 12.5px/1.2 var(--tekst); letter-spacing: .18em; text-transform: uppercase; color: var(--perzik-op-den); margin: 0 0 14px; }
.od-held h1 { font-size: clamp(54px, 9vw, 104px); font-weight: 400; line-height: .95; letter-spacing: -.02em; color: var(--licht); margin: 0 0 .15em; }
.od-held__dag { font: italic 400 clamp(24px, 3.4vw, 34px)/1.2 var(--kop); color: var(--perzik-op-den); margin: 0 0 10px !important; }
.od-held__tijd { font-size: 19px; font-weight: 500; margin: 0 0 4px !important; }
.od-held__adres { color: #D9CCBE; margin: 0 0 24px !important; }
.od-held__logo { width: 100%; max-width: 380px; justify-self: end; }
.od-held__lijn { width: 100%; height: auto; margin-top: 8px; }
@media (max-width: 760px) {
    .od-held__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .od-held__logo { max-width: 240px; justify-self: start; order: -1; margin: 0 0 4px -18px; }
}

/* inhoud */
.od-main { padding: 40px 0 56px; }
.od-lede { font-size: 19px; max-width: 42em; }
.od-noot { font-size: 15px; color: var(--zacht); max-width: 46em; }
.od-melding { background: var(--kaart); border-left: 4px solid var(--den); border-radius: 10px; padding: 14px 18px; margin: 18px 0 28px; max-width: 46em; }
.od-melding--fout { border-left-color: #B3261E; background: #FFF6F4; }
.od-melding--let { border-left-color: var(--terra); }
.od-kicker { font: 600 12.5px/1.2 var(--tekst); letter-spacing: .18em; text-transform: uppercase; color: var(--terra-tekst); margin: 0 0 12px; }
.od h2 { font-size: clamp(32px, 4vw, 46px); font-weight: 400; }

/* het programma: een kaart per blok */
.od-blokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 16px; margin: 22px 0 36px; }
.od-blok { background: var(--kaart); border-radius: 16px; padding: 18px 20px 16px; border-left: 4px solid var(--kc, #C9BBA6); display: flex; flex-direction: column; }
.od-blok h3 { font-size: 25px; margin: 0 0 4px; }
.od-blok__wie { font-size: 14.5px; font-weight: 500; margin: 0 0 2px !important; }
.od-blok__wie span { font-weight: 400; color: var(--zacht); }
.od-blok__meta { font-size: 13.5px; color: var(--zacht); margin: 0 0 10px !important; }
.od-blok__meta i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--kc, #C9BBA6); margin-right: 6px; vertical-align: 0; }
.od-blok__tekst { font-size: 15px; line-height: 1.55; color: #4A3F37; margin: 0 0 14px !important; }
.od-tijden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* een tijd om aan te tikken */
.od-tijd { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 74px; padding: 7px 10px 6px;
           border: 1.5px solid #D8CDBC; border-radius: 12px; background: #fff; cursor: pointer; line-height: 1.15; user-select: none; }
.od-tijd input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.od-tijd b { font-weight: 600; font-size: 15.5px; font-variant-numeric: lining-nums tabular-nums; }
.od-tijd small { font-size: 11.5px; color: var(--zacht); }
.od-tijd:hover { border-color: var(--den); }
.od-tijd:has(input:focus-visible) { outline: 3px solid var(--salie); outline-offset: 2px; }
.od-tijd:has(input:checked) { background: var(--den); border-color: var(--den); color: var(--licht); }
.od-tijd:has(input:checked) small { color: #D9CCBE; }
.od-tijd.is-vol, .od-tijd.is-uit { background: #F3EEE5; border-color: #E7DFD0; color: #9C9087; cursor: default; }
.od-tijd.is-vol input, .od-tijd.is-uit input { cursor: default; }
.od-tijd.is-vol b { text-decoration: line-through; text-decoration-thickness: 1px; }
.od-tijd--alleen { cursor: default; }
.od-wacht { font-size: 12.5px; align-self: center; }

/* je keuze en het formulier */
.od-afrekenen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; background: #fff; border-radius: 18px; padding: 26px 28px; box-shadow: 0 18px 40px -30px rgba(40, 30, 20, .45); }
.od-keuze ul { list-style: none; margin: 0 0 14px; padding: 0; }
.od-keuze li { padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }
.od-keuze li span:last-child { white-space: nowrap; }
.od-keuze .od-totaal { font-weight: 600; border-top: 2px solid var(--espresso); }
.od-veld { margin: 0 0 14px; }
.od-veld label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.od-veld input[type=text], .od-veld input[type=email] { width: 100%; font: 16px var(--tekst); padding: 11px 13px; border: 1.5px solid #D8CDBC; border-radius: 10px; background: #fff; color: var(--espresso); }
.od-veld input:focus { outline: 3px solid var(--salie); outline-offset: 1px; border-color: var(--den); }
.od-veld small { display: block; font-size: 13px; color: var(--zacht); margin-top: 4px; }
.od-akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; margin: 6px 0 12px; }
.od-akkoord input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--den); }
.od-knop { display: inline-block; font: 600 16px var(--tekst); background: var(--den); color: #fff !important; border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; text-decoration: none; }
.od-knop:hover { background: #2D4236; }
.od-knop:disabled { background: #9AA59D; cursor: default; }
.od-knop--licht { background: transparent; color: var(--den) !important; border: 1.5px solid var(--den); }
.od-klein { font-size: 13.5px; color: var(--zacht); margin-top: 10px !important; }
.od-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
    .od-wrap { padding: 0 16px; }
    .od-afrekenen { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
    .od-main { padding-top: 28px; }
}

/* een losse kaart (betaald, wachtlijst, je inschrijving) */
.od-paneel { background: #fff; border-radius: 18px; padding: 26px 28px; max-width: 640px; box-shadow: 0 18px 40px -30px rgba(40, 30, 20, .45); }
.od-lijst { list-style: none; margin: 0 0 18px; padding: 0; }
.od-lijst li { padding: 11px 0; border-top: 1px solid var(--lijn); display: flex; gap: 14px; }
.od-lijst li > b { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; min-width: 92px; }
.od-lijst li span { display: block; }
.od-lijst li em { font-style: normal; font-size: 14px; color: var(--zacht); }
.od-lijst label { display: flex; gap: 12px; align-items: flex-start; width: 100%; cursor: pointer; }
.od-lijst input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--den); }

/* voet */
.od-voet { background: var(--den); color: var(--licht); font-size: 14.5px; padding-bottom: 26px; }
.od-voet__lijn { width: 100%; height: auto; }
.od-voet__in { display: flex; flex-wrap: wrap; gap: 8px 48px; padding-top: 10px; }
.od-voet a { color: var(--licht); }
.od-voet b { font-weight: 600; }