/*
 * Jim & Tim — Section Styles
 * wavlt-network child theme | jnt-sections.css
* Version: 1.5.4
 *
 * 1.4.0 — Add Section 7 (Fan Gallery): dark strip, 5-col square mosaic, 2×2 featured cell, brand-red hover, ghost CTA
 * 1.3.0 — Add accessible Source disclosure (Details block) to .jnt-testimonial
 *

 * Site: dev.jimntim.com → jimntim.com
 *
 * ARCHITECTURE RULE: This file is Jim & Tim ONLY.
 * No rules in this file may reference or affect:
 *   - gcs-sections.css
 *   - gcs-header.css
 *   - wavlt-goodrichcaroling.json
 *   - Any Goodrich Caroling or other spoke site
 *
 * Token reference (from wavlt-jimntim.json):
 *   --wp--preset--color--brand             #800001  Dark Red
 *   --wp--preset--color--brand-accent      #FAF8F5  Warm White
 *   --wp--preset--color--brand-alt         #663399  Royal Purple
 *   --wp--preset--color--brand-alt-accent  #FAF8F5  Warm White
 *   --wp--preset--color--contrast          #1A1A1A  Near Black
 *   --wp--preset--color--contrast-accent   #999999  Light Gray (dark bg ONLY)
 *   --wp--preset--color--base              #FAF8F5  Warm White
 *   --wp--preset--color--base-accent       #333333  Dark Gray
 *   --wp--preset--color--tint              #F0EEF0  Lavender Mist
 *   --wp--preset--color--border-base       #ffcc00  Gold
 *   --wp--preset--color--border-contrast   #996600  Dark Gold
 *
 *   --wp--preset--font-family--lora        Lora, Georgia, Times New Roman, serif
 *   --wp--preset--font-family--raleway     Raleway, Trebuchet MS, Arial, sans-serif
 *
 * Usage rules enforced by this file:
 *   - contrast-accent (#999999) — dark backgrounds ONLY, never on light
 *   - brand-alt (#663399)       — light backgrounds ONLY, never on #1A1A1A
 *   - border-base (#ffcc00)     — decorative/borders ONLY, never body text on light
 */


/* ============================================================
   @FONT-FACE DECLARATIONS
   Self-hosted woff2 — no Google Fonts CDN dependency
   WAVLT Network standard: all fonts self-hosted
   font-display: swap — required for Core Web Vitals / LCP
   Path: /wp-content/themes/wavlt-network/fonts/
   Version: v37
   ============================================================ */

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/lora-v37-latin-700italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-500italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/raleway-v37-latin-600italic.woff2') format('woff2');
}


/* ============================================================
   GLOBAL BASE — Jim & Tim
   Body, text, background
   ============================================================ */

body.jimntim,
.jimntim body {
	font-family: var(--wp--preset--font-family--lora);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}


/* ============================================================
   TYPOGRAPHY — FLUID SCALE
   CSS clamp() — mobile-first, no media query required
   Mobile min → Desktop max
   WCAG: 18px minimum body text
   ============================================================ */

body {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18px → 20px */
	line-height: 1.7;
}

h1 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(2.5rem, 2rem + 2vw, 4rem); /* 40px → 64px */
	line-height: 1.15;
}

h2 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28px → 36px */
	line-height: 1.2;
}

h3 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem); /* 22px → 28px */
	line-height: 1.25;
}

h4 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 700;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18px → 22px */
	line-height: 1.3;
}

h5, h6 {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 400;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */
	line-height: 1.4;
}


/* ============================================================
   LINKS — LIGHT BACKGROUNDS
   Royal Purple #663399 on Base #FAF8F5 = 7.93:1 AAA
   Royal Purple #663399 on Tint #F0EEF0 = 7.28:1 AAA
   Underline satisfies WCAG 1.4.1 non-color distinction
   ============================================================ */

a:link:not(.wp-element-button) {
  color: var(--wp--preset--color--brand-alt);
  text-decoration: underline;
}

a:visited:not(.wp-element-button) {
  color: var(--wp--preset--color--brand-alt);
  text-decoration: underline;
}

