/* HillSkills design polish — spacing tokens, contrast, de-slop overrides */

:root {
  --section-x: 40px;
  --section-y: 100px;
  --section-y-mobile: 72px;
  --page-header-pad: 100px var(--section-x) 80px;
  --ink: #b4b4c8;
  --ink-muted: #a8a8be;
  --ink-subtle: #8e8ea4;
  --ink-heading: #f0f0f0;
  --ink-on-accent: #ffffff;
  --accent: #ff7a1a;
  --accent-secondary: #d91cb5;
  --surface-dark: #040406;
  --surface-base: #07070a;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-md: 18px;
  --text-lg: 20px;
}

/* ── Nav: solid bar, no glass ─────────────────────────────────── */
nav {
  background: var(--surface-base) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── Typography & contrast ────────────────────────────────────── */
body {
  color: var(--ink);
  font-size: var(--text-base);
}

/* Body copy */
.body-text,
.hero-sub,
.svc-desc,
.page-sub,
.faq-a,
.cta-sub,
.club-sub,
.contact-sub {
  color: var(--ink-muted) !important;
}

.body-text { font-size: var(--text-md) !important; }
.hero-sub { font-size: clamp(18px, 2.2vw, 24px) !important; }
.svc-desc { font-size: var(--text-base) !important; }
.page-sub,
.cta-sub { font-size: var(--text-md) !important; }
.club-sub { font-size: var(--text-lg) !important; }
.faq-a,
.contact-sub { font-size: var(--text-md) !important; }

.faq-q {
  font-size: var(--text-base) !important;
  color: var(--ink-heading) !important;
}

.form-success p {
  color: var(--ink-muted) !important;
  font-size: var(--text-base) !important;
}

/* Labels & eyebrows */
.hero-eyebrow,
.eyebrow,
.section-eyebrow {
  font-size: var(--text-xs) !important;
}

.hero-eyebrow {
  color: var(--ink-subtle) !important;
}

.form-label,
.page-note {
  color: var(--ink-subtle) !important;
}

.form-label {
  font-size: var(--text-xs) !important;
}

.page-note {
  font-size: var(--text-md) !important;
}

/* Feature lists & venues */
.feature-text,
.venue-name,
.feature-text--plain {
  color: var(--ink-muted) !important;
}

.feature-text,
.venue-name,
.feature-text--plain,
.feature-text--featured,
.tier-feature-text {
  font-size: var(--text-base) !important;
}

.feature-text--featured,
.tier-feature-text--featured {
  color: var(--ink-on-accent) !important;
}

.feature-check,
.tier-feature-check {
  font-size: var(--text-sm) !important;
}

/* Stat cards */
.stat-card-label {
  color: var(--ink-muted) !important;
  font-size: var(--text-sm) !important;
}

/* Pricing cards */
.badge {
  font-size: var(--text-2xs) !important;
}

.tier-label,
.tier-label--plain,
.tier-label--featured {
  font-size: var(--text-xs) !important;
}

.tier-label--plain {
  color: var(--ink-subtle) !important;
}

.tier-label--featured {
  color: rgba(255, 255, 255, 0.9) !important;
}

.price-per,
.price-per--plain,
.price-per--featured {
  font-size: var(--text-sm) !important;
}

.price-per--plain {
  color: var(--ink-subtle) !important;
}

.price-per--featured {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Nav & footer */
.nav-links a {
  font-size: var(--text-sm) !important;
  color: var(--ink-subtle) !important;
}

.nav-cta {
  font-size: var(--text-sm) !important;
}

.footer-copy,
.footer-links a {
  font-size: var(--text-sm) !important;
  color: var(--ink-subtle) !important;
}

/* Links & CTAs */
.svc-link {
  font-size: var(--text-xs) !important;
}

.contact-link {
  font-size: var(--text-sm) !important;
  color: var(--ink-muted) !important;
}

.cross-link p {
  font-size: var(--text-base) !important;
  color: var(--ink-subtle) !important;
}

/* Tier program cards (services page) */
.tier-card-title {
  font-family: 'League Spartan', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--ink-heading);
  margin-bottom: 8px;
}

.tier-card-title--featured {
  color: var(--ink-on-accent);
}

.tier-card-price {
  font-size: var(--text-base);
  color: var(--accent);
}

.tier-card-price--featured {
  color: rgba(255, 255, 255, 0.92);
}

.tier-feature-text {
  color: var(--ink-muted);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-grad,
.price-btn {
  font-size: var(--text-base) !important;
}

/* Form inputs */
.form-input,
.form-textarea,
.form-select {
  font-size: var(--text-base) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.hero-h1,
.page-h1,
.section-h2,
.club-h2,
.contact-h2,
.faq-h2,
.cta-h2 {
  text-wrap: balance;
}

.hero-h1 {
  font-size: clamp(52px, 10vw, 96px) !important;
}

.page-h1 {
  font-size: clamp(52px, 9vw, 96px) !important;
}

.cta-h2 {
  font-size: clamp(44px, 7vw, 80px) !important;
}

/* Solid accent replaces gradient text everywhere except home hero */
.grad-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--accent) !important;
  background-clip: unset !important;
  color: var(--accent) !important;
}

/* impeccable-disable gradient-text — sole hero gradient; all other headings use solid accent */
.hero-h1 .grad-text {
  background: linear-gradient(135deg, #ff7a1a 0%, #d91cb5 55%, #8b00d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Remove decorative glow blobs ─────────────────────────────── */
.hero-glow-wrap,
.about-glow,
.club-glow-wrap,
.contact-glow,
.page-header-glow,
.pricing-glow,
.locations-glow,
.cta-glow {
  display: none !important;
}

.hero-logo {
  height: clamp(104px, 16vw, 168px) !important;
  width: auto !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45)) !important;
}

/* Softer pricing shadows — no magenta glow */
.price-card--plain {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

.price-card--featured {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* ── Uniform section spacing ──────────────────────────────────── */
.page-header {
  padding: var(--page-header-pad) !important;
}

.about,
.club,
.contact,
.faq,
.locations,
.cta-banner {
  padding: var(--section-y) var(--section-x) !important;
}

.services-section,
.pricing-section,
.gallery-section {
  padding: 0 var(--section-x) var(--section-y) !important;
}

/* Back-to-back sections on same background */
.locations + .locations {
  padding-top: 48px !important;
}

/* ── Hide repetitive section eyebrows (keep page-header / hero) */
.section-eyebrow {
  display: none !important;
}

.section-h2,
.club-h2,
.contact-h2,
.faq-h2 {
  margin-top: 0 !important;
}

/* ── FAQ accordion: grid reveal, no fixed max-height ──────────── */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  max-height: unset !important;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer > .faq-a,
.faq-answer > p {
  overflow: hidden;
  min-height: 0;
}

.faq-answer.open {
  grid-template-rows: 1fr;
  padding-bottom: 20px;
}

/* ── Pricing CTA hierarchy: quiet non-featured buttons, opaque badge ── */
/* Badge was translucent white on a gradient card — composited contrast was
   as low as ~2.3:1. Solid dark background holds contrast on any card. */
.badge {
  background: var(--surface-dark) !important;
}

/* Non-featured tier buttons previously used the same loud gradient as the
   featured card's own CTA, so every button on a pricing page shouted
   equally. Quiet surface here lets the featured (white) button read as
   the one true recommendation. */
.price-btn--plain {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.price-btn--plain:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

.cross-link a {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.cross-link a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-content {
    animation: none !important;
  }

  .faq-answer {
    transition: none;
  }
}