/* ==========================================================================
   Strix — base.css
   Design tokens, reset, global element defaults, WordPress helpers,
   brand marks, header/mobile-nav base and editor prose.
   Loaded first; component & per-page styles build on top.
   ========================================================================== */

:root {
  --accent: #2FD4BE;
  --bg:     #08090C;
  --blue:   #5B8DEF;
  --purple: #7B5CFF;
}

/* Base reset — component styling lives in assets/css/components.css */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* var(), not a literal: Strix Settings → color_bg emits :root{--bg:…} from the
     Foundation plugin, and hardcoding the hex here made that setting inert. */
  background: var(--bg, #08090C);
  color: #ECEFF4;
  font-family: 'Fredoka', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent, #2FD4BE); }

/* Filled buttons keep their own label colour on hover.
   The rule above is an element+pseudo selector (0,1,1), which outranks the
   plain class (0,1,0) each button sets its colour with — so without this guard
   an accent-filled button repaints its text accent-on-accent and the label
   vanishes. `.class:hover` is (0,2,0) and wins back.
   ANY new filled button must be added here. */
.site-header-cta:hover,
.site-header-mobile-cta:hover,
.home-hero-cta-primary:hover,
.about-hero-cta-primary:hover,
.about-cta-primary:hover,
.services-hero-cta-primary:hover,
.services-cta-primary:hover,
.projects-cta-lg:hover,
.faq-cta-primary:hover,
.landing-cta-primary:hover,
.thank-you-cta-primary:hover,
.e404-cta-primary:hover,
.single-cta-btn:hover { color: #04140F; }
.strix-skip-link:hover { color: #0B0E13; }
.home-about-cta:hover { color: #f0f0f0; }

::selection { background: var(--accent, #2FD4BE); color: #04140F; }
img { max-width: 100%; height: auto; }

/* WordPress core alignment / caption helpers (kept minimal, dark-theme friendly) */
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { color: #8A93A6; font-size: .9rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Brand wordmark / mark */
.strix-logo, .strix-mark { transition: filter .3s cubic-bezier(.16,.8,.24,1); }
.strix-brand { transition: filter .25s ease; }
.strix-brand:hover { color: #ECEFF4; } /* keep currentColor letters stable, override global a:hover */
.strix-brand:hover .strix-logo { filter: drop-shadow(0 3px 15px rgba(47,212,190,.30)); }

/* Hamburger doubles as the close button: the bars morph into an ✕ when the sheet is open.
   The morph itself lives with the rest of the burger styles in assets/css/header.css. */
#burger.is-open { border-color: var(--accent,#2FD4BE) !important; background: rgba(255,255,255,.08) !important; } /* active state on touch; !important beats the button's inline border */

/* Header layout (mobile bar + desktop bar) now lives in assets/css/header.css,
   written mobile-first against the .site-header-* classes. */

/* Editor prose (single posts / generic pages) */
.strix-prose h2 { font-size: clamp(1.4rem,2.4vw,2rem); font-weight: 700; margin: 2rem 0 .8rem; color: #fff; }
.strix-prose h3 { font-size: 1.3rem; font-weight: 600; margin: 1.6rem 0 .6rem; color: #ECEFF4; }
.strix-prose p { margin: 0 0 1.1rem; color: #B9C0CE; }
.strix-prose a { color: var(--accent, #2FD4BE); }
.strix-prose ul, .strix-prose ol { padding-inline-start: 1.4rem; margin: 0 0 1.1rem; color: #B9C0CE; }
.strix-prose li { color: #B9C0CE; }
.strix-prose strong { color: #ECEFF4; font-weight: 600; }
/* Tables start compact so they survive a narrow viewport, and relax from 40em up. */
.strix-prose table { width: 100%; border-collapse: collapse; margin: 1.3rem 0 1.7rem; font-size: .84rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; overflow: hidden; }
.strix-prose thead th { text-align: start; background: rgba(255, 255, 255, .05); color: #ECEFF4; font-weight: 600; padding: .55rem .6rem; border-bottom: 2px solid color-mix(in srgb, var(--accent, #2FD4BE) 55%, transparent); }
.strix-prose tbody td { padding: .55rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .09); color: #B9C0CE; line-height: 1.6; vertical-align: top; }
.strix-prose tbody td:first-child { color: #ECEFF4; font-weight: 500; }
.strix-prose tbody tr:last-child td { border-bottom: 0; }
.strix-prose tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
@media (min-width: 40em) {
  .strix-prose table { font-size: 1rem; }
  .strix-prose thead th { padding: .8rem .95rem; }
  .strix-prose tbody td { padding: .78rem .95rem; }
}