a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   LINKS — DARK BACKGROUNDS (contrast sections, hero)
   Royal Purple #663399 on #1A1A1A = 2.07:1 FAIL
   Warm White #FAF8F5 on #1A1A1A = 16.42:1 AAA
   Gold #ffcc00 on #1A1A1A = 11.51:1 AAA (hover only)
   ============================================================ */

.has-contrast-background-color a:link,
.has-contrast-background-color a:visited,
.wp-block-cover a:link,
.wp-block-cover a:visited {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
}

.has-contrast-background-color a:hover,
.wp-block-cover a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: underline;
}

.has-contrast-background-color a:focus,
.wp-block-cover a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   LINKS — BRAND RED BACKGROUNDS
   Warm White #FAF8F5 on Brand #800001 = 10.33:1 AAA
   Gold #ffcc00 on Brand #800001 = 3.26:1 AA large only (hover)
   ============================================================ */

.has-brand-background-color a:link,
.has-brand-background-color a:visited {
	color: var(--wp--preset--color--brand-accent);
	text-decoration: underline;
}

.has-brand-background-color a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: underline;
}

.has-brand-background-color a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   NAVIGATION
   Raleway 500 — nav standard
   Touch targets: 44×44px minimum (WCAG 2.5.5)
   ============================================================ */

.wp-block-navigation a {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 500;
	text-decoration: none;
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--border-base);
	text-decoration: none;
}

.wp-block-navigation a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   BUTTONS
   Raleway 600 — UI standard
   Touch targets: 44×44px minimum (WCAG 2.5.5)
   Brand Red bg + Warm White text = 10.33:1 AAA
   Hover: Brand Alt bg + Warm White text = 7.93:1 AAA
   ============================================================ */

.wp-block-button__link,
.wp-element-button {
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 600;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-accent);
	border: 2px solid transparent;
	min-height: 44px;
	padding: 0.625rem 1.5rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--wp--preset--color--brand-alt);
	color: var(--wp--preset--color--brand-alt-accent);
	border-color: transparent;
}

