/* HealthCalculators - calculator.net style flat classic UI */
/* CDN: this file can be served from any CDN (Hostinger, Cloudflare, etc.) — no inline images, no @import */
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#222;background:#fff;line-height:1.5}
a{color:#0645ad;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Top header */
.topbar{background:#0f5e3a;color:#fff;border-bottom:3px solid #ffb400}
.topbar-inner{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:bold;font-size:20px}
.brand:hover{text-decoration:none}
.brand-logo{width:36px;height:36px}
.brand-name{letter-spacing:.3px}
.brand-tag{display:block;font-size:11px;font-weight:normal;color:#cfe9d6;letter-spacing:.5px;margin-top:-2px}

.nav-toggle{display:none;background:none;border:1px solid #cfe9d6;color:#fff;padding:6px 10px;cursor:pointer;font-size:16px;border-radius:2px}

.mainnav{display:flex;gap:0}
.mainnav a{color:#fff;padding:10px 14px;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-3px}
.mainnav a:hover,.mainnav a.active{background:#0a4a2c;border-bottom-color:#ffb400;text-decoration:none}

/* Secondary bar (breadcrumb + unit) */
.subbar{background:#f4f4f4;border-bottom:1px solid #d9d9d9}
.subbar-inner{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.crumbs{color:#555}
.crumbs a{color:#0645ad}
.crumbs .sep{margin:0 6px;color:#999}
.unit-toggle{display:flex;gap:0;border:1px solid #bcbcbc;border-radius:2px;overflow:hidden}
.unit-toggle button{background:#fff;border:0;padding:5px 12px;font-size:12px;cursor:pointer;color:#333}
.unit-toggle button.active{background:#0f5e3a;color:#fff}

/* Layout */
.layout{max-width:1180px;margin:0 auto;padding:18px 16px;display:grid;grid-template-columns:230px 1fr;gap:22px}
.layout-full{display:block}

/* Sidebar */
.sidebar{font-size:13px}
.sidebar h3{margin:0 0 6px;padding:6px 10px;background:#0f5e3a;color:#fff;font-size:13px;font-weight:bold;border-radius:2px 2px 0 0}
.sidebar ul{list-style:none;margin:0 0 14px;padding:0;border:1px solid #d9d9d9;border-top:none;background:#fbfbfb}
.sidebar li{border-bottom:1px solid #ececec}
.sidebar li:last-child{border-bottom:none}
.sidebar li a{display:block;padding:6px 10px;color:#0645ad}
.sidebar li a:hover{background:#eef6ef;text-decoration:none}
.sidebar li a.active{background:#fff4d6;color:#222;font-weight:bold;border-left:3px solid #ffb400;padding-left:7px}

/* Main content */
.content h1{font-size:24px;color:#0f5e3a;margin:0 0 8px;border-bottom:2px solid #0f5e3a;padding-bottom:6px}
.content h2{font-size:18px;color:#0f5e3a;margin:22px 0 8px}
.content h3{font-size:15px;margin:14px 0 6px;color:#333}
.content p{margin:0 0 10px}
.content ul,.content ol{margin:0 0 12px;padding-left:22px}
.lead{font-size:14px;color:#444;margin-bottom:14px}

/* Calculator card */
.calc-card{border:1px solid #d9d9d9;background:#fbfbfb;padding:14px;margin:10px 0 18px}
.calc-card table.fields{width:100%;border-collapse:collapse}
.calc-card table.fields td{padding:6px 4px;vertical-align:middle}
.calc-card table.fields td.lbl{width:42%;font-weight:bold;color:#333}
.calc-card input[type=number],.calc-card input[type=text],.calc-card input[type=date],.calc-card select{
  border:1px solid #bcbcbc;padding:5px 6px;font:13px Arial,Helvetica,sans-serif;background:#fff;height:28px;border-radius:2px}
.calc-card input[type=number],.calc-card input[type=text],.calc-card input[type=date]{width:140px}
.calc-card select{height:28px}
.calc-card .field-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.calc-card .field-row input[type=number]{width:90px}
.calc-card .btn-row{margin-top:14px;padding-top:10px;border-top:1px dashed #d0d0d0}
.calc-card .btn{border:1px solid #b48a00;background:#ffb400;color:#1a1a1a;padding:7px 18px;font:bold 13px Arial;cursor:pointer;border-radius:2px;margin-right:6px}
.calc-card .btn:hover{background:#e8a300}
.calc-card .btn.secondary{background:#eee;color:#333;border:1px solid #bbb}
.calc-card .btn.secondary:hover{background:#dcdcdc}

.result{margin-top:14px;border:1px solid #c8d8c8;background:#f1f7ee;padding:12px;display:none}
.result.show{display:block}
.result.error{background:#fbecec;border-color:#e2b3b3;color:#9a2828}
.result strong,.result .v{color:#0f5e3a;font-weight:bold}
.result table{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px}
.result table th,.result table td{padding:5px 6px;border-bottom:1px solid #d9e3d3;text-align:left}
.result table th{background:#e6efde}

.error-msg{color:#9a2828;font-size:13px;min-height:1em;margin-top:6px}

/* Info blocks */
.infobox{border:1px solid #d9d9d9;background:#fff;padding:12px 14px;margin:12px 0}
.infobox h2{margin-top:0}

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:6px;margin:10px 0 0}
.related a{display:block;padding:7px 10px;border:1px solid #d9d9d9;background:#fbfbfb;color:#0645ad;font-size:13px}
.related a:hover{background:#eef6ef;text-decoration:none}

.faq dt{font-weight:bold;color:#0f5e3a;margin-top:10px}
.faq dd{margin:4px 0 10px;padding-left:0}

/* All-calculators index page grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:14px}
.cat-card{border:1px solid #d9d9d9;background:#fff}
.cat-card h2{margin:0;padding:8px 12px;background:#0f5e3a;color:#fff;font-size:15px;border-bottom:2px solid #ffb400}
.cat-card ul{list-style:none;margin:0;padding:6px 0}
.cat-card li{border-bottom:1px solid #f0f0f0}
.cat-card li:last-child{border-bottom:none}
.cat-card li a{display:block;padding:7px 14px;color:#0645ad}
.cat-card li a:hover{background:#f4f9f4;text-decoration:none}

/* Hero on home */
.hero{background:#f1f7ee;border:1px solid #d4e5cb;padding:18px 18px;margin-bottom:14px}
.hero h1{border:none;padding:0;margin:0 0 6px;font-size:26px}
.hero p{margin:0;color:#444;font-size:14px}

/* Footer */
.footer{background:#0f5e3a;color:#cfe9d6;margin-top:34px;font-size:13px}
.footer-inner{max-width:1180px;margin:0 auto;padding:22px 16px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}
.footer h4{color:#fff;margin:0 0 8px;font-size:14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:3px 0}
.footer a{color:#cfe9d6}
.footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1f7a4d;padding:10px 16px;text-align:center;color:#a8d3b6;font-size:12px}

/* Forms (contact) */
.form-block{max-width:560px}
.form-block label{display:block;font-weight:bold;margin:10px 0 4px}
.form-block input,.form-block textarea{width:100%;border:1px solid #bcbcbc;padding:7px 8px;font:13px Arial;border-radius:2px}
.form-block textarea{min-height:120px}
.form-block .btn{margin-top:12px;border:1px solid #b48a00;background:#ffb400;color:#1a1a1a;padding:8px 22px;font:bold 13px Arial;cursor:pointer;border-radius:2px}
.form-status{margin-top:10px;font-size:13px;color:#0f5e3a}

/* Responsive */
@media (max-width:880px){
  .layout{grid-template-columns:1fr;gap:14px}
  .sidebar{order:2}
  .footer-inner{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-block}
  .mainnav{position:absolute;left:0;right:0;top:100%;background:#0f5e3a;flex-direction:column;display:none;z-index:50;padding:6px 0;border-top:1px solid #1f7a4d}
  .mainnav.open{display:flex}
  .mainnav a{padding:10px 16px;border-bottom:1px solid #1f7a4d;margin:0}
  .topbar-inner{position:relative}
}
@media (max-width:520px){
  .footer-inner{grid-template-columns:1fr}
  .calc-card input[type=number],.calc-card input[type=text],.calc-card input[type=date]{width:100%}
  .calc-card table.fields td{display:block;width:100%}
  .calc-card table.fields td.lbl{padding-bottom:0}
}

/* ============================================================
   Theme toggle button (placed in header before mainnav)
   ============================================================ */
.theme-toggle{
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
  width:34px;height:34px;border-radius:4px;cursor:pointer;font-size:15px;
  padding:0;line-height:1;flex-shrink:0;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Arial,Helvetica,sans-serif;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease
}
.theme-toggle:hover{background:#0a4a2c}
.theme-toggle:focus-visible{outline:2px solid #ffb400;outline-offset:1px}
@media (max-width:880px){
  .theme-toggle{margin-left:auto}
}

/* ============================================================
   Footer brand block — visually mirrors header brand alignment
   ============================================================ */
.footer-brand{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.footer-brand-logo{width:36px;height:36px;flex-shrink:0;display:block}
.footer-brand-name{font-weight:bold;color:#fff;font-size:16px;letter-spacing:.3px;line-height:1.2}
@media (max-width:520px){
  .footer-brand{justify-content:flex-start}
}

/* Smooth theme transitions on key surfaces (lightweight) */
body,.subbar,.calc-card,.infobox,.cat-card,.sidebar ul,.result,.hero,.related a,
.calc-card input,.calc-card select,.form-block input,.form-block textarea{
  transition:background-color .15s ease, color .15s ease, border-color .15s ease
}

/* ============================================================
   DARK MODE — activated by html[data-theme="dark"]
   Variables-style overrides only; light mode is 100% unchanged.
   ============================================================ */
[data-theme="dark"] body{background:#15201a;color:#e8ece9}
[data-theme="dark"] a{color:#7fc7ff}

/* topbar (slightly darker green for night-friendly feel; keeps brand identity) */
[data-theme="dark"] .topbar{background:#0a3a24;border-bottom-color:#ffb400}
[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,.4)}
[data-theme="dark"] .theme-toggle:hover{background:#0f5e3a}
[data-theme="dark"] .mainnav a:hover,[data-theme="dark"] .mainnav a.active{background:#06301c;border-bottom-color:#ffb400}

/* breadcrumb / unit toggle bar */
[data-theme="dark"] .subbar{background:#1c2a22;border-bottom-color:#2a3a30}
[data-theme="dark"] .crumbs{color:#a3aea8}
[data-theme="dark"] .crumbs a{color:#7fc7ff}
[data-theme="dark"] .crumbs .sep{color:#5a6661}
[data-theme="dark"] .unit-toggle{border-color:#3a4d42}
[data-theme="dark"] .unit-toggle button{background:#243329;color:#e8ece9}
[data-theme="dark"] .unit-toggle button.active{background:#0f5e3a;color:#fff}

/* sidebar */
[data-theme="dark"] .sidebar h3{background:#0a3a24;color:#fff}
[data-theme="dark"] .sidebar ul{background:#1c2a22;border-color:#2a3a30}
[data-theme="dark"] .sidebar li{border-bottom-color:#243329}
[data-theme="dark"] .sidebar li a{color:#7fc7ff}
[data-theme="dark"] .sidebar li a:hover{background:#243329;color:#a8d8ff}
[data-theme="dark"] .sidebar li a.active{background:#332f1a;color:#ffd97e;border-left-color:#ffb400}

/* main content */
[data-theme="dark"] .content h1{color:#7ed957;border-bottom-color:#3a5b40}
[data-theme="dark"] .content h2{color:#7ed957}
[data-theme="dark"] .content h3{color:#cdd5d0}
[data-theme="dark"] .content p,[data-theme="dark"] .content li{color:#e8ece9}
[data-theme="dark"] .content code{background:#243329;color:#e8ece9;padding:1px 4px;border-radius:2px}
[data-theme="dark"] .lead{color:#bdc4c0}

/* calculator card */
[data-theme="dark"] .calc-card{background:#1c2a22;border-color:#2a3a30}
[data-theme="dark"] .calc-card table.fields td.lbl{color:#e8ece9}
[data-theme="dark"] .calc-card input[type=number],
[data-theme="dark"] .calc-card input[type=text],
[data-theme="dark"] .calc-card input[type=date],
[data-theme="dark"] .calc-card select{background:#243329;color:#e8ece9;border-color:#3a4d42}
[data-theme="dark"] .calc-card .btn-row{border-top-color:#2a3a30}
[data-theme="dark"] .calc-card .btn{color:#1a1a1a} /* primary stays gold */
[data-theme="dark"] .calc-card .btn.secondary{background:#243329;color:#e8ece9;border-color:#3a4d42}
[data-theme="dark"] .calc-card .btn.secondary:hover{background:#2c3e34}

/* result + error */
[data-theme="dark"] .result{background:#1f3322;border-color:#3a5b40;color:#e8ece9}
[data-theme="dark"] .result .v,[data-theme="dark"] .result strong{color:#7ed957}
[data-theme="dark"] .result table th{background:#28402c;color:#e8ece9}
[data-theme="dark"] .result table td,[data-theme="dark"] .result table th{border-bottom-color:#3a5b40}
[data-theme="dark"] .result.error{background:#3a1f1f;border-color:#5b3a3a;color:#f8c6c6}
[data-theme="dark"] .error-msg{color:#f8a6a6}

/* infobox + related + faq */
[data-theme="dark"] .infobox{background:#1c2a22;border-color:#2a3a30;color:#e8ece9}
[data-theme="dark"] .infobox h2,[data-theme="dark"] .faq dt{color:#7ed957}
[data-theme="dark"] .related a{background:#1c2a22;border-color:#2a3a30;color:#7fc7ff}
[data-theme="dark"] .related a:hover{background:#243329}

/* category cards */
[data-theme="dark"] .cat-card{background:#1c2a22;border-color:#2a3a30}
[data-theme="dark"] .cat-card h2{background:#0a3a24;color:#fff;border-bottom-color:#ffb400}
[data-theme="dark"] .cat-card li{border-bottom-color:#243329}
[data-theme="dark"] .cat-card li a{color:#7fc7ff}
[data-theme="dark"] .cat-card li a:hover{background:#243329}

/* hero on home + 404 */
[data-theme="dark"] .hero{background:#1f3322;border-color:#3a5b40;color:#e8ece9}
[data-theme="dark"] .hero p{color:#bdc4c0}

/* contact form */
[data-theme="dark"] .form-block input,[data-theme="dark"] .form-block textarea{background:#243329;color:#e8ece9;border-color:#3a4d42}
[data-theme="dark"] .form-block label{color:#e8ece9}
[data-theme="dark"] .form-status{color:#7ed957}

/* footer (already dark green; just slightly deepen for cohesion) */
[data-theme="dark"] .footer{background:#0a3a24;color:#bdc7c2}
[data-theme="dark"] .footer-bottom{border-top-color:#1f5e3b}

/* scrollbar (Webkit) for dark mode polish */
[data-theme="dark"] ::-webkit-scrollbar{width:12px;height:12px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#15201a}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2a3a30;border-radius:4px}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#3a4d42}