/*
Theme Name:   Calculator Hub
Theme URI:    https://percentagecalculatorhub.com/
Author:       PercentageCalculatorHub
Description:  Content-first theme for a calculator site. Server-rendered, system fonts, no JavaScript libraries, dark and light modes, reserved ad slots. Built for the PCH Calculators plugin.
Version:      1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  pch-theme
*/

/* =====================================================================
   1. TOKENS
   Dark is the default when the OS expresses no preference. The plugin's
   calculator CSS reads these same names, so widget and page always match.
   ===================================================================== */
:root{
  --bg:#0F172A; --surface:#1B2336; --sunken:#141B2D;
  --line:#2A3447; --line-strong:#64748B;
  --tx:#F1F5F9; --tx-dim:#CBD5E1; --tx-mute:#94A3B8;
  --brand-1:#A5B4FC; --brand-2:#C4B5FD; --brand-solid:#4F46E5; --on-brand:#0F172A;
  --green:#4ADE80; --amber:#FBBF24; --red:#F87171;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.5);
  --measure:68ch; --container:1120px; --gutter:20px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#FFFFFF; --surface:#FFFFFF; --sunken:#F8FAFC;
    --line:#E2E8F0; --line-strong:#64748B;
    --tx:#0F172A; --tx-dim:#334155; --tx-mute:#475569;
    --brand-1:#4F46E5; --brand-2:#7C3AED; --brand-solid:#4F46E5; --on-brand:#FFFFFF;
    --green:#15803D; --amber:#B45309; --red:#B91C1C;
    --shadow-sm:0 1px 3px rgba(15,23,42,.08);
    --shadow-md:0 12px 32px -12px rgba(15,23,42,.18);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --sunken:#F8FAFC;
  --line:#E2E8F0; --line-strong:#64748B;
  --tx:#0F172A; --tx-dim:#334155; --tx-mute:#475569;
  --brand-1:#4F46E5; --brand-2:#7C3AED; --brand-solid:#4F46E5; --on-brand:#FFFFFF;
  --green:#15803D; --amber:#B45309; --red:#B91C1C;
  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --shadow-md:0 12px 32px -12px rgba(15,23,42,.18);
  color-scheme:light;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:16px/1.65 var(--font);font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;display:flex;flex-direction:column;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-1);text-decoration:none;text-underline-offset:.15em}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-1);outline-offset:2px;border-radius:var(--r-sm)}
button{font:inherit;cursor:pointer}
::selection{background:color-mix(in srgb,var(--brand-1) 30%,transparent)}

h1,h2,h3,h4{color:var(--tx);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  margin:0 0 .5em;text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:clamp(30px,2.2rem + 1.2vw,44px);margin-bottom:.35em}
h2{font-size:clamp(23px,1.4rem + .6vw,30px);margin-top:1.8em}
h3{font-size:clamp(18px,1.1rem + .2vw,21px);margin-top:1.5em}
h4{font-size:16px;margin-top:1.3em}
p,ul,ol{margin:0 0 1.1em}
li{margin:.3em 0}
strong{color:var(--tx);font-weight:650}
small{font-size:13.5px;color:var(--tx-mute)}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--sunken);
  border:1px solid var(--line);border-radius:6px;padding:.1em .4em}
pre{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--space-4);overflow:auto;font-size:14px}
pre code{background:none;border:0;padding:0}
blockquote{margin:1.4em 0;padding:var(--space-4) var(--space-5);border-left:3px solid var(--brand-1);
  background:var(--sunken);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--tx-dim)}
blockquote p:last-child{margin:0}
table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0;
  font-variant-numeric:tabular-nums}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--tx-mute);font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--brand-solid);
  color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
.skip-link:focus{left:8px}

