/* =========================================================
   Solar PV Sizer – Core CSS (merged)
   → Edited directly in cPanel only (no local build)
   ========================================================= */


/* ---------- 1. Root tokens ---------- */

:root {
  /* palette */
  --clr-primary: #F9A825;         /* warm amber for calls-to-action           */
  --clr-bg:       #ffffff;
  --clr-text:     #222222;
  --clr-muted:    #666666;
  --clr-border:   #e0e0e0;
  --clr-ad-bg:    #f5f5f5;        /* placeholder colour for empty ad slots    */
  --clr-button:   #3375BA;
  --clr-heading:  #f0f4f8;

  /* sizing */
  --wrapper-max:  1200px;
  --radius:       6px;
  --gap:          1rem;

  /* type scale (rem) */
  --fs-400: 1rem;    /* body */
  --fs-500: 1.125rem;
  --fs-600: 1.5rem;
  --fs-700: 2rem;    /* h1   */
}

/* ---------- 2. Global resets ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;          /* honour user’s default */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  font-size: var(--fs-400);
  color: var(--clr-text);
  background: var(--clr-bg);
}

/* Wrapper to keep content centred on large screens */
main,
.header,
.footer {
  width: 90%;
  max-width: var(--wrapper-max);
  margin-inline: auto;
}

/* Headings */
h1, h2, h3, h4 {
  margin: 0 0 .5em 0;
  line-height: 1.2;
}
h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); }
h3 { font-size: var(--fs-400); }

h1 { margin-top: 9px;}

/* Links */
a { color: var(--clr-primary); text-decoration: none; }

/* ---------- 3. Utility classes ---------- */

.btn {
  display: inline-block;
  padding: .65em 1.25em;
  border-radius: var(--radius);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: opacity .25s;
  background: var(--clr-border);
  color: var(--clr-text);
}
.btn:hover { opacity: .85; }

.btn--primary {
  background: var(--clr-button);
  color: #eee;
}
.btn--next,
.btn--prev {
  margin-block: 1rem;
}

/* Base ad slot */
.ad-slot {
  position: relative;            /* needed for the overlay label */
  display: block;
  margin: 2rem auto;
  background: var(--clr-ad-bg);
  border: 1px dashed var(--clr-border);
  color: var(--clr-muted);
  font-size: .875rem;
  text-align: center;
}

/* Top-left label */
.ad-slot::before {
  content: "Advertisement";
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  font-size: .7rem;
  line-height: 1;
  background: rgba(0,0,0,.06);   /* greyer chip */
  color: #6b7280;                /* grey text */
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
  z-index: 2;                    /* above the ad content */
  pointer-events: none;          /* clicks pass through */
}

/* Ensure the label stays on top of images/iframes */
.ad-slot img,
.ad-slot iframe,
.ad-slot > * {
  position: relative;
  z-index: 1;
}


.ad-slot--leaderboard { min-height: 90px; }
.ad-slot--skyscraper  { min-height: 600px; width: 160px; }

/* ---------- 4. Page-specific shells ---------- */

/* Header & footer */
.header { padding-block: 1.5rem .75rem; }
.header__title { font-size: var(--fs-700); margin-bottom: .25rem; }
.header__tagline { margin: 0; color: var(--clr-muted); }

.footer {
  border-top: 1px solid var(--clr-border);
  margin-top: 3rem;
  padding-block: 1rem;
  font-size: .875rem;
  text-align: center;
  color: var(--clr-muted);
}

/* Landing */
.page--landing .landing__intro {
  text-align: center;
  margin-block: 3rem 2rem;
}

/* Wizard */
.wizard__progress {
  height: 6px;
  background: var(--clr-border);
  border-radius: 3px;
  margin-block: 1rem 2rem;
}
.wizard__progress-bar {
  height: 100%;
  width: 0;                       /* JS will update */
  background: var(--clr-primary);
  border-radius: 3px;
  transition: width .3s;
}

.wizard__form {
  max-width: 600px;
  margin-inline: auto;
}