.wp-block-button__link:focus,
.wp-element-button:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   SECTION BACKGROUNDS
   Tint (#F0EEF0) — alternate sections, subtle zone separation
   contrast-accent (#999999) scoped to dark bg ONLY
   Gold (#ffcc00) — decorative/borders ONLY, never body text on light
   ============================================================ */

.has-tint-background-color {
	background-color: var(--wp--preset--color--tint);
}

/* Muted text: dark bg only — enforces usage rule */
.has-contrast-background-color .has-contrast-accent-color {
	color: var(--wp--preset--color--contrast-accent);
}

/* Gold as border/decorative element — block-level */
.jnt-gold-border {
	border-color: var(--wp--preset--color--border-base);
}

/* Gold on dark bg (decorative) — AAA 11.51:1 */
.has-contrast-background-color .jnt-gold-accent {
	color: var(--wp--preset--color--border-base);
}


/* ============================================================
   IMAGES — LAZY LOAD EXCLUSIONS
   LiteSpeed filter targets img tag classes directly.
   TEC uses PNG base64 placeholders (independent of LiteSpeed GIF).
   Exclusions added via PHP filter in functions.php — not CSS.
   This comment block is a placeholder for future lazy load work.
   ============================================================ */


/* ============================================================
   TOUCH TARGETS — GLOBAL ENFORCEMENT
   WCAG 2.5.5: 44×44px minimum on all interactive elements
   ============================================================ */

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
label[for] {
	min-height: 44px;
	min-width: 44px;
}


/* ============================================================
   HEADER — JNT HEADER BAR
   v1.0.1 additions
   Background: Base #FAF8F5 — logo fully visible on warm white
   Sticky: locks at top on scroll, pushes content down (a11y preferred)
   Gold bottom border: decorative rule only
   z-index 100: above page content, below overlays/modals
   ============================================================ */

.jnt-header-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 60px;
}


/* ============================================================
   HEADER — LOGO TOUCH TARGET
   WCAG 2.5.5: 44×44px minimum
   Logo block width set to 44 in block attrs — CSS enforces
   the link wrapper meets the touch target requirement
   ============================================================ */

.jnt-nav-logo a,
.jnt-nav-logo .wp-block-site-logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}


/* ============================================================
   HEADER — SITE TITLE
   Color: Contrast #1A1A1A on Base #FAF8F5 = 16.42:1 AAA
   Touch target: padding ensures 44px minimum height (WCAG 2.5.5)
   No underline on site title link — not a body content link
   font-variant: small-caps — Lora supports true small caps
   ============================================================ */

.jnt-nav-title a,
.jnt-nav-title a:link,
.jnt-nav-title a:visited {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.jnt-nav-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.jnt-nav-title a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   HEADER — NAV LINKS ON LIGHT BACKGROUND
   #1A1A1A on #FAF8F5 = 16.42:1 AAA
   Hover: Brand Red #800001 on Base = 10.33:1 AAA
   Override any global link color that bleeds into nav context
   ============================================================ */

.jnt-header-bar .wp-block-navigation a,
.jnt-header-bar .wp-block-navigation a:link,
.jnt-header-bar .wp-block-navigation a:visited {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.jnt-header-bar .wp-block-navigation a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.jnt-header-bar .wp-block-navigation a:focus {
	outline: 3px solid var(--wp--preset--color--border-base);
	outline-offset: 4px;
}


/* ============================================================
   HEADER — BOOK US BUTTON
   Brand Red #800001 bg + Brand Accent #FAF8F5 text = 10.33:1 AAA
   Raleway 600 uppercase — UI standard
   Touch target: min-height 44px (WCAG 2.5.5)
   Hover: Brand Alt #663399 bg = 7.93:1 AAA
   ============================================================ */

.jnt-nav-cta .wp-block-button__link,
.jnt-nav-cta.wp-block-button .wp-block-button__link {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 0.5rem 1.25rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================
   HERO — TAGLINE GOLD FRAGMENT
   v1.0.2 additions
   <em> is italic by default; this adds the gold token.
   Gold #ffcc00 on #1A1A1A = 11.51:1 AAA
   ============================================================ */

.jnt-hero-tagline em {
	color: var(--wp--preset--color--border-base);
}


/* ============================================================
   HEADER — NAV ITEM VERTICAL CENTERING
   v1.0.2 additions
   Nav links fall through to display:block (text top-aligns).
   flex + align-items:center matches site title / CTA.
   min-height preserves 44px touch target (WCAG 2.5.5).
   ============================================================ */

.jnt-header-bar .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ============================================================
   SECTION 2 — THE STORY        (single-wrapper, structural CSS)
   One class on the section Group: .jnt-story-section
   Inner elements targeted by position — no per-block classes.
   Fonts inherit globally (Lora headings / Raleway body);
   only the numeric display elements override to serif.
   ============================================================ */

.jnt-story-section { padding-block: clamp(3rem, 8vw, 6rem); }

/* two-column row */
.jnt-story-section .jnt-story-cols { gap: clamp(2rem, 5vw, 4rem); }

/* photo column + corner overlay */
.jnt-story-section .jnt-story-photo-col { position: relative; }
.jnt-story-section .jnt-story-photo-col img {
  width: 100%; height: auto; display: block; border-radius: 2px;
}
.jnt-story-section .jnt-story-photo-col .wp-block-group {        /* overlay box */
  position: absolute; right: 0; bottom: 0; margin: 0;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 0.75rem 1.25rem; text-align: center; line-height: 1;
}
.jnt-story-section .jnt-story-photo-col .wp-block-group > p:first-child { /* year number */
  font-family: "Lora", serif; font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600; margin: 0;
}
.jnt-story-section .jnt-story-photo-col .wp-block-group > p:last-child {  /* "Years" */
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.7rem; margin: 0.25rem 0 0;
}

/* copy column */
.jnt-story-section .jnt-story-copy-col > p:first-child {        /* eyebrow */
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.8rem; font-weight: 600; margin: 0 0 0.5rem;
  color: var(--wp--preset--color--contrast); opacity: 0.65;    /* accent swap point */
}
.jnt-story-section .jnt-story-copy-col > h2 {                   /* title */
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15;
  margin: 0 0 1.25rem;
}
.jnt-story-section .jnt-story-copy-col > h2 ~ p {               /* body paragraphs */
  font-size: 1.05rem; line-height: 1.7; margin: 0 0 1rem;
}

/* stat row (full width, below the columns) */
.jnt-story-section .jnt-story-stats {
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  padding-block-start: 2rem; text-align: center;
  border-top: 1px solid
    color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}
.jnt-story-section .jnt-story-stats .wp-block-column > p:first-child {   /* number */
  font-family: "Lora", serif; font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600; margin: 0;
}
.jnt-story-section .jnt-story-stats .wp-block-column > p:last-child {    /* label */
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.75rem; margin: 0.25rem 0 0; opacity: 0.7;
}

/* shortcode-driven numbers (self-wrapped span survives shortcode_unautop) */
.jnt-story-section .jnt-story-photo-col .jnt-years {
  display: block; line-height: 1;
  font-family: "Lora", serif; font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
}
.jnt-story-section .jnt-story-stats .jnt-years {
  display: block;
  font-family: "Lora", serif; font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---- Section 2 colors → wireframe accents (brand red + gold) ---- */
.jnt-story-section .jnt-story-photo-col .wp-block-group {        /* overlay: gold badge, dark text */
  background: var(--wp--preset--color--border-base);
  color: var(--wp--preset--color--contrast);
}
.jnt-story-section .jnt-story-copy-col > p:first-child {         /* "Who We Are" eyebrow */
  color: var(--wp--preset--color--brand);
  opacity: 1;
}
.jnt-story-section .jnt-story-stats .jnt-years,                  /* "Years Together" number */
.jnt-story-section .jnt-story-stats .wp-block-column > p:first-child {   /* 7.5 and 60+ numbers */
  color: var(--wp--preset--color--brand);
}

/* ============================================================
   SECTION 3 — WHAT WE PLAY (Setlist)
   Single wrapper: .jnt-setlist-section; cards styled structurally.
   ============================================================ */
.jnt-setlist-section {
  background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast));
  padding-block: clamp(3rem, 8vw, 6rem);
}
.jnt-setlist-header {
  text-align: center; max-width: 600px; margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.jnt-setlist-header > p:first-child {           /* eyebrow "The Setlist" */
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.8rem; font-weight: 600; margin: 0 0 0.75rem;
  color: var(--wp--preset--color--brand);
}
.jnt-setlist-header > h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem;
}
.jnt-setlist-header > p:last-child {            /* intro line */
  font-size: 1.05rem; line-height: 1.6; margin: 0;
  color: var(--wp--preset--color--base-accent);
}
.jnt-setlist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.jnt-setlist-card {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  border-right:  1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.jnt-setlist-grid > .jnt-setlist-card { margin-block-start: 0; margin-top: 0; }
.jnt-setlist-card:nth-child(3n) { border-right: none; }
.jnt-setlist-card > p:first-child {             /* artist name */
  font-family: "Lora", serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 0.25rem;
  color: var(--wp--preset--color--contrast);
}
.jnt-setlist-card > p:last-child {              /* song titles */
  font-size: 0.85rem; line-height: 1.5; margin: 0;
  color: var(--wp--preset--color--base-accent);
}
.jnt-setlist-cta { text-align: center; margin-top: clamp(2rem, 5vw, 3rem); }
.jnt-setlist-cta .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--brand);
  border: 2px solid var(--wp--preset--color--brand); border-radius: 2px;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600;
  padding: 0.85rem 2.25rem;
}
.jnt-setlist-cta .wp-block-button__link:hover,
.jnt-setlist-cta .wp-block-button__link:focus {
  background: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand-accent);
}
@media (max-width: 781px) {
  .jnt-setlist-grid { grid-template-columns: 1fr; }
  .jnt-setlist-card { border-right: none; }
}

/* ============================================================
   SECTION 4 — WATCH & LISTEN
   Single wrapper: .jnt-watch-section (Group; bg = Contrast preset).
   Dark section, gold-hairline video frame, gold-stroke years badge.
   Colors on #1A1A1A:  border-base #ffcc00 (decor) 11.51:1 AAA ·
   brand-accent #FAF8F5 (text) 16.42:1 AAA · contrast-accent #999999
   (muted, dark-bg only) 5.3:1 AA. Eyebrow is GOLD here, not brand red
   (red on #1A1A1A fails). Wireframe weights: frame 15%, divider/stroke 20%.
   ============================================================ */

.jnt-watch-section {
  padding-block: clamp(3rem, 8vw, 6rem);
  color: var(--wp--preset--color--brand-accent);
  position: relative;
  overflow: hidden;
}
.jnt-watch-section::before {                 /* subtle scanline texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px);
}
.jnt-watch-section > * { position: relative; z-index: 1; }

/* header */
.jnt-watch-section .jnt-watch-header {
  text-align: center; max-width: 600px; margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.jnt-watch-section .jnt-watch-header > p:first-child {       /* eyebrow */
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.8rem; font-weight: 600; margin: 0 0 0.75rem;
  color: var(--wp--preset--color--border-base);
}
.jnt-watch-section .jnt-watch-header > h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15;
  margin: 0 0 1rem; color: var(--wp--preset--color--brand-accent);
}
.jnt-watch-section .jnt-watch-header > p:last-child {        /* subcopy */
  font-size: 1.05rem; line-height: 1.6; margin: 0;
  color: var(--wp--preset--color--contrast-accent);
}

/* video frame — core YouTube embed (responsive 16:9 wrapper) */
.jnt-watch-section .wp-block-embed {
  max-width: 760px; margin-inline: auto; margin-block: 0;
}
.jnt-watch-section .wp-block-embed__wrapper {
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--border-base) 15%, transparent);
  border-radius: 4px; overflow: hidden;
}

