/* Bromley LTSC — theme styles ported from the prototype's <style> block. */

html, body { background: #F6F1E8; color: #0F2A1D; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.display {
  font-family: var(--display-font, '"General Sans"'), 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.display .italic, .display em, .display i {
  font-family: var(--display-italic, '"Inter Tight"'), 'General Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* placeholder photo panel (used where a post has no featured image) */
.photo-ph {
  background-color: #E8DFC8;
  background-image: repeating-linear-gradient(135deg, rgba(15,42,29,0.05) 0 10px, rgba(15,42,29,0.00) 10px 20px);
  position: relative; overflow: hidden;
}
.photo-ph > .lbl {
  position: absolute; left: 12px; bottom: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #0F2A1D; opacity: 0.65;
  background: rgba(246,241,232,0.8); padding: 4px 8px; border-radius: 4px; backdrop-filter: blur(2px);
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.5s ease-out both; }

.nav-link { position: relative; }
.nav-link[data-active="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #2D5A3F;
}

[id] { scroll-margin-top: 96px; }
::selection { background: #C4623C; color: #FBF8F2; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* What's On tab underline */
.tab-btn[data-active="true"] { border-color: #0F2A1D; color: #0F2A1D; }

/* Sports page pill tabs */
.sport-tab[data-active="true"] { background: #0F2A1D; color: #FBF8F2; border-color: #0F2A1D; }

/* Pickleball dot — lime-green, visible on both light and active-dark backgrounds */
.sport-dot--pickle { background-color: #9DC535; }

/* Fixtures + social-sessions sport filters, membership form sport buttons */
.fixture-filter[data-active="true"],
.session-filter[data-active="true"] { background: #0F2A1D; color: #FBF8F2; border-color: #0F2A1D; }
.sport-option[data-active="true"]  { background: #C4623C; color: #FBF8F2; border-color: #C4623C; }

/* Post gallery lightbox (PhotoSwipe): ink backdrop, caption under the slide */
.pswp { --pswp-bg: #0F2A1D; --pswp-icon-color: #FBF8F2; --pswp-icon-color-secondary: #0F2A1D; }
/* Tailwind's base `video { max-width: 100% }` collapses a video slide to 0 wide: its
   zoom wrapper is absolutely positioned with no width of its own. The plugin sizes the video itself. */
.pswp__zoom-wrap video { max-width: none; }
.pswp__bltsc-caption {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: min(90vw, 40rem); padding: 6px 12px; border-radius: 6px;
  background: rgba(15,42,29,0.7); color: #FBF8F2; font-size: 14px; line-height: 1.45; text-align: center;
  pointer-events: none;
}
.pswp__bltsc-caption[hidden] { display: none; }

/* Rich-text body (ACF wysiwyg output) */
.bltsc-prose > p { margin: 0 0 1.15em; }
.bltsc-prose > p:last-child { margin-bottom: 0; }
.bltsc-prose a { text-decoration: underline; text-underline-offset: 2px; }
.bltsc-prose ul { list-style: disc; padding-left: 1.25em; margin: 0 0 1.15em; }
/* Older posts (brought over from the previous site) use headings, numbered lists and
   the odd inline photo; Tailwind's reset would otherwise flatten them into body text. */
.bltsc-prose ol { list-style: decimal; padding-left: 1.25em; margin: 0 0 1.15em; }
.bltsc-prose h2, .bltsc-prose h3, .bltsc-prose h4, .bltsc-prose h5, .bltsc-prose h6 {
  font-family: "General Sans", Inter, system-ui, sans-serif; font-weight: 500; color: #0F2A1D; line-height: 1.25; margin: 1.4em 0 0.5em;
}
.bltsc-prose h2 { font-size: 1.6em; }
.bltsc-prose h3 { font-size: 1.3em; }
.bltsc-prose h4, .bltsc-prose h5, .bltsc-prose h6 { font-size: 1.1em; }
.bltsc-prose img { display: inline-block; vertical-align: top; border-radius: 6px; margin: 0 0.5rem 0.5rem 0; }
.bltsc-prose figure { max-width: 100%; margin: 0 0 1.15em; }
.bltsc-prose figcaption { margin-top: 0.25rem; font-size: 0.875rem; color: #5B6B5F; }
.bltsc-prose blockquote { border-left: 2px solid #D9D1BE; padding-left: 1em; font-style: italic; }

/* What's On pagers (News & events, Fixtures), built by bltscBuildPager() in main.js:
   ← Newer · 1 … 4 5 6 … 27 · Older →, and "Page 5 of 27" instead of the numbers on phones. */
.bltsc-pager { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.bltsc-pager__step { white-space: nowrap; flex-shrink: 0; }
.bltsc-pager__step:disabled { opacity: 0.3; cursor: not-allowed; }
.bltsc-pager__nums { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 0; }
.bltsc-pager__gap { width: 1.25rem; text-align: center; font-size: 0.75rem; color: #5B6B5F; }
.bltsc-pager__status { display: none; font-size: 0.75rem; color: #5B6B5F; white-space: nowrap; }
@media (max-width: 639px) {
  .bltsc-pager__nums { display: none; }
  .bltsc-pager__status { display: block; }
}

/* Inline rich text on the Coaching page (wysiwyg fields inside cards and the intro).
   Bold words take the full ink colour — or paper on the green cards — matching the
   hand-set <span> emphasis the fields replaced. */
.bltsc-rich > p { margin: 0 0 0.75em; }
.bltsc-rich > p:last-child { margin-bottom: 0; }
.bltsc-rich strong, .bltsc-rich b { font-weight: 500; color: #0F2A1D; }
.bltsc-rich--paper strong, .bltsc-rich--paper b { color: #FBF8F2; }
.bltsc-rich a { text-decoration: underline; text-underline-offset: 2px; }

/* Sticky in-page sub-nav (About anchors, Coaching "Jump to", Sports tabs).
   Pins flush under the sticky site header — h-16 mobile / h-20 desktop. */
.bltsc-subnav { position: sticky; top: 4rem; z-index: 10; }
@media (min-width: 768px) { .bltsc-subnav { top: 5rem; } }

/* Scroll targets on those pages clear the header + the pinned sub-nav.
   Declared after [id] above so it wins on equal specificity. */
.bltsc-anchor { scroll-margin-top: 8.5rem; }
@media (min-width: 768px) { .bltsc-anchor { scroll-margin-top: 9.5rem; } }

/* About anchor nav: active-section underline, driven by the scroll spy in
   assets/js/main.js ([data-scrollspy]). Same 2px club-green rule as .nav-link;
   bottom:-12px sits it on the bar's bottom border (py-3), inside the clip box. */
.subnav-link { position: relative; transition: color .2s ease; }
.subnav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px;
  background: #2D5A3F; transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.subnav-link[data-active="true"] { color: #0F2A1D; }
.subnav-link[data-active="true"]::after { transform: scaleX(1); }
/* Sections take focus after a sub-nav click (keyboard continues from there); no ring on a whole section. */
.bltsc-anchor[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .subnav-link, .subnav-link::after { transition: none; }
}

/* header states driven by assets/js/main.js */
.site-header { position: sticky; top: 0; z-index: 40; transition: background-color .03s ease-out, color .03s ease-out, backdrop-filter .03s ease-out; }
.site-header[data-over-video="true"] { background: transparent; color: #FBF8F2; }
.site-header[data-over-video="false"] { background: rgba(246,241,232,0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #0F2A1D; }
.site-header[data-over-video="true"] .hero-scrim {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 7rem;
  background: linear-gradient(to bottom, rgba(15,42,29,0.6), transparent); pointer-events: none;
}