.wizard__step {
  display: none;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.wizard__step--active { display: block; }

/* Report */
.report__summary,
.report__details,
.report__cta {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.report__summary h2 {
  margin-top: 0;
  color: var(--clr-primary);
}

/* ---------- 5. Responsive (≥ 1024 px) ---------- */

@media (min-width: 1024px) {

  /* 5a. keep right-rail for ads on wide screens */
  .report {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 2rem;
  }
  .ad-slot--skyscraper {
    position: sticky;   /* stays in view while scrolling */
    top: 1rem;
  }

  /* Optional: add gentle card shadow */
  .wizard__step,
  .report__summary,
  .report__details,
  .report__cta {
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
  }
}

/* === Sprint 3b extras === */
.mapbox   { height: 300px; border: 1px solid var(--clr-border); border-radius: var(--radius); margin-bottom: 1rem; }
.latlon-wrap { display: flex; gap: 1rem; flex-wrap: wrap; }
.tilt-wrap { display: block; margin-block: 1rem; }

/* ---------- 6. Print tweaks (for PDF download later) ---------- */

@media print {
  .ad-slot,
  .btn,
  .wizard__progress { display: none !important; }
  body { color: #000; }
}


/* ------ Sprint: summary & inputs side-by-side ------ */
.report-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .report-top { flex-direction: row; }
  .report-top .card { flex: 1 1 50%; }
}

/* ---------- print stylesheet ---------- */
@media print {
  body, html { background:#fff; margin:0; }
  .noprint, .ad-slot--leaderboard { display:none !important; }
  .report-top, .report-right { flex-direction:column; }
  .card { page-break-inside:avoid; }

  /* 🔽 NEW: make canvas obey the card width */
  .card canvas {
    width:100% !important;        /* shrink to card */
    height:auto !important;       /* keep aspect */
    max-width:100% !important;
  }
}




:root {
  --clr-primary-text: #E08A00;   /* 4.4 : 1 vs white, still “amber” */
}

/* wherever primary is used for headings or links */
h1, h2, .btn--primary {
  color: var(--clr-primary-text);
}

/* keep buttons’ background the original amber */
.btn--primary {
  background: var(--clr-button);
  color: #eee;                   /* passes contrast on amber */
}
body, p, li {
  color: var(--clr-text);        /* already #222 (good) */
}
.muted, small, .field-note {
  color: #555;                   /* 5.2 : 1 vs white */
}



:root {
  --clr-primary-heading: #F9A825;  /* accessible amber for big headings */
  --clr-link: #1A1A1A;             /* dark link colour for small text */
}

/* headings that use the brand colour */
h1, h2 {
  color: var(--clr-primary-heading);
}

<meta name="description"
        content="Free online tool that calculates the exact solar-panel, inverter and battery size your home needs. Enter location & usage, download a shareable report.">

/* ---- simple responsive nav ---- */
.site-header{background:#fff;border-bottom:1px solid var(--clr-border)}
.site-header .wrapper{max-width:1200px;margin:0 auto;padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:1.25rem;color:var(--clr-primary-heading);text-decoration:none}
.site-nav{display:flex;gap:1rem}
.site-nav a{color:var(--clr-link);font-size:.95rem}

.nav-toggle{display:none}
.nav-icon{display:none}

@media(max-width:700px){
  .nav-icon{display:block;width:30px;cursor:pointer}
  .nav-icon span,
  .nav-icon span:before,
  .nav-icon span:after{display:block;height:2px;width:100%;background:var(--clr-link);position:relative}
  .nav-icon span:before,.nav-icon span:after{content:'';position:absolute;left:0}
  .nav-icon span:before{top:-8px}.nav-icon span:after{top:8px}
  .site-nav{position:fixed;top:0;right:-100%;height:100vh;width:200px;background:#fff;flex-direction:column;padding:4rem 1rem;transition:right .3s}
  .site-nav a{padding:.5rem 0}
  .nav-toggle:checked ~ .site-nav{right:0}
}
/* === 2025-05-06 refinement patch ===================== */

/* 1 ▸ Brand visibly bigger than in-content headings */
.brand{
  font-size:2rem;           /* was 1.5rem */
  letter-spacing:-.25px;
}

/* 2 ▸ Divider under section headings (h2) */
h2{
  position:relative;
  padding-bottom:.35rem;
}
h2::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:2.5rem;height:3px;
  background:var(--clr-border);
}

/* 3 ▸ Sleeker nav links (hover / active) */
.site-nav a{
  position:relative;
  padding-bottom:.25rem;
}
.site-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;
  height:2px;background:transparent;transition:background .25s;
}
.site-nav a:hover::after,
.site-nav a:focus::after{
  background:var(--clr-primary);
}

/* Optional: visually mark current page (add .is-active in PHP) */
.site-nav a.is-active::after{ background:var(--clr-primary); }

/* 4 ▸ Larger hamburger tap-area */
@media(max-width:700px){
  .nav-icon{
    width:44px;height:34px;          /* bigger box */
    display:flex;align-items:center;
  }
  .nav-icon span,
  .nav-icon span:before,
  .nav-icon span:after{
    height:2px;width:100%;
  }
  /* give the label some clickable padding */
  .nav-icon{padding:6px 0;}
}
/* === 2025-05-06 patch #2 — header line & tidy alignment ================== */

/* 1 ▸ Remove the per-heading divider we just added */
h2::after { display:none !important; }

/* 2 ▸ Header delineation that spans the full viewport */
.site-header{
  border-bottom:2px solid var(--clr-border);  /* thicker, always visible */
}

/* 3 ▸ Ensure page <h1> aligns with body text */
h1{ margin-left:0; }

/* 4 ▸ (Optional) make details/summary blocks align too */
details{ margin-left:0; }


/* ==== SVG diagram sizing & centering ==== */
.diagram-wrap {
  text-align: center;
  margin-bottom: 1rem;
}

/* ==== make the diagram fill the same width as the chart ==== */
.solar-diagram {
  width: 100%;   /* full width of its parent (.diagram-wrap / .card) */
  height: auto;  /* preserve aspect ratio */
  display: block;
  margin: 0 auto 1rem;
  color: #3375ba;
}


/* =========================================================
   Solar PV Sizer — UI Refresh (Sprint 3)
   “Next-level” CSS layer that sits on top of styles.css.
   Keep the existing colour palette but introduce fluid type,
   modern layouts, and a subtle motion language.
   ========================================================= */
   
   /* =========================================================
   Solar PV Sizer — UI Refresh …
   ========================================================= */

   
/******** 0. Modern CSS Reset ********************************/ 
:where(*, *::before, *::after){margin:0;padding:0;box-sizing:border-box;}

/******** 1. Root Design Tokens ******************************/
:root{
  /* palette */
  --clr-primary:#F9A825;          /* warm amber */
  --clr-bg:#ffffff;
  --clr-surface:#ffffff;
  --clr-surface-alt:#fafafa;
  --clr-text:#222222;
  --clr-muted:#666666;
  --clr-border:#e0e0e0;
  --clr-focus:#0066ff;

  /* spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;

  /* radius & elevation */
  --radius-s:4px; --radius:8px;
  --shadow-1:0 2px 4px rgb(0 0 0 / .06);
  --shadow-2:0 4px 12px rgb(0 0 0 / .08);

  /* fluid type */
  --fs-300:clamp(.875rem,.83rem + .22vw,1rem);
  --fs-400:clamp(1rem,.92rem + .38vw,1.25rem);
  --fs-500:clamp(1.25rem,1.1rem + .6vw,1.563rem);
  --fs-600:clamp(1.563rem,1.25rem + .75vw,2rem);
  --fs-700:clamp(2.125rem,1.7rem + 1.2vw,2.75rem);

  /* layout */
  --wrapper-max:1200px;
  --gap:var(--sp-5);
}
@media(prefers-color-scheme:dark){
  :root{
    --clr-bg:#121212;--clr-surface:#121212;--clr-surface-alt:#222222;--clr-text:#f5f5f5;--clr-muted:#bbbbbb;--clr-border:#333333;--clr-primary:#FFCA28;--clr-link:#f5f5f5;)
  }
}

@media (prefers-color-scheme: dark) {
  .kv li strong {
    background: transparent !important;
  }
}


/******** 2. Global Styles ***********************************/
html{font-size:100%;color-scheme:light dark;scroll-behavior:smooth;}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--fs-400);line-height:1.6;background:var(--clr-bg);color:var(--clr-text);display:flex;flex-direction:column;min-height:100vh;}
.wrapper{width:min(90%,var(--wrapper-max));margin-inline:auto;}


/******** 3. Typography **************************************/
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;}
h1{font-size:var(--fs-700);margin-block:var(--sp-5) var(--sp-4);} 
h2{font-size:var(--fs-600);margin-block:var(--sp-4) var(--sp-3);} 
h3{font-size:var(--fs-500);margin-block:var(--sp-3) var(--sp-2);} 
p,li{margin-block-end:var(--sp-3);} 

