/*
Theme Name:  Pittsburgh Leather PRIDE
Theme URI:   https://pghlpw.com
Author:      Ferranti Grantham
Author URI:  https://pghlpw.com
Description: Custom theme for Pittsburgh Leather PRIDE LLC (pghlpw.com). Dark industrial aesthetic. Built on Design System v2.0.
Version:     1.0.0
License:     All rights reserved
Text Domain: pghlpw
Tags:        custom-theme, dark, leather, community
*/

/* ============================================================
   DESIGN TOKENS — PLP Design System v2.0
   All colors, typography, spacing, and breakpoints live here.
   Update this file when the design system changes.
   ============================================================ */

:root {

  /* ── Colors: Backgrounds ── */
  --color-obsidian:     #0E0E0E;   /* Page bg, nav */
  --color-forge:        #1C1A17;   /* Card backgrounds */
  --color-coal:         #161412;   /* Section alternates */
  --color-steel:        #2E2C29;   /* Borders, dividers */
  --color-iron:         #4A4640;   /* Muted text, placeholders */

  /* ── Colors: Text ── */
  --color-ash:          #8A8880;   /* Secondary text */
  --color-bone:         #B0ACA4;   /* Tertiary text */
  --color-parchment:    #F0EDE4;   /* Primary text */
  --color-body-text:    #C8C4BC;   /* Body copy */

  /* ── Colors: Accent ── */
  --color-blood:        #8B1A1A;   /* Primary CTA bg, active state */
  --color-ember:        #C94A1A;   /* Hover state (buttons + links) */
  --color-spark:        #E05A20;   /* Ghost button text, link-more */
  --color-rust:         #E87070;   /* Event tag: contest */
  --color-copper:       #E8824A;   /* Event tag: alt */

  /* ── Colors: UI ── */
  --color-border-input: #4A4640;
  --color-border-amber: #C49A2A;   /* Warning/required boxes */

  /* ── Typography ── */
  --font-display:       'Bebas Neue', sans-serif;
  --font-body:          'Barlow', sans-serif;
  --font-condensed:     'Barlow Condensed', sans-serif;

  /* ── Spacing scale ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  80px;

  /* ── Layout ── */
  --max-width:       1280px;
  --nav-height:      76px;
  --nav-height-mob:  66px;
  --radius-btn:      2px;
  --radius-card:     4px;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-med:  0.3s ease;

}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-obsidian);
  color: var(--color-body-text);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-parchment);
  line-height: 1.05;
  letter-spacing: 0.03em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.875rem); } /* 46px */
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.25rem; }

p {
  color: var(--color-body-text);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.8;
}

.eyebrow {
  font-family: var(--font-condensed);
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ember);
  display: block;
  margin-bottom: var(--space-sm);
}