/* gold divider */
.jnt-watch-section .wp-block-separator {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--border-base) 20%, transparent);
  max-width: 1100px; margin: clamp(2.5rem, 6vw, 3.5rem) auto; opacity: 1;
}

/* years badge */
.jnt-watch-section .jnt-watch-badge {
  text-align: center; margin-top: clamp(2rem, 5vw, 3rem);
}
.jnt-watch-section .jnt-watch-badge .jnt-years {            /* big outlined number */
  display: block; line-height: 1;
  font-family: "Lora", serif; font-weight: 700;
  font-size: clamp(4rem, 12vw, 7.5rem);
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--wp--preset--color--border-base) 20%, transparent);
}
.jnt-watch-section .jnt-watch-badge p {                     /* caption */
  text-transform: uppercase; letter-spacing: 0.25em;
  font-size: 0.8rem; margin: 0.5rem 0 0;
  color: var(--wp--preset--color--contrast-accent);
}

@media (max-width: 781px) {
  .jnt-watch-section .wp-block-embed { max-width: 100%; }
}

/* ============================================================
   SECTION 5 — WHY BOOK US
   Single wrapper: .jnt-booking-section. Light section, subtle gray
   ground (Section 3 technique) so warm-white cards separate — no pure
   #fff. 4 venue-type cards · venue logo row (slots hold real <img>) ·
   dark testimonial. Tokens remapped from wireframe: card border &
   logo slots use color-mix hairlines, NOT live base-accent (#333).
   ============================================================ */