a{color:var(--clr-primary);text-decoration-color:color-mix(in srgb,var(--clr-primary) 50%,transparent);text-underline-offset:.15em;transition:color .2s;}
a:hover{color:color-mix(in srgb,var(--clr-primary) 70%,black 30%);} 

/******** 4. Layout Utilities ********************************/
.flex{display:flex;gap:var(--gap);} .flex.center{align-items:center;justify-content:center;}
.grid{display:grid;gap:var(--gap);} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}

/******** 5. Header ******************************************/
.site-header{position:sticky;top:0;z-index:10;background:var(--clr-surface);box-shadow:var(--shadow-1);padding-block:var(--sp-2);transition:box-shadow .3s;}
@supports(backdrop-filter:blur(10px)){.site-header{backdrop-filter:blur(10px);background:rgb(255 255 255 /.0);} }

/******** 6. Components **************************************/
/* Buttons */
.btn{display:inline-block;padding:.6em 1.2em;border:none;border-radius:var(--radius);font-weight:600;font-size:var(--fs-400);cursor:pointer;color:#eee;background:var(--clr-button);transition:transform .2s,box-shadow .2s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);} .btn:active{transform:translateY(0);box-shadow:var(--shadow-1);} 
/* Cards */
.card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:var(--sp-5);box-shadow:var(--shadow-1);transition:transform .3s,box-shadow .3s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);} 
/* Forms */
.field{position:relative;display:flex;flex-direction:column;margin-block-end:var(--sp-4);} .field label{margin-bottom:var(--sp-1);font-weight:600;font-size:var(--fs-300);color:var(--clr-muted);} 
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.75em 1em;border:1px solid var(--clr-border);border-radius:var(--radius);background:var(--clr-surface);transition:border-color .2s,box-shadow .2s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--clr-primary) 40%,transparent);} 
/* Alerts */
.alert{position:fixed;bottom:var(--sp-4);left:50%;transform:translateX(-50%) translateY(150%);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius);background:var(--clr-primary);color:#000;font-weight:600;box-shadow:var(--shadow-2);transition:transform .4s cubic-bezier(.4,.4,0,1);} .alert.show{transform:translateX(-50%) translateY(0);} 

