/*
Theme Name: BrittAI
Theme URI: https://mitchbritt.com
Author: BrittAI
Author URI: https://mitchbritt.com
Description: A block theme for BrittAI — AI systems, skills, and automations for service businesses. Bold, visionary design on a College-navy canvas with electric-blue primary, action-green accent, and wolf-grey neutrals. Instrument Sans, Manrope, and JetBrains Mono.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 2.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brittai-2026
Tags: full-site-editing, block-patterns, block-styles, editor-style, custom-colors, custom-logo, wide-blocks
*/

/*
  theme.json carries colors, fonts, spacing, and base typography as presets.
  This file holds what theme.json cannot express: the raw token scale +
  semantic-token remapping for dark sections (.on-dark), decorative
  pseudo-elements (gradient-mesh, eyebrow bar, hero noise), hover transforms,
  glow shadows, and the bespoke section flourishes from the mockup.
*/

/* ============================================================================
   1. DESIGN TOKENS — raw scale + semantic mapping
   ============================================================================ */
:root {
  /* Core palette (mirrors theme.json) */
  --navy-950:#050B16; --navy-900:#0A1628; --navy-800:#0F1F38; --navy-700:#16294A; --navy-600:#1E3A66;
  --blue-700:#0B43C9; --blue-600:#1356E8; --blue-500:#2C6BFF; --blue-400:#5B8DFF; --blue-50:#EEF3FF;
  --green-600:#1FC267; --green-500:#2FD171; --green-50:#ECFDF3;
  --grey-600:#4E5864; --grey-500:#6B7684; --grey-400:#939DAA; --grey-300:#BFC7D1;
  --grey-200:#DDE2E8; --grey-150:#E8EBEF; --grey-100:#F1F3F6; --grey-50:#F8FAFB; --white:#FFFFFF;
  --danger:#F4453B;

  /* Semantic tokens — light surface (default) */
  --bg:var(--white); --bg-subtle:var(--grey-50); --surface:var(--white);
  --fg:var(--navy-900); --fg-secondary:var(--grey-600); --fg-muted:var(--grey-500);
  --primary:var(--blue-500); --primary-hover:var(--blue-600); --primary-soft:var(--blue-50);
  --accent:var(--green-500); --accent-hover:var(--green-600);
  --ink:var(--navy-900);
  --border:var(--grey-200); --border-strong:var(--grey-300); --border-faint:var(--grey-150);

  /* Letter-spacing */
  --tracking-tight:-0.03em; --tracking-snug:-0.015em; --tracking-caps:0.12em;

  /* Radii */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;

  /* Elevation — cool, navy-tinted shadows */
  --shadow-xs:0 1px 2px rgba(10,22,40,.06);
  --shadow-md:0 4px 12px rgba(10,22,40,.08), 0 2px 4px rgba(10,22,40,.05);
  --shadow-lg:0 12px 28px rgba(10,22,40,.12), 0 4px 10px rgba(10,22,40,.06);
  --shadow-glow-blue:0 0 0 1px rgba(44,107,255,.30), 0 8px 30px rgba(44,107,255,.28);

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-fast:120ms; --dur-base:220ms;

  /* Signature gradients */
  --grad-brand:linear-gradient(115deg, var(--blue-500) 0%, var(--green-500) 100%);
  --grad-mesh:radial-gradient(120% 120% at 0% 0%, rgba(44,107,255,.18) 0%, transparent 55%),
              radial-gradient(120% 120% at 100% 100%, rgba(47,209,113,.16) 0%, transparent 55%);
}

/* Dark surface — applied to .on-dark sections (the brand's navy canvas) */
.on-dark {
  --bg:var(--navy-900); --bg-subtle:var(--navy-800); --surface:var(--navy-800);
  --fg:var(--white); --fg-secondary:var(--grey-300); --fg-muted:var(--grey-400);
  --primary-soft:rgba(44,107,255,.14); --accent-soft:rgba(47,209,113,.14);
  --border:var(--navy-700); --border-strong:var(--navy-600);
}

