/*
Theme Name: Dots Calculator
Theme URI: https://dotscalculator.online
Author: Broomstick
Author URI: https://dotscalculator.online
Description: Custom calculator hub theme for Dots Calculator — free online calculators for fitness, education, finance, and everyday life. Modern, minimal, fast, mobile-first, SEO-optimized.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dots-calculator
*/

/* ===== from dots-calculator-homepage.html ===== */

:root{
    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --secondary:#10B981;
    --bg:#F8FAFC;
    --surface:#FFFFFF;
    --text:#111827;
    --text-muted:#5B6472;
    --accent:#F59E0B;
    --border:#E5E9F0;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.05);
    --shadow-md:0 8px 24px rgba(17,24,39,.08);
    --shadow-lg:0 20px 48px rgba(17,24,39,.12);
  }
  [data-theme="dark"]{
    --bg:#0B1220;
    --surface:#121B2E;
    --text:#F1F5F9;
    --text-muted:#94A3B8;
    --border:#22304A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:0 20px 48px rgba(0,0,0,.45);
  }

  /* ---------- THEME CUSTOMIZER ---------- */
  .theme-pop{
    position:absolute; top:56px; right:24px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:16px; display:none; z-index:200; width:200px;
  }
  .theme-pop.show{display:block;}
  .theme-pop h5{font-size:.78rem; font-weight:700; margin-bottom:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
  .theme-swatches{display:flex; gap:10px;}
  .theme-swatch{
    width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem;
  }
  .theme-swatch:hover{transform:scale(1.1);}
  .theme-swatch.active{border-color:var(--text);}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    transition:background .3s ease, color .3s ease;
  }
  h1,h2,h3,h4{font-family:'Poppins',sans-serif; letter-spacing:-0.01em;}
  a{text-decoration:none; color:inherit;}
  img,svg{display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  section{padding:88px 0;}
  @media (max-width:768px){ section{padding:56px 0;} }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem;}
  .logo-mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--secondary)); position:relative; flex-shrink:0;}
  .logo-mark::before, .logo-mark::after{content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:#fff;}
  .logo-mark::before{top:9px; left:9px;}
  .logo-mark::after{bottom:9px; right:9px; width:8px; height:8px;}
  nav.primary-nav{display:flex; gap:30px; align-items:center;}
  nav.primary-nav a{font-size:.92rem; font-weight:500; color:var(--text-muted); transition:color .2s;}
  nav.primary-nav a:hover{color:var(--primary);}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .icon-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface);
    transition:border-color .2s, transform .2s;
  }
  .icon-btn:hover{border-color:var(--primary); transform:translateY(-1px);}
  .nav-cta{
    background:var(--primary); color:#fff; padding:10px 20px; border-radius:999px;
    font-size:.88rem; font-weight:600; box-shadow:var(--shadow-sm); transition:background .2s, transform .2s;
  }
  .nav-cta:hover{background:var(--primary-dark); transform:translateY(-1px);}
  .mobile-toggle{display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none;}
  .mobile-toggle span{width:22px; height:2px; background:var(--text);}
  @media (max-width:860px){
    nav.primary-nav{display:none;}
    .mobile-toggle{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{padding:72px 0 40px; position:relative; overflow:hidden;}
  .hero::before{
    content:''; position:absolute; top:-180px; right:-160px; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.12), transparent 70%); pointer-events:none;
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--secondary) 12%, transparent);
    color:var(--secondary); font-weight:600; font-size:.78rem; padding:7px 14px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--secondary);}
  .hero h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); font-weight:700; line-height:1.08; margin-bottom:20px;}
  .hero h1 span{color:var(--primary);}
  .hero p.lead{font-size:1.08rem; color:var(--text-muted); line-height:1.65; max-width:520px; margin-bottom:32px;}
  .search-bar{
    display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
    border-radius:999px; padding:6px 6px 6px 20px; box-shadow:var(--shadow-md); max-width:480px;
  }
  .search-bar input{
    border:none; outline:none; background:none; flex:1; font-family:'Inter'; font-size:.95rem; color:var(--text); padding:10px 0;
  }
  .search-bar button{
    background:var(--primary); color:#fff; border:none; padding:12px 22px; border-radius:999px; font-weight:600;
    font-size:.9rem; cursor:pointer; transition:background .2s; white-space:nowrap;
  }
  .search-bar button:hover{background:var(--primary-dark);}
  .hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
  .hero-tags a{
    font-size:.82rem; font-weight:500; color:var(--text-muted); border:1px solid var(--border);
    padding:7px 14px; border-radius:999px; transition:all .2s;
  }
  .hero-tags a:hover{border-color:var(--primary); color:var(--primary);}

  /* live mini calculator - the signature element */
  .live-calc{
    background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
    border:1px solid var(--border); padding:28px; position:relative;
  }
  .live-calc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .live-calc-head h3{font-size:1rem; font-weight:600;}
  .live-pill{
    font-size:.7rem; font-weight:700; color:var(--secondary); background:color-mix(in srgb, var(--secondary) 12%, transparent);
    padding:4px 10px; border-radius:999px; letter-spacing:.03em;
  }
  .calc-field{margin-bottom:16px;}
  .calc-field label{display:block; font-size:.78rem; color:var(--text-muted); font-weight:600; margin-bottom:7px; text-transform:uppercase; letter-spacing:.03em;}
  .calc-field input{
    width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--bg); color:var(--text); font-family:'Inter'; font-size:.95rem; outline:none; transition:border-color .2s;
  }
  .calc-field input:focus{border-color:var(--primary);}
  .calc-row{display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--text-muted); margin-bottom:16px;}
  .calc-result{
    background:linear-gradient(135deg, var(--primary), #3B82F6); color:#fff; border-radius:var(--radius-md);
    padding:20px; display:flex; align-items:baseline; justify-content:space-between; margin-top:6px;
  }
  .calc-result .label{font-size:.8rem; opacity:.85; font-weight:500;}
  .calc-result .value{font-size:1.9rem; font-weight:700; font-family:'Poppins';}
  .calc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px;}
  .calc-foot a{font-size:.82rem; font-weight:600; color:var(--primary);}
  .calc-foot .mini-actions{display:flex; gap:8px;}
  .calc-foot button{
    border:1px solid var(--border); background:none; width:32px; height:32px; border-radius:8px; cursor:pointer;
    color:var(--text-muted); display:flex; align-items:center; justify-content:center; transition:all .2s;
  }
  .calc-foot button:hover{border-color:var(--primary); color:var(--primary);}

  /* ---------- CATEGORY STRIP ---------- */
  .cat-strip{padding:40px 0 0;}
  .cat-grid{display:grid; grid-template-columns:repeat(8, 1fr); gap:14px;}
  @media (max-width:920px){ .cat-grid{grid-template-columns:repeat(4, 1fr);} }
  @media (max-width:560px){ .cat-grid{grid-template-columns:repeat(2, 1fr);} }
  .cat-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:20px 14px; text-align:center; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    cursor:pointer;
  }
  .cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
  .cat-icon{
    width:42px; height:42px; border-radius:12px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
    font-size:1.15rem; color:#fff;
  }
  .cat-card span{font-size:.82rem; font-weight:600;}

  /* ---------- SECTION HEADS ---------- */
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:20px; flex-wrap:wrap;}
  .section-head .kicker{font-size:.78rem; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; display:block;}
  .section-head h2{font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700;}
  .section-head p{color:var(--text-muted); font-size:.95rem; margin-top:8px; max-width:460px;}
  .view-all{font-size:.88rem; font-weight:600; color:var(--primary); white-space:nowrap; display:flex; align-items:center; gap:6px;}

  /* ---------- CALCULATOR CARDS ---------- */
  .calc-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
  @media (max-width:920px){ .calc-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:560px){ .calc-grid{grid-template-columns:1fr;} }
  .tool-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px;
    transition:transform .22s, box-shadow .22s; position:relative; overflow:hidden;
  }
  .tool-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
  .tool-card .badge{
    position:absolute; top:16px; right:16px; font-size:.65rem; font-weight:700; padding:4px 9px; border-radius:999px;
    background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
  }
  .tool-icon{
    width:46px; height:46px; border-radius:12px; background:color-mix(in srgb, var(--primary) 10%, transparent);
    color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px;
  }
  .tool-card h4{font-size:1rem; font-weight:600; margin-bottom:6px;}
  .tool-card p{font-size:.85rem; color:var(--text-muted); line-height:1.5; margin-bottom:18px;}
  .tool-open{font-size:.85rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:5px;}

  /* ---------- WHY CHOOSE US ---------- */
  .why-band{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .why-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:24px;}
  @media (max-width:920px){ .why-grid{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:560px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  .why-item{text-align:center;}
  .why-icon{
    width:52px; height:52px; border-radius:16px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
    background:var(--bg); border:1px solid var(--border); font-size:1.3rem;
  }
  .why-item h5{font-size:.88rem; font-weight:600; margin-bottom:4px;}
  .why-item p{font-size:.76rem; color:var(--text-muted);}

  /* ---------- LATEST ---------- */
  .latest-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:860px){ .latest-grid{grid-template-columns:1fr;} }
  .latest-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow .22s, transform .22s;}
  .latest-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
  .latest-thumb{height:150px; background:linear-gradient(135deg, var(--primary), var(--secondary)); position:relative;}
  .latest-thumb span{position:absolute; bottom:12px; left:16px; color:#fff; font-family:'Poppins'; font-weight:700; font-size:1.4rem; opacity:.9;}
  .latest-body{padding:20px;}
  .latest-body .tag{font-size:.72rem; font-weight:700; color:var(--secondary); text-transform:uppercase; letter-spacing:.04em;}
  .latest-body h4{margin:8px 0 8px; font-size:1.02rem;}
  .latest-body p{font-size:.85rem; color:var(--text-muted); line-height:1.55;}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:760px; margin:0 auto;}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{
    width:100%; text-align:left; background:none; border:none; padding:20px 4px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center; font-family:'Poppins'; font-weight:600;
    font-size:.98rem; color:var(--text); gap:20px;
  }
  .faq-q .plus{font-size:1.3rem; color:var(--primary); transition:transform .25s; flex-shrink:0;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .faq-a p{padding:0 4px 20px; font-size:.9rem; color:var(--text-muted); line-height:1.6; max-width:640px;}

  /* ---------- CTA BAND ---------- */
  .cta-band{
    background:linear-gradient(135deg, var(--primary), #1E40AF); border-radius:var(--radius-lg);
    padding:56px; text-align:center; color:#fff; position:relative; overflow:hidden;
  }
  .cta-band::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(16,185,129,.35), transparent 55%);}
  .cta-band h2{font-size:clamp(1.5rem,2.8vw,2.1rem); margin-bottom:14px; position:relative;}
  .cta-band p{opacity:.9; margin-bottom:26px; position:relative; font-size:.95rem;}
  .cta-band .btn-light{
    position:relative; background:#fff; color:var(--primary); padding:13px 28px; border-radius:999px;
    font-weight:700; font-size:.92rem; display:inline-block; transition:transform .2s;
  }
  .cta-band .btn-light:hover{transform:translateY(-2px);}

  /* ---------- FOOTER ---------- */
  footer{background:var(--surface); border-top:1px solid var(--border); padding:64px 0 28px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; margin-bottom:48px;}
  @media (max-width:860px){ .foot-grid{grid-template-columns:repeat(2,1fr);} }
  .foot-grid h5{font-size:.82rem; font-weight:700; margin-bottom:16px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}
  .foot-grid ul{list-style:none;}
  .foot-grid li{margin-bottom:10px;}
  .foot-grid a{font-size:.88rem; color:var(--text); opacity:.85; transition:opacity .2s, color .2s;}
  .foot-grid a:hover{opacity:1; color:var(--primary);}
  .foot-grid p{font-size:.85rem; color:var(--text-muted); line-height:1.6; margin-bottom:18px; max-width:280px;}
  .social-row{display:flex; gap:10px;}
  .social-row a{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center;
    justify-content:center; font-size:.8rem; transition:all .2s;
  }
  .social-row a:hover{border-color:var(--primary); color:var(--primary);}
  .newsletter{display:flex; gap:8px; margin-top:6px;}
  .newsletter input{flex:1; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); font-size:.85rem; color:var(--text); outline:none;}
  .newsletter button{background:var(--secondary); color:#fff; border:none; padding:10px 16px; border-radius:var(--radius-sm); font-weight:600; font-size:.85rem; cursor:pointer;}
  .foot-bottom{
    border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:12px; font-size:.8rem; color:var(--text-muted);
  }
  .foot-bottom .legal a{margin-right:18px; color:var(--text-muted);}
  .foot-bottom .legal a:hover{color:var(--primary);}

/* ===== from calculator-page-dots.html ===== */

:root{
    --primary:#2563EB; --primary-dark:#1D4ED8; --secondary:#10B981; --accent:#F59E0B;
    --danger:#EF4444; --danger-light:#FEE2E2;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; --text:#111827; --text-muted:#5B6472;
    --border:#E5E9F0; --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.05); --shadow-md:0 8px 24px rgba(17,24,39,.08); --shadow-lg:0 20px 48px rgba(17,24,39,.12);
  }
  [data-theme="dark"]{
    --bg:#0B1220; --surface:#121B2E; --surface-alt:#182339; --text:#F1F5F9; --text-muted:#94A3B8; --border:#22304A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-lg:0 20px 48px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Poppins',sans-serif; letter-spacing:-0.01em;}
  a{text-decoration:none; color:inherit;} img,svg{display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins'; font-weight:700; font-size:1.1rem;}
  .logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--secondary)); flex-shrink:0;}
  nav.primary-nav{display:flex; gap:26px;}
  nav.primary-nav a{font-size:.88rem; font-weight:500; color:var(--text-muted);}
  .icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface); font-size:.9rem;}
  @media(max-width:860px){ nav.primary-nav{display:none;} }

  .bc{display:flex; gap:8px; font-size:.8rem; color:var(--text-muted); padding:16px 0; flex-wrap:wrap;}
  .bc .sep{color:#CBD5E1;} .bc .current{color:var(--text); font-weight:600;}

  /* layout: main content + sidebar */
  .page-grid{display:grid; grid-template-columns:1fr 300px; gap:44px; padding-bottom:64px; align-items:start;}
  @media(max-width:960px){ .page-grid{grid-template-columns:1fr;} }

  .hero-head{margin-bottom:28px;}
  .eyebrow{display:inline-block; background:color-mix(in srgb, var(--accent) 15%, transparent); color:#B45309; font-weight:700; font-size:.72rem; padding:5px 12px; border-radius:999px; margin-bottom:14px;}
  h1{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:12px; line-height:1.15;}
  .lead{font-size:1rem; color:var(--text-muted); line-height:1.6; max-width:640px;}

  /* live calculator card */
  .calc-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; margin:32px 0;}
  .calc-card h2{font-size:1.05rem; margin-bottom:20px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
  @media(max-width:480px){ .field-row{grid-template-columns:1fr;} }
  .field label{display:block; font-size:.76rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:7px;}
  .field input, .field select{width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:.95rem; outline:none;}
  .field input:focus, .field select:focus{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);}
  .seg{display:flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;}
  .seg button{flex:1; padding:11px; border:none; background:var(--surface); color:var(--text-muted); font-weight:600; font-size:.85rem; cursor:pointer;}
  .seg button.active{background:var(--primary); color:#fff;}
  .calc-actions{display:flex; gap:12px; margin:20px 0;}
  .btn{font-weight:600; font-size:.9rem; border-radius:999px; cursor:pointer; border:none; padding:13px 26px;}
  .btn-primary{background:var(--primary); color:#fff;}
  .btn-outline{background:none; color:var(--text-muted); border:1.5px solid var(--border);}
  @media(max-width:480px){ .calc-actions{flex-direction:column;} }
  .result-box{background:linear-gradient(135deg, var(--primary), #3B82F6); border-radius:var(--radius-md); padding:22px; color:#fff; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;}
  .result-box .l{font-size:.82rem; opacity:.85;} .result-box .v{font-family:'Poppins'; font-size:2rem; font-weight:700;}
  .result-actions{display:flex; gap:8px; margin-top:14px;}
  .result-actions button{border:1px solid var(--border); background:var(--surface); padding:8px 14px; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600; color:var(--text-muted); cursor:pointer;}

  /* content sections */
  .content-block{margin-bottom:40px;}
  .content-block h2{font-size:1.35rem; margin-bottom:14px;}
  .content-block h3{font-size:1.05rem; margin:20px 0 10px;}
  .content-block p{font-size:.95rem; line-height:1.7; color:var(--text-muted); margin-bottom:12px;}
  .formula-box{background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; font-family:'Poppins'; font-weight:600; text-align:center; font-size:1.05rem; margin:16px 0; overflow-x:auto;}
  .steps{counter-reset:step;}
  .step{display:flex; gap:14px; margin-bottom:16px;}
  .step .num{counter-increment:step; content:counter(step); background:var(--primary); color:#fff; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; flex-shrink:0;}
  .step .num::before{content:counter(step);}
  table{width:100%; border-collapse:collapse; font-size:.88rem; margin:16px 0;}
  th{text-align:left; padding:10px 12px; background:var(--surface-alt); font-size:.76rem; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border);}
  td{padding:10px 12px; border-bottom:1px solid var(--border);}
  .alert{background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--radius-sm); padding:14px 16px; font-size:.86rem; color:#92400E; margin:16px 0;}

  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{width:100%; text-align:left; background:none; border:none; padding:16px 2px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:'Poppins'; font-weight:600; font-size:.92rem; gap:14px;}
  .faq-q .plus{color:var(--primary); flex-shrink:0;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .3s;}
  .faq-a p{padding:0 2px 16px; font-size:.88rem; color:var(--text-muted);}

  /* related calculators */
  .related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media(max-width:760px){ .related-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:480px){ .related-grid{grid-template-columns:1fr;} }
  .related-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; font-size:.86rem; font-weight:600;}
  .related-card span{display:block; font-size:.78rem; font-weight:400; color:var(--text-muted); margin-top:4px;}

  /* sidebar */
  .sidebar-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; margin-bottom:20px;}
  .sidebar-card h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:14px;}
  .sidebar-card ul{list-style:none;}
  .sidebar-card li{padding:9px 0; border-bottom:1px solid var(--border); font-size:.88rem; font-weight:500;}
  .sidebar-card li:last-child{border-bottom:none;}
  @media(max-width:960px){ .sidebar-stack{display:flex; gap:16px; overflow-x:auto;} .sidebar-stack .sidebar-card{min-width:240px;} }

  footer{background:var(--surface); border-top:1px solid var(--border); padding:32px 0; text-align:center; font-size:.82rem; color:var(--text-muted);}

/* ===== from category-fitness.html ===== */

:root{
    --primary:#2563EB; --primary-dark:#1D4ED8; --secondary:#10B981; --accent:#F59E0B;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; --text:#111827; --text-muted:#5B6472;
    --border:#E5E9F0; --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.05); --shadow-md:0 8px 24px rgba(17,24,39,.08);
  }
  [data-theme="dark"]{ --bg:#0B1220; --surface:#121B2E; --surface-alt:#182339; --text:#F1F5F9; --text-muted:#94A3B8; --border:#22304A; }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
  h1,h2{font-family:'Poppins',sans-serif;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:68px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins'; font-weight:700; font-size:1.1rem;}
  .logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--secondary));}
  nav.primary-nav{display:flex; gap:26px;}
  nav.primary-nav a{font-size:.88rem; font-weight:500; color:var(--text-muted);}
  .icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface);}
  @media(max-width:860px){ nav.primary-nav{display:none;} }

  .bc{display:flex; gap:8px; font-size:.8rem; color:var(--text-muted); padding:16px 0;}
  .bc .sep{color:#CBD5E1;} .bc .current{color:var(--text); font-weight:600;}

  .cat-hero{padding:24px 0 40px; border-bottom:1px solid var(--border); margin-bottom:40px;}
  .cat-icon-lg{width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg,#EF4444,#F59E0B); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin-bottom:18px;}
  h1{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:12px;}
  .cat-hero p{color:var(--text-muted); font-size:1rem; line-height:1.65; max-width:640px;}

  .filter-row{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
  .filter-row button{border:1px solid var(--border); background:var(--surface); padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-muted); cursor:pointer;}
  .filter-row button.active{background:var(--primary); color:#fff; border-color:var(--primary);}

  .calc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px;}
  @media(max-width:860px){ .calc-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .calc-grid{grid-template-columns:1fr;} }
  .tool-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; transition:transform .2s, box-shadow .2s;}
  .tool-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
  .tool-icon{width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:14px;}
  .tool-card h4{font-size:.98rem; margin-bottom:6px; font-family:'Poppins'; font-weight:600;}
  .tool-card p{font-size:.84rem; color:var(--text-muted); margin-bottom:14px; line-height:1.5;}
  .tool-open{font-size:.84rem; font-weight:600; color:var(--primary);}
  .badge{display:inline-block; font-size:.65rem; font-weight:700; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 15%, transparent); color:#B45309; margin-bottom:10px;}

  .cat-content{max-width:760px; margin-bottom:56px;}
  .cat-content h2{font-size:1.3rem; margin-bottom:14px;}
  .cat-content p{color:var(--text-muted); font-size:.95rem; line-height:1.7; margin-bottom:12px;}

  footer{background:var(--surface); border-top:1px solid var(--border); padding:32px 0; text-align:center; font-size:.82rem; color:var(--text-muted);}

/* ===== from blog-index.html ===== */

:root{
    --primary:#2563EB; --secondary:#10B981; --accent:#F59E0B;
    --bg:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; --text:#111827; --text-muted:#5B6472;
    --border:#E5E9F0; --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
    --shadow-sm:0 1px 2px rgba(17,24,39,.05); --shadow-md:0 8px 24px rgba(17,24,39,.08);
  }
  [data-theme="dark"]{ --bg:#0B1220; --surface:#121B2E; --surface-alt:#182339; --text:#F1F5F9; --text-muted:#94A3B8; --border:#22304A; }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Poppins',sans-serif;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:68px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins'; font-weight:700; font-size:1.1rem;}
  .logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--secondary));}
  nav.primary-nav{display:flex; gap:26px;}
  nav.primary-nav a{font-size:.88rem; font-weight:500; color:var(--text-muted);}
  nav.primary-nav a.active{color:var(--primary); font-weight:600;}
  .icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface);}
  @media(max-width:860px){ nav.primary-nav{display:none;} }

  .bc{font-size:.8rem; color:var(--text-muted); padding:16px 0;}
  .bc a{color:var(--text-muted);} .bc .current{color:var(--text); font-weight:600;}

  .blog-hero{padding:24px 0 32px;}
  h1{font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:10px;}
  .blog-hero p{color:var(--text-muted); font-size:.98rem; max-width:600px;}

  .search-mini{display:flex; gap:10px; max-width:420px; margin:24px 0 20px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 6px 6px 18px; align-items:center;}
  .search-mini input{border:none; outline:none; background:none; flex:1; font-size:.9rem; color:var(--text); padding:9px 0;}
  .search-mini button{background:var(--primary); color:#fff; border:none; padding:10px 18px; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer;}

  .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
  .filter-row button{border:1px solid var(--border); background:var(--surface); padding:9px 16px; border-radius:999px; font-size:.84rem; font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap;}
  .filter-row button.active{background:var(--primary); color:#fff; border-color:var(--primary);}

  .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;}
  @media(max-width:920px){ .post-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .post-grid{grid-template-columns:1fr;} }
  .post-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s, box-shadow .2s;}
  .post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
  .post-thumb{height:140px; display:flex; align-items:flex-end; padding:14px; color:#fff; font-family:'Poppins'; font-weight:700; font-size:1.3rem;}
  .post-body{padding:20px;}
  .post-body .tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary);}
  .post-body h4{font-size:1rem; margin:8px 0 8px;}
  .post-body p{font-size:.84rem; color:var(--text-muted); line-height:1.55; margin-bottom:10px;}
  .post-meta{font-size:.76rem; color:var(--text-muted); display:flex; gap:10px;}
  .post-card.hidden{display:none;}

  .load-more{display:block; margin:0 auto 60px; background:none; border:1.5px solid var(--border); color:var(--text-muted); padding:12px 30px; border-radius:999px; font-weight:600; font-size:.88rem; cursor:pointer;}

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:var(--surface);
    border-top:1px solid var(--border);
    margin-top:80px;
  }

  /* grid */
  .foot-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    padding-top:56px;
    padding-bottom:40px;
  }
  @media(max-width:860px){
    .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
  }
  @media(max-width:500px){
    .foot-grid{grid-template-columns:1fr; gap:28px;}
  }

  /* brand column */
  .foot-brand .logo{display:inline-flex; margin-bottom:14px;}
  .foot-tagline{font-size:.88rem; color:var(--text-muted); line-height:1.6; margin-bottom:18px; max-width:260px;}

  /* social icons */
  .foot-social{display:flex; gap:10px;}
  .social-icon{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); transition:all .25s;
  }
  .social-icon:hover{
    border-color:var(--primary); color:var(--primary);
    background:color-mix(in srgb, var(--primary) 8%, transparent);
    transform:translateY(-2px);
  }

  /* link columns */
  .foot-col h5{
    font-family:'Poppins',sans-serif;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text);
    margin-bottom:18px;
  }
  .foot-col ul{list-style:none; padding:0; margin:0;}
  .foot-col ul li{margin-bottom:10px;}
  .foot-col ul li a{
    font-size:.88rem;
    color:var(--text-muted);
    transition:color .2s, padding-left .2s;
    display:inline-block;
  }
  .foot-col ul li a:hover{
    color:var(--primary);
    padding-left:4px;
  }

  /* bottom bar */
  .foot-bottom{
    border-top:1px solid var(--border);
    padding-top:20px;
    padding-bottom:20px;
  }
  .foot-bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .foot-bottom span{
    font-size:.8rem;
    color:var(--text-muted);
  }
  .foot-credit a{
    color:var(--primary);
    font-weight:600;
    transition:color .2s;
  }
  .foot-credit a:hover{color:var(--primary-dark);}

  @media(max-width:500px){
    .foot-bottom-inner{flex-direction:column; text-align:center;}
  }