/* =====================================================================
   3. LAYOUT PRIMITIVES
   ===================================================================== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}
.prose>*:first-child{margin-top:0}
.prose img{border-radius:var(--r-md)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li::marker{color:var(--tx-mute)}
.stack>*+*{margin-top:var(--space-5)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.site-main{flex:1 0 auto;padding:var(--space-7) 0 var(--space-9)}
@media (max-width:640px){.site-main{padding:var(--space-6) 0 var(--space-8)}}

/* =====================================================================
   4. HEADER
   ===================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:64px}
.site-brand{display:inline-flex;align-items:center;gap:10px;color:var(--tx);font-weight:750;
  font-size:16.5px;letter-spacing:-.02em;text-decoration:none;min-height:44px}
.site-brand:hover{text-decoration:none;color:var(--brand-1)}
.site-brand__mark{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:var(--on-brand);flex:none}
.site-brand__mark svg{width:18px;height:18px}
.site-brand img{width:30px;height:30px;border-radius:9px}
.site-nav{display:flex;align-items:center;gap:var(--space-1)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-2)}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--r-sm);white-space:nowrap;
  color:var(--tx-dim);font-size:14.5px;font-weight:550;text-decoration:none}
.site-nav a:hover,.site-nav .current-menu-item>a,.site-nav .current_page_item>a{
  color:var(--tx);background:var(--sunken)}
.header-actions{display:flex;align-items:center;gap:var(--space-2)}
.icon-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--tx-dim);
  width:44px;height:44px;border-radius:var(--r-sm);display:inline-grid;place-items:center}
.icon-btn:hover{color:var(--tx);background:var(--sunken);border-color:var(--line)}
.icon-btn svg{width:20px;height:20px}
.theme-toggle .ico-sun,:root[data-theme="light"] .theme-toggle .ico-moon{display:none}
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-toggle .ico-moon{display:none}
  :root:not([data-theme="dark"]) .theme-toggle .ico-sun{display:block}
}
.nav-toggle{display:none}
@media (max-width:860px){
  .nav-toggle{display:inline-grid}
  .site-nav{position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:var(--space-3) var(--gutter) var(--space-5);flex-direction:column;align-items:stretch;
    box-shadow:var(--shadow-md);transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .2s var(--ease),opacity .2s,visibility .2s}
  .site-nav.is-open{transform:none;opacity:1;visibility:visible}
  .site-nav ul{flex-direction:column;gap:2px}
  .site-nav a{min-height:48px;font-size:16px}
}

/* =====================================================================
   5. PAGE CHROME
   ===================================================================== */
.breadcrumb{font-size:13.5px;color:var(--tx-mute);margin:0 0 var(--space-4)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb li{margin:0;display:inline-flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:"/";color:var(--line-strong)}
.breadcrumb a{color:var(--tx-mute)}
.breadcrumb a:hover{color:var(--tx)}
.page-header{margin-bottom:var(--space-6)}
.page-header__lede{font-size:clamp(17px,1.05rem + .2vw,19px);color:var(--tx-dim);max-width:var(--measure);
  margin:0;line-height:1.6}
.entry-meta{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);font-size:13.5px;
  color:var(--tx-mute);margin-top:var(--space-4)}
.entry-meta a{color:var(--tx-dim)}
.entry-content{max-width:var(--measure)}
.entry-content .pch{max-width:none}
.entry-content h2{scroll-margin-top:90px}

/* =====================================================================
   6. HOME
   ===================================================================== */
.hero{padding:var(--space-8) 0 var(--space-7);text-align:center}
.hero h1{font-size:clamp(34px,2.4rem + 2vw,58px);max-width:20ch;margin-inline:auto}
.hero__lede{font-size:clamp(17px,1.05rem + .3vw,20px);color:var(--tx-dim);max-width:52ch;
  margin:var(--space-4) auto 0;line-height:1.6}
.hero__search{max-width:560px;margin:var(--space-6) auto 0}
.search-form{display:flex;gap:var(--space-2);align-items:stretch}
.search-form__field{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 14px;min-height:50px}
.search-form__field:focus-within{border-color:var(--brand-1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-1) 22%,transparent)}
.search-form__field svg{width:18px;height:18px;color:var(--tx-mute);flex:none}
.search-form input[type="search"]{flex:1;border:0;background:none;color:var(--tx);font:inherit;
  font-size:16px;min-width:0;outline:0;appearance:none}
