/*
 * 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 — v2 palette (deep forest / gold-orange / cream editorial) */
  --fts-forest: #061813;      /* primary deep forest/jungle green */
  --fts-forest-mid: #0a241b;
  --fts-panel: #0d291f;
  --fts-panel-2: #123126;
  --fts-line: #28483b;
  --fts-green: #235a41;
  --fts-green-soft: #7fa88f;
  --fts-green-tint: #e3efe6;
  --fts-green-tint-text: #1a4f30;
  --fts-white: #ffffff;
  --fts-charcoal: #1c211f;
  --fts-charcoal-soft: #161a18;
  --fts-grey-bg: #f6f3ee;
  --fts-grey-border: #d9d5cc;
  --fts-grey-text: #4a524f;
  --fts-grey-meta: #7a827e;
  --fts-input-border: #d4d1ca;
  --fts-orange: #ff6a00;       /* accent — CTAs only */
  --fts-orange-hover: #e65f00;
  --fts-orange-soft: #d8ad48;  /* now doubles as the gold accent */
  --fts-orange-ink: #ffffff;
  --fts-gold: #d8ad48;
  --fts-cream: #f3eadc;
  --fts-cream-text: #a45a0c;
  --fts-footer-bg: #04140f;

  /* Type */
  --fts-font-heading: Georgia, 'Times New Roman', 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: 14px; padding: 13px 22px; border-radius: 4px; text-decoration: none; border: 1px solid transparent; 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 #9b7457; color: var(--fts-cream); 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; }

/* Footer social icon buttons (Facebook/Instagram/LinkedIn/X/TikTok) */
.fts-social-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); transition: color .15s ease, border-color .15s ease; }
.fts-social-icon:hover { color: #ffffff; border-color: rgba(255,255,255,.5); }

/* Homepage "Featured stories & reporting desks" grid (cards beneath the lead
   story). auto-fit with a min(Xpx,100%) floor keeps mobile safe (collapses
   to 1-2 columns rather than overflowing, same pattern as the rest of the
   theme); the 900px breakpoint then locks it to exactly 3 columns per row on
   desktop, since auto-fit alone can't guarantee a fixed column count. */
.fts-desk-story-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
@media (min-width: 900px) {
  .fts-desk-story-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 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-green-tint); }
.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; }

/* "The Desks" mega menu — hover/focus-revealed dropdown of all desk terms,
   desktop nav only (mobile lists desks via the plain "The Desks" link
   straight to the /desks/ page instead, no room for a mega menu there). */
.fts-nav-mega-trigger { position: relative; }
.fts-nav-mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; width: 640px; max-width: 90vw;
  background: var(--fts-white); border-radius: 20px; padding: 20px;
  box-shadow: 0 24px 60px rgba(13,40,24,.18);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 110;
}
.fts-nav-mega-trigger:hover .fts-nav-mega,
.fts-nav-mega-trigger:focus-within .fts-nav-mega {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.fts-nav-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.fts-nav-mega-item { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; transition: background .12s ease; }
.fts-nav-mega-item:hover { background: var(--fts-green-tint); }
.fts-nav-mega-item-title { display: block; font-size: 14px; font-weight: 700; color: var(--fts-forest); }
.fts-nav-mega-item-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--fts-grey-text); }
.fts-nav-mega-viewall { display: block; margin: 8px 4px 2px; padding-top: 14px; border-top: 1px solid var(--fts-grey-border); font-size: 13px; font-weight: 700; color: var(--fts-green); text-decoration: none; }