/* =========================
   TOKENS / BRAND SWITCHES
   ========================= */
:root{
  /* Page + text */
  --bg:#f6f8ff;
  --ink:#0f172a;

  /* Blues */
  --blue-50:#eef5ff;
  --blue-100:#e7efff;
  --blue-200:#d6e2ff;
  --blue-600:#2563eb;
  --blue-700:#1e40af;
  --blue-900:#083c6f;

  /* Accents */
  --green-600:#10b981;
  --green-700:#059669;
  --red-600:#ef4444;
  --red-700:#b91c1c;

  /* Surfaces */
  --card:#ffffff;
  --border:#e7e9f3;

  /* ===== Brand palette (edit these two only) ===== */
  --brand-header:#0b5cff;  /* e.g. blue: #0b5cff | green: #10b981 | navy: #083c6f */
  --brand-footer:#0b5cff;  /* usually same as header, but can differ */
}

/* =============== BASE =============== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}
.wrap{ max-width:1200px; margin:0 auto; padding:0 3%; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 3% 40px; }

/* =============== HEADER =============== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand-header);   /* brand color */
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:12px 3%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{ font-weight:800; font-size:1.5rem; letter-spacing:.2px; color:#fff; text-decoration:none; }

/* top nav tabs */
.tabs{ display:flex; gap:16px; flex-wrap:wrap; }
.tabs .tab{
  color:#fff; text-decoration:none; font-weight:700;
  opacity:.92; padding:6px 8px; border-radius:6px;
}
.tabs .tab:hover{ opacity:1; background:rgba(255,255,255,.12); }
.tabs .tab.active{ background:rgba(255,255,255,.18); }

/* =============== FOOTER =============== */
.site-footer{
  background:var(--brand-footer);   /* brand color */
  color:#fff;
  padding:18px 3%;
  text-align:center;
}

/* The inline links bar that sits above the blue footer
   (on a light page background) — keep readable/dark */
.footer-links{
  text-align:center;
  margin:24px auto 12px;
  color:#334155;                /* dark text on light bg */
  font-size:.95rem;
}
.footer-links a{
  color:var(--blue-600);        /* accessible link color */
  text-decoration:none;
  font-weight:600;
}
.footer-links a:hover{ text-decoration:underline; }

/* =============== HOME: HERO (compact scientific calculator ~40% height) =============== */
.hero-40{
  min-height:40vh;
  display:flex; align-items:center; justify-content:center;
  padding:12px 0; margin-bottom:28px;
}
.calc-compact{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
}
.calc-compact.mini{ max-width:640px; width:100%; padding:10px; }
.calc-compact .display{
  border:2px solid var(--blue-200);
  border-radius:10px; background:#fff;
  padding:8px 10px; margin-bottom:8px;
}
.calc-compact .exp{ font-size:.95rem; color:#0b245f; opacity:.85; word-break:break-word; }
.calc-compact .res{ text-align:right; font-size:1.08rem; color:#0b245f; font-variant-numeric:tabular-nums; }
.calc-compact .mode{ display:flex; align-items:center; gap:14px; margin:2px 0 8px; }
.calc-compact .mode input{ accent-color:var(--blue-600); }
.calc-compact .mode label{ display:inline-flex; gap:6px; align-items:center; color:#0b245f; font-weight:700; }
.calc-compact .keyzone{ display:grid; grid-template-columns:1.25fr .9fr; gap:8px; }
.calc-compact .group{ display:grid; gap:6px; }
.calc-compact .group-func{ grid-template-columns:repeat(6,1fr); }
.calc-compact .group-pad{  grid-template-columns:repeat(4,1fr); }
.calc-compact button{
  border:1px solid var(--blue-200);
  background:#fff; color:#0b245f;
  border-radius:10px; padding:6px 0; min-height:30px;
  font:700 .86rem/1 system-ui,"Segoe UI",Inter,Arial;
  cursor:pointer; transition:.15s transform,.15s background,.15s border-color;
}
.calc-compact button:hover{ transform:translateY(-1px); background:var(--blue-50); }
.calc-compact button.eq{ background:var(--blue-600); color:#fff; border-color:var(--blue-700); }
.calc-compact button.ac{ background:var(--green-600); color:#fff; border-color:var(--green-700); }
.calc-compact button.danger{ background:var(--red-600); color:#fff; border-color:var(--red-700); }
.calc-compact .span-2{ grid-column:span 2; }
.calc-compact .span-4{ grid-column:span 4; }

/* compact/tight mode */
.calc-compact.tight .display{ padding:7px 9px; margin-bottom:8px; }
.calc-compact.tight .exp{ font-size:.92rem; }
.calc-compact.tight .res{ font-size:1.02rem; }
.calc-compact.tight button{ min-height:28px; padding:5px 0; font-size:.84rem; }
.calc-compact.tight .group{ gap:5px; }
.calc-compact.tight .keyzone{ gap:7px; }

@media (max-width:900px){
  .calc-compact.mini{ max-width:100%; }
  .calc-compact .keyzone{ grid-template-columns:1fr; }
}

/* =============== HOME: CATEGORY CARDS =============== */
.grid.grid-4{ display:grid; gap:18px; }
@media (min-width:600px){  .grid.grid-4{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (min-width:900px){  .grid.grid-4{ grid-template-columns: repeat(3, minmax(260px,1fr)); } }
@media (min-width:1200px){ .grid.grid-4{ grid-template-columns: repeat(4, minmax(260px,1fr)); } }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 16px 10px;
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.card h3{ margin:0 0 6px; color:var(--blue-600); }

.link-list{ list-style:none; margin:0; padding:0; }
.link-list.compact li{ border-top:1px solid #eef1f8; }
.link-list.compact li:first-child{ border-top:0; }
.link-list.compact a{
  display:block; padding:.48rem .2rem;
  color:var(--ink); text-decoration:none;
}
.link-list.compact a:hover{ color:var(--blue-600); }

/* =============== CALCULATOR PAGES (mortgage, etc.) =============== */
.page-title{ margin:14px 0 8px; font-size:2rem; font-weight:800; }

.banner-note{
  margin:10px 0 18px; display:inline-block;
  padding:10px 14px; background:#2f5f98;
  color:#fff; border-radius:8px; font-weight:700;
}

.print-link{
  float:right; margin-top:-34px;
  background:#fff; color:var(--blue-600);
  border:1px solid var(--blue-200);
  border-radius:8px; padding:8px 12px;
  text-decoration:none; font-weight:700;
}
.print-link:hover{ background:var(--blue-50); }

.calc-layout{ display:grid; grid-template-columns: 1fr 320px; gap:22px; }
@media (max-width:1100px){ .calc-layout{ grid-template-columns:1fr; } }

.panel{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px;
}

.form-row{
  display:grid; grid-template-columns:220px 1fr;
  gap:14px; align-items:center;
  padding:10px 0; border-top:1px solid #eef1f8;
}
.form-row:first-child{ border-top:none; }
.form-row label{ font-weight:700; }

.field input,.field select{
  width:100%; height:46px;
  border:1px solid var(--blue-200); border-radius:10px;
  padding:0 12px; background:#fff; font-size:1rem;
}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px #dbe8ff;
}

/* Actions */
.actions{ display:flex; gap:10px; margin-top:12px; }
.btn{
  border:1px solid var(--blue-200);
  background:var(--blue-600); color:#fff;
  border-radius:10px; padding:10px 16px;
  font-weight:700; cursor:pointer;
}
.btn.secondary{ background:#fff; color:var(--blue-600); }
.btn:hover{ filter:brightness(.96); }

/* Results */
.results{ margin-top:16px; }
.metric{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px solid #eef1f8;
}
.metric:first-child{ border-top:none; }
.metric strong{ color:#083c6f; }

/* Sidebar */
.sidebar .card h3{ margin-bottom:6px; }
.sidebar .list{
  list-style:none; margin:0; padding:0;
  background:#fff; border:1px solid var(--border); border-radius:12px;
}
.sidebar .list li{ border-top:1px solid #eef1f8; }
.sidebar .list li:first-child{ border-top:none; }
.sidebar .list a{
  display:block; padding:.8rem 1rem;
  text-decoration:none; color:var(--ink);
}
.sidebar .list a:hover{ color:var(--blue-600); background:#eef5ff; }
.ad{
  background:#f1f5ff; border:1px dashed #b6c6ff;
  border-radius:10px; padding:16px; text-align:center; color:#335;
}
.ad.min{ padding:10px; margin-bottom:12px; }

/* Tables */
.table{
  width:100%; border-collapse:collapse;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.table th,.table td{
  padding:10px 12px; border-top:1px solid var(--border);
  text-align:right; font-variant-numeric:tabular-nums;
}
.table th{ text-align:left; background:var(--blue-50); color:#0b245f; }

/* Small screens */
@media (max-width:760px){
  .form-row{ grid-template-columns:1fr; }
  .print-link{ float:none; margin:10px 0 0; }
}
/* ----------------------------
   FULL-PAGE CALCULATOR LAYOUT
   One-time global rules. Add class "fullpage-calculator" to <body> on pages you want full-width.
   These rules are intentionally scoped so other pages are unaffected.
   ---------------------------- */

body.fullpage-calculator {
  /* no color/typography changes here — those come from main stylesheet */
}

/* Let the page container expand for calculators that need full width */
body.fullpage-calculator .container {
  max-width: none;
  padding-left: 4%;
  padding-right: 4%;
}

/* Replace two-column calc-layout (main + sidebar) with a single centered column */
body.fullpage-calculator .calc-layout {
  display: block;          /* force single-column flow */
  max-width: 1200px;       /* center content and cap maximum width */
  margin: 18px auto;
  gap: 0;                  /* ignore any grid gap on original layout */
}

/* Hide the sidebar on fullpage-calculator pages (preserves global sidebar look elsewhere) */
body.fullpage-calculator .sidebar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the first panel (where the form lives) visually wider and prominent:
   Uses existing .panel class so visual style (colors/borders) remains same. */
body.fullpage-calculator .calc-layout > .panel:first-child,
body.fullpage-calculator .panel.main-panel {
  padding: 20px 28px;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Keep any secondary panels (e.g., results) full width under the main panel */
body.fullpage-calculator .calc-layout > .panel + .panel,
body.fullpage-calculator .results,
body.fullpage-calculator #schedulePanel {
  margin-top: 18px;
  padding: 18px;
}

/* Ensure form rows behave responsively inside the wider panel (re-uses your existing .form-row rules) */
body.fullpage-calculator .form-row {
  /* keep existing formatting, but allow full width when stacked on small screens */
  grid-template-columns: 220px 1fr;
}
@media (max-width: 760px) {
  body.fullpage-calculator .form-row { grid-template-columns: 1fr; }
}

/* Make amortization table horizontally scrollable on narrow viewports but use full width on desktop */
body.fullpage-calculator #amTable {
  display:block;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  min-width:720px; /* keeps column widths usable; scrolls on smaller screens */
}

/* If your panel contains a "Quick Results" sidebar inside the main panel, it will naturally flow below on small screens.
   Optional: center long SEO/terminology content below the calculator for readability. */
body.fullpage-calculator #terminology {
  max-width: 900px;
  margin: 22px auto 80px;
  padding: 18px;
}

/* Slight safety specificity to ensure layout overrides the original grid-template on some themes */
body.fullpage-calculator .calc-layout,
body.fullpage-calculator .container,
body.fullpage-calculator .sidebar {
  box-sizing: border-box;
}

/* Small visual nicety: keep the Print link accessible (no position override) */
body.fullpage-calculator .print-link { position:relative; z-index:1; }

/* End of fullpage-calculator block */