/* ============================================================
   Idiot Calculator Tools — shared stylesheet
   Palette: Indigo / Slate, modern SaaS
   ============================================================ */

:root{
  --indigo-50:#eef2ff;
  --indigo-100:#e0e7ff;
  --indigo-200:#c7d2fe;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --indigo-700:#4338ca;
  --indigo-900:#312e81;

  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;

  --accent-teal:#0d9488;
  --accent-amber:#d97706;
  --danger:#dc2626;
  --success:#16a34a;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:0 12px 40px rgba(15,23,42,.12);

  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate-800);
  background:var(--slate-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--slate-900); line-height:1.2; margin:0 0 .5em;}
a{color:var(--indigo-600); text-decoration:none;}
a:hover{color:var(--indigo-700); text-decoration:underline;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

.container{max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- Skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--indigo-700); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); z-index:999;
}
.skip-link:focus{left:20px; top:20px;}
:focus-visible{outline:3px solid var(--indigo-500); outline-offset:2px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--slate-200);
}
.header-inner{display:flex; align-items:center; gap:24px; padding:14px 20px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--slate-900);}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg, var(--indigo-600), var(--accent-teal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.95rem;
  flex-shrink:0;
}
.brand span{white-space:nowrap;}

.main-nav{display:flex; gap:18px; margin-left:auto; align-items:center;}
.main-nav a{color:var(--slate-600); font-weight:600; font-size:.92rem;}
.main-nav a:hover{color:var(--indigo-700); text-decoration:none;}

.nav-toggle{display:none; background:none; border:1px solid var(--slate-300); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer;}
.nav-toggle svg{display:block;}

/* ---------- Search ---------- */
.search-wrap{position:relative; flex:1; max-width:340px;}
.search-input{
  width:100%; padding:10px 14px 10px 38px; border:1px solid var(--slate-300); border-radius:999px;
  font-size:.9rem; background:var(--slate-50) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%2364748b" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 12px center;
  transition:border-color .15s, box-shadow .15s;
}
.search-input:focus{border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-100); outline:none;}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); max-height:340px; overflow-y:auto; z-index:60; display:none;
}
.search-results.open{display:block;}
.search-results a{
  display:flex; flex-direction:column; gap:2px; padding:10px 14px; color:var(--slate-800);
  border-bottom:1px solid var(--slate-100); text-decoration:none;
}
.search-results a:last-child{border-bottom:none;}
.search-results a:hover, .search-results a.active{background:var(--indigo-50);}
.search-results small{color:var(--slate-500);}
.search-empty{padding:14px; color:var(--slate-500); font-size:.9rem;}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(circle at 15% 20%, rgba(99,102,241,.16), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(13,148,136,.14), transparent 40%),
    var(--slate-900);
  color:#fff; padding:64px 0 56px;
}
.hero h1{color:#fff; font-size:clamp(1.8rem, 4vw, 2.75rem); max-width:820px;}
.hero p.lead{color:var(--slate-300); font-size:1.08rem; max-width:640px; margin:0 0 22px;}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.badge{
  font-size:.78rem; font-weight:600; color:var(--indigo-100); background:rgba(99,102,241,.18);
  border:1px solid rgba(199,210,254,.25); padding:5px 12px; border-radius:999px;
}
.hero .search-wrap{max-width:520px;}
.hero .search-input{background-color:#fff;}

/* small tool-page hero */
.tool-hero{background:var(--slate-900); color:#fff; padding:38px 0 34px;}
.tool-hero h1{color:#fff; font-size:clamp(1.5rem,3vw,2.1rem);}
.tool-hero p{color:var(--slate-300); max-width:680px;}
.breadcrumb{font-size:.82rem; color:var(--slate-400); margin-bottom:14px;}
.breadcrumb a{color:var(--slate-300);}
.breadcrumb a:hover{color:#fff;}

/* ---------- Section headings ---------- */
.section{padding:52px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.section-head h2{font-size:1.5rem;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--indigo-600);
  margin-bottom:8px; display:inline-block;
}

/* ---------- Tool grid / cards ---------- */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(255px,1fr)); gap:16px;}
.tool-card{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-md);
  padding:20px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tool-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--indigo-200); text-decoration:none;}
.tool-icon{
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--indigo-50); color:var(--indigo-700); font-size:1.2rem; font-weight:700;
}
.tool-card h3{font-size:1.02rem; margin:2px 0 0;}
.tool-card p{font-size:.85rem; color:var(--slate-500); margin:0;}
.tool-card .cta{font-size:.82rem; font-weight:700; color:var(--indigo-600); margin-top:auto;}

