/* ============================================================================
   Solar Loan EMI Calculator  —  style.css
   Mobile-first, single column. Solar theme: blue sky + gold sun + green subsidy.
   Kept lightweight on purpose (fast pages rank better — CLAUDE.md 4).
   ========================================================================== */

/* ---- Colour + spacing variables (change these to re-theme the whole site) --- */
:root {
  --blue-deep:   #0b3d91;
  --blue-mid:    #1565c0;
  --sky:         #64b5f6;
  --gold:        #ffb300;
  --gold-soft:   #fff3d6;
  --green:       #2e7d32;
  --green-soft:  #e6f4ea;
  --ink:         #1a2233;
  --muted:       #5b6472;
  --line:        #e2e6ee;
  --bg:          #f4f7fb;
  --card:        #ffffff;
  --warn-bg:     #fff4e5;
  --warn-border: #ffb300;
  --radius:      14px;
  --shadow:      0 2px 10px rgba(13, 40, 90, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

/* ---- 1. Hero header ---- */
.hero {
  background: linear-gradient(160deg, var(--blue-deep), var(--blue-mid) 60%, var(--sky));
  color: #fff;
  padding: 2rem 1.25rem 2.25rem;
  text-align: center;
}
.hero h1 {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  line-height: 1.25;
}
.hero-sub {
  margin: 0 auto;
  max-width: 640px;
  font-size: .98rem;
  opacity: .95;
}

/* ---- Layout container ---- */
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
}

/* ---- Cards ---- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

/* ---- Form controls ---- */
label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin: .85rem 0 .35rem;
}
select,
input[type="text"] {
  width: 100%;
  padding: .7rem .75rem;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
/* ---- Down-payment slider ----------------------------------------------
   Browsers each draw sliders differently, so we switch the default look off
   and draw our own: a thin grey rail that fills gold up to the handle, and a
   white handle with a gold ring. The gold fill length comes from the --fill
   variable, which script.js updates as the slider moves.
   The rules are repeated for -webkit- (Chrome/Edge/Safari) and -moz-
   (Firefox) because those browsers use different names for the same parts. */
/* Slider on the left, typed rupee amount on the right, bottoms lined up. */
.slider-row {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
}
/* The little "  25  %" box on the right of the slider */
.pct-box {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex: none;
}
.pct-box input {
  width: 4.2rem;
  text-align: right;
  padding-left: .4rem;
  padding-right: .4rem;
}
.pct-box span {
  font-weight: 700;
  color: var(--muted);
}

/* Space above the slider is reserved for the percentage bubble. */
.slider-wrap {
  position: relative;
  flex: 1;
  min-width: 0;            /* lets the slider shrink on narrow phones */
  padding-top: 1.9rem;
}

/* The blue bubble that rides above the handle showing the percentage.
   Its left position comes from --fillFrac (a number from 0 to 1 that
   script.js sets). The "100% - 20px" allows for the width of the handle,
   so the bubble stays centred over it at both ends of the rail. */
.slider-bubble {
  position: absolute;
  top: .1rem;
  left: calc(var(--fillFrac, 0) * (100% - 20px) + 10px);
  transform: translateX(-50%);
  background: var(--blue-deep);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  padding: .1rem .45rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;   /* never blocks dragging */
}
/* Small triangle under the bubble, pointing at the handle */
.slider-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--blue-deep);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;            /* tall enough to grab easily on a phone */
  margin: .1rem 0 0;
  background: transparent;
  cursor: pointer;
}

/* The rail */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--gold) var(--fill, 0%),
    var(--line) var(--fill, 0%)
  );
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
}
input[type="range"]::-moz-range-progress {   /* Firefox fills this itself */
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}

/* The round handle */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;        /* centres the handle on the 6px rail */
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold);
  box-shadow: 0 1px 4px rgba(13, 40, 90, .25);
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold);
  box-shadow: 0 1px 4px rgba(13, 40, 90, .25);
}

/* Keyboard users still get a visible ring; mouse users don't see a box */
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(21, 101, 192, .3);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(21, 101, 192, .3);
}
.hint {
  font-size: .85rem;
  color: var(--muted);
  margin: .5rem 0 0;
}

