/* ============================================================
   CalcHub — stylesheet
   Designed by Rohit Bhalothia
   ============================================================ */

:root{
  --bg:        #ffffff;
  --bg-soft:   #f0f4f2;
  --bg-soft-2: #e8f0ec;
  --ink:       #14201a;
  --ink-soft:  #45564c;
  --line:      #dbe4de;
  --line-soft: #e9efec;
  --brand:     #0e6b52;
  --brand-dark:#0a4e3c;
  --brand-tint:#e3f2eb;
  --accent:    #c77f1b;
  --accent-tint:#faf0dd;
  --danger:    #b3412c;
  --radius:    6px;
  --shadow:    0 1px 2px rgba(20,32,26,.06);
  --maxw:      1180px;
  --font-ui:   "IBM Plex Sans", -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:16px;
}
img{max-width:100%;display:block;}
a{color:var(--brand-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-ui);line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-0.01em;}
h1{font-size:1.9rem;}
h2{font-size:1.35rem;}
h3{font-size:1.05rem;}
p{margin:0 0 1em;}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:200;}
.skip-link:focus{left:8px;top:8px;}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--brand-dark);color:#dfeee8;font-size:.8rem;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;}
.topbar a{color:#dfeee8;}
.topbar-links{display:flex;gap:16px;}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--bg);}
.site-header .wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.brand-mark{
  width:38px;height:38px;border-radius:8px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-mono);font-weight:700;font-size:1.05rem;
}
.brand-name{font-family:var(--font-ui);font-weight:700;font-size:1.3rem;color:var(--ink);}
.brand-name span{color:var(--brand);}

.site-search{flex:1 1 260px;max-width:420px;}
.site-search form{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);}
.site-search input{
  flex:1;border:0;background:transparent;padding:10px 12px;font-family:var(--font-ui);font-size:.92rem;color:var(--ink);
}
.site-search input:focus{outline:none;background:#fff;}
.site-search button{
  border:0;background:var(--brand);color:#fff;padding:0 16px;font-weight:600;cursor:pointer;font-size:.85rem;
}
.site-search button:hover{background:var(--brand-dark);}

/* ---------- Category nav ---------- */
.cat-nav{background:var(--bg-soft);border-bottom:1px solid var(--line);}
.cat-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px;}
.cat-nav a{
  display:block;padding:11px 16px;font-size:.88rem;font-weight:600;color:var(--ink-soft);
  border-bottom:3px solid transparent;
}
.cat-nav a:hover{color:var(--brand-dark);text-decoration:none;}
.cat-nav a.active{color:var(--brand-dark);border-bottom-color:var(--accent);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.82rem;color:var(--ink-soft);padding:14px 0 0;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb .sep{margin:0 6px;color:#9aab9f;}
.breadcrumb .current{color:var(--ink);font-weight:600;}

/* ---------- Hero (home) ---------- */
.hero{background:linear-gradient(180deg,var(--brand-tint) 0%, var(--bg) 100%);border-bottom:1px solid var(--line);}
.hero .wrap{padding:52px 20px 40px;}
.hero-eyebrow{font-family:var(--font-mono);color:var(--brand-dark);font-size:.82rem;margin-bottom:10px;}
.hero h1{font-size:2.5rem;max-width:760px;margin-bottom:.35em;}
.hero p.lede{font-size:1.08rem;color:var(--ink-soft);max-width:620px;margin-bottom:26px;}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:8px;}
.hero-stats div{font-family:var(--font-mono);}
.hero-stats .num{font-size:1.6rem;font-weight:700;color:var(--brand-dark);display:block;}
.hero-stats .lbl{font-size:.78rem;color:var(--ink-soft);}
.hero-search{max-width:520px;margin-top:8px;}
.hero-search form{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);}
.hero-search input{flex:1;border:0;padding:14px 16px;font-size:1rem;font-family:var(--font-ui);}
.hero-search input:focus{outline:none;}
.hero-search button{border:0;background:var(--accent);color:#fff;padding:0 22px;font-weight:700;cursor:pointer;}
.hero-search button:hover{background:#a9690f;}

/* ---------- Section headings on home ---------- */
.section{padding:38px 0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:20px;}
.section-head h2{margin:0;}
.section-head a{font-size:.85rem;font-weight:600;}

/* ---------- Category grid on home ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.cat-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;border-left:4px solid var(--brand);}
.cat-card h3{margin-bottom:4px;}
.cat-card h3 a{color:var(--ink);}
.cat-card p{color:var(--ink-soft);font-size:.9rem;margin-bottom:14px;}
.cat-card ul{list-style:none;margin:0;padding:0;columns:1;}
.cat-card li{font-size:.87rem;padding:3px 0;border-top:1px dashed var(--line-soft);}
.cat-card li:first-child{border-top:0;}
.cat-card .more{display:inline-block;margin-top:10px;font-size:.83rem;font-weight:700;color:var(--brand-dark);}

/* ---------- Popular grid (pill list) ---------- */
.pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.pop-grid a{
  display:block;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;
}
.pop-grid a:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none;background:var(--brand-tint);}
.pop-grid a .tag{display:block;font-weight:400;color:var(--ink-soft);font-size:.76rem;margin-top:2px;}

/* ---------- Category listing page ---------- */
.calc-list-page h1{margin-bottom:.2em;}
.calc-list-page > .wrap > p.intro{color:var(--ink-soft);max-width:680px;margin-bottom:26px;}
.calc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;}
.calc-list .item{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff;}
.calc-list .item h3{margin-bottom:6px;font-size:1rem;}
.calc-list .item p{font-size:.86rem;color:var(--ink-soft);margin-bottom:0;}

