/**
 * KICKOFFUSA visual direction
 * Type: Kumbh Sans (Rising Ballers–style geometric sans)
 * Palette: ink + chalk + gold · accent: burnt orange
 */

/* ── Global texture & typography ───────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4,
.section-title,
.site-nav .nav-brand span,
.event-countdown .countdown-event-name,
.unity-hero h1,
.unity-section h2,
.unity-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.05;
}

img {
  border-radius: 0;
}

/* ── Navigation ────────────────────────────────────────────── */
.site-nav {
  height: 72px;
  background: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 3px solid var(--accent);
  box-shadow: none;
}

.site-nav::after {
  display: none;
}

.site-nav .nav-brand span {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--chalk);
}

.site-nav .nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: rgba(237, 230, 214, 0.65);
  border-radius: 0;
}

.site-nav .nav-link::after {
  background: var(--accent);
  height: 3px;
  bottom: 4px;
}

.site-nav .nav-link.is-active {
  color: var(--chalk);
}

.site-nav .nav-link.is-active::before {
  background: rgba(255, 77, 0, 0.12);
  border-radius: 0;
}

/* ── Full-bleed video heroes (all pages) ─────────────────── */
body > main .video-wrap video,
body > main .video-wrap img {
  filter: brightness(0.5) contrast(1.15) saturate(0.85) !important;
  object-position: 60% center !important;
}

body > main .video-wrap .overlay {
  background: rgba(10, 10, 10, 0.58) !important;
}

/* Asymmetric editorial hero type */
body > main > div[style*="z-index: 1"] > div > div[style*="bottom: 120px"] {
  position: absolute !important;
  bottom: clamp(48px, 10vh, 120px) !important;
  left: clamp(20px, 5vw, 64px) !important;
  right: clamp(20px, 8vw, 120px) !important;
  transform: none !important;
  text-align: left !important;
  width: auto !important;
  max-width: none !important;
}

body > main > div[style*="z-index: 1"] > div > div[style*="bottom: 120px"] h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 7vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  color: var(--chalk) !important;
  margin-bottom: 20px !important;
}

body > main > div[style*="z-index: 1"] > div > div[style*="bottom: 120px"] h1 span {
  color: var(--accent) !important;
  display: block !important;
}

body > main > div[style*="z-index: 1"] > div > div[style*="bottom: 120px"] p {
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 2vw, 1.2rem) !important;
  font-weight: 400 !important;
  color: rgba(237, 230, 214, 0.8) !important;
  text-shadow: none !important;
  max-width: 28rem !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  line-height: 1.55 !important;
  border-left: 3px solid var(--gold);
  padding-left: 16px;
}

/* Accent slash on hero */
body > main > div[style*="z-index: 1"]::before {
  content: 'ATL · 5V5 · COMMUNITY';
  position: absolute;
  top: clamp(100px, 14vh, 160px);
  right: clamp(16px, 4vw, 48px);
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  letter-spacing: 0.22em;
  color: var(--accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  opacity: 0.9;
}

/* ── Dark content sections ─────────────────────────────────── */
#home-about,
#events-content,
#gallery,
.unity-cup-page,
body[style*="background: #000"] {
  background: var(--ink) !important;
}

/* Kill glassmorphism cards → editorial blocks */
#home-about [style*="backdrop-filter"],
#events-content [style*="backdrop-filter"],
#impact [style*="backdrop-filter"],
.unity-feature-card,
.event-countdown {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  border: 1px solid rgba(237, 230, 214, 0.14) !important;
  box-shadow: 6px 6px 0 rgba(255, 77, 0, 0.12) !important;
}

#home-about [style*="border-top: 3px solid"],
#impact [style*="border-top: 3px solid"] {
  border-top: 3px solid var(--accent) !important;
  border-radius: 0 !important;
}

#home-about h2,
#home-about h3,
#impact h2,
#impact h3,
#events-content h2,
#events-content h3,
#gallery h2,
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: var(--chalk) !important;
}

#home-about [style*="color: #fbbf24"],
#impact [style*="color: #fbbf24"],
#events-content [style*="color: #fbbf24"] {
  color: var(--gold) !important;
}

