/* ============================================================
   WordPress Overrides
   Admin bar fix, WP menu active states, CF7 form compat
   ============================================================ */

/* Logo image — replaces text-based logo.
   Heights tuned for the vertical-stacked logo (basketball over wordmark)
   so the "Melvin Bray" / "ACADEMY" text stays legible. */
.logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
}

.logo-img--footer {
  height: 88px;
}

.site-header.scrolled .logo-img {
  height: 56px;
}

@media (max-width: 768px) {
  .logo-img {
    height: 56px;
  }
  .logo-img--footer {
    height: 72px;
  }
  .site-header.scrolled .logo-img {
    height: 48px;
  }
}

/* Hide old text logo elements when image logo is used */
.logo-img + .logo-mark,
.logo-img + .logo-text,
.logo-img ~ .logo-mark,
.logo-img ~ .logo-text {
  display: none;
}

/* Admin bar pushes down fixed header */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* WP nav menu active states — match static .nav-link.active */
.current-menu-item > a.nav-link,
.current_page_item > a.nav-link,
.current-menu-ancestor > a.nav-link {
  color: var(--clr-orange) !important;
}

.current-menu-item > a.nav-link::after,
.current_page_item > a.nav-link::after {
  width: 100%;
}

/* Mobile nav active states */
.mobile-nav .current-menu-item > a.mobile-nav-link,
.mobile-nav .current_page_item > a.mobile-nav-link {
  color: var(--clr-orange);
}

/* CF7 form compatibility — match existing form styles */
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 .wpcf7-not-valid-tip {
  color: var(--clr-error);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  font-family: var(--ff-heading);
}

.wpcf7 .wpcf7-response-output {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  margin-top: 1rem;
  border: none;
}

.wpcf7 .wpcf7-mail-sent-ok,
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: #2ECC71;
}

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: var(--clr-error);
}

/* Remove WP default margins on CF7 elements */
.wpcf7 p {
  margin: 0;
}

/* Partner logos — home page strip */
.partners-strip .partner-logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.partners-strip .partner-logo img:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .partners-strip .partner-logo img {
    height: 32px !important;
    max-width: 120px;
  }
}

/* Partner logos on Partners page — white cards, uniform sizing */
.partner-logo-grid .card .card-body img {
  max-width: 180px;
  max-height: 100px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Hero background video */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero--video .hero-bg-overlay {
  background: linear-gradient(to bottom,
    rgba(6, 14, 26, 0.85) 0%,
    rgba(6, 14, 26, 0.75) 50%,
    rgba(6, 14, 26, 0.95) 75%,
    rgba(6, 14, 26, 1) 90%
  );
}

/* Camp poster on Schedule page */
.camp-poster-img {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Thank You page slideshow — dynamic height per slide */
.page-template-page-thank-you .testimonial-track {
  transition: height 0.3s ease;
  align-items: flex-start;
}

/* Thank You page photo carousel — hide excessive dots for many slides */
.page-template-page-thank-you .testimonial-dots {
  flex-wrap: wrap;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  gap: 4px;
}

.page-template-page-thank-you .testimonial-dot {
  width: 8px;
  height: 8px;
}

/* Ensure carousel images are centered */
.testimonial-slide img {
  display: block;
  margin: 0 auto;
}

/* Fix testimonial nav arrows on dark backgrounds */
.section--dark .testimonial-btn {
  color: var(--clr-gray-200);
  border-color: var(--clr-gray-500);
}

.section--dark .testimonial-btn:hover {
  color: var(--clr-white);
  border-color: var(--clr-orange);
  background: var(--clr-orange);
}

/* Also fix for section--gray backgrounds (Thank You page slideshow) */
.section--gray .testimonial-btn {
  color: var(--clr-navy);
  border-color: var(--clr-gray-300);
}

/* ============================================================
   Mobile: Override inline grid styles that prevent stacking
   Targets About preview (front-page) and Coach bio (about page)
   ============================================================ */
@media (max-width: 768px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns:1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-xl) !important;
  }
}

/* Hide hero scroll indicator on mobile — overlaps CTA buttons */
@media (max-width: 768px) {
  .hero-scroll {
    display: none !important;
  }
}

/* ============================================================
   Mobile: Prevent horizontal overflow from reveal transforms
   reveal-right uses translateX(30px) before animating in,
   which extends content beyond the viewport on narrow screens.
   overflow-x: clip contains the overflow without creating a
   new scroll container (unlike overflow-x: hidden).
   ============================================================ */
@media (max-width: 768px) {
  .section {
    overflow-x: clip;
  }
}

/* ============================================================
   Mobile nav: fit all items without overflow
   The mobile nav (visible at max-width:900px) has 8-9 links at
   2.5rem/40px + 32px gap = 886px total, exceeding most phones.
   Reduce font/gap so everything fits, with scroll as fallback.
   ============================================================ */
.mobile-nav {
  overflow-y: auto;
  padding: var(--sp-xl) var(--sp-lg);
  gap: var(--sp-lg);
}

.mobile-nav .nav-link {
  font-size: 2rem;
}

@media (max-height: 700px) {
  .mobile-nav {
    gap: var(--sp-md);
  }

  .mobile-nav .nav-link {
    font-size: 1.75rem;
  }
}

@media (max-height: 550px) {
  .mobile-nav {
    gap: var(--sp-sm);
  }

  .mobile-nav .nav-link {
    font-size: 1.5rem;
  }
}

/* CF7 — hide the loading spinner next to the submit button.
   The form already has visual feedback via field state; the spinner is
   off-brand and unnecessary for our use case. */
.wpcf7-spinner {
  display: none !important;
}