/* ══════════════════════════════════════════════════
   LiTME — Day theme
   Loaded after styles.css. Everything here applies only
   when <html data-theme="day">; the night look is the
   default in styles.css and is not touched.

   Three areas stay dark in both themes, on purpose:
   the call-to-action band, the photo side of the
   contact panel, and the footer. Photos swap to their
   daytime versions (x.day.jpg) where those exist.
══════════════════════════════════════════════════ */

:root[data-theme="day"] {
  --day-bg: #f3f6f9;          /* page */
  --day-surface: #ffffff;     /* cards */
  --ink: #00142c;             /* text: the brand navy */
  --ink-2: rgba(0, 20, 44, 0.74);
  --ink-3: rgba(0, 20, 44, 0.58);
  --line: rgba(0, 20, 44, 0.1);
  /* The same brand teal as the night theme, for text and icons alike (the owner's choice).
     It is pale on white, about 2:1 contrast. A darker pair that passes contrast checks is
     #067a68 for text and #0a9a85 for icons, if small labels ever need to be easier to read. */
  --teal-ink: #0dc9ac;
  --teal-icon: #0dc9ac;
  --shadow-day: 0 10px 40px rgba(0, 20, 44, 0.1);
  color-scheme: light;
}

:root[data-theme="day"] body { background: var(--day-bg); color: var(--ink); }

/* ─── Areas that stay dark keep white text ─── */
:root[data-theme="day"] #hero,
:root[data-theme="day"] #footer,
:root[data-theme="day"] .contact-aside { color: var(--white); }

/* ─── Photos: show the daytime version where one exists ─── */
:root[data-theme="day"] .only-day { display: block; }
:root[data-theme="day"] .only-night { display: none; }

/* ─── Hero in daylight: the daytime photo under a light wash, navy headline ───
   Only where the hero has a daytime photo; the 404 page keeps its dark panel. */
:root[data-theme="day"] #hero:has(.hero-photo.has-day) { background: var(--day-bg); color: var(--ink); }
:root[data-theme="day"] .hero-photo.has-day { background: var(--day-bg); }
:root[data-theme="day"] .hero-photo.has-day::after {
  background: linear-gradient(0deg, var(--day-bg) 0%, rgba(243, 246, 249, 0.86) 30%, rgba(243, 246, 249, 0.86) 100%);
}
@media (min-width: 1025px) {
  :root[data-theme="day"] .hero-photo.has-day::after {
    background:
      linear-gradient(90deg, rgba(243, 246, 249, 0.97) 0%, rgba(243, 246, 249, 0.9) 34%, rgba(243, 246, 249, 0.35) 62%, rgba(243, 246, 249, 0.05) 100%),
      linear-gradient(0deg, var(--day-bg) 0%, rgba(243, 246, 249, 0) 14%),
      linear-gradient(180deg, rgba(243, 246, 249, 0.75) 0%, rgba(243, 246, 249, 0) 16%);
  }
}
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .hero-eyebrow,
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .teal-text,
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .cursor { color: var(--teal-ink); }
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .hero-sub { opacity: 1; color: var(--ink-2); }
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .btn-ghost {
  background: rgba(255, 255, 255, 0.7); color: var(--ink); border-color: rgba(0, 20, 44, 0.25);
}
:root[data-theme="day"] #hero:has(.hero-photo.has-day) .btn-ghost:hover { background: var(--day-surface); border-color: rgba(0, 20, 44, 0.45); }

/* ─── Menu bar: white once scrolled; dark text from the top where the hero is in daylight ─── */
:root[data-theme="day"] #navbar.scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 24px rgba(0, 20, 44, 0.08);
  border-bottom-color: var(--line);
}
:root[data-theme="day"] #navbar.scrolled .logo-li,
:root[data-theme="day"]:has(.hero-photo.has-day) #navbar .logo-li { color: var(--ink); }
:root[data-theme="day"] #navbar.scrolled .logo-tme,
:root[data-theme="day"]:has(.hero-photo.has-day) #navbar .logo-tme { color: var(--teal-ink); }
:root[data-theme="day"] #navbar.scrolled .hamburger span,
:root[data-theme="day"]:has(.hero-photo.has-day) #navbar .hamburger span { background: var(--ink); }
:root[data-theme="day"] #navbar.scrolled .hamburger.open span,
:root[data-theme="day"]:has(.hero-photo.has-day) #navbar .hamburger.open span { background: var(--white); }
@media (min-width: 769px) {
  :root[data-theme="day"] #navbar.scrolled .nav-links a:not(.btn),
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .nav-links a:not(.btn) { color: var(--ink-2); }
  :root[data-theme="day"] #navbar.scrolled .nav-links a:not(.btn):hover,
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .nav-links a:not(.btn):hover { color: var(--ink); }
  :root[data-theme="day"] #navbar.scrolled .nav-links a:not(.btn)[style*="teal"],
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .nav-links a:not(.btn)[style*="teal"] { color: var(--teal-ink) !important; }
  :root[data-theme="day"] #navbar.scrolled .nav-links a::after,
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .nav-links a::after { background: var(--teal-ink); }
  :root[data-theme="day"] #navbar.scrolled .btn-outline,
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .btn-outline { color: var(--ink); border-color: var(--ink); }
  :root[data-theme="day"] #navbar.scrolled .btn-outline:hover,
  :root[data-theme="day"]:has(.hero-photo.has-day) #navbar .btn-outline:hover { background: var(--ink); color: var(--white); }
}