/******** 7. Helper Classes **********************************/
.text-center{text-align:center;} .mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;} .hidden{display:none!important;}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;} 

/******** 8. Contact Form Enhancements ***********************/
.contact-form{display:grid;gap:var(--sp-4);max-width:540px;margin-inline:auto;}
@media(min-width:40rem){.contact-form{grid-template-columns:1fr 1fr;}.contact-form .field:nth-child(3){grid-column:1 / -1;}.contact-form button{grid-column:1 / -1;justify-self:start;}}
.contact-form textarea{min-height:8rem;resize:vertical;} .contact-form .btn{align-self:start;}

/******** 9. FAQ Accordion ***********************************/
.faq-list{max-width:700px;margin-inline:auto;}
.faq-list details{border-bottom:1px solid var(--clr-border);padding-block:var(--sp-3);} 
.faq-list summary{list-style:none;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2);} 
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::before{content:'▸';font-size:1.1em;transition:transform .3s;}
.faq-list details[open] summary::before{transform:rotate(90deg);} 
.faq-list details > *:not(summary){max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .4s ease;}
.faq-list details[open] > *:not(summary){max-height:40rem;opacity:1;} 
.faq-answer{margin-top:var(--sp-2);color:var(--clr-muted);line-height: 1.55;
}

/******** 10. Blog List **************************************/
.blog-list{max-width:700px;margin-inline:auto;margin-block-start:var(--sp-5);} 
.blog-list ul{list-style:none;padding:0;margin:0;}
.blog-list li{list-style:none;} 
.blog-post{display:flex;align-items:center;gap:var(--sp-3);padding-block:var(--sp-3);border-bottom:1px solid var(--clr-border);} 
.blog-post::before{content:'';width:.65rem;aspect-ratio:1;border-radius:50%;background:var(--clr-primary);transform:scale(.4);transition:transform .3s;} 
.blog-post:hover::before{transform:scale(1);} 
.blog-post a{flex:1;text-decoration:none;color:var(--clr-text);font-weight:600;transition:color .2s;} 
.blog-post a:hover{color:var(--clr-primary);} 

/******** 11. Wizard *****************************************/
.wizard{max-width:720px;margin-inline:auto;}
.wizard-steps{display:flex;gap:var(--sp-2);margin-block:var(--sp-4);} 
.wizard-steps li{flex:1;height:.25rem;background:var(--clr-border);border-radius:var(--radius-s);position:relative;overflow:hidden;} 
.wizard-steps li.active::after{content:'';position:absolute;inset:0;background:var(--clr-primary);} 

/* Animated step container */
.wizard-step{animation:fadeSlide .4s ease;} 

/* Wizard fields grid */
.wizard-fields{display:grid;gap:var(--sp-4);} 
@media(min-width:40rem){.wizard-fields.two-col{grid-template-columns:1fr 1fr;}} 
.wizard-fields.two-col > .field:nth-last-child(1){grid-column:1 / -1;} 

/* Range slider */
input[type="range"]{margin-top: 1.3rem;width:100%;appearance:none;height:.4rem;border-radius:var(--radius-s);background:var(--clr-border);cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--clr-primary);border:none;transition:transform .2s;} 
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);} 
input[type="range"]::-webkit-slider-thumb:focus-visible{outline:3px solid color-mix(in srgb,var(--clr-primary) 40%,transparent);} 
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--clr-primary);border:none;transition:transform .2s;} 
input[type="range"]::-moz-range-thumb:hover{transform:scale(1.15);} 
input[type="range"]::-moz-range-thumb:focus-visible{outline:3px solid color-mix(in srgb,var(--clr-primary) 40%,transparent);} 

/******** 12. Motion & Accessibility Overrides **************/
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important;}}

/******** 13. Animations *************************************/
@keyframes fadeSlide{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/******** 14. Container Queries ******************************/
@container style(--card){.card{padding:var(--sp-4);}}

/******** Wizard – basic field polish (step-1) ********/
.wizard__form input,
.wizard__form select {
  width: 100%;
  font: inherit;
  padding: .75em 1em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  background: var(--clr-surface);
  transition: border-color .2s, box-shadow .2s;
}

.wizard__form input:focus,
.wizard__form select:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 40%, transparent);
}

/* shrink the number-spin buttons in WebKit */
.wizard__form input[type="number"]::-webkit-inner-spin-button,
.wizard__form input[type="number"]::-webkit-outer-spin-button{
  height: auto;
}

