/* ── MASTHEAD ── */
/* .masthead {
  background: var(--navy);
  border-bottom: 4px solid var(--red);
  padding: 0.35rem 0;
  text-align: center;
}
.masthead-date {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
} */

/* ── HEADER ──
   margin-top uses --nav-height, which nav-height.js keeps in sync
   with the fixed nav's REAL rendered height at all times (including
   if wrapping ever makes the nav taller). The px fallback is only
   used for the instant before JS runs on first paint. */
header {
  background: var(--paper);
  border-bottom: 3px double var(--red);
  padding: 1.8rem clamp(1rem, 3vw, 4rem) 1.2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  margin-top: var(--nav-height, 72px);
  box-sizing: border-box;
}
.logo-wrap img {
  height: 90px;
  width: auto;
  display: block;
}
.header-text { flex: 1; }
.header-text h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.header-text .tagline {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--red);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ── NAV ──
   min-height (not height) on both nav and nav-inner so the bar
   is free to grow taller automatically if flex-wrap kicks in and
   pushes the menu to a second line. Never force a fixed height
   on a flex container that's allowed to wrap. */
nav {
  background: var(--navy);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  border-bottom: 3px solid var(--red);
  min-height: 72px;
  padding: 0.4rem 0;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  box-sizing: border-box;
}
nav.scrolled {
  background: rgba(24, 36, 47, 0.92);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── NAV INNER WRAP ──
   IMPORTANT: this stays flex-wrap: nowrap. The brand and the menu
   must always share one row — if the whole row were allowed to
   wrap, the entire menu block can drop below the logo the moment
   space gets tight, which is the "gets under the logo" bug. Any
   wrapping safety-net belongs INSIDE .nav-menu-desktop only, so at
   worst individual menu items wrap, never the whole block. */
.nav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.4rem clamp(1rem, 3vw, 4rem);  /* ← INCREASED PADDING */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  position: relative;
  min-height: 64px;
  width: 100%;
  box-sizing: border-box;
}

/* Brand in navbar — font/logo size is fluid too, so the brand gives
   a little room back to the menu on the narrowest desktop widths
   (right above 1200px) instead of always claiming a fixed width. */
.nav-brand a {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.4vw, 0.6rem);
  text-decoration: none;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.6vw + 0.55rem, 1.1rem);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.nav-logo {
  height: clamp(28px, 1.2vw + 14px, 36px);
  width: auto;
  border-radius: 2px;
}
.nav-title {
  white-space: nowrap;
}

/* ── HAMBURGER BUTTON (hidden above 1200px) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.8rem 0.5rem;
  z-index: 200;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE OVERLAY MENU ── */
.nav-menu-mobile {
  display: none;
}

/* ── HERO BAND ── */
.hero-band {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 3.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 18px,
    rgba(0,0,0,0.06) 18px,
    rgba(0,0,0,0.06) 36px
  );
}
.hero-band::after {
  content: '☭';
  position: absolute;
  right: 2rem;
  bottom: -1rem;
  font-size: 12rem;
  opacity: 0.05;
  color: #fff;
  pointer-events: none;
}
.hero-band h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  position: relative;
  text-shadow: 2px 3px 0 rgba(0,0,0,0.25);
}
.hero-band p {
  max-width: 640px;
  margin: 1rem auto 0;
  font-size: 1.05rem;
  font-weight: 300;
  opacity: 0.92;
  position: relative;
}
.hero-band .cta-row {
  margin-top: 1.8rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ── TICKER ── */
.ticker-wrap {
  background: var(--navy);
  overflow: hidden;
  padding: 0.45rem 0;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  width: 100%;
  max-width: 100%;
}
.ticker {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}
.ticker span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}
.ticker span::before { content: '★ '; color: var(--red); }
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── FOOTER ── */
footer {
  background: var(--navy);
  color: #aaa;
  padding: 3rem 2rem 1.5rem;
  margin-top: 0;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}