/* ─── Teal as text, on light backgrounds ─── */
:root[data-theme="day"] main .eyebrow,
:root[data-theme="day"] main .teal-text,
:root[data-theme="day"] main .card-link,
:root[data-theme="day"] main .stage-tag,
:root[data-theme="day"] main .dept-note a { color: var(--teal-ink); }
/* ...but bright teal again inside the dark areas */
:root[data-theme="day"] #hero .teal-text,
:root[data-theme="day"] #hero .hero-eyebrow,
:root[data-theme="day"] #cta-banner .navy-text,
:root[data-theme="day"] .contact-aside .eyebrow,
:root[data-theme="day"] .contact-aside .teal-text { color: var(--teal); }

/* Line icons: a slightly deeper teal so they hold on white */
:root[data-theme="day"] main svg[stroke="#0dc9ac"],
:root[data-theme="day"] main svg [stroke="#0dc9ac"] { stroke: var(--teal-icon); }
:root[data-theme="day"] main svg [fill="#0dc9ac"] { fill: var(--teal-icon); }

/* ─── The three cards over the hero: frosted glass, as at night, in a light tint ─── */
:root[data-theme="day"] .why-item.highlight {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 50px rgba(0, 20, 44, 0.14);
}
:root[data-theme="day"] .why-item.highlight:hover { background: rgba(255, 255, 255, 0.68); border-color: rgba(13, 201, 172, 0.6); }
:root[data-theme="day"] .steps .why-item .step-num { -webkit-text-stroke: 1.8px var(--teal-ink); }

/* ─── Photo sections ─── */
:root[data-theme="day"] .split-text > p:not(.eyebrow) { color: var(--ink-2); }
:root[data-theme="day"] .split-text > p.split-close { color: var(--ink); border-left-color: var(--teal-icon); }
:root[data-theme="day"] .split-media img { box-shadow: var(--shadow-day); }
:root[data-theme="day"] .cert-badge { color: var(--teal-ink); border-color: rgba(6, 122, 104, 0.4); background: rgba(13, 201, 172, 0.08); }

/* ─── What we take on: a light wash over the backdrop photo, white cards ─── */
:root[data-theme="day"] #services.see-through {
  background-color: var(--day-bg);
  background-image:
    linear-gradient(180deg, var(--day-bg) 0%, rgba(243, 246, 249, 0.9) 22%, rgba(243, 246, 249, 0.9) 78%, var(--day-bg) 100%),
    var(--backdrop-day, var(--backdrop, none));
}
:root[data-theme="day"] .see-through .service-card,
:root[data-theme="day"] .service-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
  box-shadow: 0 6px 28px rgba(0, 20, 44, 0.07);
}
:root[data-theme="day"] .see-through .service-card:hover {
  background: var(--day-surface);
  border-color: rgba(13, 201, 172, 0.55);
  box-shadow: 0 14px 40px rgba(0, 20, 44, 0.12);
}
:root[data-theme="day"] .card-icon { background: rgba(13, 201, 172, 0.12); }
:root[data-theme="day"] .cover-list { border-top-color: var(--line); }
:root[data-theme="day"] .cover-list li { color: var(--ink-2); }
:root[data-theme="day"] .cover-list li::before { background: var(--teal-icon); }

