/* =========================================================================
   SPKF — dark theme + chunky type + WebGL backdrop
   Loaded after core global styles so these rules win the cascade.
   ========================================================================= */

:root {
  /* Re-tint the shared palette for a dark surface */
  --wp--preset--color--primary: #4f9cff;   /* brighter electric blue accent */
  --wp--preset--color--secondary: #121a2b;  /* was light grey #DDD -> dark surface */
  --wp--preset--color--tertiary: #9aa7bd;   /* readable muted on dark */

  --spkf-bg: #080b14;        /* deep navy base */
  --spkf-surface: #121a2b;   /* raised dark surface */
  --spkf-text: #e9eef7;      /* primary light text */
  --spkf-muted: #aab6c9;     /* secondary text */
  --spkf-accent: #4f9cff;    /* electric blue */
}

/* --- base: dark, let the fixed WebGL canvas show behind transparent areas --- */
html { background: var(--spkf-bg); }
body { background: transparent !important; color: var(--spkf-text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* WebGL backdrop */
#spkf-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
  background: var(--spkf-bg); /* fallback tint before/without WebGL */
}

/* --- chunky display type + strict, forward-scaled heading hierarchy --- */
h1, h2, h3, h4, h5, h6, .wp-block-heading {
  color: #ffffff;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* chunky blocky display face for the big three */
h1, h2, h3,
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading {
  font-family: "Archivo Black", "Manrope", sans-serif !important;
  font-weight: 400;              /* Archivo Black ships a single heavy weight */
  line-height: 0.98;
  letter-spacing: -0.015em;
}
h4, h5, h6,
h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800;
  line-height: 1.15;
}

/* Enforce the scale over per-block size classes + inline styles so the
   hierarchy is consistent everywhere (H1 > H2 > H3 > H4 > H5 > H6). */
h1, h1.wp-block-heading { font-size: clamp(2.6rem, 6.5vw, 5.5rem) !important; text-transform: uppercase; }
h2, h2.wp-block-heading { font-size: clamp(2.1rem, 5vw, 3.8rem)  !important; text-transform: uppercase; }
h3, h3.wp-block-heading { font-size: clamp(1.55rem, 3vw, 2.4rem) !important; }
h4, h4.wp-block-heading { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }
h5, h5.wp-block-heading { font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important; }
h6, h6.wp-block-heading { font-size: 0.95rem !important; text-transform: uppercase; letter-spacing: 0.08em; }

/* Big, blocky section titles: a short accent bar under each H2 for a poster feel */
h2.wp-block-heading { position: relative; margin-bottom: 0.7em; }
h2.wp-block-heading.has-text-align-center::after { margin-left: auto; margin-right: auto; }
h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 6px;
  margin-top: 0.35em;
  background: var(--spkf-accent);
  border-radius: 3px;
}

/* body copy + lists inherit the light text */
p, li, blockquote, figcaption, .wp-block-latest-posts__post-excerpt {
  color: var(--spkf-text);
}
.has-small-font-size, .has-medium-font-size { color: var(--spkf-text); }

/* --- links + buttons: accent, high contrast --- */
a { color: var(--spkf-accent); }
a:hover { color: #8bc0ff; }
.wp-element-button, .wp-block-button__link {
  background-color: var(--spkf-accent);
  color: #061021;
  font-weight: 800;
  border-radius: 100px;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--spkf-text);
  border: 2px solid var(--spkf-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--spkf-accent);
  color: #061021;
}

/* --- sections that assumed a light background: make them semi-transparent
       dark so the WebGL energy glows through and text stays readable --- */
.has-secondary-background-color {
  background-color: rgba(18, 26, 43, 0.72) !important;
  color: var(--spkf-text);
  backdrop-filter: blur(2px);
}
.has-foreground-background-color {                 /* footer + dark covers */
  background-color: rgba(6, 9, 16, 0.86) !important;
  color: var(--spkf-text);
}
/* cover blocks with a light/base overlay -> darken so text stays legible */
.wp-block-cover .has-base-background-color.has-background-dim { background-color: #0a0f1c !important; }

/* header bar: translucent dark so the backdrop shows behind the full-width bar */
.wp-site-blocks > header .wp-block-group.alignfull {
  background: rgba(8, 11, 20, 0.55);
  backdrop-filter: blur(8px);
}

/* keep the light hero text/logo readable; nudge the H1 chunkier */
.wp-block-cover .wp-block-heading { color: #ffffff; }

/* soften the bright hero image into the dark theme with a bottom fade */
.home .wp-block-cover.alignfull:first-of-type,
.page-id-387 .wp-block-cover.alignfull:first-of-type {
  box-shadow: inset 0 -140px 120px -70px var(--spkf-bg);
}

/* search / inputs on dark */
.wp-block-search__input, input[type="text"], input[type="search"], textarea {
  background: rgba(255,255,255,0.06);
  color: var(--spkf-text);
  border: 1px solid rgba(255,255,255,0.18);
}
::placeholder { color: var(--spkf-muted); }

/* latest-posts / news cards on dark */
.wp-block-latest-posts a { color: #ffffff; }
.wp-block-latest-posts__post-date { color: var(--spkf-muted); }

/* safety net: any block that still explicitly sets a LIGHT background keeps
   dark text so nothing goes light-on-light after the dark conversion */
.has-background-background-color,
.has-white-background-color,
.has-base-background-color:not(.has-background-dim) {
  color: #0a0f1c;
}
.has-background-background-color :where(p, li, h1, h2, h3, h4, h5, h6, a),
.has-white-background-color :where(p, li, h1, h2, h3, h4, h5, h6, a) {
  color: #0a0f1c;
}

/* respect users who don't want motion: canvas already static, tone it down */
@media (prefers-reduced-motion: reduce) {
  #spkf-bg { opacity: 0.8; }
}