.footer-brand img {
  height: 55px;
  margin-bottom: 0.8rem;
  opacity: 0.8;
}
.footer-brand p { font-size: 0.83rem; line-height: 1.6; opacity: 0.7; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.4rem; }
.footer-col ul li a {
  color: #999;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: #fff; }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom p {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

/* ══════════════════════════════════
   DESKTOP — above 1200px
   Single tier now: no more shrunken "laptop" version. Full-size
   padding/font at all times; flex-wrap is only a safety net for
   an unusually long menu, not the normal state.
══════════════════════════════════ */
@media (min-width: 1201px) {
  .nav-toggle {
    display: none !important;
  }

  .nav-menu-desktop {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.1rem;
    margin: 0;
    margin-left: auto;
    padding: 0;
    list-style: none;
    justify-content: flex-end;
    align-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
  }

  .nav-menu-desktop li {
    margin: 0;
    display: flex;
    align-items: center;
  }

  .nav-menu-desktop li a {
    display: flex;
    align-items: center;
    padding: clamp(0.35rem, 0.5vw, 0.8rem) clamp(0.3rem, 0.5vw, 0.9rem);
    color: #fff;
    text-decoration: none;
    font-family: var(--mono);
    font-size: clamp(0.58rem, 0.35vw + 0.42rem, 0.72rem);
    font-weight: 700;
    letter-spacing: clamp(0.02em, 0.25vw, 0.06em);
    text-transform: uppercase;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
  }

  .nav-menu-desktop li a:hover,
  .nav-menu-desktop li a.active {
    color: #fff;
    background: rgba(198, 40, 40, 0.2);
    border-bottom-color: var(--red);
  }

  /* "Join the Struggle!" — the ONLY non-white item */
  .nav-menu-desktop li:first-child a {
    font-weight: 700;
    color: var(--gold);
    padding-left: clamp(0.4rem, 0.6vw, 1rem);
    padding-right: clamp(0.4rem, 0.6vw, 1rem);
  }

  .nav-menu-desktop li:first-child a:hover,
  .nav-menu-desktop li:first-child a.active {
    color: #fff;
    background: rgba(198, 40, 40, 0.25);
    border-bottom-color: var(--gold);
  }

  .nav-menu-mobile {
    display: none !important;
  }
}

/* ══════════════════════════════════
   MOBILE / TABLET — 1200px and below (hamburger)
══════════════════════════════════ */
@media (max-width: 1200px) {
  /* ── NAV ── */
  .nav-inner {
    padding: 0.4rem 1rem;
    position: relative;
    gap: 0.5rem;
  }

  .nav-toggle {
    display: flex !important;
    padding: 0.8rem 0.5rem;
  }

  .nav-menu-desktop {
    display: none !important;
  }

  /* ── MOBILE OVERLAY MENU ── */
  .nav-menu-mobile {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(24, 36, 47, 0.92);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    pointer-events: none;
    z-index: 150;
    border-top: 3px solid var(--red);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    margin: 0;
  }

  .nav-menu-mobile.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
    pointer-events: auto;
  }

  .nav-menu-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
  }

  .nav-menu-mobile li {
    margin: 0.6rem 0;
    width: 100%;
  }

  .nav-menu-mobile li a {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.8rem 1rem;
    border-bottom: none;
    color: #fff;
    border-left: 3px solid transparent;
    transition: border 0.2s, color 0.2s, background 0.2s;
    width: 100%;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .nav-menu-mobile li a:hover,
  .nav-menu-mobile li a.active {
    border-left-color: var(--red);
    color: #fff;
    background: rgba(198, 40, 40, 0.1);
  }

  /* "Join the Struggle!" — the ONLY non-white item, mobile menu too */
  .nav-menu-mobile li:first-child a {
    color: var(--gold);
  }

  .nav-menu-mobile li:first-child a:hover,
  .nav-menu-mobile li:first-child a.active {
    color: #fff;
  }

  /* ── MOBILE CLOSE BUTTON ── */
  .nav-menu-mobile .nav-close-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    z-index: 160;
    font-family: var(--display);
    opacity: 0.7;
    line-height: 1;
  }

  .nav-menu-mobile .nav-close-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
  }

  .nav-menu-mobile .nav-close-btn:active {
    transform: rotate(90deg) scale(0.9);
  }

  .nav-brand a {
    font-size: 0.9rem;
  }

  .nav-logo {
    height: 30px;
  }

  .nav-title {
    font-size: 0.9rem;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }

  /* ── HEADER ── */
  header {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }

  .logo-wrap img {
    height: 70px;
  }

  /* ── TICKER ── */
  .ticker-wrap {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
  }

  .ticker {
    flex-wrap: nowrap;
    width: max-content;
  }

  .ticker span {
    flex-shrink: 0;
  }

  /* ── FOOTER ── */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}