/*
Theme Name: Percentify
Theme URI: https://percentify.example
Author: Joey Payne
Description: Lightweight custom theme — percentage calculator tool with light/dark mode. Zero page-builder overhead, built for speed and SEO.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: percentify
*/

:root,
html[data-theme="dark"]{
  --bg:#0d0e0b;
  --surface:#131410;
  --b1:#232518;
  --b2:#2e3020;
  --lime:#c8f542;
  --lime-glow:rgba(200,245,66,0.06);
  --text:#ffffff;
  --muted:#9a9d8a;
}
html[data-theme="light"]{
  --bg:#f7f7f2;
  --surface:#ffffff;
  --b1:#e2e3d6;
  --b2:#d2d4c0;
  --lime:#5c7a17;
  --lime-glow:rgba(92,122,23,0.07);
  --text:#14150f;
  --muted:#6b6d5c;
}
:root{ --lime-solid:#c8f542; }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  transition:background .2s ease, color .2s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.035;
  z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] body::before{opacity:0.02;}
a{color:inherit;}
h1,h2,h3{font-family:'Playfair Display',serif;margin:0;}
.eyebrow{
  font-family:'DM Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lime);
}
.muted{color:var(--muted);}

.shell{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}

header.site{border-bottom:1px solid var(--b1);padding:20px 0;}
header.site .row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;transition:opacity .15s;}
.brand:hover{opacity:0.82;}
.brand .mark{font-family:'Playfair Display',serif;font-weight:800;font-size:22px;}
.brand .mark span{color:var(--lime);}
.brand .tag{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.08em;}
.head-right{display:flex;align-items:center;gap:22px;}
nav.top-links{display:flex;gap:22px;font-size:13px;color:var(--muted);}
nav.top-links a{text-decoration:none;transition:color .15s;}
nav.top-links a:hover{color:var(--lime);}

.theme-toggle{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--b2);
  background:var(--surface);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  transition:border-color .15s, transform .12s;
}
.theme-toggle:hover{border-color:var(--lime);}
.theme-toggle:active{transform:scale(0.92);}

.ad-slot{
  border:1px dashed var(--b2);
  background:var(--lime-glow);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-size:11px;letter-spacing:0.05em;text-align:center;padding:10px;
}
.ad-slot small{display:block;margin-top:4px;opacity:.7;}
.ad-top{width:100%;min-height:90px;max-width:728px;margin:24px auto 0;}
.ad-incontent{width:100%;min-height:100px;margin:36px 0;}
.ad-footer{width:100%;min-height:90px;max-width:728px;margin:36px auto;}
.ad-sidebar{min-height:250px;width:100%;}

.hero{padding:56px 0 8px;text-align:center;}
.hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1.08;margin:14px 0 12px;}
.hero p.sub{max-width:520px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.6;}

.main-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;margin-top:36px;align-items:start;}
@media (max-width:900px){
  .main-grid{grid-template-columns:1fr;}
  .ad-sidebar{max-width:400px;margin:0 auto;}
}
/* No sidebar ad rendered yet (ads switched off via admin bar) — collapse to a single
   centred column instead of reserving empty space for the ad rail. */
.main-grid.no-ads{grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto;}

.stacked-card{margin-top:28px;}

.calc-card{background:var(--surface);border:1px solid var(--b1);border-radius:16px;overflow:hidden;}
.tabs{display:flex;border-bottom:1px solid var(--b1);background:var(--bg);}
.tab{
  flex:1;padding:16px 10px;text-align:center;
  font-family:'DM Mono',monospace;font-size:12.5px;letter-spacing:0.02em;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s, background .15s;user-select:none;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--lime);border-bottom-color:var(--lime);background:var(--lime-glow);}
.panel{display:none;padding:32px 28px 30px;text-align:center;}
.panel.active{display:block;}
.panel h2{font-size:19px;font-weight:700;margin-bottom:6px;}
.panel .desc{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55;}
.field-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:16px;margin-bottom:18px;}
.field-row .static-text{color:var(--muted);font-size:14px;}

.mode-toggle{display:flex;justify-content:center;gap:8px;margin-bottom:18px;}
.mode-btn{
  background:var(--bg);border:1px solid var(--b2);color:var(--muted);
  border-radius:20px;padding:7px 16px;font-family:'DM Mono',monospace;
  font-size:12px;letter-spacing:0.02em;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.mode-btn.active{color:#0d0e0b;background:var(--lime-solid);border-color:var(--lime-solid);}
input[type="number"]{
  background:var(--bg);border:1px solid var(--b2);color:var(--text);
  border-radius:8px;padding:11px 12px;font-family:'DM Sans',sans-serif;
  font-size:16px;width:120px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input[type="number"]:focus{border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);}
.calc-btn{
  margin-top:6px;background:var(--lime-solid);color:#0d0e0b;border:none;
  border-radius:8px;font-family:'DM Mono',monospace;font-weight:500;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;padding:12px 22px;cursor:pointer;
  transition:transform .12s, opacity .12s;
}
.calc-btn:hover{opacity:0.88;}
.calc-btn:active{transform:scale(0.97);}
.result{
  margin-top:22px;padding:18px 20px;background:var(--bg);border:1px solid var(--b2);
  border-radius:10px;font-family:'Playfair Display',serif;font-size:15px;line-height:1.5;
  min-height:26px;opacity:0;transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.result.show{opacity:1;transform:translateY(0);}
.result .big{color:var(--lime);font-size:28px;font-weight:700;display:block;margin-bottom:4px;}

.content-section{margin-top:12px;padding-top:8px;border-top:1px solid var(--b1);text-align:center;}
.content-section h2{font-size:22px;margin-bottom:16px;}
.content-section .intro{font-size:14px;color:var(--muted);line-height:1.7;max-width:640px;margin:0 auto 24px;}
.faq{text-align:left;}
.faq{display:grid;gap:14px;}
.faq-item{background:var(--surface);border:1px solid var(--b1);border-radius:10px;padding:16px 18px;}
.faq-item h3{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;margin-bottom:6px;}
.faq-item p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;}

footer.site{border-top:1px solid var(--b1);padding:28px 0 40px;text-align:center;color:var(--muted);font-size:12.5px;font-family:'DM Mono',monospace;}
footer.site .flinks{margin-top:10px;display:flex;gap:18px;justify-content:center;}
footer.site .flinks a{text-decoration:none;color:var(--muted);}
footer.site .flinks a:hover{color:var(--lime);}

/* ===== Plain page content (Privacy, Terms, Contact) ===== */
.page-content{
  max-width:720px;
  margin:56px auto 64px;
}
.page-content h1{
  font-size:clamp(26px,4vw,36px);
  text-align:center;
  margin-bottom:36px;
}
.page-body{
  font-size:14.5px;
  line-height:1.75;
  color:var(--text);
}
.page-body p{margin:0 0 18px;}
.page-body h2{
  font-family:'DM Sans',sans-serif;
  font-size:18px;
  font-weight:700;
  margin:32px 0 12px;
}
.page-body h3{
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:700;
  margin:24px 0 10px;
}
.page-body ul,.page-body ol{margin:0 0 18px;padding-left:22px;}
.page-body li{margin-bottom:8px;}
.page-body a{color:var(--lime);text-decoration:underline;}
.page-body a:hover{opacity:0.82;}
.page-body strong{color:var(--text);}

@media (max-width:520px){
  .tab{font-size:11px;padding:13px 6px;}
  .panel{padding:24px 18px;}
  input[type="number"]{width:100px;font-size:15px;}
  .hero{padding:38px 0 4px;}
  nav.top-links{display:none;}
}