/*
Theme Name: SelfEmployLab
Theme URI: https://selfemploylab.com/
Author: SelfEmployLab
Description: Light, fast theme for tax and money calculators aimed at US freelancers. Navy + green "Trust Navy" design: calculators first, readable guides, reserved ad slots that never shift layout.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: selfemploylab
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-var.woff2) format('woff2')}

:root{
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --bg:#fff; --card:#fff; --tint:#f7fafc; --soft:#eef4fa;
  --ink:#0b2545; --ink-2:#334a66; --muted:#5b6b80;
  --line:#dbe3ec; --line-2:#c5d1de;
  --accent:#0f7b5f; --accent-2:#16a37f; --ring:rgba(15,123,95,.18);
  --link:#0b5cad;
  --navy:#0b2545; --on-navy:#fff; --on-navy-2:#a9c1dc; --navy-line:rgba(255,255,255,.14);
  --c1:#5eead4; --c2:#93c5fd; --c3:#fcd34d; --good-on-navy:#5eead4;
  --r:16px; --r-sm:10px;
  --wrap:1140px; --measure:68ch;
  --shadow:0 10px 30px -18px rgba(11,37,69,.35);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;line-height:1.2}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:10px 14px;border-radius:8px}

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-head{border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:20}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:19px;letter-spacing:-.01em}
.logo:hover{color:var(--ink)}
.logo b{color:var(--accent)}
.logo-mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:#fff;flex:none}
.logo-mark svg{width:22px;height:22px;display:block}
.card-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--soft);color:var(--accent);margin-right:8px;vertical-align:middle}
.card-ico svg{width:18px;height:18px}
.card .card-k{display:flex;align-items:center}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover,.nav .current-menu-item>a,.nav .current-page-ancestor>a{color:var(--accent)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:42px;cursor:pointer;color:var(--ink)}
.menu-btn svg{display:block;margin:auto}

/* ==========================================================================
   4. Page head (title, lede, trust strip)
   ========================================================================== */