.search-form input::placeholder{color:var(--tx-mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;
  border-radius:var(--r-md);border:1px solid transparent;font-weight:650;font-size:15.5px;
  text-decoration:none;background:var(--brand-solid);color:#fff}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn--ghost{background:var(--surface);color:var(--tx);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand-1);filter:none}
.section{padding:var(--space-7) 0}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--space-3);margin-bottom:var(--space-5)}
.section__head h2{margin:0}
.section__head p{margin:0;color:var(--tx-mute);font-size:14.5px}
.trio{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.trio__item{padding:var(--space-5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.trio__item h3{margin:var(--space-3) 0 var(--space-2);font-size:17px}
.trio__item p{margin:0;color:var(--tx-dim);font-size:15px}
.trio__icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand-1) 12%,transparent);color:var(--brand-1)}
.trio__icon svg{width:20px;height:20px}
.home-about{max-width:var(--measure)}

/* =====================================================================
   7. FOOTER
   ===================================================================== */
.site-footer{border-top:1px solid var(--line);background:var(--sunken);padding:var(--space-7) 0 var(--space-6);
  font-size:14px;color:var(--tx-mute)}
.site-footer__grid{display:grid;gap:var(--space-6);grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:760px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer h2,.site-footer__heading{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);
  margin:0 0 var(--space-3)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0}
.site-footer a{color:var(--tx-mute);display:inline-block;padding:8px 0;min-height:24px}
.site-footer a:hover{color:var(--tx)}
.site-footer__about p{margin:0 0 var(--space-3);max-width:44ch;line-height:1.6}
.site-footer__bottom{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;font-size:13px}

/* =====================================================================
   8. ARCHIVE / SEARCH / 404
   ===================================================================== */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.post-card{padding:var(--space-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.post-card h2{font-size:20px;margin:0 0 var(--space-2)}
.post-card p{margin:0;color:var(--tx-dim);font-size:15px}
.post-card__meta{font-size:13px;color:var(--tx-mute);margin-top:var(--space-3)}
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-6)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--tx-dim)}
.pagination .current{background:var(--brand-solid);color:#fff;border-color:transparent}

/* =====================================================================
   9. MOTION + PRINT
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  a,.btn,.icon-btn,.site-nav a{transition:color .18s,background-color .18s,border-color .18s,filter .18s}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.site-header,.site-footer,.pch-ad,.nav-toggle,.theme-toggle{display:none!important}
  body{background:#fff;color:#000}}

/* answer-first lead paragraph on calculator pages */
.pch-answer{font-size:clamp(17px,1.05rem + .2vw,19px);line-height:1.6;color:var(--tx-dim)}
.pch-answer strong{color:var(--tx);font-variant-numeric:tabular-nums}

/* touch: no tap delay, press feedback */
a,button,input,select,.btn,.icon-btn,.site-nav a,.pch-card{touch-action:manipulation}
.btn:active,.icon-btn:active{transform:scale(.97)}

/* =====================================================================
   10. CONTENT PAGE LAYOUT — single column, sidebar from 1100px
   ===================================================================== */
.page-layout{display:grid;gap:var(--space-7);grid-template-columns:minmax(0,1fr);align-items:start}
.page-main{min-width:0}
.page-aside{display:none}
@media (min-width:1100px){
  .page-layout{grid-template-columns:minmax(0,1fr) 300px}
  .page-aside{display:block}
  .page-aside__inner{position:sticky;top:84px}
}
.pch-ad--sidebar{min-height:600px;margin:0 0 var(--space-5)}
.aside-nav{padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.aside-nav h2,.aside-nav__heading{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mute);margin:0 0 var(--space-2)}
.aside-nav ul{list-style:none;margin:0;padding:0}
.aside-nav li{margin:0}
.aside-nav a{display:block;padding:9px 0;color:var(--tx-dim);font-size:14.5px;border-top:1px solid var(--line)}
.aside-nav li:first-child a{border-top:0}
.aside-nav a:hover{color:var(--brand-1);text-decoration:none}