/*
Theme Name: SeveredBytes AI
Theme URI: https://severedbytes.online/
Author: SeveredBytes
Author URI: https://severedbytes.online/
Description: A complete SaaS WordPress theme built for AI Text & Content tool websites. Includes Home, Features, Pricing, Tool Categories, Blog, About, Contact and FAQ pages with a custom "AI Tool" post type and "Tool Category" taxonomy. Built for severedbytes.online.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: severedbytes-ai
Tags: e-commerce, custom-menu, featured-images, threaded-comments, translation-ready, block-styles

SeveredBytes AI is a lightweight custom theme (no page builder required).
*/

/* ==========================================================================
   0. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --sb-bg:#0b0c10;
  --sb-bg-soft:#111319;
  --sb-surface:#161923;
  --sb-surface-2:#1c202c;
  --sb-border:#272c3a;
  --sb-text:#eef0f6;
  --sb-text-dim:#a7acbd;
  --sb-text-faint:#6d7285;
  --sb-primary:#7c5cff;
  --sb-primary-dark:#5c3bff;
  --sb-accent:#00e0b8;
  --sb-accent-2:#ff6b9d;
  --sb-warning:#ffb020;
  --sb-radius:14px;
  --sb-radius-sm:8px;
  --sb-shadow: 0 10px 40px rgba(0,0,0,.35);
  --sb-maxw:1180px;
  --sb-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sb-font);
  background:var(--sb-bg);
  color:var(--sb-text);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--sb-primary); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--sb-accent); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.02em; }
p{ margin:0 0 1em; color:var(--sb-text-dim); }
.container{ max-width:var(--sb-maxw); margin:0 auto; padding:0 24px; }
section{ padding:96px 0; }
.section-tight{ padding:56px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sb-accent); background:rgba(0,224,184,.08);
  border:1px solid rgba(0,224,184,.25);
  padding:6px 14px; border-radius:999px; margin-bottom:18px;
}

.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(28px,4vw,40px); }
.section-head p{ font-size:17px; }

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:10px; font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:all .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--sb-primary),var(--sb-primary-dark));
  color:#fff; box-shadow:0 8px 24px rgba(124,92,255,.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(124,92,255,.45); color:#fff; }
.btn-ghost{ background:transparent; border-color:var(--sb-border); color:var(--sb-text); }
.btn-ghost:hover{ border-color:var(--sb-primary); color:var(--sb-text); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 32px; font-size:16px; }

/* ==========================================================================
   2. HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:999;
  background:rgba(11,12,16,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sb-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-branding{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--sb-text); }
.site-branding .dot{ color:var(--sb-accent); }
.site-branding img{ height:34px; width:auto; }

.main-navigation ul{ display:flex; align-items:center; gap:32px; }
.main-navigation a{ color:var(--sb-text-dim); font-weight:500; font-size:15px; }
.main-navigation a:hover{ color:var(--sb-text); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.menu-toggle{ display:none; background:none; border:1px solid var(--sb-border); color:var(--sb-text); border-radius:8px; padding:8px 10px; cursor:pointer; }

@media (max-width:860px){
  .main-navigation{ position:absolute; top:76px; left:0; right:0; background:var(--sb-bg-soft); border-bottom:1px solid var(--sb-border); display:none; }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; align-items:flex-start; padding:20px 24px; gap:16px; }
  .menu-toggle{ display:inline-flex; }
  .header-actions .btn-ghost{ display:none; }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero{
  padding:110px 0 90px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(600px 300px at 80% 10%, rgba(0,224,184,.18), transparent 60%);
}
.hero h1{ font-size:clamp(36px,5.5vw,62px); max-width:900px; margin:0 auto 22px; }
.hero h1 span{ background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ font-size:19px; max-width:620px; margin:0 auto 36px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.hero-note{ font-size:13px; color:var(--sb-text-faint); }
.hero-stats{ display:flex; justify-content:center; gap:56px; margin-top:64px; flex-wrap:wrap; }
.hero-stats div{ text-align:center; }
.hero-stats strong{ display:block; font-size:30px; color:var(--sb-text); }
.hero-stats span{ font-size:13px; color:var(--sb-text-faint); }

/* ==========================================================================
   4. LOGO STRIP
   ========================================================================== */