.jnt-booking-section {
  background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast));
  padding-block: clamp(3rem, 8vw, 6rem);
}
.jnt-booking-section > * { max-width: 1100px; margin-inline: auto; }

/* header */
.jnt-booking-section .jnt-booking-header {
  text-align: center; max-width: 640px;
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.jnt-booking-section .jnt-booking-header > p:first-child {     /* eyebrow */
  text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.8rem; font-weight: 600; margin: 0 0 0.75rem;
  color: var(--wp--preset--color--brand);
}
.jnt-booking-section .jnt-booking-header > h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; margin: 0 0 1rem;
}
.jnt-booking-section .jnt-booking-header > p:last-child {      /* subcopy */
  font-size: 1.05rem; line-height: 1.6; margin: 0;
  color: var(--wp--preset--color--base-accent);
}

/* venue-type cards (4-up) */
.jnt-booking-section .jnt-venue-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
}
.jnt-booking-section .jnt-venue-grid > .jnt-venue-card { margin-block-start: 0; }
.jnt-booking-section .jnt-venue-card {
  background: var(--wp--preset--color--base);                 /* warm white, not #fff */
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  border-top: 3px solid var(--wp--preset--color--brand);
  border-radius: 4px; text-align: center;
  padding: clamp(1.5rem, 3vw, 2rem) 1.5rem;
  width: 100%;
}
.jnt-booking-section .jnt-venue-icon {
  width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, transparent);
}
.jnt-booking-section .jnt-venue-icon::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 35%, transparent);
}
.jnt-booking-section .jnt-venue-card h3 {
  font-family: "Lora", serif; font-weight: 600;
  font-size: 1.125rem; line-height: 1.25; margin: 0 0 0.5rem;
  color: var(--wp--preset--color--contrast);
}
.jnt-booking-section .jnt-venue-card p {
  font-size: 0.9rem; line-height: 1.5; margin: 0;
  color: var(--wp--preset--color--base-accent);
}