/* ---------- Calculator panel ---------- */
.calc-panel{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-md); margin:-46px auto 0; max-width:920px; position:relative; z-index:2;
}
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:640px){.calc-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:.85rem; font-weight:600; color:var(--slate-700);}
.field input[type=number], .field input[type=text], .field input[type=date], .field select{
  padding:11px 12px; border:1px solid var(--slate-300); border-radius:var(--radius-sm); font-size:1rem;
  background:var(--slate-50); color:var(--slate-900); width:100%;
}
.field input:focus, .field select:focus{border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-100); outline:none; background:#fff;}
.field .hint{font-size:.76rem; color:var(--slate-400);}
.field-full{grid-column:1 / -1;}

.range-row{display:flex; align-items:center; gap:12px;}
.range-row input[type=range]{flex:1; accent-color:var(--indigo-600);}
.range-row output{font-weight:700; color:var(--indigo-700); min-width:64px; text-align:right;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--indigo-600); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px 22px; font-weight:700; font-size:.95rem; cursor:pointer; transition:background .15s, transform .1s;
}
.btn:hover{background:var(--indigo-700); text-decoration:none;}
.btn:active{transform:scale(.98);}
.btn-secondary{background:var(--slate-100); color:var(--slate-700); border:1px solid var(--slate-300);}
.btn-secondary:hover{background:var(--slate-200);}
.btn-row{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}

.result-box{
  margin-top:24px; background:var(--indigo-50); border:1px solid var(--indigo-200); border-radius:var(--radius-md);
  padding:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px;
}
.result-item .label{font-size:.78rem; color:var(--slate-600); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.result-item .value{font-family:var(--font-mono); font-size:1.35rem; font-weight:700; color:var(--indigo-800); margin-top:4px;}
.result-item .value.big{font-size:1.65rem;}

table.breakdown{width:100%; border-collapse:collapse; margin-top:18px; font-size:.88rem;}
table.breakdown th, table.breakdown td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--slate-200);}
table.breakdown th:first-child, table.breakdown td:first-child{text-align:left;}
table.breakdown thead th{background:var(--slate-100); color:var(--slate-700); font-weight:700;}
.table-scroll{max-height:340px; overflow:auto; border:1px solid var(--slate-200); border-radius:var(--radius-sm); margin-top:10px;}

.note-box{
  margin-top:16px; font-size:.82rem; color:var(--slate-500); background:var(--slate-100); border-radius:var(--radius-sm);
  padding:10px 14px;
}

/* ---------- Content / article ---------- */
.article{max-width:820px; margin:0 auto;}
.article h2{margin-top:1.6em; font-size:1.3rem;}
.article h3{margin-top:1.2em; font-size:1.08rem;}
.article p, .article li{color:var(--slate-700); font-size:.98rem;}
.article ul, .article ol{padding-left:1.2em;}

.faq{border-top:1px solid var(--slate-200); margin-top:8px;}
.faq-item{border-bottom:1px solid var(--slate-200);}
.faq-item summary{
  cursor:pointer; padding:16px 4px; font-weight:700; color:var(--slate-800); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.98rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--indigo-600); font-weight:400; flex-shrink:0;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{margin:0 4px 16px; color:var(--slate-600); font-size:.92rem;}

/* ---------- Related tools ---------- */
.related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.related-grid a{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:.88rem; font-weight:600; color:var(--slate-700);
}
.related-grid a:hover{border-color:var(--indigo-300); color:var(--indigo-700); text-decoration:none;}

/* ---------- Footer ---------- */
.site-footer{background:var(--slate-900); color:var(--slate-300); padding:48px 0 24px; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.footer-col a{color:var(--slate-400); font-size:.88rem;}
.footer-col a:hover{color:#fff; text-decoration:none;}
.footer-brand p{color:var(--slate-400); font-size:.88rem; max-width:280px;}
.footer-bottom{
  border-top:1px solid var(--slate-700); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--slate-500);
}
.footer-bottom a{color:var(--slate-400);}

/* ---------- Static pages ---------- */
.static-page{padding:48px 0 70px;}
.static-page h1{font-size:1.9rem;}

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .text-center{text-align:center;}
.pill-nav{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0;}
.pill-nav a{background:#fff; border:1px solid var(--slate-300); border-radius:999px; padding:6px 14px; font-size:.82rem; font-weight:600; color:var(--slate-600);}
.pill-nav a.active, .pill-nav a:hover{background:var(--indigo-600); border-color:var(--indigo-600); color:#fff; text-decoration:none;}

@media (max-width:760px){
  .main-nav{position:fixed; top:64px; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start;
    padding:16px 20px; border-bottom:1px solid var(--slate-200); box-shadow:var(--shadow-md); display:none;}
  .main-nav.open{display:flex;}
  .nav-toggle{display:inline-flex;}
  .header-inner{flex-wrap:wrap;}
  .search-wrap{order:3; max-width:100%; width:100%;}
  .calc-panel{margin-top:-30px; padding:18px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}