/*
Theme Name: ArenaCapacity
Theme URI: https://arenacapacity.com
Author: ArenaCapacity
Author URI: https://arenacapacity.com
Description: Custom FSE block theme for ArenaCapacity.com — sports venue bag policies, capacities, and game day guides.
Version: 1.1.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arenacapacity
*/

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Colors */
  --color-primary: #0a1f44;
  --color-primary-dark: #060f22;
  --color-accent: #f5a623;
  --color-accent-dark: #d4891a;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6f9;
  --color-border: #dde1e7;
  --color-text: #1a1a2e;
  --color-text-muted: #6b7280;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ========================================
   BASE STYLES
   ======================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force footer link colors */
.site-footer,
.site-footer .wp-block-columns,
.site-footer .wp-block-column {
  color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer a,
.site-footer li a,
.site-footer .wp-block-list a {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
.site-footer li a:hover {
  color: #f5a623 !important;
}

.site-footer ul,
.site-footer .wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.site-footer li {
  margin-bottom: 0.25rem;
}

.site-footer .wp-block-columns {
  gap: 2rem !important;
}

.site-footer h3 {
  margin-bottom: 0.75rem !important;
}

.site-footer .wp-block-separator {
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.site-footer .wp-block-list.site-footer__links {
  display: flex !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .wp-block-list.site-footer__links li {
  margin: 0 !important;
}

/* Header flex alignment — logo + nav vertically centered */
header > .wp-block-group {
  align-items: center;
}

/* Site logo sizing */
header .wp-block-site-logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ========================================
   HEADER NAV — desktop (white links on navy)
   Scoped to EXCLUDE the mobile overlay container.
   The overlay is .wp-block-navigation__responsive-container.is-menu-open
   which sits INSIDE .wp-block-navigation, so we target only links
   that are NOT inside .is-menu-open.
   ======================================== */
header .wp-block-navigation__responsive-container:not(.is-menu-open) a,
header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.85) !important;
}

header .wp-block-navigation__responsive-container:not(.is-menu-open) a:hover {
  color: #ffffff !important;
}

/* Shop Now CTA (desktop) */
header .wp-block-navigation__responsive-container:not(.is-menu-open) .site-nav__link--cta .wp-block-navigation-item__content,
header .wp-block-navigation__responsive-container:not(.is-menu-open) .site-nav__link--cta a {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  padding: 6px 20px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
}

/* ========================================
   HAMBURGER BUTTON — accent orange on navy
   ========================================
   WP's nav block uses `fill: currentColor` on the SVG and
   `color: currentColor` on the button.  The button inherits
   `color` from the <nav>, which itself inherits from the
   header group.  Because neither the <nav> nor the header set
   an explicit text `color`, the button ends up with the body
   text color (#1a1a2e — nearly invisible on #0a1f44 navy).

   Fix: force `color` on the <nav> itself when it sits inside
   the header, so the hamburger inherits orange via currentColor.
   Use doubled-class selectors to beat WP's own specificity tricks.
   ======================================== */

/* Give the <nav> in the header an explicit color so ALL
   children (including the hamburger) inherit orange.         */
header .wp-block-navigation.wp-block-navigation {
  color: var(--color-accent) !important;
}

/* Hamburger button — belt-and-suspenders override             */
header button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
header button.wp-block-navigation__responsive-container-open:focus,
header button.wp-block-navigation__responsive-container-open:hover {
  color: var(--color-accent) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: none !important;
  border: none !important;
}

header button.wp-block-navigation__responsive-container-open svg,
header button.wp-block-navigation__responsive-container-open:focus svg,
header button.wp-block-navigation__responsive-container-open:hover svg {
  fill: var(--color-accent) !important;
  width: 28px;
  height: 28px;
}

/* ========================================
   MOBILE NAV OVERLAY (white bg, navy links)
   ========================================
   WP's inline CSS uses these high-specificity !important rules:
     .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)
       { color: inherit !important }
     .wp-block-navigation__responsive-container.is-menu-open
       .wp-block-navigation-item { color: inherit !important }

   When the overlay IS open, `inherit` chains up to the <nav>
   which we set to orange above — making links orange on white.
   We break that chain on the overlay container itself with the
   doubled .is-menu-open.is-menu-open selector (matches WP's
   own :not() trick) and force navy text.
   ======================================== */

/* Overlay container — white background, navy text base        */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
}

/* Nav items inside open overlay — force navy, break inherit   */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-page-list {
  color: var(--color-primary) !important;
}

/* Links and link-content spans                                */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open a {
  color: var(--color-primary) !important;
  font-size: var(--text-lg) !important;
  padding: var(--space-3) 0 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open.is-menu-open a:hover {
  color: var(--color-accent-dark) !important;
}

/* Close X button — navy on white overlay                      */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
  min-width: 44px !important;
  min-height: 44px !important;
  color: var(--color-primary) !important;
}

/* Shop Now CTA inside overlay                                 */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .site-nav__link--cta a {
  background: var(--color-accent) !important;
  color: var(--color-primary) !important;
  padding: var(--space-3) var(--space-5) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  justify-content: center;
  margin-top: var(--space-2);
}

/* Remove gaps between header/hero/footer */
.wp-site-blocks > header + *,
.wp-site-blocks > main + footer,
.wp-site-blocks > * + footer {
  margin-top: 0 !important;
}

/* Archive title - force white on navy */
.archive-title {
  color: #ffffff !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  color: var(--color-primary);
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
}

/* In-content links — accent orange to pop against body text */
.entry-content a:not(.cta-clear-bags__btn):not(.venue-card):not(.wp-block-navigation-item__content),
.wp-block-post-content a:not(.cta-clear-bags__btn):not(.venue-card):not(.wp-block-navigation-item__content) {
  color: #d4891a !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content a:not(.cta-clear-bags__btn):not(.venue-card):hover,
.wp-block-post-content a:not(.cta-clear-bags__btn):not(.venue-card):hover {
  color: #f5a623 !important;
}

/* Affiliate auto-linked keywords — always orange */
a.ac-affiliate-link {
  color: #d4891a !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.ac-affiliate-link:hover {
  color: #f5a623 !important;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   LAYOUT
   ======================================== */
.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group {
  flex: 1;
}

/* Content width */
.ac-content-width {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.ac-wide-width {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* ========================================
   BADGE COMPONENT
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge--allowed {
  background: #dcfce7;
  color: var(--color-success);
}

.badge--denied {
  background: #fef2f2;
  color: var(--color-danger);
}

.badge--check {
  background: #fffbeb;
  color: #b45309; /* Darkened from var(--color-warning) #d97706 for WCAG AA contrast (5.4:1 on #fffbeb) */
}

.badge--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* ========================================
   AD SLOT CONTAINERS
   ======================================== */
.ac-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ac-ad-slot--mid {
  min-height: 0;
  margin: var(--space-8) 0;
}

@media (min-width: 768px) {
  .ac-ad-slot--mid {
    min-height: 250px;
  }
}

.ac-ad-slot--bottom {
  min-height: 250px;
  margin: var(--space-8) 0;
}

.ac-ad-slot--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 90;
  display: none;
}

.ac-ad-slot--sticky__close {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  /* 44px touch target via padding beyond visible border */
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.ac-ad-slot--sticky__close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* ========================================
   CTA CLEAR BAGS
   ======================================== */
.cta-clear-bags {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0d2b5e 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-10) 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: #fff;
  overflow: hidden;
}

.cta-clear-bags__body {
  flex: 1;
}

.cta-clear-bags__eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.cta-clear-bags__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.cta-clear-bags__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-5);
}

.cta-clear-bags__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-primary);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  box-sizing: border-box;
}

