/* =============================================================================
 * theme.css — Fully Torqued Applications shared design system (dark)
 * -----------------------------------------------------------------------------
 * ONE stylesheet, linked by every page (hub + tools), so styling, spacing, the
 * header/footer, ad slots, and the consent banner are identical site-wide.
 *
 * Approach: hand-authored CSS custom properties (design tokens) + a small set of
 * component classes. No Tailwind/build step — a static cPanel site is best served
 * by a file you can edit and diff by hand. Tools layer only their own widget CSS
 * on top; they must not redefine these tokens.
 *
 * Palette: slate background with a neon-cyan #1abfff (primary) + violet/amber accents —
 * the dark identity 3 of the 4 tools already used, now unified. All body text
 * pairs meet WCAG AA (>= 4.5:1) on the dark background; faint text is reserved
 * for large/decorative use only.
 *
 * Sections: 1) fonts  2) tokens  3) base/reset  4) layout  5) header  6) footer
 *           7) buttons  8) cards/badges  9) hero  10) prose  11) ad slots
 *           12) consent banner  13) forms  14) utilities/a11y
 * ========================================================================== */

/* --- 1. Self-hosted fonts (no third-party origin; good for privacy + CSP) - */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

/* --- 2. Design tokens -------------------------------------------------- */
:root{
  /* Color — slate base */
  --bg:#0b1220;            /* page background (near slate-950) */
  --surface:#0f172a;       /* raised surface (slate-900) */
  --surface-2:#1e293b;     /* cards / inputs (slate-800) */
  --border:#334155;        /* hairlines (slate-700) */
  --border-soft:#1e293b;
  /* Text (all AA on --bg) */
  --text:#f1f5f9;          /* primary (slate-100) ~15:1 */
  --text-muted:#94a3b8;    /* secondary (slate-400) ~7:1 */
  --text-faint:#64748b;    /* large/decorative ONLY (slate-500) */
  /* Accents */
  --accent:#1abfff;        /* neon cyan (primary) */
  --accent-hover:#4dd0ff;  /* lighter neon cyan (hover + links) */
  --accent-ink:#04283a;    /* dark navy-cyan text ON accent (AA) */
  --cyan:#22d3ee;
  --violet:#a78bfa;
  --amber:#fbbf24;
  --danger:#f87171;
  --focus:#22d3ee;         /* high-contrast focus ring on dark */
  /* Spacing scale (4px base) */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;
  /* Radius */
  --r-sm:6px;--r:10px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  /* Type */
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-sm:.875rem;--fs-base:1rem;--fs-lg:1.125rem;
  --fs-xl:1.375rem;--fs-2xl:clamp(1.6rem,1.1rem+2.2vw,2.25rem);--fs-3xl:clamp(2rem,1.3rem+3.4vw,3.25rem);
  /* Elevation / motion / layout */
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px -12px rgba(0,0,0,.55);
  --glow:0 0 28px rgba(26,191,255,.22);
  --t-fast:120ms ease;--t:200ms ease;
  --maxw:1120px;--maxw-prose:68ch;
}

