/* Base/Global CSS
/* ------------------------------------------------------------
Aggregates all site styles (incl. seo.css). Split into a new file
only when complexity truly warrants it.

TABLE OF CONTENTS
1) Global (tokens, resets, helpers)
2) Layout (containers, ribbons, utilities)
3) Banner & Header
4) Navigation
5) Creator Kit / Generator
6) Record Mode
7) Forms & Focus
8) Error Template (placeholder)
------------------------------------------------------------- */


/* 1) GLOBAL
/* ---------------------------------------------------------- */


/* CSS Imports to import elsewhere, not globally
@import "share.css";
@import "influencers.css";
@import "creators.css";
*/
@import "header.css";
@import "footer.css";



/* Design tokens */
:root {
  /* --- GovTok Brand Palette --- */
  --color-midnight:  #001d35; /* Wordmark Dark Blue (deep navy)#001d35#005EA1; */
  --color-flare: #f60050;     /* Wordmark Red (vivid pink-red) */
  --color-sky: #07effd;       /* Wordmark Blue (bright cyan) */
  --color-horizon: #1daeff;   /* Eagle Blue (sky blue) */
  --color-crimson: #d52c44;   /* Eagle Red (crimson red) */

  /* --- Supporting Neutrals --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;   /* lightest gray for backgrounds */
  --color-gray-100: #f3f4f6;  /* light gray (soft surfaces) */
  --color-gray-200: #e5e7eb;  /* border gray */
  --color-gray-400: #9ca3af;  /* muted text */
  --color-gray-600: #4b5563;  /* secondary text */
  --color-gray-800: #1f2937;  /* body text */
  --color-gray-900: #111827;  /* near-black for emphasis */

  /* --- Semantic Mapping --- */
  --brand-success: #1a7f37;        /* keep USWDS green */
  --brand-primary: var(--color-midnight);
  --brand-primary-dark: #162e51;   /* darker navy */
  --brand-accent: var(--brand-success);
  --brand-danger: var(--color-flare);
  --brand-focus: #ffbf47;          /* high-contrast focus ring */


  /* Text & Surfaces */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-bg: var(--color-white);
  --color-bg-soft: var(--color-gray-50);
  --color-bg-tint: var(--color-gray-100);
  --color-border: var(--color-gray-200);
  --color-danger: var(--color-crimson);

  /* Footer bands */
  --footer-links-bg: var(--brand-primary);
  --footer-fineprint-bg: var(--color-black);

  /* Status Colors (optional future expansion) */
  --status-info: var(--color-horizon);
  --status-warning: #ffbf47;
  --status-error: var(--color-crimson);
  --status-success: var(--brand-success);

  /* Typography */
  --font-sans: "TikTok Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* Layout */
  --container-max: 72rem;
  --radius-2: .25rem;
}

/* TikTok font utilities */
.tiktok-tight { font-variation-settings: "wdth" 95; }
.tiktok-wide  { font-variation-settings: "wdth" 105; }
.tiktok-heavy { font-weight: 800; }
.tiktok-light { font-weight: 300; }

/* Base element defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-optical-sizing: auto;
  font-variation-settings: "slnt" 0, "wdth" 100;
}


body {
  height: 100%;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Helpers */
.text-secondary {
  color: var(--color-text-muted);
}

.text-white {
  color: #fff;
}

.text-right {
  text-align: right;
}

.display-none {
  display: none !important;
}

.font-sans-lg {
  font-size: 1.125rem;
  font-weight: 700;
}

.grid-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* USWDS prose tweak */
.usa-prose p {
  max-width: 65ch;
}


/* 2) LAYOUT
/* ---------------------------------------------------------- */

/* Stats ribbon */
#stats-ribbon {
  background: var(--brand-primary-dark);
  color: #fff;
  text-align: center;
  padding: .5rem;
}

/* Simple utility spacing */
.margin-0 {
  margin: 0 !important;
}

.margin-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.margin-top-1 {
  margin-top: .25rem !important;
}

.margin-top-2 {
  margin-top: .5rem !important;
}

.margin-top-3 {
  margin-top: 1rem !important;
}

.margin-bottom-1 {
  margin-bottom: .25rem !important;
}

.padding-y-2 {
  padding-block: .75rem !important;
}

.padding-y-4 {
  padding-block: 2rem !important;
}

.border {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
}


