/* Site-wide light/dark theme (2026-10-28). Dark is the original palette; light overrides the 5 palette vars
   and the few hard-coded colours. The choice lives in sessionStorage "ow-theme" and is applied by an inline
   <head> script before paint; with no saved choice we follow prefers-color-scheme. High-contrast mode (a11y-hc) wins. */

/* Header toggle (upper right) */
.theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; margin: 0; padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--brand) 70%, transparent); border-radius: 999px; background: transparent;
  color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--hdr-hover, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle .ti-moon { display: none; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }
html[data-theme="light"] .theme-toggle .ti-moon { display: block; }
@media (max-width: 420px) { .theme-toggle { width: 2.4rem; height: 2.4rem; } .theme-toggle svg { width: 1.1rem; height: 1.1rem; } }
@media (max-width: 359.98px) { .theme-toggle { width: 2.2rem; height: 2.2rem; } }

/* Logo swap: white logo in dark mode, black logo in light mode */
.logo .logo-img-light { display: none; }
html[data-theme="light"]:not(.a11y-hc) .logo .logo-img-dark { display: none; }
html[data-theme="light"]:not(.a11y-hc) .logo .logo-img-light { display: block; }

/* ---------- Light palette ---------- */
html[data-theme="light"]:not(.a11y-hc) {
  --brand: #5b6479;
  --bg: #f6f7f9;
  --text: #14171c;
  --muted: #4b5262;
  --accent: #7d5c1e;
  color-scheme: light;
}