/* --- 3. Base / reset --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--accent-hover);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 var(--s4)}
h1{font-size:var(--fs-3xl);font-weight:800}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
code,kbd,pre{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

/* --- 4. Layout helpers ------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
.section{padding-block:var(--s12)}
.flex-grow{flex:1 0 auto}

/* --- 5. Site header / nav --------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.site-header .container{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--s3);font-weight:800;color:var(--text);font-size:var(--fs-lg);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--cyan));color:var(--accent-ink);font-weight:800;box-shadow:var(--glow)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5);font-size:var(--fs-sm);font-weight:600}
.site-nav a{color:var(--text-muted)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:var(--s2)}
@media(max-width:720px){
  .site-nav{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--border);padding:var(--s3) var(--s5);display:none}
  .site-nav.open{display:flex}
  .site-nav a{padding:var(--s3) 0;border-bottom:1px solid var(--border-soft)}
  .nav-toggle{display:inline-flex;margin-left:auto}
}

/* --- 6. Site footer --------------------------------------------------- */
.site-footer{border-top:1px solid var(--border-soft);background:var(--surface);margin-top:var(--s16)}
.site-footer .container{padding-block:var(--s10);display:flex;flex-wrap:wrap;gap:var(--s6) var(--s10);justify-content:space-between}
.site-footer h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:var(--s3)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.site-footer a,.footer-col .link-button{color:var(--text-muted);font-size:var(--fs-sm)}
.site-footer a:hover{color:var(--text)}
.link-button{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.footer-legal{width:100%;border-top:1px solid var(--border-soft);padding-top:var(--s5);color:var(--text-faint);font-size:var(--fs-sm)}

/* --- 7. Buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-weight:700;font-size:var(--fs-base);line-height:1;padding:var(--s3) var(--s5);border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:transform var(--t-fast),background var(--t),border-color var(--t);text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-hover)}
.btn-lg{padding:var(--s4) var(--s8);font-size:var(--fs-lg)}

/* --- 8. Cards + badges ------------------------------------------------ */
.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6)}
.grid{display:grid;gap:var(--s5)}
.grid-tools{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tool-card{display:flex;flex-direction:column;gap:var(--s3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6);transition:border-color var(--t),transform var(--t),box-shadow var(--t);color:var(--text)}
.tool-card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.tool-card .tc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.tool-card .tc-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-hover)}
.tool-card[data-accent="cyan"] .tc-icon{background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan)}
.tool-card[data-accent="violet"] .tc-icon{background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet)}
.tool-card[data-accent="amber"] .tc-icon{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.tool-card h3{margin:0;font-size:var(--fs-lg)}
.tool-card p{margin:0;color:var(--text-muted);font-size:var(--fs-sm);flex:1}
.tool-card .tc-go{color:var(--accent-hover);font-weight:700;font-size:var(--fs-sm)}
.badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-muted)}
.badge[data-badge="Free"]{color:var(--accent-hover);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.badge[data-badge="Paid"]{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.badge[data-badge="New"]{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}

/* --- 9. Hero ---------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s20) var(--s12);text-align:center}
.hero::before{content:"";position:absolute;inset:-40% 0 auto;height:480px;background:radial-gradient(60% 60% at 50% 0,rgba(26,191,255,.18),transparent 70%);pointer-events:none;z-index:-1}
.hero .eyebrow{color:var(--accent-hover);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-sm)}
.hero h1{margin:var(--s3) 0 var(--s4);max-width:18ch;margin-inline:auto}
.hero .lead{color:var(--text-muted);font-size:var(--fs-lg);max-width:60ch;margin:0 auto var(--s8)}
.hero .cta-row{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}

/* --- 10. Prose (about/privacy/terms/contact) -------------------------- */
.prose{max-width:var(--maxw-prose);margin-inline:auto}
.prose h2{margin-top:var(--s10)}
.prose h3{margin-top:var(--s6)}
.prose p,.prose li{color:var(--text);}
.prose a{color:var(--accent-hover);text-decoration:underline}
.prose ul,.prose ol{padding-left:var(--s6);display:grid;gap:var(--s2)}
.prose .muted,.prose time{color:var(--text-muted)}
.prose hr{border:0;border-top:1px solid var(--border);margin-block:var(--s8)}

/* --- 11. Ad slots (labelled, reserved-size; filled by ads.js at runtime) - */
.ad-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);margin-inline:auto;background:var(--surface);border:1px dashed var(--border);border-radius:var(--r);color:var(--text-faint);overflow:hidden}
.ad-slot .ad-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint)}
.ad-slot[data-ad-size="728x90"]{min-height:90px;max-width:728px}
.ad-slot[data-ad-size="300x250"]{min-height:250px;max-width:300px}
.ad-slot[data-ad-size="responsive"]{width:100%}
/* Reserve height by slot role so post-consent ad fill does not shift layout (CLS<0.1) */
.ad-slot[data-ad-slot-key="leaderboard"]{min-height:100px}
.ad-slot[data-ad-slot-key="inline"]{min-height:280px}
.ad-slot[data-ad-slot-key="sidebar"]{min-height:280px;max-width:336px}
.ad-slot ins.adsbygoogle{display:block;width:100%}

/* --- 12. Consent banner ----------------------------------------------- */
.consent-banner{position:fixed;inset:auto var(--s4) var(--s4);margin-inline:auto;max-width:760px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-lg)}
.consent-text{margin:0;flex:1 1 320px;font-size:var(--fs-sm);color:var(--text)}
.consent-text a{color:var(--accent-hover);text-decoration:underline}
.consent-actions{display:flex;gap:var(--s3);margin-left:auto}
.btn-consent{font-weight:700;font-size:var(--fs-sm);padding:var(--s3) var(--s5);border-radius:var(--r);border:1px solid var(--border);cursor:pointer}
.btn-reject{background:transparent;color:var(--text)}
.btn-reject:hover{border-color:var(--text-muted)}
.btn-accept{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-accept:hover{background:var(--accent-hover)}

/* --- 13. Forms -------------------------------------------------------- */
label{font-weight:600;font-size:var(--fs-sm);color:var(--text)}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--r);padding:var(--s3) var(--s4);font:inherit
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid transparent}

/* --- 14. Utilities / accessibility ------------------------------------ */
.sr-only{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:var(--s4);top:-3rem;z-index:100;background:var(--accent);color:var(--accent-ink);padding:var(--s2) var(--s4);border-radius:var(--r);font-weight:700;transition:top var(--t)}
.skip-link:focus{top:var(--s4);text-decoration:none}
.text-center{text-align:center}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}