/* SGFF Website — custom CSS layer that extends Tailwind.
   Only contains things Tailwind utilities can't express cleanly. */

:root {
  --sgff-red: #DC2626;
  --sgff-red-bright: #EF3B3B;
  --sgff-black: #000000;
  --sgff-surface: #0F0F11;
  --sgff-charcoal: #1F1F1F;
}

/* ====== Critical pre-Tailwind styles ===============================
   Tailwind's Play CDN is a runtime JIT compiler — it has to download,
   parse the DOM, and inject CSS. On heavier pages this takes long enough
   that the user sees an unstyled flash (default serif font, default
   weight, broken layout). These rules style the body + header
   synchronously with the HTML load so the wordmark is correct from the
   very first paint. Once Tailwind applies its utilities, the results
   match — no visible transition. */

/* Reserve scrollbar space always. Without this, pages that don't scroll
   render at the full viewport width while pages that scroll render
   narrower (scrollbar eats ~15px). At the xl: breakpoint (1280px), this
   width difference can tip the layout in or out of the full desktop nav,
   making the header look completely different between pages. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll; /* fallback for browsers without scrollbar-gutter support */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: #000;
  color: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* clip is friendlier than hidden — doesn't affect scroll containers or position:sticky inside */
}

/* Header layout (top nav bar) */
header > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
  header > div:first-child {
    padding: 1.25rem 2.25rem;
  }
}

/* Wordmark anchor (logo + LOCAL 3021 text) */
header > div:first-child > a:first-of-type {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
}

/* Logo image */
header img[src$="sgff-logo.png"] {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4));
}
@media (min-width: 640px) {
  header img[src$="sgff-logo.png"] {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* Wordmark text */
header > div:first-child > a:first-of-type > span:not([class*="block"]) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.14em;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 640px) {
  header > div:first-child > a:first-of-type > span:not([class*="block"]) {
    font-size: 1.125rem;
  }
}
header > div:first-child > a:first-of-type > span > span {
  color: #DC2626;
}

/* ====== Hero (homepage only) ======================================= */

.hero-photo {
  background-image: url('../images/hero/hero-engine.webp');
  background-size: cover;
  background-position: center 50%;
  filter: saturate(0.35) brightness(0.62) contrast(1.28);
}

.hero-overlay-noir {
  background: linear-gradient(135deg, rgba(120,15,15,.5) 0%, rgba(40,0,0,.65) 100%);
  mix-blend-mode: color-burn;
  opacity: .55;
}

.hero-overlay-glow {
  background: radial-gradient(ellipse at 62% 58%, rgba(220,38,38,.18) 0%, rgba(0,0,0,0) 50%);
  mix-blend-mode: screen;
}

.hero-overlay-text {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 25%),
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.75) 100%);
}

.hero-headline {
  font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5.8vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

/* ====== Ember glow on "FIRE FIGHTERS" ============================== */

@keyframes ember-pulse {
  0%, 100% {
    text-shadow:
      0 2px 12px rgba(0,0,0,.7),
      0 0 18px rgba(220,38,38,.4),
      0 0 36px rgba(220,38,38,.2);
    color: #DC2626;
  }
  50% {
    text-shadow:
      0 2px 12px rgba(0,0,0,.7),
      0 0 26px rgba(255,80,30,.6),
      0 0 52px rgba(220,38,38,.35);
    color: #EF3B3B;
  }
}

.ember-text {
  animation: ember-pulse 3.4s ease-in-out infinite;
  will-change: text-shadow;
}

/* ====== Live status dot ============================================ */

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.live-dot {
  animation: live-pulse 2s ease-in-out infinite;
}

/* ====== Frosted sidebar (homepage hero) ============================ */

.frosted-card {
  background: rgba(18, 18, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ====== Sub-page header (every page except home) =================== */

.subhero {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 100%),
    linear-gradient(135deg, #1a0606 0%, #2a0c0c 60%, #0a0303 100%);
}

/* ====== Reduced motion =============================================
   Scope to known animated elements only. A wildcard `*` would silently
   disable future Tailwind utility transitions (hover:, focus:, etc.) which
   we do not want — only the cosmetic animations above should be killed. */

@media (prefers-reduced-motion: reduce) {
  .ember-text,
  .live-dot {
    animation: none !important;
  }
  .nav-drawer {
    transition: none !important;
  }
}

/* ====== Mobile nav drawer ========================================== */

.nav-drawer {
  transform: translateX(100%);
  transition: transform 240ms ease-out;
}

body[data-nav-open="true"] .nav-drawer {
  transform: translateX(0);
}

body[data-nav-open="true"] {
  overflow: hidden;
}

/* ====== Skip-to-content link (accessibility) ======================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: #DC2626;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  font-weight: 700;
  border-radius: 4px;
}

.skip-link:focus {
  top: 8px;
}

/* ====== Bio modal (executive page) =================================
   Native <dialog> styled to match the site's dark theme. */

dialog#bio-modal {
  background: #0F0F11;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0;
  max-width: 640px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.6);
}

dialog#bio-modal::backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bio-modal-scroll {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}