.rule {
  width: 40px;
  height: 2px;
  background: var(--color-blood);
  margin: var(--space-md) 0 var(--space-lg);
  border: none;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.section-pad {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

/* Primary — Blood/Ember */
.btn-primary {
  background: var(--color-blood);
  border-color: var(--color-blood);
  color: var(--color-parchment);
}
.btn-primary:hover  { background: var(--color-ember); border-color: var(--color-ember); }
.btn-primary:active { background: var(--color-blood); border-color: var(--color-blood); }

/* Secondary — Steel */
.btn-secondary {
  background: var(--color-steel);
  border-color: var(--color-iron);
  color: var(--color-parchment);
}
.btn-secondary:hover { background: #3A3835; }

/* Ghost — outline */
.btn-ghost {
  background: transparent;
  border-color: var(--color-ember);
  color: var(--color-spark);
}
.btn-ghost:hover { background: rgba(201, 74, 26, 0.1); }

/* Full width */
.btn-full { width: 100%; }

/* Large */
.btn-lg {
  font-size: 1rem;
  padding: 15px 36px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-obsidian);
  border-bottom: 1px solid var(--color-forge);
  height: var(--nav-height);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 100%;
}

.site-nav__logo {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-nav__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-nav__logo-placeholder {
  width: 60px;
  height: 60px;
  background: var(--color-forge);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  color: var(--color-ash);
  letter-spacing: 0.06em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.site-nav__link {
  font-size: 0.6875rem; /* 11px */
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ash);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link.current-menu-item { color: var(--color-parchment); }

/* Contest / Sponsors hover submenus. Markup mirrors WordPress's default
   nav walker output (li.menu-item-has-children > ul.sub-menu) so this
   works unchanged whether the menu is the PHP fallback or a real
   wp-admin menu — see header.php pghlpw_nav_fallback(). */
.site-nav__links li.menu-item-has-children {
  position: relative;
}

/* Invisible hover "bridge" spanning the 14px gap between the link and
   .sub-menu (which sits at top:100% + margin-top:14px below). Without
   this, moving the mouse straight down from the link into the dropdown
   passes through a dead zone where nothing is hovered, so :hover on the
   <li> drops and the menu closes before the click lands — reported by
   Ferranti 2026-07-08 ("dropdown disappears" when going to click a
   submenu item). This bridge is a transparent, absolutely-positioned
   descendant of the <li>, so hovering it keeps the <li>:hover (and thus
   the submenu) active without changing any visible layout/spacing. */
.site-nav__links li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.site-nav__links li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  margin-bottom: 1px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.site-nav__links .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 14px;
  background: var(--color-forge);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  padding: 6px 0;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  z-index: 150;
}

.site-nav__links li.menu-item-has-children:hover > .sub-menu,
.site-nav__links li.menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

.site-nav__links .sub-menu li + li {
  border-top: 1px solid var(--color-steel);
}

.site-nav__links .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ash);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-nav__links .sub-menu a:hover {
  color: var(--color-parchment);
  background: rgba(255, 255, 255, 0.04);
}

.site-nav__spacer { flex: 1; }

.site-nav__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Cart icon — shared markup/component between desktop nav (site-nav__cta)
   and mobile nav (mob-nav__actions), rendered by pghlpw_render_cart_icon()
   in inc/woocommerce.php. Added 2026-08-15: there was previously no visual
   confirmation anywhere in the nav that an item had been added to cart. */
.pghlpw-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-body-text);
  flex-shrink: 0;
}

.pghlpw-cart-icon:hover { color: var(--color-parchment); }

.pghlpw-cart-icon__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-blood);
  color: var(--color-parchment);
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ── Iron tier strip ──
   Slim band under the top nav listing Iron tier sponsor NAMES (name-only
   recognition per the prospectus). Added 2026-07-19 per Patience meeting.
   Rendered by header.php only when at least one Iron sponsor exists. */
.iron-strip {
  background: var(--color-coal);
  border-bottom: 1px solid var(--color-forge);
  padding: 6px 0;
}

.iron-strip__inner {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
}

.iron-strip__label {
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ember);
  white-space: nowrap;
}

.iron-strip__name {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-bone);
  white-space: nowrap;
}

a.iron-strip__name:hover { color: var(--color-parchment); }

/* Mobile nav */
.mob-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-obsidian);
  border-bottom: 1px solid var(--color-forge);
  height: var(--nav-height-mob);
  padding: 0 var(--space-md);
  align-items: center;
  justify-content: space-between;
}

.mob-nav__logo {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.mob-nav__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mob-nav__actions .pghlpw-cart-icon {
  width: 36px;
  height: 36px;
}

.mob-nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  cursor: pointer;
  background: none;
  border: none;
}

.mob-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-parchment);
  border-radius: 1px;
}

/* Mobile menu drawer */
.mob-menu {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-height-mob);
  background: var(--color-obsidian);
  z-index: 99;
  padding: var(--space-xl) var(--space-md);
  flex-direction: column;
  gap: var(--space-md);
}

.mob-menu.is-open { display: flex; }

.mob-menu__link {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--color-parchment);
  border-bottom: 1px solid var(--color-steel);
  padding-bottom: var(--space-md);
  transition: color var(--transition-fast);
}

.mob-menu__link:hover { color: var(--color-ember); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: #0a0806;
}

/* Height set DIRECTLY from viewport width via clamp(), NOT aspect-ratio.
   Root cause of the "hero left-justified on large monitors" bug (Ferranti,
   confirmed by screenshot 2026-07-17): with `aspect-ratio: 16/9` +
   `max-height: 900px` on the section, once the viewport exceeded ~1600px
   Chrome transferred the 900px height cap BACK through the aspect ratio
   into the section's WIDTH — the hero collapsed to a 1600x900 block
   pinned to the left edge, exactly matching the measured geometry
   (screenshot showed a 1600x900 hero on a ~5400px viewport). Anything
   inside the box (absolute image, cover, overlay) was correct; the box
   itself was shrinking. clamp(360px, 56.25vw, 900px) produces identical
   heights at every width (56.25vw = 9/16 of viewport width) but a vw
   height can never feed back into width, so the section always spans the
   full viewport. Past ~1600px wide the 900px cap engages and
   .hero__image's object-fit:cover crops a slice off the top/bottom so
   the image still fills edge to edge — fill beats no-crop on big
   monitors. If a future hero image has a different native ratio, change
   56.25vw to (height/width x 100)vw. */
