/*
Theme Name: PayNest
Theme URI: https://paynestcalc.com
Author: PayNest
Description: Ultra-fast, Stripe-style salary & paycheck calculator theme. Pure front-end calculators, no bloat, LCP < 1.5s.
Version: 1.0
License: GPL v2 or later
Text Domain: paynest
*/

:root{
  --ink:#1A202C; --muted:#64748B; --line:#E2E8F0; --bg:#FFFFFF; --soft:#F8FAFC;
  --blue:#2563EB; --blue-d:#1D4ED8; --green:#0A7D43; --red:#C0392B;
  --radius:12px; --maxw:1080px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:60px;
  display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.logo span{color:var(--blue)}
.main-nav{display:flex;gap:22px;font-size:14px}
.main-nav a{color:#334155}
.main-nav a:hover{color:var(--blue);text-decoration:none}
@media(max-width:720px){.main-nav{display:none}}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.hero{padding:64px 0 40px;text-align:center;background:linear-gradient(180deg,#F8FAFC 0%,#fff 100%)}
.hero h1{font-size:42px;line-height:1.15;letter-spacing:-.03em;margin:0 0 14px}
.hero p{font-size:18px;color:var(--muted);max-width:640px;margin:0 auto 28px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:13px;color:#475569}
.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px}

h1.page-title{font-size:34px;letter-spacing:-.02em;line-height:1.2;margin:36px 0 10px}
.lede{font-size:17px;color:var(--muted);margin:0 0 24px}

/* ---------- tool grid ---------- */
.grid-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:28px 0}
.tool-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff;
  display:block;color:var(--ink);transition:.15s}
.tool-card:hover{border-color:var(--blue);box-shadow:0 4px 16px rgba(37,99,235,.08);text-decoration:none}
.tool-card .ico{font-size:26px}
.tool-card h3{margin:10px 0 6px;font-size:16px}
.tool-card p{margin:0;font-size:13px;color:var(--muted)}

/* ---------- calculator ---------- */
.pn-calc{border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);margin:20px 0}
.pn-calc h2{margin-top:0;font-size:18px}
.pn-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.pn-field label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:5px}
.pn-field input,.pn-field select{width:100%;padding:10px 12px;border:1px solid #CBD5E1;border-radius:8px;
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.pn-field input:focus,.pn-field select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.pn-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.pn-result{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px}
.pn-result .lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pn-result .val{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.pn-result.hl{background:var(--blue);border-color:var(--blue)}
.pn-result.hl .lbl{color:rgba(255,255,255,.75)}
.pn-result.hl .val{color:#fff}
table.pn-breakdown{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
table.pn-breakdown td,table.pn-breakdown th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left}
table.pn-breakdown td:last-child,table.pn-breakdown th:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.pn-breakdown tr.net td{font-weight:800;font-size:16px}
.pn-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.pn-winner{border:2px solid var(--green);border-radius:10px}

/* ---------- article ---------- */
.entry{max-width:760px;margin:0 auto}
.entry h2{font-size:22px;margin:36px 0 10px;letter-spacing:-.01em}
.entry h3{font-size:17px;margin:24px 0 8px}
.entry p,.entry li{font-size:15.5px;color:#334155}
.entry details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0;background:var(--soft)}
.entry summary{font-weight:600;cursor:pointer;font-size:15px}
.ad-slot{border:1px dashed #CBD5E1;border-radius:10px;padding:26px;text-align:center;
  color:#94A3B8;font-size:13px;margin:32px 0;background:var(--soft)}
.related{border-top:1px solid var(--line);margin-top:40px;padding-top:20px}
.related a{display:inline-block;margin:0 14px 8px 0;font-size:14px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:64px;background:var(--soft)}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:32px 20px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.site-footer h4{margin:0 0 8px;font-size:13px;color:var(--ink)}
.site-footer a{display:block;margin:4px 0;color:var(--muted)}
.site-footer a:hover{color:var(--blue)}
.legal{font-size:12px;color:#94A3B8}
.footer-states{max-width:340px}
.footer-states a{display:inline-block;margin:2px 10px 2px 0}

/* ---------- state directory ---------- */
.pn-states{columns:3;column-gap:32px;font-size:14px;line-height:2;margin-top:12px}
.pn-states a{display:block;break-inside:avoid}
@media (max-width:700px){.pn-states{columns:2}}
.state-hub li{margin:10px 0;font-size:15px;line-height:1.6}
.state-hub a{font-weight:600}

/* ---------- mobile ---------- */
@media (max-width:720px){
  /* header: stacked compact nav instead of hiding it */
  .site-header .inner{height:auto;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px}
  .main-nav{display:flex;flex-wrap:wrap;gap:0 16px;font-size:13.5px}
  .main-nav a{padding:6px 0}
  /* typography scale down */
  .hero{padding:40px 0 28px}
  .hero h1{font-size:30px}
  .hero p{font-size:16px;margin-bottom:22px}
  h1.page-title{font-size:26px;margin-top:28px}
  .lede{font-size:15.5px}
  /* calculator */
  .pn-calc{padding:18px 14px}
  .pn-field input,.pn-field select{font-size:16px} /* >=16px prevents iOS focus auto-zoom */
  .pn-result{padding:12px}
  .pn-result .val{font-size:22px}
  /* article */
  .entry h2{font-size:19px}
  .entry p,.entry li{font-size:15px}
  /* wide tables scroll horizontally instead of breaking layout */
  .entry table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .related a{margin-right:10px}
}
@media (max-width:440px){
  .pn-states{columns:1}
  .pn-fields{grid-template-columns:1fr} /* force one column on narrow phones */
}