/* ===== from about-contact.html ===== */

:root{--primary:#2563EB; --secondary:#10B981; --accent:#F59E0B; --bg:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; --text:#111827; --text-muted:#5B6472; --border:#E5E9F0; --radius-md:14px; --radius-sm:10px; --shadow-md:0 8px 24px rgba(17,24,39,.08);}
  [data-theme="dark"]{--bg:#0B1220; --surface:#121B2E; --surface-alt:#182339; --text:#F1F5F9; --text-muted:#94A3B8; --border:#22304A;}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text);}
  h1,h2,h3{font-family:'Poppins',sans-serif;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:900px; margin:0 auto; padding:0 24px;}
  header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:1180px; margin:0 auto; padding:0 24px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins'; font-weight:700; font-size:1.1rem;}
  .logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--secondary));}
  .icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface);}
  .bc{font-size:.8rem; color:var(--text-muted); padding:16px 0;}
  .bc a{color:var(--text-muted);} .bc .current{color:var(--text); font-weight:600;}
  h1{font-size:clamp(1.8rem,3.5vw,2.4rem); margin:12px 0 24px;}
  section{padding:32px 0;}
  section p{font-size:.98rem; color:var(--text-muted); line-height:1.75; margin-bottom:16px;}
  .stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:32px 0;}
  @media(max-width:600px){ .stat-grid{grid-template-columns:1fr;} }
  .stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; text-align:center;}
  .stat-card .num{font-family:'Poppins'; font-size:1.7rem; font-weight:700; color:var(--primary);}
  .stat-card .label{font-size:.8rem; color:var(--text-muted); margin-top:4px;}

  /* contact form */
  .contact-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-top:16px; box-shadow:var(--shadow-md);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:7px;}
  .field input, .field textarea{width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); color:var(--text); font-family:'Inter'; font-size:.92rem; outline:none;}
  .field textarea{resize:vertical; min-height:110px;}
  .field input:focus, .field textarea:focus{border-color:var(--primary);}
  .btn-primary{background:var(--primary); color:#fff; border:none; padding:12px 26px; border-radius:999px; font-weight:600; font-size:.9rem; cursor:pointer;}
  /* footer inherited from main .site-footer styles */

/* ===== from privacy-policy.html ===== */

:root{--primary:#2563EB; --secondary:#10B981; --bg:#F8FAFC; --surface:#FFFFFF; --text:#111827; --text-muted:#5B6472; --border:#E5E9F0;}
  [data-theme="dark"]{--bg:#0B1220; --surface:#121B2E; --text:#F1F5F9; --text-muted:#94A3B8; --border:#22304A;}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:'Inter',sans-serif; background:var(--bg); color:var(--text);}
  h1,h2{font-family:'Poppins',sans-serif;}
  a{color:var(--primary); text-decoration:none;}
  .wrap{max-width:760px; margin:0 auto; padding:0 24px;}
  header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:1180px; margin:0 auto; padding:0 24px;}
  .logo{display:flex; align-items:center; gap:9px; font-family:'Poppins'; font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--text);}
  .logo-mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--primary), var(--secondary));}
  .icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--surface);}
  .page-tabs{display:flex; gap:8px; padding:20px 0; flex-wrap:wrap;}
  .page-tabs a{font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted);}
  .page-tabs a.active{background:var(--primary); color:#fff; border-color:var(--primary);}
  h1{font-size:1.9rem; margin-bottom:8px;}
  .updated{font-size:.82rem; color:var(--text-muted); margin-bottom:28px;}
  h2{font-size:1.1rem; margin:26px 0 10px;}
  p, li{font-size:.92rem; color:var(--text-muted); line-height:1.75; margin-bottom:10px;}
  ul{padding-left:20px; margin-bottom:12px;}
  /* footer inherited from main .site-footer styles */
/* ===== supplemental rules for PHP templates (anchor-based filter links, contact form) ===== */
.filter-row a{border:1px solid var(--border); background:var(--surface); padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-muted); cursor:pointer; text-decoration:none; display:inline-block; white-space:nowrap;}
.filter-row a.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.post-card{display:block; text-decoration:none; color:inherit;}
.page-content h2{font-family:'Poppins',sans-serif; font-size:1.2rem; margin:24px 0 12px; color:var(--text);}
.page-content p{margin-bottom:14px;}
.page-content ul, .page-content ol{padding-left:20px; margin-bottom:14px;}
.sidebar-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; margin-bottom:20px;}
.sidebar-card h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:14px;}

