/* ═══════════════════════════════════════════════════════════════════════
   VELANCE AVIATION CLUB — LIGHT THEME (public website)
   Wit als pagina-achtergrond. Navbar, footer, mobiel menu, foto-banners en
   bestaande navy/gekleurde vlakken blijven donker.
   Wordt ná de inline <style> van elke pagina geladen, zodat deze regels winnen.
   Contrast (WCAG AA, 4.5:1 tekst / 3:1 UI) is per token nagerekend.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* pagina */
  --page-bg:#FFFFFF;
  --surface-alt:#F5F7FA;

  /* LIGHT sections (op wit / #F5F7FA) */
  --lt-heading:#071B33;             /* 17.3:1 — navy */
  --lt-body:#3A4B61;                /*  8.9:1 — navy-grijs */
  --lt-muted:#566273;               /*  6.2:1 */
  --lt-accent:#B84D08;              /*  5.1:1 — oranje voor kleine tekst/links op wit */
  --lt-border:rgba(7,27,51,.14);
  --lt-border-strong:rgba(7,27,51,.28);
  --lt-field-border:#7A8594;        /*  3.7:1 — UI-component grens */
  --lt-placeholder:#667085;         /*  5.0:1 */
  --lt-error:#B42318;               /*  6.6:1 */
  --lt-gold:#7A5F32;                /* champagne voor tekst op wit */

  /* DARK / NAVY sections (op #03111F / #071B33) */
  --dk-heading:#FFFFFF;
  --dk-body:rgba(216,226,236,.88);  /* 11.3:1 */
  --dk-muted:rgba(184,192,204,.78); /*  6.7:1 */
  --dk-faint:rgba(184,192,204,.68); /*  5.0:1 — footer metadata */

  /* merk / knoppen */
  --ch-hover:#E0691A;               /* hover van gevulde oranje knop, tekst --deep = 5.6:1 */
  --nav-bg:#03111F;                 /* navbar: volledig navy, niet-transparant */
}

/* ── BASIS ─────────────────────────────────────────────────────────── */
html{background:var(--deep,#03111F)}            /* overscroll boven/onder = navy */
body{background:var(--page-bg);color:var(--lt-body)}

/* Donkere vlakken houden lichte tekst als default */
nav,.mob-menu,footer,#hero,#cta-flyout,#abt-cta,.wwd-card,
#azure-page,#alpine-page,#opal-page,#champagne-page{color:#fff}

/* Focus: één zichtbare ring op zowel licht als navy */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--ch);outline-offset:3px}