/* ---- Two fields side by side (loan amount + tenure) ----
   align-items: flex-end keeps the two boxes lined up even if one label
   wraps onto a second line. */
.field-row {
  display: flex;
  gap: .75rem;
  align-items: flex-end;
}
.field {
  flex: 1;
  min-width: 0;      /* lets the boxes shrink on a narrow phone screen */
}
.field-narrow {
  flex: none;
  width: 9.5rem;
}

/* ---- Two fields that pair up ONLY on a desktop screen ----
   On a phone this is a plain block, so the two fields stack exactly as
   they always did. The rule that turns it into a row lives in the
   min-width: 950px block at the bottom of this file. */
.field-row-desktop > .field {
  min-width: 0;
}

/* ---- Red inline error (e.g. loan amount greater than project cost) ---- */
.input-error {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  background: #fdecea;
  border: 1px solid #d32f2f;
  border-left-width: 5px;
  border-radius: 8px;
  color: #b00020;
  font-size: .85rem;
  font-weight: 600;
}

/* ---- Calculated down-payment display block ---- */
.down-display {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.down-display .down-label {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .2rem;
}
.down-display strong {
  font-size: 1.35rem;
  color: var(--blue-deep);
}
.down-display .down-pct {
  font-size: .85rem;
  color: var(--muted);
  margin-left: .4rem;
}

/* ---- Conditional home-loan box (Baroda/UCO) ---- */
.home-loan-box {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 10px;
}

/* ---- Cap warning ---- */
.warning {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-left-width: 5px;
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: #8a5a00;
}

/* ---- Interest rate row (sits inside the inputs card, under the bank) ---- */
.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
}
.rate-row strong { font-size: 1.25rem; color: var(--blue-mid); }

/* ---- EMI result block ---- */
.result-card {
  background: linear-gradient(160deg, var(--blue-deep), var(--blue-mid));
  color: #fff;
  text-align: center;
}
.result-card h2 { color: #fff; }
.emi-big {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  margin: .25rem 0 1rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.chip {
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: .55rem .8rem;
  min-width: 90px;
}
.chip span { display: block; font-size: .72rem; opacity: .85; }
.chip strong { font-size: .98rem; }

/* ---- Subsidy block ---- */
.subsidy-card { border-left: 5px solid var(--green); }
.subsidy-card h2 { color: var(--green); }
.emi-compare {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
.emi-col {
  flex: 1;
  text-align: center;
  padding: 1rem .5rem;
  border-radius: 10px;
  background: #f3f5f9;
}
.emi-col.highlight { background: var(--green-soft); }
.emi-col span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.emi-col strong { font-size: 1.35rem; }
.emi-col.highlight strong { color: var(--green); }

/* ---- Ad slots ----
   Removed 2026-07-31. There used to be an .ad-slot rule here that drew a grey
   striped placeholder box. The boxes themselves are gone from index.html (see
   the comments there), so this styling had nothing left to style.
   Nothing needs to go here until AdSense is approved. */

/* ---- Loan summary ---- */
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.summary-row:last-child { border-bottom: none; }
.summary-row strong { color: var(--blue-deep); }

/* ---- Supporting content / article sections (added 2026-07-31) -------------
   These style the written explainer + FAQ below the calculator. They only
   affect .prose blocks, so nothing here can change how the calculator looks.
   -------------------------------------------------------------------------- */
.prose {
  font-size: .95rem;
}
.prose h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem;
  color: var(--blue-deep);
}
.prose p {
  margin: .75rem 0;
}
.prose ul {
  margin: .75rem 0;
  padding-left: 1.15rem;
}
.prose li {
  margin: .35rem 0;
}

/* A highlighted box for step-by-step number examples. */
.worked-example {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: .8rem .9rem;
  line-height: 1.7;
}

/* A quieter aside — the "worth knowing" remarks. */
.note {
  background: var(--bg);
  border-left: 3px solid var(--sky);
  border-radius: 8px;
  padding: .7rem .9rem;
  font-size: .9rem;
  color: var(--muted);
}

/* Tables can be wider than a phone screen. This wrapper lets the TABLE
   scroll sideways on its own instead of making the whole page scroll. */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 320px;
  font-size: .88rem;
}
.prose caption {
  caption-side: bottom;
  padding-top: .5rem;
  font-size: .8rem;
  color: var(--muted);
  text-align: left;
}
.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: var(--bg);
  font-size: .82rem;
}
.prose tbody th[scope="row"] {
  background: var(--bg);
  font-weight: 600;
}