/* venue logos row — slots hold <img>; placeholder label until then */
.jnt-booking-section .jnt-venue-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 3.75rem);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.jnt-booking-section .jnt-venue-logo {
  height: 72px; min-width: 110px; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.jnt-booking-section .jnt-venue-logo img {
  max-height: 64px; width: auto; object-fit: contain; display: block;
}
.jnt-booking-section .jnt-venue-logo p {                       /* placeholder label */
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wp--preset--color--base-accent); opacity: 0.55; margin: 0;
}

/* testimonial (dark) */
.jnt-booking-section .jnt-testimonial {
  background: var(--wp--preset--color--contrast);
  border-radius: 4px; position: relative; overflow: hidden;
  padding: clamp(2rem, 5vw, 3rem);
}
.jnt-booking-section .jnt-testimonial::before {
  content: "\201C"; position: absolute; top: 0.25rem; left: 1.5rem;
  font-family: "Lora", serif; font-size: 7rem; line-height: 1;
  color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
}
.jnt-booking-section .jnt-testimonial > p:first-child {       /* quote */
  font-family: "Lora", serif; font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.5;
  color: var(--wp--preset--color--brand-accent);
  position: relative; z-index: 1; margin: 0 0 1rem;
}
.jnt-booking-section .jnt-testimonial > p:not(:first-child) {        /* attribution */
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--wp--preset--color--border-base); margin: 0;   /* gold */
}

/* 2-up on tablet so 4 cards don't crowd */
@media (max-width: 900px) and (min-width: 782px) {
  .jnt-booking-section .jnt-venue-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
  .jnt-booking-section .jnt-venue-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 6: UPCOMING SHOWS — Events Shortcodes (minimal-list)
   jnt-sections.css v1.2.7
   ============================================================ */

#shows {
  background: #EDE8E0;
}

#shows .jnt-section__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: 80px var(--wp--style--root--padding-right, 40px);
}

#shows .jnt-section__header {
  text-align: center;
  margin-bottom: 3rem;
}

#shows .jnt-section__eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #800001;
  margin-bottom: 0.5rem;
}

#shows h2 {
  font-family: 'Lora', serif;
  color: #1A1A1A;
}

/* new */
#shows .jnt-section__header > p:last-child {
  font-family: 'Raleway', sans-serif;
  color: var(--wp--preset--color--base-accent);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* — Grid — */
#shows .ect-minimal-list-wrapper.all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
  margin: 0;
}

/* — Card — */
#shows .ect-list-posts.style-1 {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin: 0;
}

/* — Date bar — */
#shows .ect-event-date-tag {
  background: #800001;
  padding: 16px 24px;
  flex-shrink: 0;
}

#shows .ect-event-datetimes {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#shows span.ev-mo {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
}

#shows span.ev-day {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

/* — Card body — */
#shows .ect-event-details {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#shows .ect-events-title a.ect-event-url {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  text-decoration: none;
  line-height: 1.3;
  display: block;
}

#shows .ect-events-title a.ect-event-url:hover {
  color: #800001;
}

#shows .ect-event-datetime {
  display: flex;
  align-items: center;
  gap: 6px;
}

#shows .ect-icon-clock {
  display: none;
}

#shows span.ect-minimal-list-time {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #800001;
}

/* — CTA — */
#shows .wp-block-buttons {
  margin-top: 2.5rem;
  justify-content: center;
}

/* — Responsive — */
@media (max-width: 768px) {
  #shows .ect-minimal-list-wrapper.all {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  #shows .ect-minimal-list-wrapper.all {
    grid-template-columns: 1fr;
  }
}