/* ===== nav-drop dropdown (Calculators menu), matches redesigned header ===== */
.nav-drop{position:relative;}
.nav-drop > button{font-size:.88rem; font-weight:500; color:var(--text-muted); padding:8px 12px; border-radius:8px; background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif;}
.nav-drop > button:hover{color:var(--primary);}
.drop-menu{position:absolute; top:44px; left:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:8px; min-width:200px; display:none; z-index:50;}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu{display:block;}
.drop-menu a{display:block; padding:9px 12px; border-radius:6px; font-size:.85rem; color:var(--text-muted);}
.drop-menu a:hover{background:var(--surface-alt); color:var(--primary);}
nav.primary-nav > a.active{color:var(--primary); font-weight:600;}

/* ===== hero-split: left slideshow + centered calculator (theme-native, no plugin required) ===== */
.hero-split{display:grid; grid-template-columns:340px 1fr; gap:40px; align-items:center; padding:32px 0;}
@media(max-width:960px){ .hero-split{grid-template-columns:1fr;} }
.hero-slideshow{background:linear-gradient(160deg, var(--primary), #1E3A8A); border-radius:var(--radius-lg); padding:32px 28px; color:#fff; position:relative; min-height:260px; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.hero-slideshow .slide{display:none;}
.hero-slideshow .slide.active{display:block; animation:dcsFade .4s ease;}
@keyframes dcsFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.slide-icon{font-size:2rem; margin-bottom:14px;}
.hero-slideshow h3{font-size:1.2rem; margin-bottom:10px; line-height:1.25;}
.hero-slideshow p{font-size:.88rem; opacity:.9; line-height:1.55;}
.slide-dots{display:flex; gap:8px; margin-top:24px;}
.slide-dots .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; cursor:pointer; padding:0;}
.slide-dots .dot.active{background:#fff; width:20px; border-radius:4px;}
.hero-calc-col{display:flex; flex-direction:column; align-items:center;}
@media(max-width:960px){ .hero-calc-col{order:-1;} }

/* ===== homepage feature grid (post-calculator section) ===== */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:760px){ .feature-grid{grid-template-columns:1fr;} }
.feature-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:22px; text-align:center;}
.feature-icon{font-size:1.6rem; margin-bottom:10px;}
.feature-card h3{font-size:1rem; margin-bottom:8px; font-family:'Poppins',sans-serif;}
.feature-card p{font-size:.85rem; color:var(--text-muted); line-height:1.5; margin:0;}

