/* =============================================================
   Cardiff Squash — site-wide custom styles
   Built on top of Bootstrap 5. Override variables here and add
   component-specific styles below.
   ============================================================= */

:root {
  --sq-green:       #1d4e2a;
  --sq-green-light: #2a6b3c;
  --sq-gold:        #e8c84a;
  --sq-dark:        #12281a;
}

/* --- Utility spacing ---------------------------------------- */
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }

/* --- Buttons ------------------------------------------------- */
.btn-sq-green {
  background-color: var(--sq-green);
  border-color:     var(--sq-green);
  color:            #fff;
}
.btn-sq-green:hover, .btn-sq-green:focus {
  background-color: var(--sq-green-light);
  border-color:     var(--sq-green-light);
  color:            #fff;
}
.btn-sq-gold {
  background-color: var(--sq-gold);
  border-color:     var(--sq-gold);
  color:            var(--sq-dark);
  font-weight:      600;
}
.btn-sq-gold:hover, .btn-sq-gold:focus {
  background-color: #d4b43a;
  border-color:     #d4b43a;
  color:            var(--sq-dark);
}

/* --- Site banner (full-bleed artwork above the nav, every page) --- */
/* Full width at the image's own aspect ratio, never cropped. `auto`
   means each banner drives its own height, so swapping in thinner
   artwork needs no CSS change. A page can reserve a specific ratio by
   setting --sq-banner-aspect (see site-banner.html).               */
.sq-site-banner {
  background-color: var(--sq-dark); /* no white flash before paint; matches nav */
}
.sq-banner-img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: var(--sq-banner-aspect, auto);
  object-fit:   contain; /* only bites if --sq-banner-aspect is overridden */
}

/* --- Navbar -------------------------------------------------- */
.sq-navbar {
  background-color: var(--sq-dark);
  padding:          0.5rem 0;
}
/* Tighten nav links so 9 items fit on one row without wrapping */
.sq-navbar .nav-link {
  font-size:  0.875rem;
  padding-left:  0.5rem !important;
  padding-right: 0.5rem !important;
  white-space: nowrap;
}

/* --- Navbar logo -------------------------------------------- */
.sq-nav-logo {
  width:        auto;
  height:       40px;
  object-fit:   contain;
}

/* --- How-it-works step icons --------------------------------- */
.sq-step-icon {
  width:            64px;
  height:           64px;
  border-radius:    50%;
  background-color: var(--sq-green);
  color:            var(--sq-gold);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        1.5rem;
}

/* --- Court cards --------------------------------------------- */
.sq-court-card { border: none; transition: transform .15s, box-shadow .15s; }
.sq-court-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

.sq-court-img {
  height:           140px;
  background-color: var(--sq-green);
}

/* --- Pricing teaser banner ----------------------------------- */
.sq-pricing-teaser {
  background:
    linear-gradient(135deg, rgba(18,40,26,.88) 0%, rgba(29,78,42,.80) 100%);
  padding: 4rem 1rem;
}

/* --- What's On event cards ---------------------------------- */
.sq-event-card {
  transition: transform .15s, box-shadow .15s;
}
.sq-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* --- Page hero image (optional, inner pages) ---------------- */
.sq-page-hero {
  width:      100%;
  max-height: 400px;
  overflow:   hidden;
}
.sq-page-hero-img {
  width:      100%;
  max-height: 400px;
  object-fit: cover;
  display:    block;
}

/* --- Image lightbox ----------------------------------------- */
.sq-lightbox {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.85);
  z-index:         2000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2rem;
  cursor:          zoom-out;
}
.sq-lightbox-img {
  max-width:  100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  cursor:     default;
}
.sq-lightbox-close {
  position:   absolute;
  top:        1rem;
  right:      1.25rem;
  background: none;
  border:     none;
  color:      #fff;
  font-size:  2rem;
  line-height: 1;
  cursor:     pointer;
  opacity:    .8;
}
.sq-lightbox-close:hover { opacity: 1; }
.sq-event-img-zoom { cursor: zoom-in; }

/* Image card: constrain image height, object-fit to handle poster aspect ratios */
.sq-event-img {
  max-height:  400px;
  width:       100%;
  object-fit:  contain;
  background-color: #f8f9fa;
}

/* Text only: green left accent bar */
.sq-event-text-accent {
  height:           4px;
  background-color: var(--sq-green);
  border-radius:    var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
}

/* --- Card header accent ------------------------------------- */
.sq-card-header {
  background-color: var(--sq-green);
  color:            #fff;
}

/* --- Availability slot buttons ------------------------------ */
.sq-slot-btn {
  font-size: .85rem;
  transition: background-color .1s;
}

/* --- Footer -------------------------------------------------- */
.sq-footer {
  background-color: var(--sq-dark);
}

/* --- Auth / booking overlay modal --------------------------- */
.modal-backdrop-custom {
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,.55);
  z-index:          1050;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          1rem;
}
.modal-dialog-custom {
  width:      100%;
  max-width:  480px;
  position:   relative;
}

/* --- Prose (CMS-managed markdown content) ------------------- */
.sq-prose h2 { color: var(--sq-green); margin-top: 1.75rem; }
.sq-prose h3 { color: var(--sq-green-light); }
.sq-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.sq-prose th, .sq-prose td { padding: .5rem .75rem; border: 1px solid #dee2e6; }
.sq-prose th { background-color: #f8f9fa; font-weight: 600; }

/* --- Bootstrap text colour helpers -------------------------- */
.text-sq-green { color: var(--sq-green) !important; }
.text-white-75 { color: rgba(255,255,255,.75); }

/* --- x-cloak: hide Alpine elements before initialisation ---- */
[x-cloak] { display: none !important; }