.hero--full {
  height: clamp(360px, 56.25vw, 900px);
}
.hero--short {
  height: clamp(200px, 28.125vw, 360px); /* 32:9 -> 28.125vw */
}

.hero__image {
  /* position:absolute + inset:0, matching .hero__overlay below, instead
     of a normal-flow block with height:100%. Fixed 2026-07-17 — once
     .hero--full's height came from aspect-ratio instead of a fixed px
     value, a normal-flow child's height:100% became unreliable
     (percentage heights need a genuinely definite parent height, and
     aspect-ratio + min/max-height together don't reliably count as one
     for a normal-flow child in every browser). That was silently
     shrinking the image's own box width on wide viewports — it looked
     like a cropping/centering bug but was actually the image failing to
     size against .hero at all. Absolute positioning fills the parent's
     established box directly and sidesteps the ambiguity entirely. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover, not contain — per Ferranti 2026-07-17 the hero must FILL the
     box on large monitors. On very wide screens the box is capped at
     max-height:900px, making it wider than 16:9; contain refused to crop
     and left dark bars either side. cover scales the image to fill and
     crops a slice off the top/bottom only in that capped case — at
     normal 16:9-ish viewports the ratios match and nothing is cropped.
     No larger source file needed; the graphic is 10667x6000. */
  object-fit: cover;
  object-position: center;
  /* Raised from 0.42 -- this is a deliberately designed hero graphic,
     not a generic background photo being dimmed for legibility, so it
     should read clearly rather than washed out. Overlay gradient below
     was softened to match, still protecting text at the bottom. */
  opacity: 0.82;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Softened from 0.25/0.65 per Ferranti 2026-07-14 ("reduce the
     opacity overlay") — still goes fully opaque at the very bottom so
     the parchment headline text (.hero__content, bottom-anchored)
     stays legible, just lighter through the rest of the image. */
  background: linear-gradient(
    180deg,
    rgba(14, 14, 14, 0.10) 0%,
    rgba(14, 14, 14, 0.40) 55%,
    var(--color-obsidian) 100%
  );
}

/* Vertically centered (was bottom-anchored) per Ferranti 2026-07-17 —
   the headline block now sits at the vertical middle of the hero image. */
.hero__content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

/* All hero text pure white per Ferranti 2026-07-17 — parchment/bone/ember
   were hard to read over the graphic now that the block sits mid-image
   where the overlay gradient is lightest. Text-shadow adds separation
   from busy areas of the artwork without darkening the whole image. */
.hero .eyebrow,
.hero__title,
.hero__subtitle {
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.hero .eyebrow {
  font-size: 0.875rem; /* up from the 11px sitewide default */
}

.hero__title {
  font-size: clamp(3.5rem, 9vw, 6.75rem); /* up from 3rem/8vw/5rem */
  line-height: 0.93;
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-size: clamp(1.375rem, 3vw, 2rem); /* up from 1.125rem/2.4vw/1.5rem */
  font-family: var(--font-condensed);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

/* Larger hero CTA to match the scaled-up text block. */
.hero__buttons .btn {
  font-size: 1rem;
  padding: 15px 36px;
}

.hero__buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ============================================================
   COUNTDOWN STRIP
   ============================================================ */

.countdown-strip {
  background: var(--color-forge);
  border-bottom: 1px solid var(--color-steel);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  gap: 36px;
}

.countdown-strip__label {
  font-family: var(--font-condensed);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-parchment);
  white-space: nowrap;
}

.countdown-strip__units {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.countdown-unit { text-align: center; }

.countdown-unit__num {
  font-family: var(--font-display);
  font-size: 2.5rem; /* 40px */
  color: var(--color-parchment);
  line-height: 1;
}

.countdown-unit__lbl {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-parchment);
  margin-top: 2px;
}

.countdown-strip__sep {
  font-family: var(--font-display);
  font-size: 1.625rem;
  color: var(--color-iron);
  line-height: 1;
  margin-top: 2px;
}


/* ============================================================
   EVENT CARDS
   ============================================================ */

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-steel);
}