/* 3) BANNER & HEADER
/* ---------------------------------------------------------- */

/* “Not official” banner uses USWDS markup */
.usa-banner {
  background: var(--color-bg-tint);
}

.usa-banner__header-text em {
  font-style: italic;
}


/* Soften the summary box to feel more native */
.usa-summary-box {
  background: #f4fbfd;              /* lighter tint */
  border: 1px solid #cde8f1;
  border-left-width: 4px;           /* accent left bar */
}
.usa-summary-box__heading { margin-bottom: .25rem; }
.usa-summary-box .usa-list li { margin-bottom: .35rem; }


/* 4) NAVIGATION
/* ---------------------------------------------------------- */

.usa-header .usa-logo__text a {
  text-decoration: none;
}

.usa-nav__link {
  text-decoration: none;
}

.usa-nav__link:hover {
  text-decoration: underline;
}


/* 5) CREATOR KIT / GENERATOR
/* ---------------------------------------------------------- */

/* Share card grid */
.share-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Generator output block */
#output {
  margin-top: 1rem;
}



/* 7) FORMS & FOCUS
/* ---------------------------------------------------------- */

/* High-contrast, accessible focus ring across the site */
.usa-input:focus,
.usa-select:focus,
.usa-textarea:focus,
.usa-button:focus,
a:focus {
  outline: 3px solid var(--brand-focus);
  outline-offset: 2px;
}


/* 8) ERROR TEMPLATE (placeholder)
/* ---------------------------------------------------------- */

.error-hero {
  text-align: center;
  padding: 4rem 1rem;
  background: var(--color-bg-tint);
}

.error-hero h1 {
  margin: 0 0 .5rem;
}

.error-hero p {
  color: var(--color-text-muted);
}






/* 1) 404 Page
/* ---------------------------------------------------------- */

/* --- Mobile polish for generator + footer --- */
@media (max-width: 640px) {
  /* Give textarea breathing room from action buttons */
  #output textarea { margin-bottom: 0.75rem; }

  /* Make action buttons full-width and vertically stacked */
  #output .usa-button { display: block; width: 100%; }
  #output .usa-button + .usa-button { margin-top: .5rem; }

  /* Hide the *earlier* "Open comment form" CTA on mobile to avoid duplication */
  #generator-form a[href*="commenton"] { display: none; }

  /* Stronger visual break before the footer signup */
  section.home-helper,
  .usa-summary-box + .usa-summary-box { margin-bottom: 1rem; }
  .site-footer__cta { margin-top: 1.5rem; border-top: 1px solid #dfe1e2; padding-top: 1.25rem; }
}


#logo img {
  height: 48px;   /* bump it up a little */
  width: auto;    /* keep proportions */
  margin-top: 4px; /* nudge for vertical centering */
}

.usa-navbar {
  align-items: center;  /* vertical centering */
}


.usa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* 404 layout & a11y niceties */
.page-404 .page-404__figure { margin: 0; }
.page-404 .page-404__figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: .25rem;
  /* prevent layout shift if image loads late */
  background: #000; /* image background matches photo edges */
}
.page-404__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-404__cta-group .usa-button {
  min-width: 11rem;          /* larger hit area */
  line-height: 1.25;
}

/* Link affordances beyond color only */
.page-404 a { text-decoration: underline; }
.page-404 a.usa-button,
.page-404 a.usa-button--outline { text-decoration: none; }
.page-404 a:focus-visible {
  outline: 3px solid #2491ff; /* USWDS focus color */
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Tighten spacing on small screens; stack image first */
@media (max-width: 640px) {
  .page-404 .font-sans-lg { font-size: 1.125rem; }
  .page-404__cta-group .usa-button { width: 100%; }
}


/* Visually hidden until focus, then pinned top-left with strong contrast */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0b4778;      /* USWDS blue-70 */
  color: #fff;
  padding: .5rem 1rem;
  z-index: 1000;
  border-radius: 0 0 .25rem .25rem;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: top .15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }


