/* Solar Home rebrand theme for the /learn/* guide pages.
 * public/style.css drives everything off CSS custom properties, so
 * re-pointing the tokens re-themes the whole page without touching
 * any component rule. Loaded after style.css.
 *
 * Locked to light: these pages previously flipped to a dark palette
 * on prefers-color-scheme:dark, which the redesigned hero pages
 * deliberately do NOT do (Ed: colors picked once, not via system
 * dark mode). Repeating the light block inside the dark media query
 * (guarded to skip an explicit data-theme="dark") keeps it locked.
 */
:root,
:root[data-theme="light"] {
  --orange:#b83713; --orange-dark:#963010; --orange-soft:#fdeee9;
  --btn:#b83713; --btn-h:#963010;
  --ink:#003870; --dark:#003870; --text:#395574; --muted:#607893;
  --rule:#dce9f1; --sand:#f1f8fc; --paper:#fff; --page:#fff;
  --leaf:#00877c; --leaf-soft:#e4f8f3;
  --disp:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --orange:#b83713; --orange-dark:#963010; --orange-soft:#fdeee9;
    --btn:#b83713; --btn-h:#963010;
    --ink:#003870; --dark:#003870; --text:#395574; --muted:#607893;
    --rule:#dce9f1; --sand:#f1f8fc; --paper:#fff; --page:#fff;
    --leaf:#00877c; --leaf-soft:#e4f8f3;
  }
}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em}
.top{border-bottom:1px solid var(--rule)}
.top .logo{height:34px!important;width:auto}
.btn{border-radius:999px;font-weight:650;letter-spacing:0;text-transform:none;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 18px #b8371122}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px #b8371130}
.kicker,.crumbs{letter-spacing:.08em}
.ticks li::before{background:var(--leaf);color:#fff;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;left:-1px;font-size:11px}
.faq{border-radius:14px;overflow:hidden;box-shadow:0 6px 18px #00387008}
details.faq{border-radius:14px;box-shadow:0 6px 18px #00387008}
.note{border-radius:10px}
.note-warn{border-left-color:var(--orange)}
.ctaband{border-radius:16px;border-left-width:5px}
.lchip{border-radius:999px;background:var(--sand);border:1px solid var(--rule);color:var(--dark);font-weight:600}
.lchip:hover{background:var(--orange-soft);border-color:var(--orange)}

/* Hero photo band -- real AllSolar equipment photos, never stock/AI. */
.hero{position:relative;background:linear-gradient(115deg,#fff7ee 0%,#f1f8fc 55%,#eafaf6 100%);overflow:hidden}
.hero-solo{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;padding-bottom:clamp(28px,4vw,44px)}
.hero-solo .stack{order:1}
.hero-solo .hero-photo{order:2}
@media(min-width:860px){.hero-solo:has(.hero-photo){grid-template-columns:1.15fr .85fr}}
.hero-photo{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #00387022;aspect-ratio:4/3}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media(hover:hover){.hero-photo:hover img{transform:scale(1.04)}}
@media(max-width:859px){.hero-photo{aspect-ratio:16/9;order:-1}}
@media(prefers-reduced-motion:reduce){.hero-photo img{transition:none}.hero-photo:hover img{transform:none}}
.leadshot img{border-radius:16px;box-shadow:0 16px 36px #00387018}