/* Section 6 — plugin-override patch (v1.2.8): beat Cool Plugins minimal-list defaults */
#shows .ect-minimal-list-wrapper.all .ect-list-posts.style-1 { align-items: stretch; border-color: rgba(26,26,26,0.08); }
#shows .ect-minimal-list-wrapper.all .ect-list-posts.style-1 .ect-event-date-tag { width: auto; }
#shows .ect-list-posts.style-1 .ect-event-date-tag .ect-event-datetimes span.ev-mo { font-family: Raleway, sans-serif; }
#shows .ect-list-posts.style-1 .ect-event-date-tag .ect-event-datetimes span.ev-day { font-family: Lora, serif; }

/* Section 6 — center events regardless of count (1/2/3) */
#shows .ect-minimal-list-wrapper.all { display: flex; flex-wrap: wrap; justify-content: center; }
#shows .ect-minimal-list-wrapper.all .ect-list-posts.style-1 { flex: 0 1 324px; }

/* Section 6 — event time font (override plugin Monda) */
#shows .ect-list-posts.style-1 span.ect-minimal-list-time { font-family: Raleway, sans-serif; }

/* --------------------------------------------------------------
    * Testimonial Source Disclosure  (added v1.3.0)
    * Scope: .jnt-testimonial dark card (#1A1A1A) only
    * Accessible <details>/<summary> — keyboard + touch, no JS
    * Summary #B5AEA3 = WCAG AAA (~7.9:1) on #1A1A1A
    * -------------------------------------------------------------- */
   .jnt-testimonial .wp-block-details {
     margin-top: 6px;
   }
   .jnt-testimonial .wp-block-details > summary {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     width: auto;
     padding: 7px 8px 7px 0;            /* ≥24px tap height → WCAG 2.5.8 (AA) */
     list-style: none;
     cursor: pointer;
     font-family: Raleway, "Trebuchet MS", Arial, sans-serif;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #B5AEA3;                    /* WCAG AAA ~7.9:1 on #1A1A1A */
     transition: color 0.15s ease;
   }
   .jnt-testimonial .wp-block-details > summary::-webkit-details-marker {
     display: none;
   }
   .jnt-testimonial .wp-block-details > summary::before {
     content: "";
     flex: 0 0 auto;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 4px 0 4px 5px;
     border-color: transparent transparent transparent currentColor;
     transition: transform 0.15s ease;
   }
   .jnt-testimonial .wp-block-details[open] > summary::before {
     transform: rotate(90deg);
   }
   .jnt-testimonial .wp-block-details > summary:hover {
     color: #FAF8F5;
   }
   .jnt-testimonial .wp-block-details > summary:focus-visible {
     color: #FAF8F5;
     outline: 2px solid #FFCC00;
     outline-offset: 3px;
   }
   .jnt-testimonial .wp-block-details > *:not(summary) {
     margin-top: 8px;
     margin-bottom: 0;
     font-family: Raleway, "Trebuchet MS", Arial, sans-serif;
     font-size: 12px;
     line-height: 1.5;
     color: #D8D2C8;                    /* muted cream, ~11.6:1 AAA */
   }
   
   /* ============================================================
 * SECTION 7 — Fan Gallery (1.4.0)
 * Dark strip · 5-col square mosaic · 2×2 featured · brand-red hover · ghost CTA
 * ============================================================ */

.jnt-gallery {
  background-color: #1A1A1A;
  padding: 80px 40px;
}

.jnt-gallery-inner {
  margin-inline: auto;          /* 1100px content width set via native FSE Layout */
}

/* --- Header --- */
.jnt-gallery-header {
  text-align: center;
  margin-bottom: 48px;
}
.jnt-gallery-eyebrow {
  font-family: Raleway, "Trebuchet MS", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #FFCC00;
  margin: 0 0 12px;
}
.jnt-gallery-h2 {
  font-family: Lora, Georgia, serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
}

/* --- Mosaic grid --- */
.jnt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.jnt-gallery-grid > .jnt-gallery-cell {
  position: relative;
  margin: 0;                    /* clears block-gap / figure default margins */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background-color: #2A2A2A;    /* placeholder while image loads */
}
.jnt-gallery-grid > .jnt-gallery-cell:first-child {
  grid-column: span 2;
  grid-row: span 2;             /* featured 2×2 */
}
.jnt-gallery-grid > .jnt-gallery-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Brand-red hover wash --- */
.jnt-gallery-grid > .jnt-gallery-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(128, 0, 1, 0);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
.jnt-gallery-grid > .jnt-gallery-cell:hover::after {
  background-color: rgba(128, 0, 1, 0.3);
}

