/* =========================================================
   Laugh Track plugin stylesheet — v4.6.4
   ---------------------------------------------------------
   Structure:
     .lt-root                  shortcode root (all --lt-* vars live here)
       .lt-heading             <h2> tour heading
       .lt-presale             presale countdown banner (<h3> status)
       .lt-presale-note        code-only presale line (no times set)
       .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, <h3> .lt-month-header
         .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)
       .lt-no-dates            empty state

   Rules for editing this file:
   1. NO default values here. Every --lt-* variable comes from
      laugh_track_style_registry() in laugh-track.php.
   2. Typography belongs to the theme. Headings are real <h2>/<h3>
      elements with no font-size set here. Buttons read Blocksy's own
      button settings (--theme-button-*), falling back to sensible
      values on other themes. The only typographic choices made here are
      bold town names and bold button text where the theme sets none.
   3. Spacing between top-level blocks is ONE rule (Section rhythm).
      Never add margins to individual blocks.
   4. Selectors that must beat theme styles use .lt-root.lt-root
      (0,2,0) — Blocksy's heading/margin rules are (0,1,0).
   ========================================================= */


/* ---------- Section rhythm ----------
   Each gap is a margin on the TOP of the following block; every other
   margin on these blocks is zeroed. So gaps never double up, em-based
   settings always measure against normal-size text (never a heading's
   larger font), and theme heading margins can't sneak in. Months after
   the first use "Space between months" (see Month blocks). */
.lt-root.lt-root > * {
	margin-top: 0;
	margin-bottom: 0;
}
.lt-root.lt-root > * + * {
	margin-top: var(--lt-section-gap);
}
.lt-root.lt-root > .lt-load-more {
	margin-top: var(--lt-loadmore-top);
}


/* ---------- All caps (behaviour setting) ----------
   Elements listed explicitly because the theme sets text-transform
   on them directly, which beats inheritance:
   - Blocksy: h1-h6 and label get var(--theme-text-transform)
   - theme resets: button, select { text-transform: none }
   The presale code is exempt: it must be shown exactly as entered,
   as some ticketing systems are case-sensitive. */
.lt-root.lt-all-caps,
.lt-root.lt-all-caps :is(h1, h2, h3, h4, h5, h6, label),
.lt-root.lt-all-caps button,
.lt-root.lt-all-caps select,
.lt-root.lt-all-caps input[type="search"] {
	text-transform: uppercase;
}

.lt-root.lt-all-caps .lt-presale-code {
	text-transform: none;
}


/* ---------- Headings ----------
   Tour heading (h2), month headings (h3) and the presale status (h3) all
   take their font, size and weight from the theme. The plugin only sets
   colour (Heading colour setting, which follows the theme's headings
   colour by default) and centring. */
.lt-root .lt-heading,
.lt-root .lt-month-header,
.lt-root .lt-presale-status {
	color: var(--lt-month-fg);
	text-align: center;
}


/* ---------- Buttons ----------
   ONE style for every standalone button. Typography and sizing follow
   Blocksy's button settings when present; colours and corners follow the
   plugin's own settings. Per-date buttons (.lt-cell-button) and grouped-
   dates header cells share the same typography below. */
.lt-external-links a,
.lt-presale-cta,
.lt-results,
.lt-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--theme-button-min-height, 2.5em);
	padding: var(--theme-button-padding, 0.5em 1.25em);
	font-family: inherit;
	font-size: var(--theme-button-font-size, 1em);
	font-weight: var(--theme-button-font-weight, 700);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--lt-btn-fg);
	background: var(--lt-btn-bg);
	border: 0;
	border-radius: var(--lt-radius);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.lt-results,
.lt-load-more {
	display: flex;
	width: 100%;
}
.lt-results[hidden],
.lt-load-more[hidden] {
	display: none;
}

/* .lt-root prefix is load-bearing: a row button is also a .lt-cell, and
   the plain .lt-cell rule further down sets the cell background. Without
   the higher specificity, whichever rule comes later wins — which is how
   4.6.0 shipped with row buttons in the cell colour. */
.lt-root .lt-cell-button,
.lt-root .lt-group-title,
.lt-root .lt-group-toggle {
	color: var(--lt-btn-fg);
	background: var(--lt-btn-bg);
	font-size: var(--theme-button-font-size, 1em);
	font-weight: var(--theme-button-font-weight, 700);
}

/* Link states: lock colour and remove underline on every button link,
   because themes recolour and underline links on hover. Feedback is a
   brightness lift only — the same on every button. */