.logo-strip{ padding:36px 0; border-top:1px solid var(--sb-border); border-bottom:1px solid var(--sb-border); }
.logo-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; opacity:.6; }
.logo-strip span{ font-weight:700; letter-spacing:.05em; color:var(--sb-text-faint); font-size:14px; text-transform:uppercase; }

/* ==========================================================================
   5. FEATURE / TOOL CARDS GRID
   ========================================================================== */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:var(--sb-radius);
  padding:28px; transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(124,92,255,.4); }
.card .icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(0,224,184,.15)); font-size:22px; margin-bottom:18px;
}
.card h3{ font-size:18px; margin-bottom:8px; }
.card p{ font-size:14.5px; margin-bottom:0; }
.card .tool-cat{ display:inline-block; font-size:12px; color:var(--sb-accent); margin-bottom:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* ==========================================================================
   6. HOW IT WORKS / STEPS
   ========================================================================== */
.steps{ counter-reset:step; }
.steps .grid-3 .card{ position:relative; padding-top:52px; }
.steps .card::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-18px; left:24px; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent)); color:#0b0c10; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}

/* ==========================================================================
   7. PRICING
   ========================================================================== */
.pricing-toggle{ display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:48px; font-size:14px; color:var(--sb-text-dim); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:960px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{
  background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:var(--sb-radius);
  padding:36px 30px; display:flex; flex-direction:column;
}
.price-card.featured{ border-color:var(--sb-primary); position:relative; background:var(--sb-surface-2); box-shadow:var(--sb-shadow); transform:scale(1.03); }
.price-card.featured::before{
  content:"Most Popular"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent)); color:#0b0c10; font-size:12px; font-weight:700;
  padding:6px 16px; border-radius:999px;
}
.price-card h3{ font-size:20px; }
.price-card .price{ font-size:44px; font-weight:800; margin:14px 0 4px; }
.price-card .price span{ font-size:15px; color:var(--sb-text-faint); font-weight:500; }
.price-card .plan-desc{ font-size:14px; margin-bottom:20px; }
.price-card ul{ margin:24px 0 28px; display:flex; flex-direction:column; gap:12px; }
.price-card li{ display:flex; gap:10px; font-size:14.5px; color:var(--sb-text-dim); }
.price-card li::before{ content:"✓"; color:var(--sb-accent); font-weight:700; }

/* ==========================================================================
   8. TESTIMONIALS
   ========================================================================== */
.testimonial{ background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:var(--sb-radius); padding:28px; }
.testimonial p{ font-size:15.5px; color:var(--sb-text); font-style:italic; }
.testimonial .author{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.testimonial .avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent2)); flex-shrink:0; }
.testimonial .author strong{ display:block; font-size:14px; }
.testimonial .author span{ font-size:12.5px; color:var(--sb-text-faint); }

/* ==========================================================================
   9. FAQ (accordion, no-JS friendly using <details>)
   ========================================================================== */
.faq-list{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:var(--sb-radius-sm); padding:6px 20px; }
.faq-item summary{ cursor:pointer; padding:16px 0; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; color:var(--sb-text-faint); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding-bottom:16px; margin:0; font-size:14.5px; }

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */
.cta-band{
  background:linear-gradient(135deg,rgba(124,92,255,.15),rgba(0,224,184,.1));
  border:1px solid var(--sb-border); border-radius:24px; padding:64px 40px; text-align:center;
}
.cta-band h2{ font-size:clamp(26px,4vw,36px); }