/* === Hero === */
.rl-hero {
  background: var(--brand-primary);     /* #001d35 */
  color: var(--color-white);
  padding-block: 1.5rem;
}
.rl-hero .usa-intro { color: #e9eef3; } /* softer white for long paragraph */

/* Buttons on dark hero */
.rl-hero .usa-button {
  background: var(--color-horizon);     /* primary */
  border-color: var(--color-horizon);
  color: #03243e;                        /* readable on sky blue */
}
.rl-hero .usa-button:hover { filter: brightness(0.95); }

.rl-hero .usa-button.usa-button--outline {
  background: transparent;
  color: var(--color-horizon);
  border-color: var(--color-horizon);
}
.rl-hero .usa-button.usa-button--outline:hover {
  background: rgba(29,174,255,.12);
}

/* Links in hero: keep white, underline for affordance */
.rl-hero a { color: var(--color-white); text-decoration: underline; }

/* === Summary “Why this matters” box (light on purpose) === */
.rl-why {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-left-color: var(--color-horizon);
  color: var(--color-text);
  border-radius: .25rem;
}
.rl-why .usa-summary-box__heading { color: var(--color-text); }

/* Mobile spacing */
@media (max-width: 640px){
  .rl-hero { padding-block: 1.25rem; }
  .rl-why { margin-top: .75rem; }
}


/* Roadless: light panel */
.rl-panel{
  background: var(--color-bg-tint);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-2);
  padding: 1rem;
}
@media (min-width:640px){ .rl-panel{ padding: 1.25rem 1.25rem; } }

/* Footnote anchors */
.fn{ text-decoration:none; font-weight:600; }
.fn:focus{ outline:3px solid var(--brand-focus); outline-offset:2px; }

/* Whitespace trims */
.rl-hero{ padding-block: 1.25rem !important; }           /* hero less tall */
.usa-section.tight{ padding-block: 1.25rem !important; } /* tighter sections */
#why h2{ margin: 0 0 .5rem; }
#why ul.usa-list li{ margin-bottom: .5rem; }

.rl-hero p.usa-intro{ max-width: 60ch; }



/* Roadless 101 trims */
.usa-section.tight { padding-block: 1.25rem !important; }
#learn .usa-alert__heading { margin: 0 0 .25rem; }
#learn .usa-details__summary { font-weight: 700; }
#learn .usa-details__content .usa-list li { margin-bottom: .4rem; }

/* Footnote anchors */
.fn { text-decoration: none; font-weight: 600; }
.fn:focus { outline: 3px solid var(--brand-focus); outline-offset: 2px; }


/* Citation chips: stay inline, spaced, never orphan punctuation */
.fn {
  text-decoration: none;
  font-weight: 600;
  display: inline-block;          /* prevents mid-chip wraps */
}
.fn + .fn { margin-left: .22rem; } /* space between [5][6] */

/* Helper to keep chip + trailing punctuation on one line */
.no-wrap { white-space: nowrap; }


/* ===== Roadless 101 tidy ===== */
.rl-tight { padding-block: 1.5rem !important; }

.rl-stack > * + * { margin-top: 1rem; }                 /* consistent vertical rhythm */
@media (min-width: 640px) { .rl-stack > * + * { margin-top: 1.25rem; } }

.rl-h2 { margin: 0 0 .25rem; }

/* Light info card (replaces misused alert) */
.rl-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-horizon);
  border-radius: var(--radius-2);
  padding: 1rem 1.125rem;
}
@media (min-width: 640px) {
  .rl-card { padding: 1.125rem 1.25rem; }
}
.rl-card__title {
  margin: 0 0 .35rem;
  font-weight: 700;
}
.rl-card__body { margin: 0; }

/* Blocks stacked between sections */
.rl-block { margin-top: .75rem; }
@media (min-width: 640px) { .rl-block { margin-top: 1rem; } }

/* “TikTok idea” note (non-semantic, softer than alert) */
.rl-idea {
  background: #fff8e1; /* soft warm */
  border: 1px solid #ffe4a6;
  border-left: 4px solid #ffbf47;
  border-radius: var(--radius-2);
  padding: .75rem .9rem;
}
.rl-idea__label {
  font-weight: 700;
  margin-bottom: .25rem;
}
.rl-idea__body { margin: 0; }

/* Make details blocks breathe */
.usa-details__summary { line-height: 1.35; }
.usa-details__content { margin-top: .35rem; }
.usa-details__content .usa-list li { margin-bottom: .35rem; }

/* Footnote anchors: keep visible but unobtrusive */
.fn { text-decoration: none; font-weight: 600; }
.fn:focus { outline: 3px solid var(--brand-focus); outline-offset: 2px; }