html[data-theme="light"]:not(.a11y-hc) .site-header {
  --hdr-bg: #ffffff;
  --hdr-panel: #ffffff;
  --hdr-hover: color-mix(in srgb, var(--brand) 10%, #fff);
  --hdr-line: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: 0 1px 10px rgb(20 23 28 / 8%);
}
html[data-theme="light"]:not(.a11y-hc) .nav-dd-menu,
html[data-theme="light"]:not(.a11y-hc) .nav-mobile { box-shadow: 0 16px 38px rgb(20 23 28 / 14%); }
html[data-theme="light"]:not(.a11y-hc) .nav-ico { color: #5b6479; }
html[data-theme="light"]:not(.a11y-hc) .nav-cta:hover,
html[data-theme="light"]:not(.a11y-hc) .nav .nav-mobile-cta:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff !important; }
html[data-theme="light"]:not(.a11y-hc) .nav-cta,
html[data-theme="light"]:not(.a11y-hc) .nav .nav-mobile-cta,
html[data-theme="light"]:not(.a11y-hc) .btn-primary,
html[data-theme="light"]:not(.a11y-hc) .promo-tag { color: #fff !important; }
html[data-theme="light"]:not(.a11y-hc) .btn-primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 85%, #000); }
html[data-theme="light"]:not(.a11y-hc) .nav-scout { border-color: #8a93a8; }

/* Cards / panels sit on white so they lift off the light grey page */
html[data-theme="light"]:not(.a11y-hc) .card,
html[data-theme="light"]:not(.a11y-hc) .problem,
html[data-theme="light"]:not(.a11y-hc) .steps li,
html[data-theme="light"]:not(.a11y-hc) .staff-card,
html[data-theme="light"]:not(.a11y-hc) .isp-card,
html[data-theme="light"]:not(.a11y-hc) .isp-success { background-color: #fff; background: #fff; box-shadow: 0 1px 3px rgb(20 23 28 / 6%); }
html[data-theme="light"]:not(.a11y-hc) .card-websites,
html[data-theme="light"]:not(.a11y-hc) .card-offer,
html[data-theme="light"]:not(.a11y-hc) .cta-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%), #fff;
}
html[data-theme="light"]:not(.a11y-hc) .hero {
  background:
    radial-gradient(ellipse 70% 55% at 75% -5%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 40% at 5% 90%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--bg);
}
html[data-theme="light"]:not(.a11y-hc) .site-footer { background: #eef0f4; }
/* A11y A1 (WCAG 1.4.3): .copyright opacity .85 faded the #7d5c1e footer links to 3.97:1; full opacity gives 5.38:1 on #eef0f4. Dark mode unchanged. */
html[data-theme="light"]:not(.a11y-hc) .copyright { opacity: 1; }
html[data-theme="light"]:not(.a11y-hc) .copyright a { color: #7d5c1e; }

/* Trusted-by strip: logos as soft black marks on light; hover still shows original colours */
html[data-theme="light"]:not(.a11y-hc) .client img { filter: brightness(0); opacity: 0.68; }
html[data-theme="light"]:not(.a11y-hc) .client:hover img,
html[data-theme="light"]:not(.a11y-hc) .client:focus-within img { filter: none; opacity: 1; }
html[data-theme="light"]:not(.a11y-hc) .client:hover,
html[data-theme="light"]:not(.a11y-hc) .client:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent); }

/* Calculators (estimate / ROI): light green input cells, dark text (AA) */
html[data-theme="light"]:not(.a11y-hc) .roi-inputs .roi-row input[type=number],
html[data-theme="light"]:not(.a11y-hc) .roi-preset select,
html[data-theme="light"]:not(.a11y-hc) .roi-pdf-email input { background: #eaf6ef; color: #0f3d24; border-color: #2f8a57; }
html[data-theme="light"]:not(.a11y-hc) .roi-inputs .roi-row input[type=number]:focus-visible,
html[data-theme="light"]:not(.a11y-hc) .roi-preset select:focus-visible,
html[data-theme="light"]:not(.a11y-hc) .roi-pdf-email input:focus-visible { outline-color: #2f8a57; }
html[data-theme="light"]:not(.a11y-hc) .est-row input[type=number] { background: #fff; }
html[data-theme="light"]:not(.a11y-hc) .est-row input::placeholder,
html[data-theme="light"]:not(.a11y-hc) .roi-preset input::placeholder,
html[data-theme="light"]:not(.a11y-hc) .roi-pdf-email input::placeholder { color: #5f6779; }
html[data-theme="light"]:not(.a11y-hc) .roi-chart-val { fill: #fff; }
html[data-theme="light"]:not(.a11y-hc) .roi-pdf-email input[aria-invalid=true] { border-color: #b4232a; }

/* Forms */
html[data-theme="light"]:not(.a11y-hc) .isp-input,
html[data-theme="light"]:not(.a11y-hc) .isp-textarea { background: #fff; }
html[data-theme="light"]:not(.a11y-hc) .isp-status { color: #b4232a; }

/* Cookie consent banner */
html[data-theme="light"]:not(.a11y-hc) .ow-cc-box { background: #fff; box-shadow: 0 12px 40px rgb(20 23 28 / 18%); }
html[data-theme="light"]:not(.a11y-hc) .ow-cc-gpc { color: #6b4e17; }

/* Ask Scott dialog is already a light panel; soften the backdrop in light mode */
html[data-theme="light"]:not(.a11y-hc) .scout-dialog { box-shadow: 0 30px 70px rgb(20 23 28 / 25%); }
html[data-theme="light"]:not(.a11y-hc) .scout-dialog::backdrop { background: rgb(20 23 28 / 45%); }

/* Make room for the toggle in the desktop header (>=1080px) without crowding the logo */
@media (min-width: 1080px) {
  .nav { gap: 0.5rem; }
  .nav-link, .nav-dd-toggle { padding: 0 0.5rem; }
  .nav-scout { padding: 0 0.8rem; }
  .nav-cta { padding-left: 1rem; padding-right: 1rem; }
  .theme-toggle { width: 2.5rem; height: 2.5rem; }
}
@media (min-width: 1080px) and (max-width: 1199.98px) {
  .nav { gap: 0.4rem; }
  .nav-link, .nav-dd-toggle { padding: 0 0.38rem; font-size: 0.92rem; }
  .nav-scout { padding: 0 0.6rem; }
  .nav-cta { padding-left: 0.8rem; padding-right: 0.8rem; }
  .logo-img:not(.logo-img-sm) { height: 3rem; }
}

/* Affiliate logos are white-on-transparent artwork: give them a dark tile in light mode */
/* /affiliates (2026-10-29): light mode shows each brand's official color logo; dark mode keeps the white versions */
.affiliate-logo.affiliate-logo-light { display: none; }
html[data-theme="light"]:not(.a11y-hc) .affiliate-logo.affiliate-logo-dark { display: none; }
html[data-theme="light"]:not(.a11y-hc) .affiliate-logo.affiliate-logo-light { display: block; }