/* ---------- Main two-column layout on calculator pages ---------- */
.calc-page-body{padding:26px 0 60px;}
.calc-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;}
@media (max-width:880px){.calc-layout{grid-template-columns:1fr;}}

.panel{border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.calc-card{padding:24px 26px 26px;}
.calc-card h1{font-size:1.6rem;}
.calc-card .sub{color:var(--ink-soft);margin-bottom:20px;font-size:.95rem;}

/* form */
.calc-form{display:grid;gap:14px;margin-bottom:6px;}
.calc-form .row{display:grid;gap:14px;}
.calc-form .row.cols-2{grid-template-columns:1fr 1fr;}
.calc-form .row.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:520px){.calc-form .row.cols-2,.calc-form .row.cols-3{grid-template-columns:1fr;}}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field .hint{font-size:.76rem;color:#7c8c81;margin-top:4px;}
.field input[type=text],
.field input[type=number],
.field input[type=date],
.field input[type=time],
.field select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.95rem;background:var(--bg-soft);color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);background:#fff;}
.unit-input{display:flex;}
.unit-input input{border-top-right-radius:0;border-bottom-right-radius:0;}
.unit-input select{width:auto;border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;background:var(--bg-soft);}

.radio-group{display:flex;gap:16px;flex-wrap:wrap;padding-top:4px;}
.radio-group label{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:500;color:var(--ink);}

.btn-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap;}
.btn{
  border:0;border-radius:var(--radius);padding:11px 22px;font-weight:700;font-size:.92rem;cursor:pointer;
  font-family:var(--font-ui);
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-ghost{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{background:var(--bg-soft-2);}

/* result panel */
.result{
  margin-top:22px;border-top:2px solid var(--ink);padding-top:18px;display:none;
}
.result.show{display:block;}
.result .headline{
  background:var(--brand-tint);border:1px solid #cfe6da;border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px;
}
.result .headline .lbl{font-size:.8rem;color:var(--brand-dark);font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.result .headline .val{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--brand-dark);}
.result table{width:100%;border-collapse:collapse;font-size:.9rem;}
.result table th,.result table td{text-align:left;padding:8px 4px;border-bottom:1px solid var(--line-soft);}
.result table th{color:var(--ink-soft);font-weight:600;width:55%;}
.result table td{font-family:var(--font-mono);text-align:right;font-weight:600;}
.result .note{font-size:.82rem;color:var(--ink-soft);margin-top:12px;}
.result .error{color:var(--danger);font-weight:600;font-size:.88rem;}

/* schedule/table scroll */
.table-scroll{max-height:320px;overflow:auto;border:1px solid var(--line-soft);border-radius:var(--radius);margin-top:14px;}
.table-scroll table{width:100%;border-collapse:collapse;font-size:.82rem;}
.table-scroll th,.table-scroll td{padding:6px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap;}
.table-scroll th:first-child,.table-scroll td:first-child{text-align:left;}
.table-scroll thead th{position:sticky;top:0;background:var(--bg-soft);}

/* about text block on calc page */
.calc-info{padding:18px 26px 26px;border-top:1px solid var(--line-soft);font-size:.92rem;color:var(--ink-soft);}
.calc-info h2{font-size:1.05rem;color:var(--ink);}

/* ---------- Sidebar ---------- */
.sidebar .panel{padding:18px 18px 20px;margin-bottom:18px;}
.sidebar h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;border-bottom:1px solid var(--line-soft);padding-bottom:8px;}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar li{padding:6px 0;font-size:.9rem;border-top:1px dashed var(--line-soft);}
.sidebar li:first-child{border-top:0;}
.sidebar li a.current{color:var(--brand-dark);font-weight:700;}
.ad-note{font-size:.75rem;color:#8ea296;text-align:center;padding:26px 10px;border:1px dashed var(--line);border-radius:var(--radius);}

/* ---------- Sitemap page ---------- */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;}
.sitemap-col h2{font-size:1rem;border-bottom:2px solid var(--ink);padding-bottom:8px;}
.sitemap-col ul{list-style:none;margin:0;padding:0;}
.sitemap-col li{padding:4px 0;font-size:.88rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#c9d6cd;margin-top:20px;}
.site-footer .wrap{padding:38px 20px 24px;}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;margin-bottom:28px;}
.foot-grid h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{padding:3px 0;}
.foot-grid a{color:#c9d6cd;font-size:.87rem;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{border-top:1px solid #2a3830;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem;color:#93a89b;}
.foot-bottom .credit{color:#e7c98a;font-weight:600;}
.foot-bottom .credit a{color:#e7c98a;}

/* ---------- Misc pages (about/contact) ---------- */
.static-page{padding:40px 0 60px;}
.static-page .wrap{max-width:760px;}
.static-page h1{margin-bottom:.3em;}
.static-page section{margin-bottom:28px;}

/* utility */
.text-center{text-align:center;}
.small{font-size:.82rem;color:var(--ink-soft);}