/*
Theme Name: Stack Workbench
Theme URI: https://stackworkbench.com/
Author: Stack Workbench
Author URI: https://stackworkbench.com/
Description: Custom presentation layer for Stack Workbench, an independent publication testing business software — AI tools, automation, CRM, email marketing. Matches the approved prototype design system: single Inter font stack, flat surfaces, editorial article layouts, and accessible components. Works with the importer that brings in prototype content for pages, reviews, and the software custom post type.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stack-workbench
*/

/* Stack Workbench — design system v1 */
:root{
  --navy:#0F2A43; --navy-deep:#0B1F33;
  --blue:#1B6FE0; --blue-dark:#155BB5;
  --teal:#0FB5A6; --orange:#F59E0B; --orange-dark:#D97706;
  --green:#16A34A; --red:#DC2626;
  --bg:#F8FAFC; --card:#FFFFFF; --border:#E2E8F0;
  --ink:#0F172A; --muted:#64748B; --muted-2:#94A3B8;
  --radius:12px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 3px rgba(15,42,67,.08),0 4px 12px rgba(15,42,67,.06);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--card);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;color:var(--navy);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6em}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:1.8em 0 .6em}
h3{font-size:1.25rem;margin:1.4em 0 .5em}
p{margin-bottom:1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section.alt{background:var(--bg)}

/* Prototype ribbon */
.proto-ribbon{background:var(--orange);color:#3b2a00;font-size:13px;font-weight:600;text-align:center;padding:8px 16px}
.proto-ribbon a{color:#3b2a00;text-decoration:underline}

/* Header */
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.brand{font-weight:800;font-size:1.3rem;color:#fff;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--teal));display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff;flex:none}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{color:#dbe7f5;padding:10px 14px;border-radius:8px;font-size:15px;font-weight:500;white-space:nowrap}
.main-nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.nav-cta{background:var(--orange)!important;color:#221a00!important;font-weight:700}
.nav-cta:hover{background:var(--orange-dark)!important;color:#fff!important}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:8px 12px;font-size:15px;margin-left:auto;cursor:pointer}
@media(max-width:900px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-deep);flex-direction:column;padding:12px;gap:2px;border-top:1px solid rgba(255,255,255,.12)}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
}

/* Hero */
.hero{background:linear-gradient(180deg,var(--navy) 0%,#143a5e 100%);color:#fff;padding:72px 0 64px;text-align:center}
.hero h1{color:#fff;max-width:760px;margin:0 auto .5em}
.hero p.lead{color:#c9dcf2;font-size:1.15rem;max-width:640px;margin:0 auto 1.6em}
.hero-search{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:12px;padding:6px;box-shadow:var(--shadow)}
.hero-search input{flex:1;border:0;outline:0;font-size:16px;padding:12px 14px;border-radius:8px;min-width:0}
.hero-search button{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:12px 22px;font-size:16px;font-weight:600;cursor:pointer}
.hero-search button:hover{background:var(--blue-dark)}
.hero-note{margin-top:14px;font-size:13.5px;color:#9db8d6}
.hero-note a{color:#cfe3ff}

/* Buttons */
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:600;padding:12px 24px;border-radius:var(--radius-sm);border:0;cursor:pointer;font-size:16px}
.btn:hover{background:var(--blue-dark);text-decoration:none;color:#fff}
.btn.cta{background:var(--orange);color:#221a00}
.btn.cta:hover{background:var(--orange-dark);color:#fff}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn.ghost:hover{background:#eff6ff;text-decoration:none}
.btn.small{padding:8px 16px;font-size:14px}

/* Cards */
.grid{display:grid;gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.cat-card{text-align:center;transition:transform .15s}
.cat-card:hover{transform:translateY(-3px)}
.cat-card:hover{text-decoration:none}
.cat-icon{font-size:2rem;margin-bottom:8px}
.cat-card h3{font-size:1.05rem;margin:.4em 0 .2em}
.cat-card p{font-size:.9rem;color:var(--muted);margin:0}

/* Product cards */
.prod-card{display:flex;flex-direction:column;gap:10px}
.prod-top{display:flex;align-items:center;gap:14px}
.prod-logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;flex:none}
.prod-name{font-weight:700;font-size:1.1rem;color:var(--navy)}
.prod-cat{font-size:.8rem;color:var(--muted)}
.prod-tag{font-size:.85rem;color:var(--muted)}
.prod-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.85rem}
.pill{background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:.82rem;color:var(--navy);font-weight:500}
.pill.free{background:#e8f7ef;border-color:#bbe6cc;color:#0d6b2e}
.pill.price{background:#fff7e6;border-color:#f5d98b;color:#8a5a00}
.prod-actions{display:flex;gap:10px;margin-top:auto;padding-top:8px}
.not-reviewed{font-size:.85rem;color:var(--muted);font-style:italic}

/* Tables */
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);margin:1.5em 0}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
table.cmp th{background:var(--navy);color:#fff;font-size:.9rem}
table.cmp tr:last-child td{border-bottom:0}
table.cmp tbody tr:nth-child(even){background:#fafcff}
.check{color:var(--green);font-weight:700}
.cross{color:var(--muted)}

/* Disclosure */
.disclosure{background:#fffbeb;border:1px solid #f5d98b;border-radius:var(--radius-sm);padding:14px 18px;font-size:.88rem;color:#6b4e00;margin:1.5em 0}
.disclosure strong{color:#4a3600}
.draft-banner{background:#fef2f2;border:1px solid #f3b4b4;border-radius:var(--radius-sm);padding:14px 18px;font-size:.9rem;color:#7f1d1d;margin-bottom:1.5em}
.draft-banner strong{color:#7f1d1d}

/* How we evaluate */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{counter-increment:step;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.step::before{content:counter(step);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:10px}
.step h3{margin:.2em 0 .4em;font-size:1.05rem}
.step p{font-size:.92rem;color:var(--muted);margin:0}

/* Newsletter */
.newsletter-box{background:linear-gradient(135deg,var(--navy),#174a7c);color:#fff;border-radius:16px;padding:44px 32px;text-align:center}
.newsletter-box h1,.newsletter-box h2{color:#fff;margin-top:0}
.newsletter-box p{color:#c9dcf2}
.news-form{display:flex;gap:10px;max-width:480px;margin:20px auto 0}
.news-form input{flex:1;padding:12px 16px;border-radius:8px;border:0;font-size:16px;min-width:0}
@media(max-width:560px){.news-form{flex-direction:column}}

/* Footer */
.site-footer{background:var(--navy-deep);color:#aebfd4;padding:56px 0 28px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:12px}
.site-footer a{color:#aebfd4;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.footer-brand{color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:10px;display:block}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}

/* Article */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
@media(max-width:960px){.article-layout{grid-template-columns:1fr}}
.article-body{font-size:17.5px}
.article-body ul,.article-body ol{margin:0 0 1em 1.4em}
.article-body li{margin-bottom:.4em}
.article-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.2em;display:flex;gap:16px;flex-wrap:wrap}
.toc{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:sticky;top:84px;font-size:.92rem}
.toc h4{margin:0 0 10px;font-size:.95rem}
.toc a{display:block;padding:4px 0;color:var(--muted)}
.toc a:hover{color:var(--blue)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.5em 0}
@media(max-width:600px){.pros-cons{grid-template-columns:1fr}}
.pros,.cons{border-radius:var(--radius-sm);padding:18px 20px}
.pros{background:#f0fdf4;border:1px solid #bbe6cc}
.cons{background:#fef2f2;border:1px solid #f3b4b4}
.pros h4{color:#0d6b2e;margin:0 0 8px}
.cons h4{color:#7f1d1d;margin:0 0 8px}
.pros ul,.cons ul{margin:0 0 0 1.2em;font-size:.95rem}
.verdict{background:var(--bg);border-left:4px solid var(--teal);padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1.8em 0}
.faq{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:600;color:var(--navy)}
.faq .faq-body{padding:0 18px 16px;font-size:.96rem;color:#334155}
.score-badge{display:inline-flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;margin:1em 0;font-weight:600}
.score-badge .tbd{color:var(--muted);font-style:italic;font-weight:500}

/* Directory filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:1.5em 0}
.filters button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 18px;font-size:.9rem;cursor:pointer;font-weight:500}
.filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.search-row{margin:1.2em 0}
.search-row input{width:100%;max-width:520px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:16px}

/* Quiz */
.quiz-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:36px;max-width:640px;margin:0 auto;box-shadow:var(--shadow)}
.quiz-q{font-size:1.25rem;font-weight:700;color:var(--navy);margin-bottom:1.2em}
.quiz-opts{display:grid;gap:10px}
.quiz-opts button{text-align:left;border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);padding:14px 18px;font-size:1rem;cursor:pointer}
.quiz-opts button:hover{border-color:var(--blue);background:#f4f9ff}
.quiz-progress{font-size:.85rem;color:var(--muted);margin-bottom:1em}

/* Forms */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;max-width:640px;margin:0 auto}
.form-card label{display:block;font-weight:600;margin:1em 0 .4em}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:16px;font-family:inherit}
.form-card textarea{min-height:140px}

/* Breadcrumbs */
.crumbs{font-size:.85rem;color:var(--muted);margin:1.4em 0 .6em}
.crumbs a{color:var(--muted)}

/* Legal */
.legal-body{max-width:780px}
.legal-body h2{font-size:1.4rem}

/* Misc */
.center{text-align:center}
.mt{margin-top:1.5em}
.small{font-size:.88rem;color:var(--muted)}
.last-checked{font-size:.82rem;color:var(--muted-2)}

/* ==========================================================================
   WordPress additions
   ========================================================================== */

/* The content region carries no extra margins; imported content brings its own wrappers */
.site-main{margin:0}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 18px;background:var(--blue);color:#fff;border-radius:var(--radius-sm);z-index:100;font-weight:600;text-decoration:none}

/* Block alignment utilities */
.alignwide{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.alignfull{max-width:100%}
.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}

/* Classic captions */
.wp-caption{max-width:100%}
.wp-caption img{max-width:100%;height:auto;display:block}
.wp-caption-text{font-size:.85rem;color:var(--muted);margin-top:8px}

/* Best-for callout (design system: navy left border, light bg) */
.best-for{background:var(--bg);border-left:4px solid var(--navy);padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:1.8em 0}
.best-for p:last-child{margin-bottom:0}

/* Footer legal menu rendered by wp_nav_menu (theme location: footer) */
.footer-legal{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:4px 20px;flex-wrap:wrap}
.site-footer .footer-legal a{display:inline-block;padding:4px 0}