/* app.css — application-specific additions layered on top of Jodi's design
   system (site.css). Keeps site.css pristine; everything here is either a
   utility the dynamic app needs or a gap-fill in the static design.
   Breakpoints follow the house standard: 344 / 768 / 1920. */

/* Brand recolor — override Jodi's green design tokens with the Cyber Warfare logo's
   electric-blue palette (sampled from the New CW Logo: near-black #010308 ground,
   shield navy #092b57, circuit blue #1d68a4, electric-cyan glow #3ac6fe, ice highlight
   #9ce7f5). Loaded after site.css so these :root values win and recolor the whole site
   from one place; red --danger is kept (from site.css) for CRITICAL threat-tag contrast.
   All accent/text pairs verified WCAG AA on the new dark grounds. */
:root {
  --bg-void: #010308;
  --bg-deep: #061021;
  --bg-card: #08172a;
  --bg-elevated: #0d2138;
  --line: #143456;
  --line-bright: #214e7d;
  --brg: #092b57;
  --brg-bright: #1d68a4;
  --brg-glow: #2e8fd6;
  --phosphor: #3ac6fe;
  --amber: #9ce7f5;
  --text-primary: #e6f1fb;
  --text-secondary: #9fb6d0;
  --text-muted: #6b87a6;
}

/* Logo image (replaces the CSS-drawn CW wordmark). The logo art sits on its own
   near-black ground that matches --bg-void, so it blends seamlessly. */
.brand-logo {
  height: 64px;
  width: auto;
  display: block;
}
.brand-logo-footer {
  height: 72px;
}

/* Walter mascot portrait — replaces Jodi's placeholder SVG with the real character
   photo and enlarges her 56px spot to 80px so Walter reads (the mascot image builds
   brand association). Keeps her border + corner-bracket frame (site.css); the photo
   fills the square. */
.walter-col-portrait {
  width: 120px;
  height: 120px;
}
.walter-col-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The logo image is larger than Jodi's text logo, so trim the nav's vertical
   padding (site.css .nav-inner = 18px 32px) to keep the fixed nav compact —
   nav bar = 64px logo + 20px = 84px; with the 32px ticker the header bottom is
   ~116px, which all page top-offsets clear. Sides (32px) preserved. */
.nav-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* The logo image makes the fixed nav taller than Jodi's original text logo, so the
   home masthead's 100px top padding no longer cleared it and the H1 was clipped.
   Bump the top only (page-header=160 / post-hero=140 already clear the nav). The
   shorthand's 32px sides / 40px bottom from site.css remain. */
.masthead {
  padding-top: 132px;
}

/* Two-column masthead: headline/dek/stats in a text column, the original home's
   hero art (cyber-soldiers-hero.png) in its own column beside it (client request).
   Image sits in its own column — no text overlay — so the H1 keeps full contrast. */
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.masthead-text {
  flex: 1 1 56%;
  min-width: 0;
}
.masthead-art {
  flex: 1 1 44%;
  min-width: 0;
}
.masthead-art img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
}

/* Visually-hidden labels for accessibility (form labels, etc.) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer "Powered by Intrusion Shield" link — phosphor accent (was inline in the
   static handoff; moved to CSS per no-inline-styles rule). */
.footer-bottom .powered a {
  color: var(--phosphor);
  text-decoration: none;
}
.footer-bottom .powered a:hover {
  text-decoration: underline;
}

/* Live subscribe status message under the newsletter form. */
.newsletter-status {
  margin-top: 12px;
  min-height: 1em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--brg-glow);
}

/* Mobile nav toggle button — hidden on desktop, shown at <=768. */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-bright);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  padding: 6px 11px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.nav-toggle:hover {
  border-color: var(--brg-glow);
  color: var(--phosphor);
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--brg-glow);
  outline-offset: 2px;
}

/* Live Intel Wire — aggregated RSS feed (rss.feed.cyberwarfare.work). Jodi's
   static design had no live-feed component, so this is built from her tokens in
   a terminal/newswire idiom to match the cyberpunk system. */
.wire {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 64px 0;
}
.wire-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.wire-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
}
.wire-col {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.wire-col-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phosphor);
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.wire-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 12px 18px 2px;
}
.wire-card {
  display: block;
  padding: 8px 18px 14px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.wire-card:hover,
.wire-card:focus-visible {
  background: var(--bg-elevated);
  border-left-color: var(--phosphor);
  outline: none;
}
.wire-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wire-source {
  color: var(--brg-glow);
}
.wire-reads {
  color: var(--text-muted);
}
.wire-card-title {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  transition: color 0.15s;
}
.wire-card:hover .wire-card-title,
.wire-card:focus-visible .wire-card-title {
  color: var(--phosphor);
}
.wire-foot {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.wire-foot a {
  color: var(--brg-glow);
  text-decoration: none;
}
.wire-foot a:hover {
  color: var(--phosphor);
}
.wire-foot a:focus-visible {
  color: var(--phosphor);
  outline: 2px solid var(--brg-glow);
  outline-offset: 2px;
}

/* Ask Walter assistant embed (iframe to ask-walter.cyberwarfare.work). */
.walter-embed {
  margin-top: 4px;
}
.walter-embed iframe {
  width: 100%;
  min-height: 700px;
  border: 1px solid var(--line);
  display: block;
  background: var(--bg-card);
}

/* Empty state shown in the article river when a category chip (home) matches no
   articles. Spans the full grid width; toggled via [hidden] from main.js. */
.river-empty {
  grid-column: 1 / -1;
  width: 100%;
  padding: 48px 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px dashed var(--line);
  background: var(--bg-card);
}

/* Tablet / mobile (<=768): Jodi's site.css hides .nav-links at <=640 with no
   replacement. Take over at the mandated 768 breakpoint with a real toggle so
   navigation is reachable, and avoid the 641-768 state where both would show. */
@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }
  /* Collapse the Live Intel Wire to one column on phones and tablets. The
     3-column grid only fits above 768px; below it the 3rd column was being
     clipped by the html overflow-x:hidden above. */
  .wire-columns {
    grid-template-columns: 1fr;
  }
  .masthead-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .nav-inner {
    position: relative;
  }
  .nav-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 12px 22px;
  }
  .nav-links a.nav-cta {
    margin: 8px 22px;
    text-align: center;
  }
}

/* Small phones (<=344, e.g. Z Fold folded): tighten nav + status type. */
@media (max-width: 344px) {
  .nav-links a {
    padding: 10px 14px;
  }
  .newsletter-status {
    font-size: 11px;
  }
  .wire-inner {
    padding: 0 12px;
  }
  .brand-logo {
    height: 54px;
  }
  .walter-col-portrait {
    width: 96px;
    height: 96px;
  }
}

/* Wide desktop (>=1920): nudge status type up at large viewports. */
@media (min-width: 1920px) {
  .newsletter-status {
    font-size: 13px;
  }
}

/* Accessibility: honor reduced-motion. Disables this file's transitions AND
   tames the design system's infinite ticker scroll + pulsing live dots, which
   otherwise run continuously (motion-sickness / vestibular trigger). */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle {
    transition: none;
  }
  .ticker-track {
    animation: none;
  }
  .pulse,
  .live-dot {
    animation: none;
  }
  .wire-card,
  .wire-card-title {
    transition: none;
  }
}