/* ── NAVBAR (navy, opaque) ─────────────────────────────────────────── */
nav,nav.sc{background:var(--nav-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(> #hero) nav:not(.sc){background:transparent}   /* home: transparant boven de hero-video */
.nav-cta:hover{color:var(--deep,#03111F)}                /* 4.6:1 (was navy op oranje 4.1:1) */

/* ── MOBIEL MENU (navy) ────────────────────────────────────────────── */
.mob-menu-social a{color:var(--dk-body)}
.mob-menu a.active{color:var(--ch)}

/* ── FOOTER (navy) ─────────────────────────────────────────────────── */
.foot-links a{color:var(--dk-muted)}
.foot-kvk,.foot-copy{color:var(--dk-faint)}              /* was .42 alpha = 2.7:1 */
.foot-social-icons a{color:var(--dk-faint)}              /* was .5 alpha = 3.4:1 */
.foot-links a:hover,.foot-social-icons a:hover{color:var(--ch)}

/* ── GEDEELDE LIGHT-SECTIE ACHTERGRONDEN ───────────────────────────── */
#concept,#whatwedo,#club-intro,.intro-left,#join,#faq,               /* home */
#abt-idea,                                                            /* about */
#mem-free,#mem-know,#mem-faq,                                         /* membership */
.doc-section,                                                         /* legal / privacy */
.ds-split,#ds-showcase{background:var(--page-bg)}                     /* digital squadron */
.ds-split-media{background:transparent}

/* ── HEADINGS ──────────────────────────────────────────────────────── */
.concept-h,.intro-h,.intro-point-t,.join-h,.join-step-t,.faq-h,.faq-q,
.abt-h1,.abt-origin-h,.abt-origin-photo-name,.abt-origin-quote p,.abt-idea-h,.abt-idea-item-t,.abt-europe-h,
.contact-h1,.contact-label,.contact-form-t,.contact-result h2,
.mem-hero-h,.mem-sec-h,.mem-col-t,
.fo-hero-h,.cp-hero-h,
.ds-hero-h,.ds-sec-h,.ds-app-store-label,
.page-hero h1,.doc-h2,
.lv-h1,.lv-h2,
.apply-h,.step-head-title,.apply-result h2,.confirm-h,.pl-h,.pl-result h2,.pl-tagline{color:var(--lt-heading)}

/* ── BODYTEKST ─────────────────────────────────────────────────────── */
.concept-sub,.intro-point-p,.join-sub,.join-step-p,.faq-a-inner,
.abt-origin-p,.abt-idea-item-p,.abt-europe-p,
.contact-value,.contact-form-intro,.cf-consent,.contact-result p,
.mem-hero-sub,.mem-includes-p,.mem-free-p,.mem-know-p,
.ds-hero-sub,.ds-split-body p,.ds-app-p,.ds-showcase-sub,
.doc-p,.doc-list li,.doc-table td,
.lv-list>li,.lv-list-alpha>li,.lv-toc-list a,
.radio-opt,.consent-item,.apply-result p,.confirm-p,.pl-text,.pl-result p{color:var(--lt-body)}

/* ── SECUNDAIRE TEKST / METADATA ───────────────────────────────────── */
.abt-origin-photo-role,.mem-includes-note,.fo-empty,.ds-app-note,.ds-disclaimer,.ds-showcase-cap,
.doc-meta,.lv-meta,.lv-toc-t,.lv-closing,.lv-list-alpha>li::before,
.flabel,.flabel-opt,.cf-hint,.step-note,.step-intro,.field-hint,.apply-meta,.apply-note-sub,
.prog-label,.pl-fineprint{color:var(--lt-muted)}
.lv-meta strong,.lv-closing strong{color:var(--lt-heading)}

/* ── ORANJE ACCENTEN (kleine tekst → --lt-accent, groot/decoratief blijft --ch) ── */
.page-hero-label,.step-head-label,.apply-result-next,.confirm-next,.doc-table th,
.ds-app-store-status,.lv-list>li::before,.pl-tagline em,.join-link,.doc-p a{color:var(--lt-accent)}
.doc-p a{text-decoration:underline;text-underline-offset:2px}   /* link-onderscheid niet alleen op kleur */
.consent-item a{color:var(--lt-accent)}
.contact-value a{color:var(--lt-accent);text-decoration:underline;text-underline-offset:2px}
.contact-value a:hover{color:var(--lt-heading)}
.lv-toc-list a:hover{color:var(--lt-accent)}
.contact-socials a{color:var(--lt-muted)}
.contact-socials a:hover{color:var(--lt-accent)}
.faq-q:hover{color:var(--lt-accent)}

/* ── BORDERS / DIVIDERS ────────────────────────────────────────────── */
.faq-item,.doc-meta,.lv-article,.lv-closing{border-color:var(--lt-border)}
.doc-list li,.doc-table td{border-bottom-color:var(--lt-border)}
.doc-table th{border-bottom-color:var(--lt-border-strong)}
.consent-item{border-bottom-color:var(--lt-border)}

/* ═══ KNOPPEN ═══════════════════════════════════════════════════════ */
/* gevuld oranje: tekst --deep i.p.v. navy (4.6:1 i.p.v. 4.1:1); hover = lichter oranje, nooit wit-op-wit */
.btn-p,.price-cta,.btn-next,.btn-submit,.btn-contact-submit,.pl-submit{color:var(--deep,#03111F)}
.btn-p:hover,.price-cta:hover,.btn-next:hover,.btn-submit:hover,.btn-contact-submit:hover,.pl-submit:hover{background:var(--ch-hover);color:var(--deep,#03111F)}

/* oranje outline op licht */
.intro-cta,.btn-result-p,.btn-confirm-p{color:var(--lt-accent);border-color:var(--lt-accent)}
.intro-cta:hover,.intro-cta:focus-visible{color:var(--lt-heading);border-color:var(--lt-heading)}
.btn-result-p:hover,.btn-confirm-p:hover{background:var(--ch);border-color:var(--ch);color:var(--deep,#03111F)}

/* sluitbanner-knop die in membership op een wit vlak staat */
#mem-free .cta-flyout-btn{color:var(--lt-accent);border-color:var(--lt-accent)}
#mem-free .cta-flyout-btn:hover,#mem-free .cta-flyout-btn:focus-visible{background:var(--ch);border-color:var(--ch);color:var(--deep,#03111F)}

/* neutrale / secundaire knoppen op licht */
.btn-prev,.btn-result-s,.btn-confirm-s{color:var(--lt-body);border-color:var(--lt-border-strong)}
.btn-prev:hover,.btn-result-s:hover,.btn-confirm-s:hover{color:var(--lt-heading);border-color:var(--lt-heading)}

/* ═══ FORMULIEREN (contact, apply, apply-form, backup) ══════════════ */
.finput{background:#fff;border-color:var(--lt-field-border);color:var(--lt-heading)}
.finput::placeholder{color:var(--lt-placeholder);opacity:1}
.finput:hover{border-color:var(--lt-muted)}
.finput:focus{border-color:var(--ch);box-shadow:0 0 0 3px rgba(205,89,12,.22)}
.finput.err-field{border-color:var(--lt-error)}
select.finput option{background:#fff;color:var(--lt-heading)}
.finput:-webkit-autofill,.finput:-webkit-autofill:hover,.finput:-webkit-autofill:focus,.finput:-webkit-autofill:active{
  -webkit-text-fill-color:var(--lt-heading);
  -webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--lt-heading);border:1px solid var(--lt-field-border)}
.finput:autofill{-webkit-text-fill-color:var(--lt-heading);box-shadow:0 0 0 1000px #fff inset;border:1px solid var(--lt-field-border)}
.step-err,.cf-inline-err,.pl-err{color:var(--lt-error)}

/* apply: kaart + voortgang */
#apply-page .apply-bg,.apply-bg{background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(7,27,51,.05) 0%,transparent 60%)}
.pl-bg{background:radial-gradient(ellipse 60% 35% at 50% 0%,rgba(7,27,51,.05) 0%,transparent 60%)}
.apply-grid-overlay,.pl-grid-overlay{background-image:none}
.apply-card,.pl-card{background:var(--surface-alt);border:1px solid var(--lt-border)}
.prog-step:not(:last-child)::after{background:var(--lt-border-strong)}
.prog-dot{background:#fff;border-color:var(--lt-field-border);color:var(--lt-muted)}
.prog-step.active .prog-dot{border-color:var(--ch);color:var(--lt-accent);background:#fff;box-shadow:0 0 0 4px rgba(205,89,12,.14)}
.prog-step.done .prog-dot{border-color:var(--lt-accent);color:var(--lt-accent);background:#fff}
.prog-step.active .prog-label,.prog-step.done .prog-label{color:var(--lt-accent)}
.apply-result-icon,.confirm-icon,.pl-result-icon{border-color:var(--lt-accent)}

/* ═══ HOME ══════════════════════════════════════════════════════════ */
/* (hero, foto-kaarten, sluitbanner en footer blijven donker) */

/* ═══ MEMBERSHIP: foto/video vloeit uit in wit i.p.v. navy ══════════ */
.mem-free-media::after{background:linear-gradient(to right,rgba(3,17,31,.10) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,.72) 82%,#fff 100%)}
.mem-know-media::after{background:linear-gradient(to right,#fff 0%,rgba(3,17,31,.42) 26%,rgba(3,17,31,.42) 100%)}

/* ═══ LEGAL / PRIVACY ═══════════════════════════════════════════════ */
.doc-warning{background:rgba(122,95,50,.07);border-color:rgba(122,95,50,.4)}
.doc-warning p{color:var(--lt-gold)}

/* ═══ DIGITAL SQUADRON: screenshots blijven donkere frames op wit ═══ */
.ds-shot{border-color:rgba(7,27,51,.18)}
.ds-shot--main,.ds-shot--single{box-shadow:0 30px 70px -30px rgba(7,27,51,.45),0 8px 24px -12px rgba(7,27,51,.2)}
.ds-shot--secondary{box-shadow:0 20px 44px -22px rgba(7,27,51,.4),0 6px 18px -10px rgba(7,27,51,.18)}
.ds-shot--carousel{box-shadow:0 16px 32px -18px rgba(7,27,51,.4),0 4px 14px -8px rgba(7,27,51,.16)}
.ds-ac-arrow{background:#fff;border-color:var(--lt-border-strong);color:var(--lt-heading)}
.ds-ac-arrow:hover,.ds-ac-arrow:focus-visible{background:var(--surface-alt);border-color:var(--ch);color:var(--lt-heading)}
.ds-ac-dot{background:rgba(7,27,51,.5)}
.ds-ac-dot.is-active{background:var(--ch)}
.ds-app-store{border-color:var(--lt-border-strong);background:var(--surface-alt)}
.ds-app-store-icon{color:var(--lt-heading)}

/* ═══ FLY-OUT PAGINA'S (gekleurde merk-achtergrond blijft) ══════════
   Witte tekst met alpha viel onder 4.5:1 op champagne (#8F703F) en alpine (#406B7A). */
.cr-hero-loc,.cr-hero-meta span,.cr-hero-p,.cr-intro-eyebrow,.cr-intro-p,.cr-tl-p,.cr-cta-p,.cr-tl-num{color:#fff}
.ap-hero-loc,.ap-intro-eyebrow{color:rgba(255,255,255,.9)}