.cta-clear-bags__btn:hover {
  background: var(--color-accent-dark);
  color: var(--color-primary);
}

/* ========================================
   RELATED VENUES
   ======================================== */
.related-venues {
  margin: var(--space-10) 0;
}

.related-venues__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-6);
}

/* ========================================
   AFFILIATE DISCLOSURE
   ======================================== */
.affiliate-disclosure {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-8) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.affiliate-disclosure__label {
  color: var(--color-text);
}

/* ========================================
   TAP / ACTIVE STATES
   ======================================== */
.league-pill:active {
  transform: scale(0.96);
  box-shadow: none;
}

@media (max-width: 767px) {
  .ac-ad-slot--sticky {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Front page: flex column for CSS order reordering */
  body.home main.wp-block-group {
    display: flex;
    flex-direction: column;
  }

  /* ========================================
     HERO MOBILE OVERRIDES
     Duplicated from hero.css for reliability —
     hero.css may not load if file_exists() fails
     on staging or if the file isn't deployed.
     ======================================== */
  .hero {
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-6);
  }

  .hero__subtitle {
    display: none !important;
  }

  .hero__stats {
    display: none !important;
  }

  .hero__search {
    margin-bottom: 0;
    width: 100%;
  }

  .hero__search-input {
    padding-right: 100px;
  }

  /* ========================================
     SINGLE POST — MOBILE SIDE PADDING
     WP constrained layout can strip padding
     on small screens. Force consistent gutter.
     ======================================== */
  .wp-site-blocks main,
  .wp-site-blocks .entry-content,
  .wp-site-blocks .wp-block-post-content {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  /* Archive title box — compact on mobile */
  .archive .wp-block-group[style*="0a1f44"] {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-6) !important;
  }

  .archive-title {
    font-size: var(--text-3xl) !important;
  }

  /* Sticky footer ad body clearance */
  body.single-post {
    padding-bottom: 60px;
  }

  /* H1 responsive sizing on single posts */
  .single-post .wp-block-post-title,
  .single-post h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* CTA clear bags — stack vertically on mobile */
  .cta-clear-bags {
    flex-direction: column;
    padding: var(--space-6);
    gap: var(--space-4);
  }

  .cta-clear-bags__btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: var(--space-4) var(--space-6);
  }
}