/* =========================================================
   Laugh Track plugin stylesheet — v4.4.1
   ---------------------------------------------------------
   Structure:
     .lt-root                    shortcode root (all --lt-* vars live here)
       .lt-heading               h2 auto/manual heading
       .lt-presale-note          presale="CODE" callout
       .lt-external-links        Ticketmaster / Ethical Resale buttons
       .lt-filterbar             search, selects, toggle buttons
       .lt-results               "Showing N filtered dates — Show all"
       .lt-month-block           one per month
         .lt-month-header        h3
         .lt-card                one date (unpainted; seams are borders)
           .lt-card-primary      4-cell grid of .lt-cell
           .lt-meta              note row (only when it has content)
         .lt-group               grouped run (show_group), <details>
       .lt-load-more             "Show All Dates" (collapse mode)

   Rules for editing this file:
   1. NO default values here. Every --lt-* variable comes from
      laugh_track_style_registry() in laugh-track.php. Add a setting
      there, use var(--lt-name) here — that's the whole wiring.
   2. No hardcoded colours, paddings or radii on anything a setting
      covers, or that setting silently stops working.
   3. Selectors that fight theme heading styles are prefixed .lt-root
      (see the specificity note at the month block rules).
   ========================================================= */

/* ---------- Variables ----------
   This file deliberately defines NO default values. Every --lt-* variable
   is emitted inline by laugh_track_build_inline_css() from the single
   registry in laugh-track.php (laugh_track_style_registry). Change defaults
   there, never here — two sets of defaults is how settings end up "ignored". */

/* 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.
   NOTE: form controls are listed explicitly because theme normalize
   resets set `button, select { text-transform: none; }` (a direct
   declaration, which beats inheritance) — without these the filter-bar
   buttons and selects stay lowercase while everything else uppercases. */
.lt-root.lt-all-caps,
.lt-root.lt-all-caps button,
.lt-root.lt-all-caps select,
.lt-root.lt-all-caps input[type="search"] {
	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: var(--lt-radius);
	text-align: center;
	box-sizing: border-box;
}
/* ALL button link states lock colour AND text-decoration: none, because
   themes commonly underline and recolour links on hover. Interaction
   feedback is a brightness lift only — no underline anywhere, by design. */
.lt-root .lt-external-links a:link,
.lt-root .lt-external-links a:visited,
.lt-root .lt-external-links a:hover,
.lt-root .lt-external-links a:focus,
.lt-root .lt-external-links a:active {
	color: var(--lt-btn-fg);
	text-decoration: none;
}
.lt-external-links a:hover,
.lt-external-links a:focus-visible {
	filter: brightness(1.1);
}

/* ---------- 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: var(--lt-filter-fg);
	background: var(--lt-filter-bg);
	border: 1px solid var(--lt-filter-border);
	border-radius: var(--lt-radius);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.lt-filterbar input[type="search"]::placeholder {
	color: var(--lt-filter-fg);
	opacity: 0.7;
}
.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-filter-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-filter-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-filter-bg) 85%, currentColor 15%);
}

/* "Showing N filtered dates — Show all" and "Show All Dates": both are
   buttons, so both use the button colours like everything else. */
.lt-results,
.lt-load-more {
	display: block;
	width: 100%;
	padding: 0.85em 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: var(--lt-radius);
	-webkit-appearance: none;
	appearance: none;
}
.lt-results {
	margin: 0 0 1.25rem;
}
.lt-load-more {
	margin: var(--lt-loadmore-top) 0 0;
}
.lt-results:hover,
.lt-load-more:hover {
	filter: brightness(1.1);
}
.lt-results[hidden],
.lt-load-more[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: var(--lt-radius);
}
.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: var(--lt-radius);
	text-align: center;
}
.lt-no-dates h3 {
	margin: 0 0 0.5rem;
}
.lt-no-dates p {
	margin: 0;
}

/* ---------- Card (single gig) ----------
   The card itself is NOT painted. Seams between cells are real border
   lines (see the Seams section below), so transparent or semi-transparent
   cell colours stay exactly as set. (Before 4.4.1 the card was filled with
   the seam colour and relied on opaque cells to hide it — with transparent
   cells that fill showed through as a coloured tint across the whole row.) */
.lt-card {
	background: transparent;
	color: var(--lt-cell-fg);
	border-radius: var(--lt-radius);
	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: 0; /* seams are borders — see Seams section */
}

.lt-cell {
	min-width: 0;              /* critical for text-overflow: ellipsis */
	padding: var(--lt-cell-pad);
	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%;
}
/* Every link state locks colour AND removes underline — themes commonly
   recolour/underline links on hover, which either hides the text against
   the button or adds an underline. Feedback is a brightness lift only. */
