/* =========================================================
   Laugh Track plugin stylesheet
   v4.3.13 — month bottom spacing moved off the header so em units
            resolve against the same base as the top margin.
            v4.3.12 margin specificity fix (theme was
            overriding --lt-month-bot); month top margin now applies
            to the first block too. v4.3.11 Blocksy palette swatches;
            v4.3.10 external ticket links row (Ticketmaster + Ethical
             Resale) above the filter bar, styled like the per-gig
             buy buttons; "Hide sold out" filter toggle
   ---------------------------------------------------------
   Structural contract:
     .lt-root            → the shortcode root
       .lt-ticketmaster  → optional "Buy on Ticketmaster" CTA
       .lt-filterbar     → search + country filter controls
       .lt-results       → dynamic results button (JS toggled)
       .lt-month-block   → one per calendar month
         .lt-month-header
         .lt-card        → one per gig
           .lt-card-primary   → the 4-cell grid
             .lt-cell.lt-cell-date
             .lt-cell.lt-cell-town
             .lt-cell.lt-cell-venue
             .lt-cell.lt-cell-button
           .lt-meta      → optional prose line (omitted when empty)
   CSS custom properties are set via wp_add_inline_style on the
   .lt-root element. Defaults assume Blocksy palette vars with
   hex fallbacks.
   ========================================================= */