/* keep each <fieldset> comfortably spaced */
.wizard__form fieldset{
  margin-bottom: var(--sp-5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

/******** Wizard – slider polish (step-2) ********/
.wizard input[type="range"] {
  height: .4rem;
  border-radius: var(--radius-s);
  background: var(--clr-border);
  cursor: pointer;
  /* fill the track up to the thumb with brand colour */
  background-image:
    linear-gradient(var(--clr-primary), var(--clr-primary));
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

/* update fill as the slider moves (modern browsers) */
.wizard input[type="range"]:has(:checked),
.wizard input[type="range"]:hover {
  background-size: calc( (var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%) 100%;
}

/* brand-coloured thumb (WebKit + Firefox) */
.wizard input[type="range"]::-webkit-slider-thumb,
.wizard input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--clr-primary);
  border: none;
  transition: transform .2s;
}
.wizard input[type="range"]::-webkit-slider-thumb:hover,
.wizard input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
}

/* Wizard – mobile slider fix (step-3) */
.wizard input[type="range"]{
  touch-action: pan-y;            /* let the finger slide vertically (scroll) but
                                     suppress horizontal panning that yanks page */
}

body{
  overscroll-behavior-x: contain; /* extra safety: lock the page against sideways
                                     overscroll glow on iOS/Android */
}

/* Wizard – neutral track (step-4) */
.wizard input[type="range"]{ background-image:none !important; }

/******** Wizard – map box polish (step-5) ********/
.wizard .mapbox{
    z-index: 5 !important; 
  width: 100%;
  height: 240px;                  /* good size on phones */
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;               /* keeps Leaflet tiles inside rounded corners */
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-4);
}
@media (min-width: 40rem){
  .wizard .mapbox{ height: 320px; }  /* a bit taller on tablets / desktop */
}

/* keyboard focus ring for accessibility */
.wizard .mapbox:focus-within{
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
}

/******** Mobile nav polish (step-6) *************************/

/* 1. Hide the checkbox itself */
.nav-toggle{
  position: absolute;
  inset: 0;
  width: 3rem;           /* tap area */
  height: 3rem;
  opacity: 0;
  cursor: pointer;
  z-index: 20;           /* above everything */
}

/* 2. Hamburger icon (three bars) */
.nav-icon{
  display: inline-block;
  width: 1.5rem;
  height: 1.125rem;
  position: relative;
  z-index: 19;           /* just under checkbox */
  cursor: pointer;
}
.nav-icon span,
.nav-icon::before,
.nav-icon::after{
  content: '';
  position: absolute;
  width: 100%;
  height: .125rem;
  background: currentColor;
  left: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-icon span{ top: 50%; transform: translateY(-50%); }
.nav-icon::before{ top: 0; }
.nav-icon::after { bottom: 0; }

/* 3. Icon morphs to “X” when checked */
.nav-toggle:checked + .nav-icon::before{
  transform: translateY(.5625rem) rotate(45deg);
}
.nav-toggle:checked + .nav-icon::after{
  transform: translateY(-.5625rem) rotate(-45deg);
}
.nav-toggle:checked + .nav-icon span{
  opacity: 0;
}

/* 4. Slide-out menu */
.site-nav{
  position: fixed;
  top: 0;
  right: -260px;           /* keep off-canvas */
  width: 260px;
  height: 100vh;
  padding: var(--sp-5) var(--sp-4);
  background: var(--clr-surface);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: right .35s cubic-bezier(.4,.1,0,1);
  z-index: 18;             /* under icon */
}

/* slide in when checkbox is checked */
.nav-toggle:checked ~ .site-nav{
  right: 0;
}

/* 5. Prevent body scroll when menu open */
body:has(.nav-toggle:checked){
  overflow: hidden;
}

/* ▸▸ Mobile-nav fixes (step-6a) ◂◂ */

/* 1. Keep the menu off-canvas even when user drags / overscrolls */
.site-nav{
  right: 0;                               /* anchor to viewport edge          */
  transform: translateX(100%);            /* sit fully off-screen             */
  pointer-events: none;                   /* ignore taps while hidden         */
  touch-action: none;                     /* stop accidental sideways reveal  */
}
.nav-toggle:checked ~ .site-nav{
  transform: translateX(0);               /* slide in */
  pointer-events: auto;                   /* become interactive */
  touch-action: auto;                     /* allow scrolling inside panel     */
}

/* 2. Desktop ≥ 48 rem (≈768 px): show the classic horizontal nav, hide burger */
@media (min-width: 48rem){

  /* hide hamburger checkbox + three-bar icon */
  .nav-toggle,
  .nav-icon{ display:none; }

  /* reset the nav to inline layout */
  .site-nav{
    position: static;          /* back to normal flow          */
    transform: none;           /* no slide animation needed     */
    height: auto;
    width: auto;
    box-shadow: none;
    background: none;
    flex-direction: row;
    gap: var(--sp-3);
    pointer-events: auto;
    touch-action: auto;
  }
}

/* 3. Extra safeguard: lock horizontal overscroll on the whole page */
body{ overscroll-behavior-x: contain; }

/* ▸▸ Mobile-nav slide-lock (step-6b) ◂◂ */

/* 1. Keep the panel outside the layout flow so it can’t widen the viewport */
.site-nav{
  right: -260px;                  /* sit fully off-screen by its own width   */
  transform: none;                /* no translate needed now                 */
  transition: right .35s cubic-bezier(.4,.1,0,1);
  touch-action: none;
}
.nav-toggle:checked ~ .site-nav{
  right: 0;                       /* slide in                                */
  touch-action: auto;
}

/* 2. Guarantee no horizontal scrolling while the panel is hidden */
html{ overflow-x: hidden; }        /* clamps any accidental page drag         */

/* 3. Body scroll still turns off when menu opens (rule from step-6)          */

/* ▸▸ Mobile-nav drag-lock (step-6c) ◂◂ */

:root{ --navW: 260px; }          /* easy width tweak later                */

/* hidden state — off-canvas via transform so it *never* widens viewport */
.site-nav{
  right: 0;
  transform: translateX(100%);
  width: var(--navW);
  touch-action: none;            /* ignore sideways drags on panel itself  */
  pointer-events: none;          /* panel not clickable while hidden       */
  transition: transform .35s cubic-bezier(.4,.1,0,1);
}

/* visible state */
.nav-toggle:checked ~ .site-nav{
  transform: translateX(0);
  touch-action: auto;
  pointer-events: auto;
}

/* absolutely stop page from scrolling sideways or rubber-banding */
html, body{
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
}
/* ▸▸ Desktop-nav spacing fix (step-6d) ◂◂ */
@media (min-width: 48rem){          /* desktop breakpoint used earlier */

  .site-nav{
    display: flex;                 /* be sure it’s a flex row   */
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);              /* nice even spacing         */
    width: auto;                   /* no leftover off-canvas width */
  }

  .site-nav a{
    white-space: nowrap;           /* keep each link on one line */
  }
}
/* ▸▸ Desktop-nav hard-reset (step-6e) ◂◂ */
@media (min-width: 48rem){

  /* kill *all* transforms/offsets the off-canvas panel uses */
  .site-nav{
    position: static !important;
    transform: none !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    background: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: var(--sp-4);
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  /* be sure each link is inline-block so none collapse */
  .site-nav a{
    display: inline-block;
    white-space: nowrap;
  }

  /* hide burger controls completely */
  .nav-toggle,
  .nav-icon{ display: none !important; }
}
/* ▸▸ FAQ underline + caret (step-FAQ-1) ◂◂ */
.faq-list summary{
  display: flex;
  justify-content: space-between;   /* question left, caret right */
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--clr-border);
  font-weight: 600;
  cursor: pointer;
}