/* ===== BLOG ARCHIVE — SEO-optimized ===== */
.blog-hero{padding:28px 0 20px;}
.blog-hero h1{font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:10px;}
.blog-hero-desc{color:var(--text-muted); font-size:.98rem; max-width:600px; line-height:1.6;}
.search-mini{display:flex; gap:10px; max-width:420px; margin:20px 0; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 6px 6px 18px; align-items:center;}
.search-mini input{border:none; outline:none; background:none; flex:1; font-size:.9rem; padding:9px 0; font-family:'Inter',sans-serif; color:var(--text);}
.search-mini button{background:var(--primary); color:#fff; border:none; padding:10px 18px; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer;}
.filter-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.filter-row a .cat-count{font-weight:400; opacity:.6; font-size:.78em;}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:40px;}
@media(max-width:920px){.post-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}

.post-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s, box-shadow .2s;}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.post-card-link{display:block; text-decoration:none; color:inherit;}
.post-thumb{height:160px; display:flex; align-items:flex-end; padding:14px; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--primary), var(--secondary));}
.post-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.post-thumb-fallback{position:absolute; inset:0;}
.post-body{padding:20px;}
.post-body .tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary); display:inline-block; margin-bottom:6px;}
.post-body h2{font-size:1rem; margin:0 0 8px; line-height:1.35; font-family:'Poppins',sans-serif;}
.post-body p{font-size:.84rem; color:var(--text-muted); line-height:1.55; margin-bottom:10px;}
.post-meta{font-size:.76rem; color:var(--text-muted); display:flex; align-items:center; gap:6px;}
.meta-sep{opacity:.5;}