.crumbs{font-size:13px;color:var(--muted);margin:20px 0 8px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 6px}
.page-head h1{font-size:clamp(28px,4.4vw,42px);margin:0 0 12px;letter-spacing:-.02em;font-weight:800}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch;margin:0 0 16px}
.trust{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:0 0 24px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust span{display:inline}
.trust svg{color:var(--accent);vertical-align:-3px;margin-right:4px}
.trust b{color:var(--ink-2);font-weight:600}

/* ==========================================================================
   5. Calculator
   ========================================================================== */
.tool{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:12px}
.tool-in{padding:28px;display:grid;gap:18px;align-content:start;background:var(--tint)}
.tool-h{font-size:18px;margin:0}
.tool label{display:grid;gap:6px;font-weight:600;font-size:15px}
.tool label small{font-weight:400;color:var(--muted);font-size:13px}
.field{display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;padding:0 14px;min-height:52px}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.field i{font-style:normal;color:var(--muted);margin-right:6px;font-size:18px}
.field input,.field select{border:0;outline:0;font:600 19px/1 var(--sans);width:100%;background:transparent;color:var(--ink);min-height:48px;padding:0}
.tool-out{padding:28px;background:var(--navy);color:var(--on-navy)}
/* Phone-only running total under the first field, so the answer shows before scrolling. */
.r-mini{display:none;margin:-6px 0 0;padding:10px 14px;border-radius:var(--r-sm);background:var(--navy);color:var(--on-navy-2);font-size:14px}
.r-mini b{color:#fff;font-size:17px}
.r-label{margin:0;font-size:14px;font-weight:600;color:var(--on-navy-2)}
.r-total{font-size:clamp(40px,6vw,56px);font-weight:800;line-height:1.05;margin:6px 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-sub{margin:0 0 16px;font-size:14px;color:var(--on-navy-2)}
.r-sub b{color:#fff}
.r-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.15);margin-bottom:14px}
.r-bar span{display:block;height:100%;width:0;transition:width .3s}
.b1,.d1{background:var(--c1)}.b2,.d2{background:var(--c2)}.b3,.d3{background:var(--c3)}
.r-rows{margin:0 0 18px}
.r-rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--navy-line);font-size:15px}
.r-rows dt{display:flex;align-items:center;gap:8px}
.r-rows dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.r-good dd{color:var(--good-on-navy)}
.r-list{list-style:none;margin:0 0 18px;padding:12px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);font-size:14px}
.r-list:empty{display:none}
.r-list li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--on-navy-2)}
.r-list li b{color:#fff;font-variant-numeric:tabular-nums}
.btn{display:block;text-align:center;padding:14px;border-radius:var(--r-sm);font-weight:700;text-decoration:none;background:var(--accent-2);color:#fff}
.btn:hover{background:var(--accent);color:#fff}
.disclaimer{font-size:13px;color:var(--muted);margin:0 0 24px}

/* ==========================================================================
   6. Layout + article
   ========================================================================== */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;margin:8px 0 64px}
.layout.no-side{grid-template-columns:minmax(0,1fr)}
.entry{max-width:var(--measure);font-size:17px}
.entry>*:first-child{margin-top:0}
.entry h2{font-size:26px;margin:36px 0 10px}
.entry h3{font-size:20px;margin:28px 0 8px}
.entry p,.entry ul,.entry ol{margin:0 0 16px}
.entry li{margin-bottom:6px}
.entry table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;font-variant-numeric:tabular-nums}
.entry th,.entry td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.entry th{background:var(--soft);font-weight:600}
.callout,.entry .is-style-callout{background:var(--soft);border-left:4px solid var(--accent);padding:16px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:20px 0}
.entry blockquote{margin:20px 0;padding:4px 0 4px 18px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.sources{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:16px}
.sources h2{font-size:16px;margin:0 0 6px}
.sources ul{margin:0;padding-left:18px}

.initials{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:17px;flex:none;letter-spacing:.02em}
.author-box{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--tint);font-size:15px}
.author-box p{margin:0 0 6px}
.author-box .author-name{font-weight:700;color:var(--ink)}
.author-head{display:flex;gap:20px;align-items:flex-start;margin-top:8px}
.author-head .initials{width:72px;height:72px;font-size:26px}
.trust a{color:inherit;text-decoration:none}
.trust a:hover{color:var(--accent)}
.side{display:grid;gap:20px;align-content:start}
.side-box{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.side-box h3{margin:0 0 8px;font-size:15px}
.side-box a{display:block;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;font-weight:500;font-size:15px}

/* ==========================================================================
   7. Ad slots — reserved height so nothing shifts when ads load
   ========================================================================== */
.ad{display:block;margin:0 auto 32px;text-align:center;overflow:hidden}
.ad-label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ad-below-tool{min-height:110px}
.ad-in-content{min-height:280px;margin:28px 0}
.ad-sidebar{min-height:600px;position:sticky;top:16px}
.ad.is-placeholder{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#f3f5f8 0 10px,#eceff4 10px 20px);border:1px dashed var(--line-2);border-radius:6px;color:var(--muted);font:600 12px/1.3 var(--sans)}

/* ==========================================================================
   8. Front page + listings
   ========================================================================== */
.home-hero{padding:48px 0 24px;max-width:760px}
.home-hero h1{font-size:clamp(32px,5vw,50px);font-weight:800;margin:0 0 14px;letter-spacing:-.025em}
.section-h{font-size:22px;margin:32px 0 16px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:24px}
.card{display:block;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow);color:var(--ink)}
.card h3{margin:0 0 6px;font-size:17px}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card .card-k{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.post-list{list-style:none;margin:0 0 40px;padding:0}
.post-list li{border-top:1px solid var(--line);padding:18px 0}
.post-list h2,.post-list h3{font-size:19px;margin:0 0 4px}
.post-list h2 a,.post-list h3 a{color:var(--ink);text-decoration:none}
.post-list h2 a:hover,.post-list h3 a:hover{color:var(--accent)}
.post-list p{margin:0;color:var(--muted);font-size:15px}
.pagination{display:flex;gap:8px;margin:0 0 48px}
.pagination .page-numbers{padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.search-form{display:flex;gap:8px;max-width:480px}
.search-form input{flex:1;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;font:16px var(--sans)}
.search-form button{border:0;border-radius:var(--r-sm);padding:0 18px;background:var(--ink);color:#fff;font:600 15px var(--sans);cursor:pointer}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-foot{border-top:1px solid var(--line);background:var(--tint);padding:32px 0;font-size:14px;color:var(--muted)}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.site-foot a{color:var(--ink-2);text-decoration:none}
.foot-note{max-width:640px;margin:16px 0 0;font-size:13px}

/* ==========================================================================
   10. Mobile
   ========================================================================== */
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(11,37,69,.4)}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:8px 16px 16px}
  .nav a{display:block;padding:12px 0;border-top:1px solid var(--line);font-size:16px}
  .tool{grid-template-columns:1fr}
  .tool-in,.tool-out{padding:20px}
  .r-mini{display:block}
  .layout{grid-template-columns:1fr;gap:24px}
  .ad-sidebar{min-height:280px;position:static}
  .lede{font-size:17px}
}