:root[data-theme="day"] .dept-lead {
  background: linear-gradient(120deg, rgba(13, 201, 172, 0.2), rgba(255, 255, 255, 0.92) 55%);
  border-color: rgba(13, 201, 172, 0.45);
  box-shadow: 0 6px 28px rgba(0, 20, 44, 0.07);
}
:root[data-theme="day"] .dept-lead::after { background: linear-gradient(var(--teal-icon), rgba(10, 154, 133, 0.15)); }
:root[data-theme="day"] .dept-lead p:not(.eyebrow) { color: var(--ink-2); }
:root[data-theme="day"] .chips li { background: var(--day-surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="day"] .dept-note { color: var(--ink-2); }

/* ─── Contact: the photo side stays dark, the form side goes light ─── */
:root[data-theme="day"] .contact-panel {
  background: var(--day-surface);
  border-color: var(--line);
  box-shadow: 0 18px 60px rgba(0, 20, 44, 0.14);
}
:root[data-theme="day"] .form-group label { color: var(--ink-2); }
:root[data-theme="day"] .form-group input,
:root[data-theme="day"] .form-group select,
:root[data-theme="day"] .form-group textarea {
  background-color: #f6f8fb;
  border-color: rgba(0, 20, 44, 0.18);
  color: var(--ink);
}
:root[data-theme="day"] .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23067a68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
:root[data-theme="day"] .form-group select option { background: var(--day-surface); color: var(--ink); }
:root[data-theme="day"] .form-group input::placeholder,
:root[data-theme="day"] .form-group textarea::placeholder { color: rgba(0, 20, 44, 0.42); }
:root[data-theme="day"] .form-group input:focus,
:root[data-theme="day"] .form-group select:focus,
:root[data-theme="day"] .form-group textarea:focus { border-color: var(--teal-ink); background-color: var(--day-surface); }
:root[data-theme="day"] .form-group input:focus-visible,
:root[data-theme="day"] .form-group select:focus-visible,
:root[data-theme="day"] .form-group textarea:focus-visible { box-shadow: 0 0 0 3px rgba(13, 201, 172, 0.3); }
:root[data-theme="day"] .field-error,
:root[data-theme="day"] .form-status.is-error { color: #b3261e; }
:root[data-theme="day"] .form-group [aria-invalid="true"] { border-color: #b3261e; }
:root[data-theme="day"] .form-status { color: var(--ink-2); }

/* ─── Keyboard focus ring: readable on white ─── */
:root[data-theme="day"] main :focus-visible { outline-color: var(--teal-ink); }
:root[data-theme="day"] .contact-aside :focus-visible,
:root[data-theme="day"] #cta-banner :focus-visible { outline-color: var(--teal); }

/* ─── Contact panel photo side: the daytime lounge, under a lighter navy layer ─── */
:root[data-theme="day"] .contact-aside {
  background-image:
    radial-gradient(120% 70% at 0% 0%, rgba(13, 201, 172, 0.22), rgba(13, 201, 172, 0) 60%),
    linear-gradient(rgba(0, 20, 44, 0.62), rgba(0, 20, 44, 0.8)),
    var(--contact-bg-day, var(--contact-bg, none));
}

/* ─── Floating clock and its options ─── */
/* the clock turns the deeper teal on hover so it reads on the light page */
:root[data-theme="day"] .theme-clock:hover,
:root[data-theme="day"] .theme-clock:focus-visible,
:root[data-theme="day"] .theme-float.open .theme-clock,
:root[data-theme="day"] .theme-float:hover .theme-clock { color: var(--teal-ink); }
:root[data-theme="day"] .theme-float .theme-switch {
  background: rgba(255, 255, 255, 0.94); border-color: rgba(0, 20, 44, 0.14);
  box-shadow: 0 8px 28px rgba(0, 20, 44, 0.16);
}
:root[data-theme="day"] .theme-float .theme-switch button { color: var(--ink-2); }
:root[data-theme="day"] .theme-float .theme-switch button:hover { color: var(--ink); }
:root[data-theme="day"] .theme-float .theme-switch button[aria-pressed="true"] { background: var(--teal); color: var(--navy); }

/* ─── Service card icons and stage pills on white ─── */
:root[data-theme="day"] .dept .card-icon { background: none; }
:root[data-theme="day"] .dept .card-icon svg rect,
:root[data-theme="day"] .dept .card-icon svg circle,
:root[data-theme="day"] .dept .card-icon svg path[d$="z"] { fill: rgba(13, 201, 172, 0.16); }
:root[data-theme="day"] .dept .service-card p.stage-tag { border-color: rgba(6, 122, 104, 0.35); background: rgba(13, 201, 172, 0.1); }
:root[data-theme="day"] .dept .service-card .card-link:focus-visible::after { outline-color: var(--teal-ink); }

/* ─── Service pages ─── */
:root[data-theme="day"] .svc-band.see-through {
  background-color: var(--day-bg);
  background-image:
    linear-gradient(180deg, var(--day-bg) 0%, rgba(243, 246, 249, 0.9) 22%, rgba(243, 246, 249, 0.9) 78%, var(--day-bg) 100%),
    var(--backdrop-day, var(--backdrop, none));
}
:root[data-theme="day"] .faq details { background: rgba(255, 255, 255, 0.9); border-color: var(--line); box-shadow: 0 6px 28px rgba(0, 20, 44, 0.06); }
:root[data-theme="day"] .faq details:hover,
:root[data-theme="day"] .faq details[open] { border-color: rgba(13, 201, 172, 0.55); }
:root[data-theme="day"] .faq details p { color: var(--ink-2); }
:root[data-theme="day"] .faq summary::after { color: var(--teal-ink); }

/* ─── Service links and the Services menu ─── */
:root[data-theme="day"] .svc-links a { background: rgba(255, 255, 255, 0.9); border-color: var(--line); box-shadow: 0 4px 18px rgba(0, 20, 44, 0.05); }
:root[data-theme="day"] .svc-links a:hover { border-color: var(--teal); color: var(--ink); }
@media (min-width: 769px) {
  :root[data-theme="day"] #navbar .nav-drop-menu { background: rgba(255, 255, 255, 0.98); border-color: var(--line); box-shadow: 0 18px 50px rgba(0, 20, 44, 0.16); }
  :root[data-theme="day"] #navbar .nav-links .nav-drop-menu a { color: var(--ink-2); }
  :root[data-theme="day"] #navbar .nav-links .nav-drop-menu a:hover { color: var(--ink); background: rgba(13, 201, 172, 0.14); }
}