/* Metric numbers — oversized typographic moment */
#home-about [style*="font-size: clamp(40px"] {
  font-family: var(--font-display) !important;
  font-size: clamp(3rem, 7vw, 5rem) !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

/* CTA buttons */
#home-about a[style*="background: linear-gradient"],
#events-content a[style*="background: linear-gradient"],
.unity-btn--primary,
.btn.primary,
a.btn.primary {
  background: var(--accent) !important;
  color: var(--chalk) !important;
  border: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  box-shadow: 4px 4px 0 var(--gold) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#home-about a[style*="background: linear-gradient"]:hover,
#events-content a[style*="background: linear-gradient"]:hover,
.unity-btn--primary:hover,
.btn.primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--gold) !important;
}

/* ── Events page ───────────────────────────────────────────── */
.event-countdown {
  border-left: 4px solid var(--accent) !important;
  border-color: rgba(237, 230, 214, 0.14) !important;
}

.event-countdown .countdown-eyebrow {
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.2em;
}

.event-countdown .countdown-unit {
  border-radius: 0;
  background: rgba(237, 230, 214, 0.04);
  border-color: rgba(237, 230, 214, 0.1);
}

.event-countdown .countdown-unit [data-unit] {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--chalk);
}

/* ── Gallery ───────────────────────────────────────────────── */
.gallery-item {
  border-radius: 0;
  border: 1px solid rgba(237, 230, 214, 0.12);
  background: var(--ink);
  box-shadow: 4px 4px 0 rgba(255, 77, 0, 0.1);
}

.gallery-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(255, 77, 0, 0.18);
}

.gallery-item .media img,
.gallery-item .media video {
  border-radius: 0;
}

.filter-btn {
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border: 2px solid rgba(237, 230, 214, 0.25) !important;
  background: transparent !important;
  color: var(--chalk) !important;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--chalk) !important;
}

/* ── Shop (light section — chalk field) ────────────────────── */
#shop {
  background: var(--chalk) !important;
  color: var(--ink);
}

#shop h2,
.shop-impact-banner h3,
.shop-lifestyle h3,
#shop-products-wrap h3 {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  text-transform: uppercase;
}

.shop-impact-banner {
  background: #fff !important;
  border: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--gold) !important;
}

.shop-impact-banner h3 { color: var(--ink) !important; }
.shop-impact-banner p { color: #2a2a2a !important; }

#shop .shop-newsletter h3 {
  color: #fff !important;
}

.shop-lifestyle {
  border-radius: 0 !important;
  border: 1px solid rgba(10, 10, 10, 0.12) !important;
  box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.08) !important;
}

.shop-product-card {
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.1) !important;
}

.shop-product-card .add-btn {
  border-radius: 0 !important;
  background: var(--accent) !important;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Unity Cup ─────────────────────────────────────────────── */
.unity-hero {
  border-bottom: 4px solid var(--accent);
}

.unity-hero h1 {
  font-size: clamp(3rem, 9vw, 5.5rem) !important;
}

.unity-hero-date {
  color: var(--accent) !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.unity-badge {
  border-radius: 0 !important;
  background: var(--accent) !important;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.unity-team-card {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(255, 77, 0, 0.1);
}

.unity-team-logo-wrap {
  border-radius: 0 !important;
}

.unity-btn--outline {
  border-radius: 0 !important;
  border-color: var(--chalk) !important;
}

.unity-btn--outline:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--ink) !important;
  border-top: 3px solid var(--gold) !important;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: rgba(237, 230, 214, 0.6) !important;
}

/* ── FAQ / details ─────────────────────────────────────────── */
#events-content details {
  border-radius: 0 !important;
  border-left: 3px solid var(--gold) !important;
}

#events-content details summary {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0;
}

::selection {
  background: var(--accent);
  color: var(--chalk);
}

/* ── Mobile hero adjustments ───────────────────────────────── */
@media (max-width: 768px) {
  body > main > div[style*="z-index: 1"]::before {
    writing-mode: horizontal-tb;
    transform: none;
    top: 88px;
    right: auto;
    left: 20px;
    font-size: 0.7rem;
  }

  body > main > div[style*="z-index: 1"] > div > div[style*="bottom: 120px"] {
    left: 20px !important;
    right: 20px !important;
  }
}