.faq-list summary::before{ content:none; }   /* remove old ▸ glyph */

/* right-side caret */
.faq-list summary::after{
  content: '▾';                    /* down-pointing caret */
  font-size: .9em;
  color: var(--clr-muted);
  transition: transform .3s ease;
}

/* rotate upward when open */
.faq-list details[open] summary::after{
  transform: rotate(180deg);
}
/* ▸▸ FAQ single-underline (patch) ◂◂ */
.faq-list details{ border-bottom: 0; }          /* remove wrapper line */
/* ▸▸ Blog article polish (step-Blog-1) ◂◂ */
article.post,               /* wrapper used by WordPress/most CMSs   */
.blog-article,              /* or fallback class if you use one      */
.post-content{              /* or generic content div                */
  max-width: 68ch;          /* ≈ 950 px on desktop → generous white-space */
  margin-inline: auto;      /* centres and adds L/R breathing room   */
  padding-inline: var(--sp-5);
}

/* headings sit flush left, body text & lists indent a touch */
.post-content h2,
.post-content h3,
.post-content h4{
  margin-left: 0;           /* flush with wrapper edge               */
}

.post-content p,
.post-content ul,
.post-content ol{
  margin-left: var(--sp-4); /* indent ≈ 1 rem so bullets don’t poke left */
}

/* make bullet lists tidy & aligned */
.post-content ul,
.post-content ol{
  padding-left: var(--sp-4);
}
/* ▸▸ Blog article indent tweak (step-Blog-2) ◂◂ */

/* everything EXCEPT h-heading elements nudges right */
.post-content > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
  margin-left: var(--sp-5);   /* ~1.5 rem (adjust by choosing sp-4 or sp-6) */
}

/* tighten list bullets so the dot itself aligns under the indent, not outside */
.post-content ul,
.post-content ol{
  padding-left: var(--sp-5);  /* same value as margin-left above            */
}
/* ▸▸ Blog list hard-indent (step-Blog-3) ◂◂ */

/* select any list that follows an h-heading */
article ul,
article ol,
.post-content ul,
.post-content ol{
  margin-left: 1.75rem;   /* bullet/text block indents by ≈ 28 px   */
  padding-left: 1.75rem;  /* keeps the bullet itself within column */
}

