/* Da Vinci School — LIGHT theme for the website (6 Nov 2026, Heike: "let's do it like that").
   Everything is scoped to html[data-theme="light"], set by /theme.js (choice in cookie dvs_theme, else the device setting).
   Dark stays the default. One file for all pages and languages: edit here, bump ?v= in the pages.
   Palette: paper #FAF7F1 · cards #FFFFFF · soft #F2EDE3 · text #15201E · text-2 #46504C · muted #5E6661
            deep teal #1C7069 (buttons: white text) · gold #8A6914 (text) / #8A6914 (fills, white text) */

/* the switch itself (both themes) */
.nav-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:10px;padding:0;border-radius:50%;
  border:1px solid rgba(244,239,230,.25);background:none;color:inherit;cursor:pointer;vertical-align:middle;transition:border-color .2s,color .2s}
.nav-theme:hover,.nav-theme:focus-visible{border-color:#5FC4BA;color:#5FC4BA;outline:none}
@media (max-width:900px){.nav-links .nav-theme{display:flex;margin:14px auto 0;width:42px;height:42px}}

html[data-theme="light"]{
  --night:#FAF7F1; --night-2:#FFFFFF; --night-3:#F2EDE3; --line:#E2DACB;
  --paper:#15201E; --paper-2:#46504C; --paper-3:#5E6661;
  --teal:#1C7069; --teal-light:#24887F; --teal-deep-bg:#1C7069;
  --turquoise:#1C7069; --turquoise-dark:#155650; --ultramarine:#3B55B0; --bronze:#8A6914;
  --ivory-warm:#3A3326; --turquoise-soft:#E6F1EE;
  --bg-green:#EEF5F3; --bg-teal-deep:#EEF5F3; --bg-soft-green:#EEF5F3;
  --bg-card:#FFFFFF; --card:#FFFFFF; --line-strong:#1C7069; --on-accent:#FFFFFF;
  --veil:rgba(250,247,241,.90);
  /* app-style names some pages use */
  --bg-primary:#FAF7F1; --bg-secondary:#FFFFFF; --text-primary:#15201E; --text-secondary:#46504C; --text-muted:#5E6661;
  --accent:#1C7069; --border:rgba(21,32,30,.14);
  color-scheme:light;
}
html[data-theme="light"] body{background:#FAF7F1!important;color:#15201E!important}

/* menu bar: light glass, dark words, the colour logo */
html[data-theme="light"] #nav.scrolled::before{background:rgba(250,247,241,.94)!important}
html[data-theme="light"] #nav.scrolled{box-shadow:0 1px 0 #E2DACB!important}
html[data-theme="light"] #nav a,html[data-theme="light"] #nav .nav-logo-text,html[data-theme="light"] #nav .nav-links a{color:#15201E!important}
html[data-theme="light"] #nav .nav-login{border-color:rgba(21,32,30,.35)!important}
html[data-theme="light"] .nav-toggle span,html[data-theme="light"] #nav.scrolled .nav-toggle span{background:#15201E!important}
html[data-theme="light"] .nav-logo-img--white{display:none!important}
html[data-theme="light"] .nav-logo-img--default{display:block!important;filter:none!important}
html[data-theme="light"] .nav-theme,html[data-theme="light"] .nav-lang-btn{border-color:rgba(21,32,30,.28)!important;color:#15201E!important}
html[data-theme="light"] .nav-theme:hover,html[data-theme="light"] .nav-lang-btn:hover{border-color:#1C7069!important;color:#1C7069!important}
html[data-theme="light"] .nav-lang-menu{background:#FFFFFF!important;border-color:rgba(28,112,105,.35)!important;box-shadow:0 14px 34px rgba(21,32,30,.14)!important}
html[data-theme="light"] .nav-lang-menu a{color:#15201E!important}
html[data-theme="light"] .nav-lang-menu a[aria-current]{color:#1C7069!important}
@media (max-width:1024px){html[data-theme="light"] .nav-links{background:rgba(250,247,241,.98)!important}
  html[data-theme="light"] .nav-links a,html[data-theme="light"] .nav-links .nav-links-logo{border-bottom-color:#E2DACB!important}}

/* "Next live" bar on top: deep teal, white words */
html[data-theme="light"] #topbar{background:#1C7069!important;color:#FFFFFF!important}
html[data-theme="light"] #topbar *{color:#FFFFFF!important}

/* buttons: white words on deep teal (5.9:1) */
html[data-theme="light"] .btn,html[data-theme="light"] .btn--filled:not(.dvs-dark *),html[data-theme="light"] .btn--gold:not(.dvs-dark *),html[data-theme="light"] .btn-submit:not(.dvs-dark *),html[data-theme="light"] .btn-book:not(.dvs-dark *),html[data-theme="light"] .ev-btn:not(.dvs-dark *),html[data-theme="light"] .wf-btn:not(.dvs-dark *),html[data-theme="light"] .wf-send:not(.dvs-dark *),html[data-theme="light"] .hero-cta:not(.dvs-dark *),html[data-theme="light"] button[type=submit]:not(.dvs-dark *){color:#FFFFFF!important}html[data-theme="light"] .btn--filled:hover,html[data-theme="light"] .btn--gold:hover,html[data-theme="light"] .btn-submit:hover{background:#155650!important;color:#FFFFFF!important}html[data-theme="light"] .ev-btn.ghost:not(.dvs-dark *),html[data-theme="light"] .btn--outline:not(.dvs-dark *),html[data-theme="light"] .btn-outline:not(.dvs-dark *){color:#1C7069!important;background:transparent!important;border-color:#1C7069!important}html[data-theme="light"] .wf-btn:not(.dvs-dark *),html[data-theme="light"] .wf-send:not(.dvs-dark *){background:#1C7069!important}/* forms */
html[data-theme="light"] input,html[data-theme="light"] textarea:not(.dvs-dark *),html[data-theme="light"] select:not(.dvs-dark *){background:#FFFFFF!important;color:#15201E!important;border-color:rgba(21,32,30,.22)!important}html[data-theme="light"] input::placeholder:not(.dvs-dark *),html[data-theme="light"] textarea::placeholder:not(.dvs-dark *){color:#6B726D!important}

/* footer */
html[data-theme="light"] footer,html[data-theme="light"] .footer,html[data-theme="light"] .site-footer{background:#F2EDE3!important;color:#15201E!important}
html[data-theme="light"] footer a{color:#15201E}
html[data-theme="light"] footer .footer-social a,html[data-theme="light"] footer [class*=social] a{border-color:rgba(21,32,30,.25)!important;color:#15201E!important}
html[data-theme="light"] footer img[src*="logo-white"]{filter:invert(1) brightness(.2)!important}

/* gold (Dialogues): deeper so it reads on light */
html[data-theme="light"] .nx.nx-dlg{border-color:rgba(168,128,31,.55)!important;background:linear-gradient(120deg,rgba(168,128,31,.08),rgba(168,128,31,0) 55%),#FFFFFF!important}
html[data-theme="light"] .nx.nx-dlg .dt b,html[data-theme="light"] .nx.nx-dlg .ev-btn{background:#8A6914!important;color:#FFFFFF!important}
html[data-theme="light"] .nx.nx-dlg .nx-tag,html[data-theme="light"] .pn-ev .pn-l,html[data-theme="light"] .pn-ev .pn-c,html[data-theme="light"] .dl-c{color:#8A6914!important}
html[data-theme="light"] .pn-card.pn-ev,html[data-theme="light"] .dl-card{border-color:rgba(168,128,31,.45)!important}
html[data-theme="light"] .nx{background-color:#FFFFFF!important}
html[data-theme="light"] .nx.nx-tst{background:linear-gradient(120deg,rgba(28,112,105,.07),rgba(28,112,105,0) 55%),#FFFFFF!important}
html[data-theme="light"] .dt{background:#FFFFFF!important}
html[data-theme="light"] .dt b{color:#FFFFFF!important}
html[data-theme="light"] .ws-bring{color:#1C7069!important;border-color:rgba(28,112,105,.5)!important}

/* cards and boxes */
html[data-theme="light"] .post-card,html[data-theme="light"] .pn-card,html[data-theme="light"] .dl-card,html[data-theme="light"] .fr,
html[data-theme="light"] .crs,html[data-theme="light"] .blog-cta{background-color:#FFFFFF!important;box-shadow:0 6px 22px rgba(21,32,30,.06)}
html[data-theme="light"] .ev-register .card{background:#EEF5F3!important;color:#15201E!important;box-shadow:0 10px 28px rgba(21,32,30,.08)!important}
html[data-theme="light"] .ev-register .card h2,html[data-theme="light"] .ev-register .card label,html[data-theme="light"] .ev-register .card .muted{color:#15201E!important}

/* the "Watch the full Dialogue free" pop-up */
html[data-theme="light"] .wf-pop{background:rgba(21,32,30,.45)!important}
html[data-theme="light"] .wf-dlg{background:#FFFFFF!important;border-color:rgba(21,32,30,.12)!important;box-shadow:0 24px 70px rgba(21,32,30,.25)!important}
html[data-theme="light"] .wf-h,html[data-theme="light"] .wf-lead,html[data-theme="light"] .wf-form label{color:#15201E!important}
html[data-theme="light"] .wf-small{color:#5E6661!important}
html[data-theme="light"] .wf-x{background:rgba(21,32,30,.06)!important;color:#15201E!important}
html[data-theme="light"] .wf-msg{background:#EEF5F3!important;color:#15201E!important}
html[data-theme="light"] .wf-form{background:transparent!important;border-color:rgba(21,32,30,.12)!important}

/* photo areas stay dark ("framed"): theme.js marks them .dvs-dark and they get the dark colours back */
html[data-theme="light"] .dvs-dark{--night:#0B1312;--night-2:#121C1A;--night-3:#18231F;--line:#26332F;--paper:#F4EFE6;--paper-2:#C9C3B6;--paper-3:#9E998D;--teal:#5FC4BA;--teal-light:#7FD3CA;--teal-deep-bg:#1F7A73;--ivory:#F4EFE6;--ink:#F4EFE6;--turquoise:#2FAFA7;--turquoise-dark:#1F7A73;--ultramarine:#7B95E8;--bronze:#D9B489;--teal-deep:#F4EFE6;--turquoise-text:#5FC4BA;--bronze-light:#7FD3CA;--ivory-light:#0B1312;--ivory-deep:#26332F;--ivory-warm:#EDE1C9;--turquoise-soft:#1A2B29;--ink-muted:#C9C3B6;--green:#F4EFE6;--green2:#5FC4BA;--gold:#5FC4BA;--gold-light:#7FD3CA;--cream:#F4EFE6;--warm-white:#0B1312;--charcoal:#F4EFE6;--muted:#C9C3B6;--sand:#26332F;--soft-green:#1A2B29;--cream-warm:#EDE1C9;--bg-warm-white:#0B1312;--bg-ivory-light:#0B1312;--bg-cream:#121C1A;--bg-ivory:#121C1A;--bg-cream-warm:#121C1A;--bg-ivory-warm:#121C1A;--bg-sand:#18231F;--bg-ivory-deep:#18231F;--bg-soft-green:#14211F;--bg-green:#0E1A18;--bg-teal-deep:#0E1A18;--bg-green2:#1F7A73;--bg-turquoise-dark:#1F7A73;--bg-gold:#5FC4BA;--bg-turquoise-text:#5FC4BA;--bg-gold-light:#7FD3CA;--bg-card:#121C1A;--line-strong:#5FC4BA;--on-accent:#0B1312;--card:#121C1A;--veil:rgba(11,19,18,.86);--text-primary:#F4EFE6;--text-secondary:#C9C3B6;--accent:#5FC4BA;color:#F4EFE6}
html[data-theme="light"] .dvs-dark .btn--filled,html[data-theme="light"] .dvs-dark .wf-btn{color:#0B1312!important}
html[data-theme="light"] .dvs-dark .btn--filled,html[data-theme="light"] .dvs-dark .wf-btn{background:#5FC4BA!important}
html[data-theme="light"] .dvs-dark .btn--on-dark,html[data-theme="light"] .dvs-dark .btn--outline,html[data-theme="light"] .dvs-dark .btn--outline-green,
html[data-theme="light"] .dvs-dark .ev-btn.ghost{color:#F4EFE6!important;border-color:rgba(244,239,230,.6)!important;background:transparent!important}
html[data-theme="light"] .dvs-dark input{background:#0B1312!important;color:#F4EFE6!important;border-color:rgba(244,239,230,.25)!important}

/* outline buttons on light */
html[data-theme="light"] .btn--outline-green,html[data-theme="light"] .btn--on-light{color:#1C7069!important;border-color:#1C7069!important;background:transparent!important}

/* footer: every word dark enough */
html[data-theme="light"] footer *{color:#2E3936}
html[data-theme="light"] footer a:hover{color:#1C7069}
html[data-theme="light"] footer .footer-heading,html[data-theme="light"] footer h4{color:#1C7069!important}
html[data-theme="light"] footer .btn,html[data-theme="light"] footer button{color:#FFFFFF!important}
html[data-theme="light"] #site-footer,html[data-theme="light"] #site-footer .footer-bottom{background:#F2EDE3!important;border-color:#E2DACB!important}
html[data-theme="light"] #site-footer *{color:#2E3936}
html[data-theme="light"] #site-footer .footer-heading{color:#1C7069!important}
html[data-theme="light"] #site-footer .btn,html[data-theme="light"] #site-footer button{color:#FFFFFF!important}
html[data-theme="light"] #site-footer input{background:#FFFFFF!important;color:#15201E!important}

html[data-theme="light"] #nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(250,247,241,.94);box-shadow:0 1px 0 #E2DACB}
html[data-theme="light"] #nav{isolation:isolate}

/* course pages (course-page.css): the outline button, the LIVE pill, the share label */
html[data-theme="light"] .cp-btn:not(.cp-go):not(.dvs-dark *){color:#1C7069!important;border-color:#1C7069!important;background:transparent!important}
html[data-theme="light"] .cp-btn.cp-go:not(.dvs-dark *){background:#1C7069!important;color:#FFFFFF!important}
html[data-theme="light"] .cp-live-badge:not(.dvs-dark *){color:#9C2B2F!important;border-color:rgba(156,43,47,.45)!important;background:rgba(229,72,77,.08)!important}
html[data-theme="light"] .dvs-share-label:not(.dvs-dark *){color:#46504C!important}
html[data-theme="light"] .dvs-share a:not(.dvs-dark *),html[data-theme="light"] .dvs-share button:not(.dvs-dark *){color:#15201E!important;border-color:rgba(21,32,30,.25)!important;background:#FFFFFF!important}
html[data-theme="light"] .quote-btn:not(.dvs-dark *),html[data-theme="light"] .btn.btn--filled:not(.dvs-dark *){background:#1C7069!important;color:#FFFFFF!important;border-color:#1C7069!important}
html[data-theme="light"] .dvs-dark .btn:not(.btn--on-dark):not(.btn--outline):not(.btn--outline-green):not(.hg-more){color:#0B1312!important}

/* ---- phone menu (6 Nov 2026, Heike: "don't like the login button", "theme and English next to each other",
   "menu on top, nothing cropped") — both themes ---- */
.nav-tools{display:contents}
@media (max-width:1024px){
  #nav.menu-open{z-index:1002!important}
  #nav.menu-open .nav-links{overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
  #nav.menu-open .nav-links a.nav-login{display:block!important;box-sizing:border-box;width:min(260px,78%);margin:24px auto 0!important;padding:13px 20px!important;
    text-align:center;border:0!important;border-radius:999px!important;background:#5FC4BA!important;color:#0B1312!important;font-weight:700!important;line-height:1.2!important}
  #nav.menu-open .nav-links a.nav-login::after,#nav.menu-open .nav-links a.nav-login::before{display:none!important}
  #nav.menu-open .nav-links .nav-tools{display:flex!important;align-items:center;justify-content:center;gap:12px;margin:18px auto 0}
  #nav.menu-open .nav-links .nav-tools .nav-theme{margin:0!important;width:44px;height:44px;flex:0 0 44px}
  #nav.menu-open .nav-links .nav-tools .nav-lang{display:block!important;margin:0!important}
  #nav.menu-open .nav-links .nav-tools .nav-lang-btn{height:44px;box-sizing:border-box;padding:0 16px!important;font-size:1rem!important}
  #nav.menu-open .nav-links .nav-tools .nav-lang-menu{position:absolute!important;left:50%;right:auto;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%);margin:0!important;width:180px;z-index:2}
}
html[data-theme="light"] #nav.menu-open .nav-links a.nav-login{background:#1C7069!important;color:#FFFFFF!important}

/* ---- desktop menu (6 Nov 2026, Heike: "more aligned to the right, a bit smaller fonts") — both themes ---- */
@media (min-width:1025px){
  #nav:not(.menu-open){--nav-gap:clamp(18px,1.9vw,30px)}
  #nav:not(.menu-open) .nav-logo{flex-shrink:0}
  #nav:not(.menu-open) .nav-links{gap:var(--nav-gap)!important;margin-left:auto!important;justify-content:flex-end;flex-wrap:nowrap}
  #nav:not(.menu-open) .nav-links a{font-size:.8rem!important;letter-spacing:.09em!important;white-space:nowrap}
  #nav:not(.menu-open) .nav-links a.nav-login{padding:6px 16px!important;line-height:1.2!important;margin-left:6px!important}
  /* Log in, sun/moon and language sit together as one small group */
  #nav:not(.menu-open) .nav-links>.nav-tools>.nav-theme,#nav:not(.menu-open) .nav-links>.nav-tools>.nav-lang,
  #nav:not(.menu-open) .nav-links>.nav-theme,#nav:not(.menu-open) .nav-links>.nav-lang{margin-left:calc(10px - var(--nav-gap))!important}
  /* pages whose menu is a list (homepage): Log in, sun/moon and language share one <li> */
  #nav:not(.menu-open) .nav-links li:has(.nav-login){display:flex;align-items:center;gap:10px}
  #nav:not(.menu-open) .nav-links li .nav-tools{display:flex!important;align-items:center;gap:10px}
  #nav:not(.menu-open) .nav-links li .nav-theme,#nav:not(.menu-open) .nav-links li .nav-lang,#nav:not(.menu-open) .nav-links li a.nav-login{margin:0!important}
  #nav:not(.menu-open) .nav-links .nav-theme{width:32px;height:32px}
  #nav:not(.menu-open) .nav-links .nav-lang-btn{font-size:.8rem!important;padding:6px 11px!important}
}

/* ---- Log in + language as icons on computers (6 Nov 2026, Heike) — the words stay for the phone menu ---- */
.nav-ic{display:none}
@media (min-width:1025px){
  #nav:not(.menu-open) .nav-links .nav-txt{display:none}
  #nav:not(.menu-open) .nav-links .nav-ic{display:block}
  #nav:not(.menu-open) .nav-links a.nav-login,#nav:not(.menu-open) .nav-links .nav-lang-btn,#nav:not(.menu-open) .nav-links .nav-theme{
    display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:34px!important;height:34px!important;padding:0!important;
    border-radius:50%!important;border:1px solid rgba(244,239,230,.25)!important;line-height:1!important}
  #nav:not(.menu-open) .nav-links a.nav-login{margin-left:4px!important}
  #nav:not(.menu-open) .nav-links a.nav-login::after,#nav:not(.menu-open) .nav-links a.nav-login::before{display:none!important}
  #nav:not(.menu-open) .nav-links a.nav-login:hover,#nav:not(.menu-open) .nav-links .nav-lang-btn:hover,#nav:not(.menu-open) .nav-links .nav-lang-btn[aria-expanded=true]{border-color:#5FC4BA!important;color:#5FC4BA!important}
  html[data-theme="light"] #nav:not(.menu-open) .nav-links a.nav-login,html[data-theme="light"] #nav:not(.menu-open) .nav-links .nav-lang-btn,html[data-theme="light"] #nav:not(.menu-open) .nav-links .nav-theme{border-color:rgba(21,32,30,.28)!important}
  html[data-theme="light"] #nav:not(.menu-open) .nav-links a.nav-login:hover,html[data-theme="light"] #nav:not(.menu-open) .nav-links .nav-lang-btn:hover{border-color:#1C7069!important;color:#1C7069!important}
}

/* phones: the logo in the menu bar is always there, not only after scrolling (6 Nov 2026, Heike) */
@media (max-width:1024px){#nav .nav-logo{visibility:visible!important}}