/* FAQ items: each question collapses until tapped, which keeps the page
   short on a phone. Search engines still read the answers inside. */
.prose details {
  border-bottom: 1px solid var(--line);
  padding: .2rem 0;
}
.prose details:last-of-type {
  border-bottom: none;
}
.prose summary {
  cursor: pointer;
  padding: .7rem 0;
  font-weight: 600;
  font-size: .93rem;
  list-style-position: outside;
}
.prose summary:hover {
  color: var(--blue-mid);
}
.prose details[open] summary {
  color: var(--blue-deep);
}
.prose details p {
  margin: 0 0 .8rem;
  color: var(--muted);
}

/* ---- Disclaimer ---- */
.disclaimer {
  margin: 1rem 0 2rem;
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  padding: 0 .5rem;
}

.error { color: #b00020; font-weight: 600; }

/* ---- Button-style link (used on the "page not found" page) ---- */
.back-link {
  display: inline-block;
  background: var(--blue-mid);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .7rem 1.2rem;
  border-radius: 10px;
}
.back-link:hover { background: var(--blue-deep); }

/* ---- Larger screens: give the hero a bit more room ---- */
@media (min-width: 700px) {
  .hero h1 { font-size: 2rem; }
}

/* ---- Desktop / laptop layout  (added 2026-08-02) ---------------------------
   Everything above this point is the phone layout and is left untouched.
   These rules only switch on when the browser window is wider than 950px,
   which is a laptop or a monitor — a phone never sees them.

   Three things change:
     1. The page may grow from 640px to 1120px wide, so the site stops
        sitting in a narrow strip with huge empty margins on a big screen.
     2. .calc-grid (see index.html) splits into two side-by-side columns —
        the inputs card on the left, the EMI/subsidy/summary cards on the
        right — so the answer is visible beside the questions.
     3. The written explainer and FAQ below are held back to 820px, because
        a line of text stretched to the full 1120px is genuinely tiring to
        read. Wide calculator on top, narrow reading column underneath.

   To adjust: 950px below is the width at which the two columns appear;
   1120px is how wide the page is allowed to get.
   -------------------------------------------------------------------------- */
@media (min-width: 950px) {
  main {
    max-width: 1120px;
    padding: 1.5rem 1rem 1rem;
  }

  .calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* two equal-width columns */
    gap: 1.25rem;
    align-items: start;              /* each column keeps its own height
                                        instead of both stretching to match */
  }

  /* System size + project cost become a side-by-side row here. */
  .field-row-desktop {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
  }
  .field-row-desktop > .field { flex: 1; }

  /* ---- Tighten the inputs card so it fits a laptop screen -------------
     A phone scrolls anyway, so the roomier spacing above is right there.
     On a desktop the whole card wants to be visible beside the results,
     so the gaps between the fields are pulled in. Nothing here changes a
     font size or a colour — only the empty space between things.
     Raise these numbers if it ever feels too cramped. ------------------- */
  .card { padding: 1.1rem 1.25rem; }
  label { margin: .55rem 0 .3rem; }
  /* Only the top/bottom padding is touched — the left/right padding is
     left alone so the small "%" box beside the slider keeps its own. */
  select,
  input[type="text"] { padding-top: .55rem; padding-bottom: .55rem; }
  .hint { margin-top: .4rem; }
  .slider-wrap { padding-top: 1.75rem; }

  /* ---- Written content below the calculator ----------------------------
     The explainer and FAQ cards run the full width of the page, the same
     as the calculator above, so nothing sits in a narrow strip.
     (An earlier version held them to 820px for easier reading; the
     full-width look was chosen instead. If the paragraphs ever feel too
     long to follow on a wide monitor, adding
         .prose { max-width: 820px; margin: 0 auto 1rem; }
     back in here is the whole fix.)
     The prose text is slightly larger here because a longer line needs a
     bigger type size to stay comfortable to read. ------------------------ */
  .prose { font-size: 1rem; }
}