/*
Theme Name: The Streamliners
Theme URI: https://thestreamliners.ai
Author: The Streamliners
Description: Custom block theme for TheStreamliners.ai. Operations-Led AI positioning, brand palette, and typography. Built on the WordPress block editor with no plugin dependencies.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
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: thestreamliners
Tags: block-theme, one-column, custom-colors, custom-logo
*/

/* =========================================================
   Tokens beyond theme.json
   ========================================================= */
:root {
  --sl-ink: #0c1116;
  --sl-ink-soft: #151d25;
  --sl-paper: #ffffff;
  --sl-frost: #eef3f5;
  --sl-mist: #93b4bd;
  --sl-rail: #4a6792;
  --sl-signal: #d71920;
  --sl-line: #d7dfe3;
  --sl-slant: -12deg;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings: condensed, tight, forward-leaning */
h1, h2, h3, h4,
.sl-display {
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* =========================================================
   Utility: eyebrows, rules, chevrons
   ========================================================= */
.sl-eyebrow {
  font-family: var(--wp--preset--font-family--ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sl-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.7em;
  background: var(--sl-signal);
  transform: rotate(45deg) skew(8deg, 8deg);
  vertical-align: 6%;
}
.sl-eyebrow--mist::before { background: var(--sl-mist); }

/* The cut line: a full-width rule that slices behind a heading,
   echoing the speed line through the wordmark */
.sl-cut {
  position: relative;
}
.sl-cut > * {
  position: relative;
  z-index: 1;
}
.sl-cut::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.32em;
  width: 100vw;
  max-width: 100vw;
  height: 1px;
  background: var(--sl-line);
  z-index: 0;
}
.sl-on-ink .sl-cut::after { background: rgba(147, 180, 189, 0.28); }

/* Chevron list: brand mark as list bullet */
ul.sl-chevrons {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
ul.sl-chevrons li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.75em;
}
ul.sl-chevrons li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.62em;
  height: 0.62em;
  border-top: 3px solid var(--sl-signal);
  border-right: 3px solid var(--sl-signal);
  transform: rotate(45deg) skewY(-10deg);
}
ul.sl-chevrons--rail li::before {
  border-color: var(--sl-rail);
}

/* Short accent bar under section headings */
.sl-bar {
  border: none;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--sl-signal) 0 40%, var(--sl-rail) 40% 75%, var(--sl-mist) 75% 100%);
  transform: skewX(var(--sl-slant));
  margin-left: 2px;
}

/* =========================================================
   Buttons: skewed parallelogram, echoes the diamond
   ========================================================= */
.sl-btn .wp-block-button__link,
.sl-btn.wp-block-button__link {
  transform: skewX(var(--sl-slant));
  border-radius: 0;
  padding: 0.85rem 1.9rem;
  font-family: var(--wp--preset--font-family--ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.sl-btn .wp-block-button__link > span,
.sl-btn .wp-block-button__link {
  display: inline-block;
}
.sl-btn .wp-block-button__link::after {
  content: "\00a0\203A";
  font-weight: 700;
}
.sl-btn--signal .wp-block-button__link {
  background: var(--sl-signal);
  color: #fff;
}
.sl-btn--signal .wp-block-button__link:hover,
.sl-btn--signal .wp-block-button__link:focus {
  background: #b3141a;
  color: #fff;
}
.sl-btn--ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.sl-btn--ghost .wp-block-button__link:hover,
.sl-btn--ghost .wp-block-button__link:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.sl-btn--ghost-ink .wp-block-button__link {
  background: transparent;
  color: var(--sl-ink);
  border: 2px solid var(--sl-ink);
}
.sl-btn--ghost-ink .wp-block-button__link:hover,
.sl-btn--ghost-ink .wp-block-button__link:focus {
  background: var(--sl-ink);
  color: #fff;
}

/* =========================================================
   Header
   ========================================================= */
.sl-header {
  border-top: 3px solid var(--sl-signal);
  border-bottom: 1px solid rgba(147, 180, 189, 0.22);
}
.sl-header .wp-block-navigation a {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sl-header .wp-block-navigation a:hover,
.sl-header .wp-block-navigation a:focus {
  color: var(--sl-mist);
  text-decoration: none;
}
.sl-logo-link img {
  display: block;
  height: 34px;
  width: auto;
}
@media (min-width: 782px) {
  .sl-logo-link img { height: 40px; }
}

/* =========================================================
   Hero slipstream: layered speed lines + ghost chevrons
   ========================================================= */
.sl-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sl-hero::before {
  /* three speed lines racing right, brand order: mist / rail / signal */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0%, rgba(147,180,189,0) 22%, var(--sl-mist) 58%, var(--sl-mist) 100%) left 51% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(74,103,146,0) 12%, var(--sl-rail) 48%, var(--sl-rail) 100%) left 55.5% / 100% 4px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(215,25,32,0) 4%, var(--sl-signal) 40%, var(--sl-signal) 100%) left 60% / 100% 5px no-repeat;
  opacity: 0.9;
}
.sl-hero::after {
  /* ghost chevron streaming toward the right edge, pointing right */
  content: "";
  position: absolute;
  right: -5rem;
  top: 6%;
  width: 30rem;
  height: 88%;
  z-index: -1;
  background: linear-gradient(var(--sl-rail), var(--sl-rail)) 0 0 / 100% 100%;
  clip-path: polygon(36% 0, 58% 0, 100% 50%, 58% 100%, 36% 100%, 78% 50%);
  opacity: 0.22;
}
@media (max-width: 781px) {
  .sl-hero::after {
    width: 15rem;
    right: -6rem;
    opacity: 0.14;
  }
  .sl-hero::before { opacity: 0.65; }
}