html{scroll-behavior:smooth}
::selection{background:var(--blue-500);color:#fff}

/* ============================================================================
   2. EYEBROW / OVERLINE — signature gradient-bar lead-in
   ============================================================================ */
.brittai-eyebrow{
  font-family:var(--wp--preset--font-family--mono);
  font-weight:700;
  font-size:.75rem;
  line-height:1.2;
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.brittai-eyebrow::before{
  content:"";width:18px;height:2px;border-radius:2px;background:var(--grad-brand);
}
.brittai-eyebrow.on-green{color:var(--accent)}
.brittai-eyebrow.on-green::before{background:var(--accent)}
.brittai-eyebrow.is-muted{color:var(--fg-muted)}
.brittai-eyebrow.is-muted::before{background:var(--border-strong)}

/* gradient text utility (blue→green) */
.brittai-grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* strike-through with danger underline */
.brittai-strike{
  text-decoration:line-through;
  text-decoration-color:var(--danger);
  text-decoration-thickness:2px;
  color:var(--fg-muted);
}

/* mono labels (vn / door / step / role / price / path) */
.brittai-label{font-family:var(--wp--preset--font-family--mono);font-weight:500;letter-spacing:.02em}

/* ============================================================================
   3. BUTTONS — glow + ghost styles, hover lift
   ============================================================================ */
.wp-block-button__link{
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wp-block-button.is-style-glow .wp-block-button__link:hover{box-shadow:var(--shadow-glow-blue)}
.wp-block-button.is-style-ghost .wp-block-button__link{
  background:transparent;color:var(--primary);border-color:var(--border-strong);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{
  background:var(--primary-soft);border-color:var(--primary);color:var(--primary);
}
.on-dark .wp-block-button.is-style-ghost .wp-block-button__link{color:#fff;border-color:var(--navy-600)}
.on-dark .wp-block-button.is-style-ghost .wp-block-button__link:hover{background:var(--primary-soft);border-color:var(--primary)}

/* mono text link with underline */
.brittai-tlink a, a.brittai-tlink{
  font-family:var(--wp--preset--font-family--mono);
  font-size:.875rem;
  color:var(--fg-muted);
  border-bottom:1px solid var(--border);
  padding-bottom:3px;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.brittai-tlink a:hover, a.brittai-tlink:hover{color:var(--blue-400);border-color:var(--blue-400)}

/* reassurance line — mono with green dot */
.brittai-reassure{
  font-family:var(--wp--preset--font-family--mono);
  font-size:.82rem;
  color:var(--fg-muted);
  display:inline-flex;align-items:center;gap:.6em;flex-wrap:wrap;
}
.brittai-reassure::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* ============================================================================
   4. HERO + FINAL — gradient mesh, noise overlay
   ============================================================================ */
.brittai-hero, .brittai-final{position:relative;overflow:hidden}
.brittai-hero::before, .brittai-final::before{
  content:"";position:absolute;inset:0;background:var(--grad-mesh);z-index:0;pointer-events:none;
}
.brittai-hero > *, .brittai-final > *{position:relative;z-index:2}
.brittai-hero h1{max-width:17ch;line-height:1.0;letter-spacing:var(--tracking-tight)}
.brittai-hero .brittai-sub{max-width:46ch}
.brittai-final{text-align:center}
.brittai-final h2{max-width:20ch;margin-left:auto;margin-right:auto}
.brittai-final .brittai-eyebrow,.brittai-final .brittai-reassure{justify-content:center}
.brittai-noise{
  position:absolute !important;inset:0;z-index:1 !important;
  font-family:var(--wp--preset--font-family--mono);
  font-size:.82rem;line-height:2.6;letter-spacing:.04em;
  color:rgba(255,255,255,.035);padding:28px;white-space:pre-wrap;
  user-select:none;overflow:hidden;pointer-events:none;margin:0;
}

/* ============================================================================
   5. STAKES — white bordered cards on light
   ============================================================================ */
.brittai-stake{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  background:var(--surface);
}
.brittai-num{font-family:var(--wp--preset--font-family--mono);font-weight:500;color:var(--primary)}

/* ============================================================================
   6. VALUE GRID — dark, dividing cells, lucide icons
   ============================================================================ */
.brittai-vgrid{border-top:1px solid var(--border)}
.brittai-vcell{border-right:1px solid var(--border);height:100%}
.brittai-vcell.is-last{border-right:none}
.brittai-vico{width:26px;height:26px;color:var(--blue-400);margin-bottom:16px}
.brittai-vico.is-accent{color:var(--accent)}
@media (max-width:781px){
  .brittai-vcell{border-right:none;border-bottom:1px solid var(--border);padding-right:0 !important}
}

/* ============================================================================
   7. GUIDE / OPERATOR CARD
   ============================================================================ */
.brittai-operator{
  background:var(--ink);color:#fff;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.brittai-operator .brittai-role{
  font-family:var(--wp--preset--font-family--mono);font-weight:700;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);
}
.brittai-check-list{list-style:none;padding-left:0;margin:0}
.brittai-check-list li{position:relative;padding-left:26px;margin-bottom:16px;color:var(--grey-300)}
.brittai-check-list li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;
}
.brittai-proofflag{
  font-family:var(--wp--preset--font-family--mono);font-size:.72rem;color:var(--grey-500);
  border-top:1px solid var(--navy-700);padding-top:16px;
}

/* ============================================================================
   8. PLAN — numbered steps with colored top rule
   ============================================================================ */
.brittai-step{border-top:2px solid var(--primary);padding-top:24px}
.brittai-step.is-accent{border-top-color:var(--accent)}
.brittai-step .brittai-sn{font-family:var(--wp--preset--font-family--mono);font-weight:500;color:var(--primary)}
.brittai-step.is-accent .brittai-sn{color:var(--accent)}

/* ============================================================================
   9. EXPLANATORY
   ============================================================================ */
.brittai-explain .em, .brittai-em{font-family:var(--wp--preset--font-family--display);font-weight:600}

/* ============================================================================
   10. CHOICES — offer cards, featured glow
   ============================================================================ */
.brittai-card{
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  background:var(--surface);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.brittai-card:hover{transform:translateY(-4px);border-color:var(--navy-600)}
.brittai-card.is-featured{border-color:var(--primary);box-shadow:var(--shadow-glow-blue)}
.brittai-door{
  font-family:var(--wp--preset--font-family--mono);font-weight:700;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--blue-400);
}
.brittai-card.is-featured .brittai-door{color:var(--accent)}
.brittai-price{font-family:var(--wp--preset--font-family--mono);color:var(--grey-300)}
.brittai-path{font-family:var(--wp--preset--font-family--mono);font-size:.74rem;color:var(--grey-500);line-height:1.7}
.brittai-note{font-family:var(--wp--preset--font-family--mono);color:var(--grey-500)}

/* ============================================================================
   11. NAV + FOOTER wordmarks
   ============================================================================ */
.brittai-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
.brittai-logo{
  font-family:var(--wp--preset--font-family--display);font-weight:800;
  font-size:1.4rem;letter-spacing:var(--tracking-tight);line-height:1;
}
.brittai-logo .brittai-logo-accent{color:var(--primary)}
.brittai-foot-logo{
  font-family:var(--wp--preset--font-family--display);font-weight:800;
  font-size:1.5rem;letter-spacing:var(--tracking-tight);line-height:1;
}
.brittai-foot-logo .brittai-logo-accent{color:var(--accent)}
.brittai-foot-heading{
  font-family:var(--wp--preset--font-family--mono);font-weight:700;
  font-size:.74rem;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent);
}
.brittai-fine{font-family:var(--wp--preset--font-family--mono)}

/* ============================================================================
   12. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wp-block-button__link{transition:none}
  .wp-block-button__link:hover,.brittai-card:hover{transform:none}
}