.event-card {
  background: var(--color-forge);
  padding: 30px 26px;
  position: relative;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.event-card:hover { background: #242220; }

.event-card__tag {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-btn);
  background: rgba(139, 26, 26, 0.2);
  color: var(--color-rust);
  margin-bottom: var(--space-sm);
}

.event-card__tag--alt {
  background: rgba(201, 74, 26, 0.18);
  color: var(--color-copper);
}

.event-card__date {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-bone);
  margin-bottom: 7px;
}

.event-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-parchment);
  line-height: 1.05;
  margin-bottom: 7px;
}

.event-card__venue {
  font-size: 0.75rem;
  color: var(--color-ash);
}

/* Venue name doubles as a Google Maps link when we know the address
   (see pghlpw_maps_url() / pghlpw_venue_addresses() in functions.php).
   Underline + ember hover distinguishes it from the plain-text
   "Location TBD" venues, which stay unlinked .event-card__venue. */
.event-card__venue--link {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--color-steel);
  text-underline-offset: 2px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.event-card__venue--link:hover {
  color: var(--color-ember);
  text-decoration-color: var(--color-ember);
}

.event-card__arrow {
  position: absolute;
  top: 30px;
  right: 26px;
  color: var(--color-iron);
  font-size: 1.125rem;
  transition: color var(--transition-fast), right var(--transition-fast);
}

.event-card:hover .event-card__arrow {
  color: var(--color-ember);
  right: 20px;
}

/* ============================================================
   TITLE HOLDER CARDS
   ============================================================ */

.titleholders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.titleholder-card {
  background: var(--color-forge);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.titleholder-card:hover { border-color: var(--color-blood); }

.titleholder-card__img-wrap {
  height: 260px;
  overflow: hidden;
  background: var(--color-steel);
  position: relative;
}

.titleholder-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%);
  transition: filter var(--transition-med), transform var(--transition-med);
}

.titleholder-card:hover .titleholder-card__img {
  filter: grayscale(10%);
  transform: scale(1.03);
}

.titleholder-card__bar {
  height: 3px;
  background: var(--color-blood);
}

.titleholder-card__body {
  padding: 18px 20px;
}

.titleholder-card__role {
  font-family: var(--font-condensed);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: 6px;
  line-height: 1.3;
}

.titleholder-card__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  color: var(--color-parchment);
  margin-bottom: 4px;
}

.titleholder-card__year {
  font-size: 0.8125rem;
  color: var(--color-ash);
}

.titleholder-card__cta {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-spark);
}

.titleholder-card:hover .titleholder-card__cta { color: var(--color-ember); }

/* ============================================================
   TITLEHOLDER BIO FLYOUT
   Opened from any element with [data-titleholder-trigger] (see
   assets/js/main.js module 4). One overlay + panel per page, markup
   lives in footer.php so it's available site-wide — homepage teaser
   cards, and the future /titleholders/ archive and single templates,
   all reuse the same flyout.
   ============================================================ */

.titleholder-flyout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.75);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med);
}

.titleholder-flyout-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.titleholder-flyout-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 92vw);
  background: var(--color-forge);
  border-left: 1px solid var(--color-steel);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform var(--transition-med);
  overflow-y: auto;
  z-index: 501;
  /* Breathing room above the photo so it isn't flush against the very top
     of the viewport, where mobile browser chrome (address bar, etc.) can
     crop into it. */
  padding-top: 28px;
}

.titleholder-flyout-overlay.is-open .titleholder-flyout-panel {
  transform: translateX(0);
}

.titleholder-flyout-close {
  position: sticky;
  top: 0;
  float: right;
  margin: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-obsidian);
  border: 1px solid var(--color-steel);
  color: var(--color-parchment);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}

.titleholder-flyout-close:hover { border-color: var(--color-blood); color: var(--color-ember); }

.titleholder-flyout-photo-wrap {
  height: 340px;
  background: var(--color-steel);
  overflow: hidden;
}

.titleholder-flyout-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.titleholder-flyout-photo-wrap.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-iron);
  background: linear-gradient(160deg, var(--color-steel), var(--color-forge));
}