.lt-root .lt-cell-button a:link,
.lt-root .lt-cell-button a:visited,
.lt-root .lt-cell-button a:hover,
.lt-root .lt-cell-button a:focus,
.lt-root .lt-cell-button a:active {
	color: var(--lt-btn-fg);
	text-decoration: none;
}
.lt-cell-button:hover,
.lt-cell-button:focus-within {
	filter: brightness(1.1);
}

/* 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: var(--lt-radius);
	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: 0; /* seams are borders — see Seams section */
	align-items: stretch;
}

.lt-group-title,
.lt-group-meta,
.lt-group-toggle {
	margin: 0;
	padding: var(--lt-cell-pad);
	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 */
}

/* ---------- Note row (below the primary row) ----------
   Own background/text settings (default: same as the cells). Separated
   from the row above by the seam, exactly like the cells are from each
   other — one consistent line treatment throughout. */
.lt-meta {
	margin: 0;
	padding: var(--lt-cell-pad);
	background: var(--lt-meta-bg);
	color: var(--lt-meta-fg);
	text-align: center;
}
.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: var(--lt-cell-pad-mob);
		font-size: 0.95em;
	}
	.lt-group-title,
	.lt-group-meta,
	.lt-group-toggle {
		padding: var(--lt-cell-pad-mob);
		font-size: 0.95em;
	}
	.lt-meta {
		padding: var(--lt-cell-pad-mob);
		font-size: 0.95em;
	}

	/* 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;
	}
}

/* ---------- Seams ----------
   Lines between cells, drawn as borders of width --lt-gap in --lt-seam.
   Cards always have exactly 4 cells, so which cell needs a left/top line
   is fully determined by the layout at each breakpoint:
     desktop  4 across  → left line on cells 2–4
     ≤999px   2x2       → left line on cells 2 & 4, top line on cells 3 & 4
     1 column           → top line on cells 2–4
   Group rows (title | meta | toggle) follow the same logic. Set Seam width
   to 0 or Seam colour to transparent for no lines. */
.lt-root .lt-card-primary > .lt-cell + .lt-cell,
.lt-root .lt-group-row .lt-group-meta,
.lt-root .lt-group-row .lt-group-toggle {
	border-left: var(--lt-gap) solid var(--lt-seam);
}
.lt-root .lt-card .lt-meta {
	border-top: var(--lt-gap) solid var(--lt-seam);
}

@media (max-width: 999px) {
	.lt-root .lt-card-primary > .lt-cell:nth-child(n) {
		border-left: 0;
	}
	.lt-root .lt-card-primary > .lt-cell:nth-child(2n) {
		border-left: var(--lt-gap) solid var(--lt-seam);
	}
	.lt-root .lt-card-primary > .lt-cell:nth-child(n+3) {
		border-top: var(--lt-gap) solid var(--lt-seam);
	}
	/* Group: title across row 1; meta + toggle side by side on row 2. */
	.lt-root .lt-group-row .lt-group-meta {
		border-left: 0;
		border-top: var(--lt-gap) solid var(--lt-seam);
	}
	.lt-root .lt-group-row .lt-group-toggle {
		border-top: var(--lt-gap) solid var(--lt-seam);
	}
}

@media (max-width: 689px) {
	.lt-root[data-mobile-cols="1"] .lt-card-primary > .lt-cell:nth-child(n) {
		border-left: 0;
	}
	.lt-root[data-mobile-cols="1"] .lt-card-primary > .lt-cell:nth-child(n+2) {
		border-top: var(--lt-gap) solid var(--lt-seam);
	}
	.lt-root[data-mobile-cols="1"] .lt-group-row .lt-group-toggle {
		border-left: 0;
	}
}

@media (max-width: 420px) {
	.lt-root .lt-card-primary > .lt-cell:nth-child(n).lt-cell {
		border-left: 0;
	}
	.lt-root .lt-card-primary > .lt-cell:nth-child(n+2).lt-cell {
		border-top: var(--lt-gap) solid var(--lt-seam);
	}
	.lt-root .lt-group-row .lt-group-toggle.lt-group-toggle {
		border-left: 0;
	}
}

/* ---------- Accessibility ----------
   :focus-visible = keyboard focus only, so mouse clicks don't leave rings
   but keyboard users still see where they are. */
.lt-filterbar input[type="search"]:focus-visible,
.lt-filterbar select:focus-visible,
.lt-filterbar button:focus-visible,
.lt-results:focus-visible,
.lt-load-more:focus-visible,
.lt-cell-button a:focus-visible,
.lt-external-links a:focus-visible,
.lt-group-summary:focus-visible {
	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;
}