.lt-root .lt-external-links a:is(:link, :visited, :hover, :focus, :active),
.lt-root .lt-cell-button a:is(:link, :visited, :hover, :focus, :active),
.lt-root .lt-presale-cta:is(:link, :visited, :hover, :focus, :active) {
	color: var(--lt-btn-fg);
	text-decoration: none;
}
.lt-cell-button a {
	display: block;
	width: 100%;
	color: inherit;
}
.lt-external-links a:hover,
.lt-presale-cta:hover,
.lt-results:hover,
.lt-load-more:hover,
.lt-cell-button:hover,
.lt-cell-button:focus-within,
.lt-group-summary:hover .lt-group-title,
.lt-group-summary:hover .lt-group-toggle {
	filter: brightness(1.1);
}


/* ---------- Ticket links row ---------- */
.lt-external-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}


/* ---------- Presale ----------
   The banner is plain content in the page flow — no box, no padding —
   so the Section rhythm spaces it exactly like every other block. (A
   padded box added invisible space whenever the cell colour is
   transparent, making the gaps around it bigger than anywhere else.)

   Inside, lines are grouped by meaning rather than spaced evenly:
     [heading + countdown]  one unit, no gap
     [Sign up button]       half a section gap above and below
     [code / general sale / deadline lines]  a tight group
   Phases (which lines show) are switched by laugh-track.js. */
.lt-presale,
.lt-presale-note {
	text-align: center;
}
.lt-presale {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lt-root .lt-presale > * {
	margin: 0;
}
.lt-root .lt-presale > * + * {
	margin-top: calc(var(--lt-section-gap) * 0.5);
}
.lt-root .lt-presale > .lt-presale-countdown {
	margin-top: 0;
}
.lt-root .lt-presale > :is(.lt-presale-code-line, .lt-presale-general, .lt-presale-signup) + :is(.lt-presale-code-line, .lt-presale-general, .lt-presale-signup) {
	margin-top: 0.25em;
}
.lt-presale[hidden],
.lt-presale [hidden],
.lt-cd-unit[hidden] {
	display: none;
}
/* Segmented countdown: [days] | hours | minutes | seconds. Each unit is
   a big number over a small label, with a short divider between units.
   Font and weight come from the theme; only size and layout are set. */
.lt-presale-countdown {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.lt-cd-unit {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.5em;
	padding: 0 1em;
}
.lt-cd-unit + .lt-cd-unit::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.9em;
	height: 1.8em;
	border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
/* No divider before the first visible unit (Days is hidden when under a day). */
.lt-cd-unit[hidden] + .lt-cd-unit::before {
	display: none;
}
.lt-cd-num {
	font-size: 3em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums; /* digits don't jiggle as they tick */
}
.lt-cd-label {
	font-size: 0.8em;
	opacity: 0.75;
}


/* ---------- Filter bar ----------
   Controls share the button height so the filter row lines up with the
   ticket buttons above it. */
.lt-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.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;
	box-sizing: border-box;
	height: var(--theme-button-min-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);
	-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"]::placeholder {
	color: var(--lt-filter-fg);
	opacity: 0.7;
}
.lt-filterbar .lt-months-toggle,
.lt-filterbar .lt-hide-soldout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.lt-filterbar input[type="search"]:focus,
.lt-filterbar select:focus,
.lt-filterbar button:focus {
	outline: none;
	border-color: currentColor;
	background: var(--lt-filter-bg); /* lock bg so browsers don't fade it on focus */
}
.lt-filterbar button:hover {
	border-color: currentColor;
	background: color-mix(in srgb, var(--lt-filter-bg) 92%, currentColor 8%);
}
/* "Hide sold out" removes data, so its on-state is shown; "Hide months"
   only changes the view, and its label change is enough. */
.lt-filterbar .lt-hide-soldout[aria-pressed="true"] {
	border-color: currentColor;
	background: color-mix(in srgb, var(--lt-filter-bg) 85%, currentColor 15%);
}


/* ---------- Month blocks ----------
   The first month is spaced by the Section rhythm; later months by
   "Space between months". The gap below a month heading is applied to
   the element AFTER it, because em values on the heading itself would be
   measured against the heading's larger font. */
.lt-root .lt-month-block + .lt-month-block {
	margin-top: var(--lt-month-top);
}
.lt-root.lt-root .lt-month-header {
	margin: 0;
}
.lt-root .lt-month-header + * {
	margin-top: var(--lt-month-bot);
}
.lt-root.lt-hide-months .lt-month-header {
	display: none;
}
.lt-root.lt-hide-months .lt-month-block + .lt-month-block {
	margin-top: var(--lt-gig-spacing);
}
.lt-root.lt-hide-months .lt-month-header + * {
	margin-top: 0;
}


/* ---------- Date rows ---------- */
.lt-card + .lt-card,
.lt-group + .lt-card,
.lt-card + .lt-group,
.lt-group + .lt-group {
	margin-top: var(--lt-gig-spacing);
}
.lt-card {
	overflow: hidden;
	color: var(--lt-cell-fg);
	background: transparent; /* lines between cells are borders, not a fill */
	border-radius: var(--lt-radius);
}
/* Proportional columns: venue gets the most room, date and button the least. */
.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;
}
.lt-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0; /* lets long text truncate with an ellipsis */
	padding: var(--lt-cell-pad);
	text-align: center;
	background: var(--lt-cell-bg);
}
.lt-cell p {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.lt-cell-button p {
	color: inherit;
}
/* The pre-opening presale label is longer than other button text, so it
   may wrap rather than be cut off. */
.lt-root .lt-cell-button .lt-status-pre {
	white-space: normal;
}
/* Town is the answer to "is there a show near me?", so it's the one
   emphasised field in the row. */
.lt-cell-town p {
	font-weight: 700;
}

/* Note row (on-sale dates, Was / Now, notes). */
.lt-meta {
	margin: 0;
	padding: var(--lt-cell-pad);
	text-align: center;
	color: var(--lt-meta-fg);
	background: var(--lt-meta-bg);
}
.lt-meta-label {
	font-weight: 700;
}
.lt-meta-sep {
	margin: 0 0.25em;
	opacity: 0.6;
}

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


/* ---------- Grouped dates (show_group) ---------- */
.lt-group-summary {
	overflow: hidden;
	padding: 0;
	list-style: none;
	border-radius: var(--lt-radius);
	cursor: pointer;
}
.lt-group-summary::-webkit-details-marker { display: none; }
.lt-group-summary::marker { content: ''; }

/* Title and toggle sized to their content; the date range fills the rest. */
.lt-group-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: stretch;
	gap: 0;
}
.lt-group-title,
.lt-group-meta,
.lt-group-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: var(--lt-cell-pad);
	text-align: center;
}
.lt-group-title  { grid-column: 1; }
.lt-group-meta   { grid-column: 2; color: var(--lt-cell-fg); background: var(--lt-cell-bg); }
.lt-group-toggle { grid-column: 3; }
.lt-group-title,
.lt-group-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.lt-group-title-text,
.lt-group-toggle-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.lt-group-title-text::after,
.lt-group-toggle-text::after {
	content: '\25BE'; /* ▾ */
	display: inline-block;
	transition: transform 0.15s ease;
}
.lt-group[open] .lt-group-title-text::after,
.lt-group[open] .lt-group-toggle-text::after {
	transform: rotate(180deg);
}
.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; /* the flex gap handles spacing */
}