.titleholder-flyout-body {
  padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}

.titleholder-flyout-role {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: 6px;
}

.titleholder-flyout-name {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-parchment);
  line-height: 1;
  margin-bottom: 6px;
}

.titleholder-flyout-year {
  font-size: 0.8125rem;
  color: var(--color-ash);
  margin-bottom: var(--space-lg);
}

.titleholder-flyout-bio p {
  font-size: 0.9375rem;
  color: var(--color-body-text);
  line-height: 1.75;
  margin-bottom: var(--space-md);
}

.titleholder-flyout-bio p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .titleholder-flyout-photo-wrap { height: 260px; }
  .titleholder-flyout-body { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
}

/* ============================================================
   COMING SOON / UNDER CONSTRUCTION (launch-scope treatments)
   Added 2026-07-19 per Ferranti's launch reprioritization:
   - .coming-soon: full-page (or in-section) treatment for content
     deliberately held back at launch (Iron/Steel/Forge/Foundry
     sponsor pages, Galleries, Former Titleholders section, Vendors,
     Vendor application).
   - .under-construction: banner for pages that stay live but are
     visibly unfinished (Judges, Contestants).

   STANDING PROJECT CONVENTION (2026-07-25, per Ferranti — record this
   wherever the component is used, not just here):
   A page or section marked "Coming Soon" is NOT a development gap.
   The CSS/markup/routing for it is production-ready right now — the
   only thing pending is the real WordPress content (a confirmed
   sponsor, a compiled former-titleholders list, an opened application
   window, etc.) once WP Engine hosting exists. Don't treat a Coming
   Soon page as unfinished theme work in status updates or the task
   board; it's finished work intentionally not surfacing real data
   yet. Neither component takes an image — both are typography-only
   bands that inherit the page's existing hero/background.
   ============================================================ */

.coming-soon {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 120px;
  text-align: center;
}

.coming-soon__eyebrow {
  font-family: var(--font-condensed);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: 10px;
}

.coming-soon__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--color-parchment);
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 16px;
}

.coming-soon__text {
  font-size: 0.9375rem;
  color: var(--color-body-text);
  line-height: 1.75;
  margin-bottom: 28px;
}

.under-construction {
  background: var(--color-forge);
  border: 1px solid var(--color-border-amber);
  border-left: 4px solid var(--color-border-amber);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 14px 20px;
  margin: 0 auto var(--space-xl);
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  gap: 12px;
}

.under-construction__label {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-border-amber);
  white-space: nowrap;
}

.under-construction__text {
  font-size: 0.8125rem;
  color: var(--color-body-text);
  line-height: 1.6;
}

/* ============================================================
   TITLE CARDS — Contest page "Choose Your Title" CTA
   Punched up 2026-07-17 per Ferranti: this is the page's primary
   CTA, so the cards get a blood top bar, a subtly lifted gradient
   background, and an ember hover lift to stand apart from the
   plain forge info cards elsewhere on the page.
   ============================================================ */

.title-card {
  background: linear-gradient(180deg, #282019 0%, var(--color-forge) 55%);
  border: 1px solid var(--color-steel);
  border-top: 3px solid var(--color-blood);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.title-card:hover {
  border-color: var(--color-ember);
  border-top-color: var(--color-ember);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.title-card h3 {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.title-card p {
  font-size: 0.875rem;
  color: var(--color-bone);
  flex-grow: 1;
  margin-bottom: var(--space-md);
}

/* ============================================================
   ACCORDIONS (native <details>/<summary>, no JS)
   Added 2026-07-17 per Ferranti for the Contest page — Rules &
   Eligibility and Judging & Evaluation are broken out into one
   collapsible dropdown per contest. Reusable on any page.
   ============================================================ */

.accordion {
  background: var(--color-forge);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-sm);
  overflow: hidden;
}

.accordion > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-parchment);
  letter-spacing: 0.03em;
  transition: background var(--transition-fast);
}

.accordion > summary::-webkit-details-marker { display: none; }

.accordion > summary::after {
  content: '+';
  color: var(--color-ember);
  font-family: var(--font-condensed);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.accordion[open] > summary::after { content: '\2013'; }

.accordion > summary:hover { background: #242220; }

.accordion__body {
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-steel);
}

/* ============================================================
   LINK-MORE
   ============================================================ */

.link-more {
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-spark);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.link-more:hover { color: var(--color-ember); }

/* ============================================================
   STATS
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--color-steel);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat {
  background: var(--color-forge);
  padding: 28px 24px;
  text-align: center;
}

.stat__num {
  font-family: var(--font-display);
  font-size: 2.875rem;
  color: var(--color-parchment);
  line-height: 1;
}

.stat__accent { color: var(--color-ember); }

.stat__lbl {
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-top: 5px;
}

/* ============================================================
   GALLERY STRIP
   ============================================================ */

.gallery-strip {
  display: grid;
  /* 4 columns, not 5 — the "View All Media" CTA cell that used to be the
     5th grid item was removed from the homepage (front-page.php) 2026-07-13. */
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--color-steel);
}

.gallery-cell {
  height: 180px;
  overflow: hidden;
  position: relative;
  background: var(--color-forge);
  cursor: pointer;
}

.gallery-cell__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(55%);
  transition: filter 0.25s ease, transform var(--transition-med);
}

