:root {
  --club-primary: #0b5d3b;      /* deep green - water/riverbank feel */
  --club-primary-dark: #073d27;
  --club-accent: #d99a2b;       /* warm amber accent */
}

body {
  font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  color: #1f2a24;
}

.bg-club { background-color: var(--club-primary) !important; }
.bg-club-dark { background-color: var(--club-primary-dark) !important; }
.text-club { color: var(--club-primary) !important; }

.btn-club {
  background-color: var(--club-primary);
  border-color: var(--club-primary);
  color: #fff;
}
.btn-club:hover, .btn-club:focus {
  background-color: var(--club-primary-dark);
  border-color: var(--club-primary-dark);
  color: #fff;
}

.btn-outline-club {
  color: var(--club-primary);
  border-color: var(--club-primary);
}
.btn-outline-club:hover {
  background-color: var(--club-primary);
  color: #fff;
}

.border-club { border: 2px solid var(--club-primary) !important; }

.navbar-logo { height: 16px; width: 16px; object-fit: contain; }

.hero-club {
  min-height: 360px;
  background: linear-gradient(rgba(7,61,39,0.75), rgba(7,61,39,0.75)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="800" height="400" fill="%230b5d3b"/><path d="M0 300 Q200 250 400 300 T800 300 V400 H0 Z" fill="%23073d27" opacity="0.6"/></svg>');
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Admin-uploaded hero image (Admin > Homepage > Hero header). The
   --hero-bg-image custom property is set inline per-page (it depends
   on the uploaded file's own URL, not something CSS alone can know),
   with the same dark overlay as the default graphic kept in front of
   it for text legibility, whatever the photo looks like. */
.hero-image-mode {
  background: linear-gradient(rgba(7,61,39,0.55), rgba(7,61,39,0.55)), var(--hero-bg-image);
  background-size: cover;
  background-position: center;
}

/* Admin-uploaded hero background video - an absolutely positioned
   <video> filling the section behind the text, with the same dark
   overlay in front of it as the image mode, so any footage stays
   readable underneath the club name/buttons. */
.hero-video-mode {
  overflow: hidden;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,61,39,0.55);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}

/* Per-venue hero banner (venue.php, Admin > Venues > [venue] > Details >
   Hero image) - shorter than the homepage's hero-club since it's just
   a page banner, not the site's main landing moment, and always shows
   a photo (no default graphic/video modes here, so it reuses
   .hero-image-mode directly rather than needing its own background
   rules). Bottom-aligned content (align-items-end on the section) so
   the venue name sits just above the fold of the photo rather than
   dead center. */
.venue-hero {
  min-height: 260px;
}
.venue-hero-breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
}
.venue-hero-breadcrumb .breadcrumb-item.active {
  color: rgba(255,255,255,0.75);
}

/* Rendered rich-text fields (currently just a venue's "Full
   description" - see render_rich_text() in includes/functions.php,
   admin/venue-edit.php's Quill editor). Only needs spacing rules for
   the handful of tags that editor's toolbar can actually produce
   (see RICH_TEXT_ALLOWED_TAGS) - headings sized down to fit inside a
   page that already has its own <h1>/<h3>, sensible list indentation,
   and a club-coloured accent border on blockquotes to match the
   site's own visual language rather than the browser's plain default. */
.rich-text h2 { font-size: 1.35rem; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.rich-text h3 { font-size: 1.15rem; margin-top: 1.1rem; margin-bottom: 0.5rem; }
.rich-text p { margin-bottom: 0.75rem; }
.rich-text ul, .rich-text ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.rich-text blockquote {
  border-left: 3px solid var(--club-accent);
  padding-left: 1rem;
  margin: 1rem 0;
  color: #555;
  font-style: italic;
}

/* Homepage feature tiles (index.php, managed at Admin > Homepage >
   Feature tiles) - a plain white bordered box with a bare icon on top
   read as flat/boring against the page background. First pass (a
   tinted border + resting shadow + a plain icon circle) still looked
   too plain to the owner, so this is a second, more deliberate pass
   combining three elements that were mocked up as separate options
   and picked from directly: a soft green-to-amber tinted background
   wash, a solid green accent stripe down the left edge, and a short
   amber underline beneath each heading. Still the same layout, copy,
   and icon choices as always - just more visual texture than a flat
   white box. */
.feature-card {
  background: linear-gradient(160deg, rgba(11, 93, 59, 0.06), rgba(217, 154, 43, 0.05));
  border-color: rgba(11, 93, 59, 0.12) !important;
  border-left: 4px solid var(--club-primary) !important;
  box-shadow: 0 .125rem .625rem rgba(7, 61, 39, 0.06);
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.feature-card:hover {
  box-shadow: 0 .5rem 1.25rem rgba(7, 61, 39, 0.16);
  transform: translateY(-3px);
}
.feature-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(217, 154, 43, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card-icon i {
  font-size: 1.35rem;
  color: var(--club-accent) !important;
}
.feature-card h4::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--club-accent);
  margin-top: 0.5rem;
  border-radius: 2px;
}

.catch-thumb, .venue-gallery-img {
  height: 220px;
  object-fit: cover;
}

/* Public venues listing (venues.php) - card grid with a cover photo,
   hover-lift like .feature-card, and a placeholder for venues that
   don't have a photo uploaded yet. */
.venue-card {
  background: #fff;
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.venue-card:hover {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
  transform: translateY(-3px);
}
.venue-card-placeholder {
  height: 220px;
  background: linear-gradient(135deg, var(--club-primary), var(--club-primary-dark));
  color: rgba(255,255,255,0.5);
  font-size: 2.5rem;
}

/* --- Photo lightbox triggers (venue galleries, catch reports) ------- */
.gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  cursor: zoom-in;
}
.gallery-expand {
  /* Centered at the top, not top-right: on a Bootstrap carousel (the
     venue hero image), the prev/next arrow controls are invisible
     full-height hit zones over the left/right 15% of the image, so
     anything placed in a top corner sits underneath one of them and
     can't be clicked - top-center is clear of both. Kept centered here
     too (rather than top-right) even on plain, non-carousel images
     like catch report thumbnails, just for visual consistency between
     the two galleries. */
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  pointer-events: none;
}

.venue-thumb-strip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.venue-thumb-btn {
  flex: 0 0 auto;
  width: 84px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: zoom-in;
}
.venue-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.15s ease;
}
.venue-thumb-btn:hover img {
  transform: scale(1.08);
}

/* Shared by every full-screen photo lightbox on the site (venue
   galleries, catch reports, and any future one) - each instance just
   needs its own modal/carousel id pair wired up in main.js's
   initLightbox() and the .lightbox-modal class on its <div class="modal">. */
.lightbox-modal .modal-content {
  background-color: #000;
  height: 100%;
}
.lightbox-modal .carousel,
.lightbox-modal .carousel-inner,
.lightbox-modal .carousel-item {
  height: 100%;
}
.lightbox-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.lightbox-slide img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.lightbox-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  padding: 0 4rem;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}
.lightbox-counter {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 10;
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

footer a.link-light {
  text-decoration: none;
}
footer a.link-light:hover {
  text-decoration: underline;
}

.navbar-brand i { color: var(--club-accent); }