/* --- Ghost CTA --- */
.jnt-gallery-cta {
  margin-top: 32px;
}
.jnt-gallery-cta .wp-block-button__link {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: Raleway, "Trebuchet MS", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 15px 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.jnt-gallery-cta .wp-block-button__link:hover,
.jnt-gallery-cta .wp-block-button__link:focus-visible {
  color: #FFCC00;
  border-color: rgba(255, 204, 0, 0.6);
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .jnt-gallery { padding: 56px 20px; }
  .jnt-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .jnt-gallery-grid > .jnt-gallery-cell:first-child {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 3 / 2;        /* featured = full-width banner, matches 800×533 source */
  }
}

/* ============================================================
   SECTION 8 — Book Us (Ninja Forms id=2, cream card)   v1.5.2
   ============================================================ */

/* 2-column field grid; stacks on mobile */
.jnt-contact .nf-form-content nf-fields-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 12px;
}
.jnt-contact .nf-form-content nf-fields-wrap > nf-field:has(.textarea-container),
.jnt-contact .nf-form-content nf-fields-wrap > nf-field:has(.turnstile-container),
.jnt-contact .nf-form-content nf-fields-wrap > nf-field:has(.submit-container) {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .jnt-contact .nf-form-content nf-fields-wrap { grid-template-columns: 1fr; }
}

/* Labels — 11px + fixed line-height (kills the 44px tall-label bug → row alignment) */
.jnt-contact .nf-form-content .nf-field-label,
.jnt-contact .nf-form-content .nf-field-label label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 0;
  padding: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1A1A1A;
}
.jnt-contact .nf-form-content .nf-field-label { margin-bottom: 6px; }

/* Hide NF's "required fields" helper line */
.jnt-contact .nf-form-fields-required { display: none !important; }

/* Intro paragraph — tighter gap to the card */
.jnt-contact .jnt-contact-intro { margin-bottom: 28px; }

/* Fields — white, warm border, 15px */
.jnt-contact .nf-form-content input:not([type="submit"]),
.jnt-contact .nf-form-content textarea,
.jnt-contact .nf-form-content .list-select-wrap .nf-field-element > div {
  background: #fff;
  border: 1px solid #D8D2C8;
  border-radius: 4px;
  color: #1A1A1A;
  font-size: 15px;
  box-shadow: none;
}
.jnt-contact .nf-form-content input:not([type="submit"]),
.jnt-contact .nf-form-content textarea { padding: 12px 16px; }
.jnt-contact .nf-form-content .list-select-wrap select { background: transparent; color: #1A1A1A; font-size: 15px; }

/* Focus — gold */
.jnt-contact .nf-form-content input:not([type="submit"]):focus,
.jnt-contact .nf-form-content textarea:focus,
.jnt-contact .nf-form-content .list-select-wrap .nf-field-element > div:focus-within {
  border-color: #FFCC00;
  box-shadow: 0 0 0 2px rgba(255,204,0,0.35);
  outline: none;
}

/* Submit — unchanged (gold, auto-width, centered); color parked per your call */
.jnt-contact .nf-form-content .submit-container { text-align: center; margin-top: 0; }
.jnt-contact .nf-form-content .submit-container input[type="submit"] {
  width: auto;
  display: inline-block;
  background: #FFCC00;
  color: #1A1A1A;
  border: none;
  border-radius: 2px;
  padding: 14px 38px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.jnt-contact .nf-form-content .submit-container input[type="submit"]:hover {
  background: #663399;
  color: #FFF;
  transform: translateY(-1px);
}

/* Section 8 — form tightening (2026-06-17) */
.jnt-contact .nf-form-content { font-size: 15px; line-height: 1.5; }              /* kill the 20px NF base bleed */
.jnt-contact .nf-form-content .nf-error-wrap { min-height: 18px; font-size: 13px; line-height: 1.4; }  /* small error + always-reserved 1 line → no shift */
.jnt-contact .nf-form-content .nf-field-container { margin-bottom: 8px; }         /* was 25px; reservation now lives in the error-wrap min-height */
.jnt-contact .nf-form-content textarea { height: 90px; resize: vertical; }        /* ~3 lines; was 200px (users can still drag to expand) */