.blog-pagination{margin-bottom:48px;}
.blog-pagination .nav-links{display:flex; justify-content:center; gap:6px;}
.blog-pagination .page-numbers{padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:.85rem; color:var(--text-muted); background:var(--surface);}
.blog-pagination .page-numbers.current{background:var(--primary); color:#fff; border-color:var(--primary);}
.empty-state{text-align:center; padding:60px 20px;}
.empty-state p{color:var(--text-muted); font-size:1rem; margin-bottom:16px;}
.btn-back{font-size:.9rem; font-weight:600; color:var(--primary);}

/* ===== SINGLE BLOG POST — SEO-optimized ===== */
.blog-single{max-width:760px; padding-bottom:56px;}
.post-header{padding-top:8px;}
.post-cat-badge{display:inline-block; background:color-mix(in srgb, var(--secondary) 12%, transparent); color:var(--secondary); font-weight:700; font-size:.72rem; padding:5px 14px; border-radius:999px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.03em;}
.post-header h1{font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:14px; line-height:1.15;}
.post-meta-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
.meta-left{display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text-muted); flex-wrap:wrap;}
.meta-updated{color:var(--secondary); font-weight:500;}

.post-featured-img{border-radius:var(--radius-md); overflow:hidden; margin-bottom:28px;}
.page-content{font-size:.98rem; color:var(--text-muted); line-height:1.8;}
.page-content h2{font-family:'Poppins',sans-serif; font-size:1.3rem; color:var(--text); margin:32px 0 14px; line-height:1.3;}
.page-content h3{font-family:'Poppins',sans-serif; font-size:1.1rem; color:var(--text); margin:24px 0 12px;}
.page-content p{margin-bottom:16px;}
.page-content ul,.page-content ol{padding-left:24px; margin-bottom:16px;}
.page-content li{margin-bottom:6px;}
.page-content img{max-width:100%; height:auto; border-radius:var(--radius-sm); margin:20px 0;}
.page-content blockquote{border-left:3px solid var(--primary); padding:12px 20px; margin:20px 0; background:color-mix(in srgb, var(--primary) 5%, transparent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic;}
.page-content table{width:100%; border-collapse:collapse; margin:20px 0; font-size:.9rem;}
.page-content th,.page-content td{padding:10px 14px; border:1px solid var(--border); text-align:left;}
.page-content th{background:color-mix(in srgb, var(--primary) 8%, transparent); font-weight:600; color:var(--text);}
.page-content code{background:color-mix(in srgb, var(--text) 8%, transparent); padding:2px 6px; border-radius:4px; font-size:.88em; font-family:'Fira Code',monospace;}
.page-content pre{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; overflow-x:auto; margin:20px 0;}
.page-content pre code{background:none; padding:0;}

.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0; padding-top:20px; border-top:1px solid var(--border);}
.post-tags a{font-size:.78rem; font-weight:600; padding:6px 14px; border:1px solid var(--border); border-radius:999px; color:var(--text-muted); transition:all .2s;}
.post-tags a:hover{border-color:var(--primary); color:var(--primary);}