/* ==========================================================================
   11. TOOL CATEGORY ARCHIVE / SINGLE TOOL
   ========================================================================== */
.cat-pill{
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(124,92,255,.12); color:var(--sb-primary); border:1px solid rgba(124,92,255,.3); margin:4px 6px 4px 0;
}
.tool-header{ text-align:center; max-width:720px; margin:0 auto 40px; }
.tool-meta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.content-block{ max-width:820px; margin:0 auto; }
.content-block h2{ font-size:24px; margin-top:2em; }
.content-block h3{ font-size:19px; margin-top:1.5em; }

/* ==========================================================================
   12. BLOG
   ========================================================================== */
.post-card{ background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:var(--sb-radius); overflow:hidden; display:flex; flex-direction:column; }
.post-card .thumb{ height:170px; background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(0,224,184,.25)); display:flex; align-items:center; justify-content:center; font-size:34px; }
.post-card .body{ padding:22px; }
.post-card .date{ font-size:12.5px; color:var(--sb-text-faint); margin-bottom:8px; display:block; }
.post-card h3{ font-size:17px; margin-bottom:8px; }
.post-card h3 a{ color:var(--sb-text); }
.single-article{ max-width:780px; margin:0 auto; }
.single-article .entry-header{ text-align:center; margin-bottom:40px; }
.single-article .entry-header .date{ color:var(--sb-text-faint); font-size:13.5px; }
.single-article .entry-content h2{ font-size:24px; margin-top:1.6em; }
.single-article .entry-content h3{ font-size:19px; margin-top:1.4em; }
.single-article .entry-content ul{ list-style:disc; padding-left:22px; margin-bottom:1em; }
.single-article .entry-content ul li{ color:var(--sb-text-dim); margin-bottom:6px; }
.single-article .entry-content blockquote{ border-left:3px solid var(--sb-primary); margin:24px 0; padding:4px 20px; color:var(--sb-text); font-style:italic; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a, .pagination span{ padding:8px 14px; border:1px solid var(--sb-border); border-radius:8px; color:var(--sb-text-dim); font-size:14px; }
.pagination .current{ background:var(--sb-primary); color:#fff; border-color:var(--sb-primary); }

/* ==========================================================================
   13. CONTACT
   ========================================================================== */
.contact-wrap{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; }
@media (max-width:860px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:14px; margin-bottom:26px; }
.contact-info-item .icon{ width:42px; height:42px; border-radius:10px; background:var(--sb-surface); border:1px solid var(--sb-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item strong{ display:block; font-size:15px; color:var(--sb-text); margin-bottom:2px; }
.contact-info-item span, .contact-info-item a{ font-size:14px; color:var(--sb-text-dim); }

.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--sb-text-dim); }
.form-field input, .form-field textarea{
  width:100%; padding:13px 16px; background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:10px;
  color:var(--sb-text); font-family:inherit; font-size:14.5px;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--sb-primary); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--sb-border); background:var(--sb-bg-soft); padding:64px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ font-size:14px; color:var(--sb-text); margin-bottom:16px; }
.footer-grid ul{ display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:14px; color:var(--sb-text-dim); }
.footer-brand p{ font-size:14px; max-width:280px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--sb-border); display:flex; align-items:center; justify-content:center; }
.footer-bottom{ border-top:1px solid var(--sb-border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--sb-text-faint); }

/* ==========================================================================
   15. 404 / GENERIC PAGE
   ========================================================================== */
.error-404{ text-align:center; padding:120px 0; }
.error-404 .code{ font-size:120px; font-weight:800; background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.page-hero{ padding:64px 0 20px; text-align:center; }
.page-hero h1{ font-size:clamp(30px,4.5vw,46px); }
.page-hero p{ max-width:600px; margin:0 auto; font-size:17px; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.badge-soft{ background:var(--sb-surface); border:1px solid var(--sb-border); padding:4px 10px; border-radius:8px; font-size:12px; color:var(--sb-text-dim); }