/* ---------- Root layout & spacing ---------- */
.lt-root {
	--lt-cell-bg:     var(--theme-palette-color-7, #222);
	--lt-cell-fg:     #fff;
	--lt-btn-bg:      var(--theme-palette-color-2, #333);
	--lt-btn-fg:      #fff;
	--lt-month-fg:    var(--theme-palette-color-4, #111);
	--lt-gap:         2px;
	--lt-gig-spacing: 2rem;
	--lt-cell-pad:    1rem;
	--lt-month-top:   2em;
	--lt-month-bot:   0.5em;
	--lt-loadmore-top:2em;
	color: inherit;
}

/* Space between cards */
.lt-card + .lt-card {
	margin-top: var(--lt-gig-spacing);
}

/* All-caps mode (shortcode attribute all_caps="yes"). Applies to all
   plugin output; doesn't touch the surrounding page. */
.lt-root.lt-all-caps {
	text-transform: uppercase;
}

/* ---------- External ticket links (Ticketmaster / Ethical Resale) ----------
   Sit on their own centred row above the filter bar. Styled identically to
   the per-gig "Buy Tickets" cell buttons so the whole listing shares one
   button language. Either link can appear alone. */
.lt-external-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 0 1.25rem;
}
.lt-external-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.5em;
	background: var(--lt-btn-bg);
	color: var(--lt-btn-fg);
	text-decoration: none;
	font-weight: 700;
	border-radius: 6px;
	text-align: center;
	box-sizing: border-box;
}
/* Match the cell-button link-state handling: lock colour so theme link
   styles can't repaint the text against the button background, and use
   underline + brightness for interaction feedback. */
.lt-external-links a:visited {
	color: var(--lt-btn-fg);
}
.lt-external-links a:hover,
.lt-external-links a:focus,
.lt-external-links a:active {
	color: var(--lt-btn-fg);
	text-decoration: underline;
	filter: brightness(1.08);
}

/* ---------- Filter bar ----------
   Centred so the controls feel deliberate; inputs styled to look like
   small cells (same background, soft tinted border, current text colour). */
.lt-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin: 0 0 1.25rem;
}
.lt-filterbar input[type="search"],
.lt-filterbar select,
.lt-filterbar .lt-months-toggle,
.lt-filterbar .lt-hide-soldout {
	flex: 0 1 auto;
	min-width: 0;
	/* Explicit height so all three controls match regardless of how each
	   element internally interprets line-height. Inputs and selects
	   collapse to font-size + padding; buttons respect declared
	   line-height. Setting a fixed height + horizontal-only padding
	   gives identical box dimensions across all three. */
	height: 2.5em;
	padding: 0 0.9em;
	font: inherit;
	line-height: 1.2;
	color: inherit;
	background: var(--lt-cell-bg);
	border: 1px solid color-mix(in srgb, var(--lt-cell-bg) 70%, currentColor 30%);
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.lt-filterbar input[type="search"] {
	width: 16rem;
	max-width: 100%;
}
.lt-filterbar select {
	width: 12rem;
	max-width: 100%;
}
.lt-filterbar input[type="search"]:focus,
.lt-filterbar select:focus,
.lt-filterbar .lt-months-toggle:focus,
.lt-filterbar .lt-hide-soldout:focus {
	outline: none;
	border-color: currentColor;
	background: var(--lt-cell-bg); /* lock bg so browsers don't fade it on focus */
}
/* Toggle buttons: same visual weight as the inputs. The label text
   itself communicates state ("Hide months" → "Show months"); no
   need to also swap colours when toggled. Flex centring keeps the
   text vertically aligned inside the fixed-height box. */
.lt-filterbar .lt-months-toggle,
.lt-filterbar .lt-hide-soldout {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.lt-filterbar .lt-months-toggle:hover,
.lt-filterbar .lt-hide-soldout:hover {
	border-color: currentColor;
	background: color-mix(in srgb, var(--lt-cell-bg) 92%, currentColor 8%);
}
/* Active state for the sold-out filter — unlike the months toggle
   (a view preference), this one actually removes data, so it warrants
   a clearer "this is on" indicator. */
.lt-filterbar .lt-hide-soldout[aria-pressed="true"] {
	border-color: currentColor;
	background: color-mix(in srgb, var(--lt-cell-bg) 85%, currentColor 15%);
}

.lt-results {
	display: block;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0.75em 1em;
	background: var(--lt-btn-bg);
	color: var(--lt-btn-fg);
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	text-align: center;
	border-radius: 4px;
}
.lt-results[hidden] {
	display: none;
}

/* ---------- Section heading (plugin auto/manual heading) ----------
   .lt-root prefix for the same specificity reason as .lt-month-header
   (see the note above the month block rules). */
.lt-root .lt-heading {
	text-align: center;
	margin: 0 0 1.25rem;
	color: var(--lt-month-fg);
}

/* ---------- Presale callout (shortcode attribute presale="CODE") ----------
   A single-line note sitting between the heading and the filter bar,
   telling users the tour-wide presale code. The code itself is wrapped
   in .lt-presale-code so it can be visually distinguished per-site. */
.lt-presale-note {
	text-align: center;
	margin: 0 0 1.25rem;
	padding: 0.75em 1rem;
	background: var(--lt-cell-bg);
	color: var(--lt-cell-fg);
	border-radius: 4px;
}
.lt-presale-code {
	font-weight: 700;
}

/* ---------- Month blocks ----------
   NOTE ON SPECIFICITY: these selectors are deliberately prefixed with
   .lt-root. Blocksy (and other block themes) ship a rule like
     :is(.is-layout-flow,.is-layout-constrained) :where(h1,...,h6){margin-bottom:...}
   where :is() counts as one class and :where() counts as zero — giving it
   exactly the same specificity as a bare .lt-month-header. On a tie the
   later stylesheet wins, and the theme loads after the plugin, so the
   theme's margin silently replaced --lt-month-bot. The .lt-root prefix
   raises us to (0,2,0) so the plugin's own spacing settings actually
   take effect. Don't remove it. */
.lt-root .lt-month-block {
	margin-top: var(--lt-month-top);
}
/* NOTE ON UNITS: the header is font-size: 1.5em, and `em` margins resolve
   against the element's OWN font size — so putting --lt-month-bot here made
   "3em" render 1.5x larger than the same "3em" on the block above it. The
   bottom spacing is therefore applied to the element AFTER the header (the
   first card/group, which sits at the normal base font size) so both
   settings produce identical distances. Don't move it back onto the header. */
.lt-root .lt-month-header {
	margin: 0;
	color: var(--lt-month-fg);
	text-align: center;
	font-size: 1.5em;
}
.lt-root .lt-month-header + * {
	margin-top: var(--lt-month-bot);
}

/* When months are toggled off, hide the headers and collapse the
   block margin to the normal card-to-card spacing so the list
   reads as one continuous run of cards. */
.lt-root.lt-hide-months .lt-month-header {
	display: none;
}
.lt-root.lt-hide-months .lt-month-block {
	margin-top: var(--lt-gig-spacing);
}
/* The header is hidden, so its trailing spacing must go too — the block's
   own margin-top provides the gap in this mode. */
.lt-root.lt-hide-months .lt-month-header + * {
	margin-top: 0;
}

/* ---------- No dates ---------- */
.lt-no-dates {
	padding: var(--lt-cell-pad);
	background: var(--lt-cell-bg);
	color: var(--lt-cell-fg);
	border-radius: 6px;
	text-align: center;
}
.lt-no-dates h3 {
	margin: 0 0 0.5rem;
}
.lt-no-dates p {
	margin: 0;
}

/* ---------- Card (single gig) ----------
   The card's own background is a subtly tinted shade so the 2px gaps
   between cells show as visible seams. Cells sit on top in the regular
   cell-bg colour. Theme-agnostic via color-mix; falls back to plain
   cell-bg in browsers that don't support color-mix. */
.lt-card {
	background: var(--lt-cell-bg);
	background: color-mix(in srgb, var(--lt-cell-bg) 88%, currentColor 12%);
	color: var(--lt-cell-fg);
	border-radius: 6px;
	overflow: hidden;
}

/* Primary 4-cell grid (desktop default). Proportional widths so the cells
   feel like a row of related fields rather than four equal compartments.
   Venue gets the most space because its content is typically longest. */
.lt-card-primary {
	display: grid;
	grid-template-columns:
		minmax(160px, 1.3fr)   /* date   */
		minmax(0,    1fr)      /* town   */
		minmax(0,    1.6fr)    /* venue  */
		minmax(120px, 1fr);    /* button */
	gap: var(--lt-gap);
}

.lt-cell {
	min-width: 0;              /* critical for text-overflow: ellipsis */
	padding: 0.85em 1rem;
	background: var(--lt-cell-bg);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.lt-cell p {
	margin: 0;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Typography: bold the town only — that's the answer to "is the show
   in my city?". Date and venue are regular weight so they don't compete
   for emphasis. Town gets a small size bump for hierarchy. */
.lt-cell-town p {
	font-weight: 700;
	font-size: 1.05em;
}

.lt-cell-button {
	background: var(--lt-btn-bg);
	color: var(--lt-btn-fg);
	font-weight: 700;
}
.lt-cell-button p {
	color: inherit;
}
.lt-cell-button a {
	color: inherit;
	text-decoration: none;
	display: block;
	width: 100%;
}
/* :visited locks the colour only (so the theme can't repaint visited
   links a different shade against our button background), but does NOT
   apply the hover underline — otherwise every previously-clicked link
   would render permanently underlined. */
.lt-cell-button a:visited {
	color: inherit;
}
/* Override theme link colours that would otherwise paint hover/focus link
   text the same colour as our button background (rendering it invisible).
   Force colour to stay as the button foreground; signal interactivity via
   underline + slight brightness lift instead. */
.lt-cell-button a:hover,
.lt-cell-button a:focus,
.lt-cell-button a:active {
	color: var(--lt-btn-fg);
	text-decoration: underline;
}
.lt-cell-button:hover {
	filter: brightness(1.08);
}

/* Status hooks — style per site as needed. */
.lt-status-available {}
.lt-status-pre {}
.lt-status-soon {}
.lt-status-full {}
.lt-status-few {}
.lt-status-postponed {}
.lt-status-cancelled {}

/* ---------- Group (multiple shows under one show_group value) ----------
   The summary cells (title/toggle) use the button background colour scheme
   so grouped runs are visually distinct from standalone gigs at a glance.
   The group container itself is transparent and has no rounded corners —
   the summary handles its own rounded look, and expanded children sit
   below the summary as normal cards with no wraparound frame. */
.lt-group + .lt-card,
.lt-card + .lt-group,
.lt-group + .lt-group {
	margin-top: var(--lt-gig-spacing);
}

.lt-group-summary {
	cursor: pointer;
	list-style: none;
	padding: 0;
	border-radius: 6px;
	overflow: hidden;
}
/* Hide the default disclosure triangle across browsers. */
.lt-group-summary::-webkit-details-marker { display: none; }
.lt-group-summary::marker { content: ''; }

/* Group rows have their own proportions rather than mirroring the card
   grid below them. Title and toggle are sized to their content so there's
   no empty padding around the text; meta fills the remaining space and
   centres its content. */
.lt-group-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--lt-gap);
	align-items: stretch;
}

.lt-group-title,
.lt-group-meta,
.lt-group-toggle {
	margin: 0;
	padding: 0.85em 1rem;
	display: flex;
	align-items: center;
	min-width: 0;
	box-sizing: border-box;
}

/* Title and toggle keep the dark button treatment; meta drops to cell-bg
   so the row reads as dark | light | dark. */
.lt-group-title {
	grid-column: 1;
	background: var(--lt-btn-bg);
	color: var(--lt-btn-fg);
	font-weight: 700;
	font-size: 1.05em;
	justify-content: center;
	text-align: center;
}
.lt-group-meta {
	grid-column: 2;
	background: var(--lt-cell-bg);
	color: var(--lt-cell-fg);
	justify-content: center;
	text-align: center;
}
.lt-group-toggle {
	grid-column: 3;
	background: var(--lt-btn-bg);
	color: var(--lt-btn-fg);
	font-weight: 700;
	justify-content: center;
	text-align: center;
}

/* Truncate long group titles/meta gracefully. */
.lt-group-title,
.lt-group-meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lt-group-toggle-text,
.lt-group-title-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.lt-group-toggle-text::after,
.lt-group-title-text::after {
	content: '\25BE'; /* ▾ */
	display: inline-block;
	transition: transform 0.15s ease;
}
.lt-group[open] .lt-group-toggle-text::after,
.lt-group[open] .lt-group-title-text::after {
	transform: rotate(180deg);
}

/* Hover/focus hint — applied only to the dark navy title and toggle
   cells so the brightness lift reads as a proper button-style affordance.
   The cream meta cell is left untouched; brightening it would just push
   it to near-white, which reads as a jarring colour shift rather than
   an interactive cue. */
.lt-group-summary:hover .lt-group-title,
.lt-group-summary:hover .lt-group-toggle,
.lt-group-summary:focus .lt-group-title,
.lt-group-summary:focus .lt-group-toggle,
.lt-group-summary:focus-visible .lt-group-title,
.lt-group-summary:focus-visible .lt-group-toggle {
	filter: brightness(1.08);
}

/* Children wrapper sits below the summary when open. No background, no
   wraparound frame — children render as regular cards with the standard
   gig spacing, associated to the group above by proximity only. */
.lt-group-children {
	display: flex;
	flex-direction: column;
	gap: var(--lt-gig-spacing);
	margin-top: var(--lt-gig-spacing);
}
.lt-group-children .lt-card {
	margin-top: 0; /* gap on the flex container handles spacing */
}

/* ---------- Meta line (below the primary row) ----------
   Matches the cells above for background, padding and font size, with a
   subtle top-border separator drawn from the same color-mix trick used
   elsewhere — visible enough to read as a distinct row, soft enough to
   stay theme-agnostic. */
.lt-meta {
	margin: 0;
	padding: 0.85em 1rem;
	background: var(--lt-cell-bg);
	color: var(--lt-cell-fg);
	text-align: center;
	border-top: 1px solid color-mix(in srgb, var(--lt-cell-bg) 75%, currentColor 25%);
}
.lt-meta-label {
	font-weight: 600;
}
.lt-meta-sep {
	opacity: 0.6;
	margin: 0 0.25em;
}

/* ---------- Responsive ----------
   Blocksy default breakpoints:
     Desktop  ≥ 1000px
     Tablet   690px – 999px
     Mobile   < 690px
   ----------------------------- */

@media (max-width: 999px) {
	/* Tablet: 2 columns per row (2 rows of 2 cells per card).
	   Row 1 = date + town, Row 2 = venue + button. */
	.lt-card-primary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Groups: title spans full width on row 1; meta + toggle on row 2 */
	.lt-group-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lt-group-title  { grid-column: 1 / span 2; }
	.lt-group-meta   { grid-column: 1 / span 1; }
	.lt-group-toggle { grid-column: 2 / span 1; }
}

@media (max-width: 689px) {
	/* Mobile: 2x2 by default, with tighter padding and slightly smaller
	   font. Cells are already centred from the base styles. */
	.lt-card-primary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lt-cell {
		padding: 0.8em 0.6em;
		font-size: 0.95em;
	}
	.lt-group-title,
	.lt-group-meta,
	.lt-group-toggle {
		padding: 0.8em 0.6em;
		font-size: 0.95em;
	}
	.lt-meta {
		font-size: 0.85em;
		padding: 0.6em 0.8em;
	}

	/* mobile_cols="1": single column at mobile breakpoint. Each cell
	   occupies its own row, giving more horizontal space to long content. */
	.lt-root[data-mobile-cols="1"] .lt-card-primary {
		grid-template-columns: 1fr;
	}
	.lt-root[data-mobile-cols="1"] .lt-group-row {
		grid-template-columns: 1fr;
	}
	.lt-root[data-mobile-cols="1"] .lt-group-title,
	.lt-root[data-mobile-cols="1"] .lt-group-meta,
	.lt-root[data-mobile-cols="1"] .lt-group-toggle {
		grid-column: 1 / span 1;
	}
}

/* Optional: very narrow phones — force single column even when mobile_cols
   isn't set. Below this width 2x2 is too cramped for typical content. */
@media (max-width: 420px) {
	.lt-card-primary {
		grid-template-columns: 1fr;
	}
	.lt-group-row {
		grid-template-columns: 1fr;
	}
	.lt-group-title,
	.lt-group-meta,
	.lt-group-toggle {
		grid-column: 1 / span 1;
	}
}

/* ---------- Accessibility ---------- */
.lt-filterbar input[type="search"]:focus,
.lt-filterbar select:focus,
.lt-results:focus,
.lt-cell-button a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}