.post-share{display:flex; align-items:center; gap:14px; padding:20px 0; flex-wrap:wrap;}
.share-label{font-size:.82rem; font-weight:600; color:var(--text-muted);}
.share-links{display:flex; gap:8px;}
.share-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); cursor:pointer; background:var(--surface); transition:all .2s; text-decoration:none; font-size:.75rem;}
.share-btn:hover{border-color:var(--primary); color:var(--primary);}
.share-copy{width:auto; border-radius:999px; padding:0 14px; font-family:'Inter',sans-serif; font-weight:600; font-size:.78rem;}

.related-posts{padding-top:32px; border-top:1px solid var(--border); margin-top:12px;}
.related-posts h2{font-size:1.15rem; margin-bottom:20px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:760px){.related-grid{grid-template-columns:1fr;}}
.related-card{display:flex; gap:14px; align-items:center; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform .2s, box-shadow .2s; text-decoration:none; color:inherit;}
.related-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.related-thumb{width:64px; height:64px; border-radius:8px; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg, var(--primary), var(--secondary));}
.related-thumb img{width:100%; height:100%; object-fit:cover;}
.related-info h3{font-size:.88rem; margin:0 0 4px; line-height:1.3; font-family:'Poppins',sans-serif;}
.related-meta{font-size:.74rem; color:var(--text-muted);}