/* if you want a bit more, bump both values to 2rem (32 px) */

/* headings breathing room */
.report h1{ font-size: var(--fs-600); margin-bottom: var(--sp-5); margin-top: 10px; }
.report h2{ font-size: var(--fs-500); margin-bottom: var(--sp-3); }

/* keep cards nicely spaced */
.report .card{ margin-top: var(--sp-5); }

/* share buttons row */
.share-wrap{ margin-top: var(--sp-5); display:flex; gap:var(--sp-4); }

/* --- AD rail behaviour --- */
.report-grid{ display:grid; grid-template-columns:1fr 160px; gap:var(--gap); }
@media (max-width: 899px){
  .report-grid{ grid-template-columns:1fr; }   /* ad drops below content   */
  .report-ad { position: static; margin-top:var(--sp-5); }
}
@media (min-width:900px){
  .report-ad{ position: sticky; top: var(--sp-5); } /* right-hand tower      */
}
/* hide raw lat/long fields but keep them for backend / validation */
.latlon-wrap label{ display:none; }
.share-expiry-note {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
.infotext p {
    font-size:0.85rem;
}
legend {
    font-weight:bold;
}

/* === HERO === */
.hero{
  display:flex;
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  margin-block:clamp(2rem,6vw,4rem);
  flex-direction:row-reverse;
}

.hero__graphic{
  flex:1 1 50%;
  max-width:700px;
}

.hero__graphic svg{
  width:100%;
  height:auto;
  /* gentle pulse on the sun circle (assumes id="sun") */
  #sun{ animation:pulse 5s infinite alternate ease-in-out; }
}

@keyframes pulse{
  from{ transform:scale(1); opacity:.9; }
  to  { transform:scale(1.06); opacity:1; }
}

.hero__copy{
  flex:1 1 40%;
}

@media (max-width:899px){
  .hero{ flex-direction:column; text-align:center; }
  .hero__graphic{ order:-1; }
}

.btn--icon {
  padding-inline: .65em;
  font-weight: 700;
  font-size: .9em;
  line-height: 1;
}
.share-wrap { display: flex; gap: .5rem; flex-wrap: wrap; }

#twShare { color:#000; }        /* X allows black */
#fbShare { color:#1877F2; }     /* Facebook blue */
#lnShare { color:#0A66C2; }     /* LinkedIn blue */

#twShare:hover { color:#000; }        /* X allows black */
#fbShare:hover { color:#1877F2; }     /* Facebook blue */
#lnShare:hover { color:#0A66C2; }     /* LinkedIn blue */

/* guard-page tweak – stop the system message floating right */
.report--expired .msg {
  float: none;          /* or remove whatever property you used (e.g. flex-row) */
  max-width: 38rem;     /* optional: cap width so it doesn’t stretch full-width */
  margin: 1rem 0;       /* nice spacing under the heading */
}

/* add to styles.css */
.expire-notice{
  background:#ffe5e5;        /* same light red as your ‘error’ banner */
  border:1px solid #ff9a9a;
  padding:.75rem 1rem;
  border-radius:.25rem;
  max-width:40rem;
  margin:1rem 0;
}

.flash {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  box-sizing: border-box;
}

.flash.success {               /* success look */
  background: #e7f8e7;
  border: 1px solid #4caf50;
  color: #225d25;
}

.flash.error {                 /* validation / mailer error */
  background: #fbe9e9;
  border: 1px solid #f44336;
  color: #a40000;
}

/* assets/blog.css  ─ or wherever you keep blog styles */
.blog-content ul, table{
  margin-left: 3em;   /* indents the entire list */
  padding-left: 0;      /* optional: remove default UL padding */
}

.blog-content p, blockquote {
  margin-left: 1.2em;   /* indents the entire list */
  padding-left: 0;      /* optional: remove default UL padding */
}

.blog-content h1 {
  font-size: 1.5em;   
  padding-left: 0;      /* optional: remove default UL padding */
}

.blog-content h2 {
  font-size: 1.2em;   
  padding-left: 0;      /* optional: remove default UL padding */
}

.blog-content th, td {
  text-align: center;   
  padding-left: 0;      /* optional: remove default UL padding */
}

.blog-content table {
  border-collapse: collapse;
}

.blog-content table td,
table th {
  border: 1px solid #ccc; /* light grey */
  padding: 0.5em;         /* optional: for spacing inside cells */
}

/* force report headings to render in plain black */
.report h1,
.report h2,
.report h3 {          /* include lower-level headings if you like */
  color: #000;
}
/* blue document headings */
:root { --clr-heading:#2b6cb0; }          /* tweak if you prefer another blue */

.report h1,
.report h2 { color:var(--clr-heading); }

/* size & spacing closer to screenshot */
.report h1 { font-size:clamp(1.6rem,4vw,2rem); line-height:1.25; margin:0 0 .4rem; padding-top:50px; }
.report h2 { font-size:1.1rem; font-weight:600; margin-top:var(--gap);padding-top:2px;margin-top:2px; }

.report-meta { color:var(--clr-muted); font-size:.85rem; margin:0 0 1.6rem; }

/* subtle divider under the header block */
.report-header + hr {
  border:0;
  border-top:1px solid var(--clr-border);
  margin:0 0 var(--gap);
}

/* key–value ‘table’ box */
.kv{
  list-style:none;margin:0;border:1px solid var(--clr-border);
  border-radius:.25rem;font-size:.95rem;overflow:hidden;
}


.kv li{display:grid;grid-template-columns:40% 1fr;}
.kv li:not(:last-child){border-bottom:1px solid var(--clr-border);}

.kv li strong{background: #f0f4f8;padding:.6rem .8rem;font-weight:600;}
.kv li span  {padding:.6rem .8rem;}

/* default: hide on screen --------------------------------------- */
.report-brand{ display:none; }

/* print: centre it under the last card -------------------------- */
@media print{
  .report-brand{
    display:block;
    font-size:.8rem;
    margin-top:1.5rem;
  }
}
.card + .card { margin-top:2.4rem; }   /* or use var(--gap) if you prefer */

/* pill styling (keep whatever you already had) */
.solar-grade {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .25em .75em;
  border-radius: 999px;
  font: 600 .9rem/1 var(--ff-body, system-ui);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15);
  transition: background-color .2s;
}
.solar-grade.hidden { display: none; }

/* NEW: vertical spacing relative to other elements */
.chosen-location + .solar-grade {           /* badge sits below the location */
  margin-block: .4rem 1rem;                 /* top 0.4 rem, bottom 1 rem */
}

/* optional: keep the badge left-aligned even if the Next button is centred */
#solar-grade { align-self: flex-start; }

#inputList img { border-radius:6px; height:auto; max-width:80%; }
/* keep caption tidy and slightly lighter */
#inputList .value div {
  font-size: 0.9em;
  color: #555;
}
#inputList svg {
  max-width: 100%;
  height: auto;
}
#inputList svg {
  max-width: 100%;
  height: auto;
  margin-top: .3rem;   /* keeps label + graphic tidy */
}
#inputList .value div { margin-bottom: .2rem; }  /* small gap above the SVG */
/* 1 – centre everything that lives in the “value” column */
#inputList .value {
  text-align: center;          /* text, degree label, everything */
}