.gallery-cell:hover .gallery-cell__img {
  filter: grayscale(10%);
  transform: scale(1.05);
}

.gallery-cell--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--transition-fast);
}

.gallery-cell--cta:hover { background: #242220; }

.gallery-cell--cta__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-parchment);
}

.gallery-cell--cta__sub {
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ash);
}

/* ============================================================
   SPONSORS
   ============================================================ */

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-steel);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.sponsor-slot {
  background: var(--color-forge);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.sponsor-slot:hover { background: #242220; }

.sponsor-slot img {
  max-height: 48px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.sponsor-slot:hover img { opacity: 1; }

.sponsor-slot--cta {
  font-family: var(--font-condensed);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-blood);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sponsor-slot--cta:hover {
  background: var(--color-forge);
  color: var(--color-ember);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--color-obsidian);
  border-top: 1px solid var(--color-steel);
  padding: 56px var(--space-xl) 28px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--max-width);
  margin: 0 auto 40px;
}

/* Logo row — SCFC + PLP today. A 3rd logo (Foundry presenting sponsor)
   slots in via flex with no layout changes needed once one exists; see
   footer.php's $foundry_logo_id conditional. No visible placeholder box
   is reserved for it per Ferranti 2026-07-08 — nothing renders until a
   real logo is set. */
.site-footer__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.site-footer__logo {
  display: block;
  flex-shrink: 0;
}

.site-footer__logo--scfc,
.site-footer__logo--foundry {
  width: 84px;
  height: 84px;
}

.site-footer__logo--plp {
  width: 108px;
  height: 84px;
}

.site-footer__col-title {
  font-family: var(--font-condensed);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-md);
}

.site-footer__link {
  font-size: 0.75rem;
  color: var(--color-ash);
  display: block;
  margin-bottom: var(--space-sm);
  transition: color var(--transition-fast);
}

.site-footer__link:hover { color: var(--color-parchment); }

.site-footer__bottom {
  border-top: 1px solid var(--color-steel);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer__copy {
  font-size: 0.6875rem;
  color: var(--color-iron);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__social a,
.site-footer__social .site-footer__social-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-parchment);
  transition: color var(--transition-fast);
}

.site-footer__social .site-footer__social-disabled { color: var(--color-iron); }

.site-footer__social a:hover { color: var(--color-ember); }

.site-footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* ============================================================
   AGE GATE
   ============================================================ */

.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.97);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.age-gate.hidden { display: none; }

.age-gate__card {
  background: var(--color-forge);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.age-gate__title {
  font-size: 2.4rem;
  margin-bottom: var(--space-md);
}

.age-gate__text {
  margin-bottom: 2rem;
}

/* ============================================================
   FORMS (shared — used on application pages)
   ============================================================ */

.form-section {
  background: var(--color-forge);
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-card);
  padding: 2rem;
  margin-bottom: 2rem;
}

.form-section__header {
  font-size: 1.5rem;
  letter-spacing: 0.07em;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--color-blood);
  margin-bottom: 1.6rem;
}

.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
}

.field-full { grid-column: 1 / -1; }

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-label {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-bone);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.field-required { color: var(--color-blood); font-weight: 700; }

.field-helper {
  font-size: 0.78rem;
  color: var(--color-bone);
  font-style: italic;
  line-height: 1.4;
}