/* ===== MINIMAL FOOTER (non-home pages) ===== */
.site-footer--mini{margin-top:40px;}
.site-footer--mini .foot-bottom{border-top:1px solid var(--border);}

/* ===== SHORTCODE FOOTER ===== */
.site-footer--shortcode{background:var(--surface); border-top:1px solid var(--border); padding-top:40px; padding-bottom:24px; margin-top:40px;}

/* ===== BLOG PAGE (home.php) ===== */
.blog-page-hero{padding:32px 0 24px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.blog-hero-text .eyebrow{display:inline-flex; align-items:center; gap:8px; background:color-mix(in srgb, var(--secondary) 12%, transparent); color:var(--secondary); font-weight:600; font-size:.78rem; padding:7px 14px; border-radius:999px; margin-bottom:14px;}
.eyebrow-dot{width:6px; height:6px; border-radius:50%; background:var(--secondary);}
.blog-page-hero h1{font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:8px; line-height:1.12;}
.blog-hero-desc{color:var(--text-muted); font-size:.95rem; max-width:480px; line-height:1.6;}
.blog-search{display:flex; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:5px 5px 5px 18px; align-items:center; min-width:280px; box-shadow:var(--shadow-sm);}
.blog-search input{border:none; outline:none; background:none; flex:1; font-size:.9rem; padding:9px 0; font-family:'Inter',sans-serif; color:var(--text); min-width:0;}
.blog-search button{background:var(--primary); color:#fff; border:none; padding:10px 20px; border-radius:999px; font-weight:600; font-size:.85rem; cursor:pointer; white-space:nowrap; transition:background .2s;}
.blog-search button:hover{background:var(--primary-dark);}
@media(max-width:640px){.blog-page-hero{flex-direction:column; align-items:stretch;} .blog-search{min-width:0;}}

/* category tabs */
.cat-tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:20px; margin-bottom:8px; scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1px solid var(--border); border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-muted); background:var(--surface); white-space:nowrap; transition:all .2s; text-decoration:none;}
.cat-tab:hover{border-color:var(--primary); color:var(--primary);}
.cat-tab.active{background:var(--primary); color:#fff; border-color:var(--primary);}
.cat-tab-icon{font-size:.95rem;}
.cat-tab-count{font-size:.72rem; background:color-mix(in srgb, var(--text) 8%, transparent); padding:2px 7px; border-radius:999px; font-weight:700;}
.cat-tab.active .cat-tab-count{background:rgba(255,255,255,.25); color:#fff;}
.cat-description{font-size:.92rem; color:var(--text-muted); margin-bottom:24px; max-width:600px; line-height:1.6;}

/* featured post */
.featured-post{margin-bottom:36px;}
.featured-link{display:grid; grid-template-columns:1.2fr 1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s;}
.featured-link:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.featured-thumb{position:relative; min-height:260px; background:linear-gradient(135deg, var(--primary), var(--secondary)); overflow:hidden;}
.featured-thumb img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.featured-thumb-fallback{width:100%; height:100%; background:linear-gradient(135deg, var(--primary), var(--secondary));}
.featured-badge{position:absolute; top:14px; left:14px; background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;}
.featured-body{padding:32px 28px; display:flex; flex-direction:column; justify-content:center;}
.featured-body .tag{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary); margin-bottom:10px; display:inline-block;}
.featured-body h2{font-size:clamp(1.2rem,2vw,1.5rem); margin:0 0 12px; line-height:1.3; font-family:'Poppins',sans-serif;}
.featured-body p{font-size:.9rem; color:var(--text-muted); line-height:1.6; margin-bottom:14px;}
.read-more-link{font-size:.88rem; font-weight:600; color:var(--primary); margin-top:auto;}
@media(max-width:760px){.featured-link{grid-template-columns:1fr;} .featured-thumb{min-height:180px;} .featured-body{padding:20px;}}

/* post grid overrides for blog page */
.post-grid{margin-bottom:32px;}
.post-thumb{background:linear-gradient(135deg, var(--primary), var(--secondary));}

/* empty state */
.empty-state{text-align:center; padding:60px 20px;}
.empty-icon{font-size:2.5rem; margin-bottom:12px;}
.empty-state p{color:var(--text-muted); font-size:1rem; margin-bottom:16px;}

/* ── ALL CATEGORIES GRID ── */
.blog-cats-section{padding:48px 0 20px; border-top:1px solid var(--border); margin-top:20px;}
.blog-cats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){.blog-cats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.blog-cats-grid{grid-template-columns:1fr;}}

.blog-cat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s, box-shadow .2s;}
.blog-cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.blog-cat-header{padding:20px; color:#fff; display:flex; flex-direction:column; gap:4px;}
.blog-cat-icon{font-size:1.5rem;}
.blog-cat-header h3{font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:700; margin:0;}
.blog-cat-count{font-size:.78rem; opacity:.85;}
.blog-cat-body{padding:16px 20px 20px;}
.blog-cat-posts{list-style:none; padding:0; margin:0 0 14px;}
.blog-cat-posts li{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border);}
.blog-cat-posts li:last-child{border-bottom:none;}
.blog-cat-posts li a{font-size:.88rem; color:var(--text); font-weight:500; text-decoration:none; transition:color .2s; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:10px;}
.blog-cat-posts li a:hover{color:var(--primary);}
.blog-cat-date{font-size:.74rem; color:var(--text-muted); white-space:nowrap;}
.blog-cat-empty{font-size:.85rem; color:var(--text-muted); margin-bottom:14px;}
.blog-cat-viewall{font-size:.85rem; font-weight:600; color:var(--primary); text-decoration:none; display:inline-block; transition:padding-left .2s;}
.blog-cat-viewall:hover{padding-left:4px;}