/* 2 – make the SVGs act like block-level elements and auto-centre */
#inputList svg {
  display: block;
  margin: 0.3rem auto;         /* vertical gap + horizontal centring */
  max-width: 100%;
  height: auto;
}

/* 3 – keep the little degree/compass text centred too */
#inputList .value div {
  margin-bottom: 0.25rem;      /* small gap above each graphic */
}
/* Gauge under “Potential Production” */
/* only affects the Potential-Production gauge */
.gauge-wrap {
  text-align: left;
  margin-top: var(--sp-2);
  overflow: visible;       /* default in most browsers, but set it explicitly */
}

.gauge-wrap svg {
  display: block;
  margin: 0;
}

@media print {
  .share-expiry-note {
    display: none !important;
  }
}

/* force A4 no matter what paper the user picks */
@page {
  size: A4 portrait;
  margin: 1cm;
}

#tuneBlock label {
  display:block; margin:0.7rem 0;
}
#tuneBlock input[type=range] {
  width:100%;
}
#tuneBlock output { font-weight:600; }

/* END Styles Next */

.title-row { display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center;
            width:28px; height:28px; border:1px solid #E1E6EF; border-radius:10px;
            background:#fff; box-shadow:0 0 0 2px rgba(51,117,186,.08) inset; cursor:pointer; }
.icon-btn:hover { box-shadow:0 0 0 2px rgba(51,117,186,.18) inset; }
.inline-title-input { font:inherit; font-weight:inherit; color:inherit;
                      border:1px solid #D6DBE1; border-radius:8px; padding:.15rem .4rem; min-width:12ch; }
@media print { .icon-btn { display:none; } }
/* name looks lightly interactive */
.clickable {
  text-decoration: underline dotted transparent;
  cursor: pointer;
  transition: text-decoration-color .2s ease;
}
.title-row:hover .clickable { text-decoration-color: currentColor; }

/* small hint label */
.edit-hint {
  font-size: .9rem;
  color: #4b5563;
  margin-left: .25rem;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* show the hint when hovering the pencil */
.icon-btn:hover + .edit-hint,
.icon-btn:focus + .edit-hint { opacity: 1; transform: translateY(0); }

/* brief pulse to draw first-time attention */
.icon-btn.attn { animation: pulse-outline 1.2s ease-in-out 2; }
@keyframes pulse-outline {
  0%   { box-shadow: 0 0 0 2px rgba(51,117,186,.30) inset; }
  50%  { box-shadow: 0 0 0 4px rgba(51,117,186,.55) inset; }
  100% { box-shadow: 0 0 0 2px rgba(51,117,186,.30) inset; }
}