/* =========================================================
   Stat band
   ========================================================= */
.sl-statpanel {
  background: var(--sl-ink-soft);
  border-top: 4px solid var(--sl-signal);
  padding: 2rem 2rem 1.5rem;
}
.sl-stat {
  border-top: 1px solid rgba(147, 180, 189, 0.35);
  padding-top: 1.25rem;
}
.sl-statpanel .sl-stat { border-top-color: rgba(147, 180, 189, 0.22); }
.sl-stat .sl-stat-number {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.sl-stat--hot .sl-stat-number {
  font-size: clamp(4.2rem, 8vw, 6.4rem);
  color: var(--sl-signal);
}
.sl-stat--hot p:last-child {
  color: #ffffff !important;
  font-weight: 600;
}
.sl-stat-number .sl-pct {
  font-size: 0.45em;
  font-style: normal;
  vertical-align: 0.62em;
  letter-spacing: 0;
  color: var(--sl-mist);
}
.sl-source {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* =========================================================
   Fit cards (Who it's for)
   ========================================================= */
.sl-fitcard {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1.5rem 1.5rem 1.4rem;
  height: 100%;
}
.sl-fitcard p {
  margin: 0;
}
.sl-fitcard p::before {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  margin-bottom: 0.9em;
  background: #ffffff;
  transform: rotate(45deg) skew(8deg, 8deg);
}

/* =========================================================
   Stage rail (approach teaser and page)
   ========================================================= */
.sl-stage {
  border-top: 4px solid var(--sl-rail);
  padding-top: 1.1rem;
  position: relative;
}
.sl-stage--1 { border-top-color: var(--sl-mist); }
.sl-stage--2 { border-top-color: var(--sl-rail); }
.sl-stage--3 { border-top-color: var(--sl-signal); }
.sl-stage-kicker {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sl-timeframe {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sl-signal);
  letter-spacing: 0.04em;
}

/* =========================================================
   Pull quote closer
   ========================================================= */
.sl-refusal {
  font-family: var(--wp--preset--font-family--body);
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.35;
  font-weight: 500;
}
.sl-refusal strong { color: var(--sl-signal); font-weight: 600; }

/* =========================================================
   Blog
   ========================================================= */
.sl-postcard {
  border-bottom: 1px solid var(--sl-line);
  padding-bottom: 2rem;
}
.sl-postcard .wp-block-post-title a {
  text-decoration: none;
}
.sl-postcard .wp-block-post-title a:hover,
.sl-postcard .wp-block-post-title a:focus {
  color: var(--sl-rail);
  text-decoration: underline;
  text-decoration-color: var(--sl-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sl-postmeta,
.wp-block-post-date {
  font-family: var(--wp--preset--font-family--ui);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Post body typography */
.sl-prose p,
.single .entry-content p {
  max-width: 42.5rem;
}

/* =========================================================
   Links, focus, accessibility
   ========================================================= */
a {
  text-underline-offset: 3px;
}
:where(body) a:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible {
  outline: 3px solid var(--sl-signal);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sl-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100000;
  font-family: var(--wp--preset--font-family--ui);
}
.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep full-bleed cut lines from causing horizontal scroll */
.sl-cut { overflow-x: clip; }
body { overflow-x: clip; }