.form-input,
.form-textarea {
  background: var(--color-forge);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-card);
  color: var(--color-parchment);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.85rem;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-bone);
  opacity: 0.65;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--color-ember);
  box-shadow: 0 0 0 3px rgba(201, 74, 26, 0.18);
}

.form-textarea {
  resize: vertical;
  min-height: 96px;
}

/* ============================================================
   PAGE-SPECIFIC BACKGROUND ALTERNATES
   ============================================================ */

.bg-obsidian { background-color: var(--color-obsidian); }
.bg-forge    { background-color: var(--color-forge); }
.bg-coal     { background-color: var(--color-coal); }

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1024px) {
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .events-grid { grid-template-columns: 1fr; }
  .titleholders-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsors-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 768px) {
  .site-nav { display: none; }
  .mob-nav  { display: flex; }

  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Same 16/9 as desktop now, to match the real hero graphic's ratio
     and avoid letterboxing on mobile too. min-height:220px is close to
     what 16:9 naturally produces at typical phone widths (360-430px ->
     202-242px tall) — on the very narrowest phones this floor will
     letterbox slightly rather than let the hero get too short to read
     the headline over, which is the right trade-off. */
  .hero--full { height: clamp(220px, 56.25vw, 420px); }

  .hero__content {
    padding: 0 var(--space-md) var(--space-xl);
  }

  .hero__title { font-size: 3rem; }

  .countdown-strip {
    padding: 14px var(--space-md);
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .countdown-unit__num { font-size: 2rem; }

  .titleholders-grid { grid-template-columns: repeat(2, 1fr); }
  .titleholder-card__img-wrap { height: 170px; }

  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .gallery-cell { height: 110px; }

  .sponsors-grid { grid-template-columns: repeat(2, 1fr); }

  /* Countdown strip on phones. Added 2026-08-09: the strip is a flex row with a
     nowrap label plus four units and separators, which measured 439px against a
     390px viewport and put a horizontal scrollbar on the homepage. The label now
     sits on its own line and the units share the width beneath it. */
  .countdown-strip__label {
    white-space: normal;
    flex: 1 0 100%;
  }
  .countdown-strip__units {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-sm);
  }


  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .fields-grid {
    grid-template-columns: 1fr;
  }
  .field-full { grid-column: 1; }
}


/* ============================================================
   SPLIT (2-COLUMN) SECTIONS
   Added 2026-08-09. Several sections used an inline
   `grid-template-columns:1fr 1fr`, which a media query cannot
   override, so they never collapsed on phones. The homepage
   measured 439px against a 390px viewport and scrolled
   sideways. The column definition lives here now so it can
   collapse; the per-section gap/padding stays inline.
   auto-fit was deliberately NOT used: at 1200px it would
   produce three columns, not two.
   ============================================================ */

.plp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.plp-split > * { min-width: 0; }

@media (max-width: 768px) {
  .plp-split { grid-template-columns: 1fr; }
}


/* ============================================================
   FOOTER GRID, SMALL SCREENS
   Added 2026-08-09. The footer's two columns are 1fr 1fr, but
   grid items default to min-width:auto, so the brand column's
   min-content (logo row) refused to shrink: at a 320px viewport
   the tracks computed to 216px + 62px inside a 240px container
   and pushed the last column 22px off-screen on nearly every
   page. min-width:0 lets the tracks actually divide the space,
   and below 480px the columns stack outright.
   ============================================================ */

@media (max-width: 768px) {
  .site-footer__inner > * { min-width: 0; }
}

@media (max-width: 480px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}


/* ============================================================
   BUTTONS ON NARROW SCREENS
   Added 2026-08-09. .btn sets white-space:nowrap so labels stay
   on one line, but a long label ("Download Contestant Manual
   (PDF)") measured 316px inside a 280px content box at a 360px
   viewport and pushed the contest page 13px sideways. Buttons
   are now capped to their container, and below 560px long
   labels wrap instead of overflowing.
   ============================================================ */

.btn { max-width: 100%; }

@media (max-width: 560px) {
  .btn {
    white-space: normal;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* 3-column stat row. Same inline-grid problem as .plp-split: the
   columns could not collapse, so the prospectus ran 16px past a
   320px viewport. Added 2026-08-09. */
.plp-split-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.plp-split-3 > * { min-width: 0; }

@media (max-width: 560px) {
  .plp-split-3 { grid-template-columns: 1fr; }
}