/* ---------- Empty state ---------- */
.lt-no-dates {
	padding: var(--lt-cell-pad);
	text-align: center;
	color: var(--lt-cell-fg);
	background: var(--lt-cell-bg);
	border-radius: var(--lt-radius);
}
.lt-root .lt-no-dates > * {
	margin: 0;
}
.lt-root .lt-no-dates > * + * {
	margin-top: 0.5em;
}


/* ---------- Layout breakpoints (Blocksy defaults) ----------
     Desktop ≥ 1000px · Tablet 690–999px · Mobile < 690px */
@media (max-width: 999px) {
	/* 2x2: date + town, then venue + button. */
	.lt-card-primary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Group: title across the top; date range + toggle beneath. */
	.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) {
	.lt-cell,
	.lt-meta,
	.lt-group-title,
	.lt-group-meta,
	.lt-group-toggle {
		padding: var(--lt-cell-pad-mob);
		font-size: 0.95em;
	}
	/* Mobile layout setting: 1 per line. */
	.lt-root[data-mobile-cols="1"] .lt-card-primary,
	.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;
	}
}

/* Very narrow phones: always one per line. */
@media (max-width: 420px) {
	.lt-card-primary,
	.lt-group-row {
		grid-template-columns: 1fr;
	}
	.lt-group-title,
	.lt-group-meta,
	.lt-group-toggle {
		grid-column: 1 / span 1;
	}
}


/* ---------- Lines between cells ----------
   Borders of width --lt-gap in --lt-seam. A row always has 4 cells, so
   which cell needs a left/top line is fixed per layout:
     desktop 4 across → left line on cells 2–4
     2x2              → left on 2 & 4, top on 3 & 4
     1 per line       → top on 2–4
   Grouped-date headers follow the same pattern. */
.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);
	}
	.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 ----------
   Keyboard focus rings only (:focus-visible), so mouse clicks don't
   leave outlines. */
.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-presale-cta: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;
}