/*
 * Fuel the Shift — design tokens, ported from the inline styles in the
 * Claude Design source (fuel-the-shift/project/*.dc.html). Kept as CSS
 * custom properties + utility classes rather than re-inlining styles in
 * every template part, so the "component library" (Phase 2 of the brief)
 * has one place to change a color/spacing value site-wide.
 */

:root {
  /* Colors */
  --fts-forest: #0d2818;      /* primary deep forest/jungle green */
  --fts-forest-mid: #123d24;
  --fts-green: #23643c;
  --fts-green-soft: #8fc9a3;
  --fts-green-tint: #e3efe6;
  --fts-green-tint-text: #1a4f30;
  --fts-white: #ffffff;
  --fts-charcoal: #1c211f;
  --fts-charcoal-soft: #161a18;
  --fts-grey-bg: #f4f7f5;
  --fts-grey-border: #e7ebe8;
  --fts-grey-text: #4a524f;
  --fts-grey-meta: #7a827e;
  --fts-input-border: #d7ddd9;
  --fts-orange: #d9720f;       /* accent — CTAs only */
  --fts-orange-hover: #c2630b;
  --fts-orange-soft: #f2a566;
  --fts-orange-ink: #241300;
  --fts-cream: #faecda;
  --fts-cream-text: #a45a0c;
  --fts-footer-bg: #0b0f0d;

  /* Type */
  --fts-font-heading: 'Bricolage Grotesque', sans-serif;
  --fts-font-body: 'Public Sans', sans-serif;

  /* Layout */
  --fts-max-width: 1280px;
  --fts-radius-card: 20px;
  --fts-radius-card-lg: 28px;
  --fts-radius-pill: 999px;
}

body.fts-theme {
  margin: 0;
  font-family: var(--fts-font-body);
  color: var(--fts-charcoal);
  background: var(--fts-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.fts-theme ::selection { background: #c7e0cd; color: var(--fts-forest); }

.fts-container { max-width: var(--fts-max-width); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Fold: hero + stats sized to fill exactly one viewport on desktop, at any
 * screen height, rather than tuned to one fixed reference size. The hero
 * flexes to absorb whatever space is left above the stats row; its own
 * padding stays fixed for typographic rhythm, but the hero as a whole
 * grows or shrinks with the viewport. 100svh (small viewport height) is
 * preferred where supported so mobile browser chrome doesn't get double-
 * counted; 100vh is the fallback for browsers that don't support it yet.
 * Only applied above the mobile breakpoint (980px, matching fts-app.js's
 * isNarrow()) — on phones the hero should read top-to-bottom naturally,
 * not get crushed into a forced single screen. If hero content is ever
 * taller than the available space (very short viewports), flexbox lets it
 * keep its natural height rather than clipping — the page scrolls a little
 * instead of ever cutting off content. */
@media (min-width: 980px) {
  .fts-fold-wrap { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .fts-fold-hero { flex: 1 0 auto; display: flex; align-items: center; }
  .fts-fold-hero > .fts-container { width: 100%; }
}

@keyframes ftsFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ftsPulseRing { 0% { transform: scale(.75); opacity: .5; } 75% { opacity: 0; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes ftsBadgeDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .5; } }
@keyframes ftsRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ftsDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -10px); } }
@keyframes ftsFlow { 0% { left: -3%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 103%; opacity: 0; } }
@keyframes ftsShimmer { 0% { transform: translateX(-120%) rotate(20deg); } 100% { transform: translateX(220%) rotate(20deg); } }

.fts-theme *:focus-visible { outline: 3px solid var(--fts-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fts-theme *, .fts-theme *::before, .fts-theme *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Buttons */
.fts-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: var(--fts-radius-pill); text-decoration: none; border: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.fts-btn-accent { background: var(--fts-orange); color: var(--fts-orange-ink); }
.fts-btn-accent:hover { background: var(--fts-orange-hover); }
.fts-btn-outline-dark { border: 1px solid var(--fts-grey-border); color: var(--fts-forest); background: transparent; }
.fts-btn-solid-dark { background: var(--fts-forest-mid); color: var(--fts-white); }
.fts-btn-outline-light { border: 1px solid rgba(255,255,255,.3); color: #ffffff; background: transparent; transition: background .15s ease; }
.fts-btn-outline-light:hover { background: rgba(255,255,255,.1); }

/* Links: white-on-dark nav/footer links that solidify to full white on hover
   (ports the design's style-hover="color:#ffffff" pattern into real CSS) */
.fts-link-light { color: rgba(255,255,255,.82); text-decoration: none; transition: color .15s ease; }
.fts-link-light:hover { color: #ffffff; }
.fts-link-footer { color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s ease; }
.fts-link-footer:hover { color: #ffffff; }

/* Search trigger button (header). Background/color live here (not inline)
   so the :hover rule below can actually win — an inline style attribute
   always beats an external stylesheet rule, hover or not. */
.fts-search-open { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); transition: background .15s ease, color .15s ease; }
.fts-search-open:hover { background: rgba(255,255,255,.14); color: #ffffff; }

/* Subtle hover-tint used by pill links, dashed "browse more" cards, and
   search-result rows across every template */
.fts-hover-tint { transition: background .15s ease; }
.fts-hover-tint:hover { background: var(--fts-grey-bg); }
.fts-card-dashed { background: #eef4ee; transition: background .15s ease; }
.fts-card-dashed:hover { background: var(--fts-green-tint); }

/* Cards */
.fts-card { background: var(--fts-white); border: 1px solid var(--fts-grey-border); border-radius: var(--fts-radius-card); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.fts-card:hover { box-shadow: 0 14px 34px rgba(13,40,24,.1); transform: translateY(-2px); }
.fts-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 6px 11px; border-radius: var(--fts-radius-pill); }
.fts-tag-desk { background: var(--fts-green-tint); color: var(--fts-green-tint-text); }
.fts-tag-pillar { background: var(--fts-cream); color: var(--fts-cream-text); }

/* Show/hide toggles driven by JS (mobile menu, scroll-top button). These
   default to display:none inline in markup and JS flips them to flex/none
   directly — never combine an inline `display:` with the `hidden` attribute
   on the same element: inline style always wins over the UA [hidden] rule,
   so `hidden` silently does nothing and the element stays visible. */

/* Skip link */
.fts-skip-link { position: absolute; left: -9999px; top: 0; background: var(--fts-white); color: var(--fts-forest); padding: 12px 18px; border-radius: 8px; font-weight: 700; z-index: 200; }
.fts-skip-link:focus { left: 12px; top: 12px; }