/* DFW Concerts. Inherits the theme's fonts; override the variables below in your theme to restyle. */
.dfwc {
	--dfwc-stub: #ffd23f;      /* marquee yellow */
	--dfwc-stub-ink: #14213d;  /* night navy */
	--dfwc-alert: #c8102e;
	--dfwc-new: #1d6b45;
	--dfwc-line: color-mix(in srgb, currentColor 16%, transparent);
	--dfwc-soft: color-mix(in srgb, currentColor 62%, transparent);
	--dfwc-radius: 6px;
	max-width: 960px;
	margin-inline: auto;
}

/* Filters */
.dfwc-filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 14px;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--dfwc-line);
	margin-bottom: 8px;
}
.dfwc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: .875rem; }
.dfwc-filters label span { color: var(--dfwc-soft); }
.dfwc-f-q { grid-column: 1 / -1; }
.dfwc-filters input, .dfwc-filters select {
	font: inherit; padding: 9px 10px; border: 1px solid var(--dfwc-line);
	border-radius: var(--dfwc-radius); background: transparent; color: inherit; min-width: 0;
}
.dfwc-f-actions { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.dfwc-f-actions button {
	font: inherit; font-weight: 700; padding: 10px 18px; border: 0; border-radius: var(--dfwc-radius);
	background: var(--dfwc-stub-ink); color: #fff; cursor: pointer;
}
.dfwc-f-actions a { color: inherit; font-size: .875rem; }

.dfwc-count { color: var(--dfwc-soft); font-size: .875rem; margin: 14px 0 0; }
.dfwc-empty { padding: 32px 0; color: var(--dfwc-soft); }

/* Month headings act as section breaks in a long calendar */
.dfwc-month {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 900;
	font-stretch: condensed;
	letter-spacing: -.01em;
	line-height: 1.1;
	margin: 36px 0 10px;
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	padding: 8px 0;
	background: inherit;
	z-index: 1;
}

/* Card: ticket stub | details | artwork | button */
.dfwc-card {
	display: grid;
	grid-template-columns: 76px 1fr auto auto;
	align-items: center;
	gap: 0 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--dfwc-line);
}
.dfwc-card.is-off .dfwc-title a { text-decoration: line-through; text-decoration-thickness: 2px; }
.dfwc-card.is-off .dfwc-stub { filter: grayscale(1); opacity: .6; }

.dfwc-stub {
	align-self: stretch;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 84px;
	background: var(--dfwc-stub);
	color: var(--dfwc-stub-ink);
	text-decoration: none;
	border-radius: 4px;
	border-right: 2px dashed color-mix(in srgb, var(--dfwc-stub-ink) 40%, transparent);
	/* notches where a ticket would tear */
	-webkit-mask: radial-gradient(circle 7px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
	              radial-gradient(circle 7px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
	        mask: radial-gradient(circle 7px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
	              radial-gradient(circle 7px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.dfwc-stub-wd, .dfwc-stub-m { font-size: .75rem; font-weight: 700; line-height: 1.2; }
.dfwc-stub-d { font-size: 2.1rem; font-weight: 900; font-stretch: condensed; line-height: 1; letter-spacing: -.03em; }

.dfwc-body { min-width: 0; }
.dfwc-title { font-size: 1.125rem; line-height: 1.3; margin: 0 0 2px; }
.dfwc-title a { color: inherit; text-decoration: none; }
.dfwc-title a:hover { text-decoration: underline; }
.dfwc-where, .dfwc-when { margin: 0; font-size: .9375rem; line-height: 1.45; }
.dfwc-when { color: var(--dfwc-soft); }
.dfwc-city { color: var(--dfwc-soft); }
.dfwc-price::before { content: ""; display: inline-block; width: 1.4em; }

.dfwc-thumb { width: 132px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }

.dfwc-tix {
	display: inline-block;
	font-weight: 700; font-size: .9375rem;
	padding: 10px 16px;
	border-radius: var(--dfwc-radius);
	background: var(--dfwc-stub-ink);
	color: #fff !important;
	text-decoration: none;
	white-space: nowrap;
}
.dfwc-tix:hover { background: color-mix(in srgb, var(--dfwc-stub-ink) 82%, #fff); }
.dfwc-tix.is-alt { background: transparent; color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.dfwc a:focus-visible, .dfwc button:focus-visible, .dfwc input:focus-visible, .dfwc select:focus-visible {
	outline: 3px solid var(--dfwc-stub); outline-offset: 2px;
}

/* Status badges */
.dfwc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; }
.dfwc-badge { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; line-height: 1.5; }
.dfwc-badge.is-cancelled, .dfwc-badge.is-removed { background: var(--dfwc-alert); color: #fff; }
.dfwc-badge.is-postponed, .dfwc-badge.is-rescheduled, .dfwc-badge.is-offsale, .dfwc-badge.is-updated { background: var(--dfwc-stub); color: var(--dfwc-stub-ink); }
.dfwc-badge.is-new { background: var(--dfwc-new); color: #fff; }

/* Change history */
.dfwc-history { list-style: none; padding: 0; margin: 6px 0 0; font-size: .875rem; }
.dfwc-history li { padding: 3px 0; }
.dfwc-history time { font-weight: 700; margin-right: 6px; }
.dfwc-history del { color: var(--dfwc-soft); }
.dfwc-history ins { text-decoration: none; font-weight: 700; }

.dfwc-pages { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 28px 0; }
.dfwc-pages .page-numbers { padding: 8px 12px; border-radius: var(--dfwc-radius); color: inherit; text-decoration: none; }
.dfwc-pages .current { background: var(--dfwc-stub); color: var(--dfwc-stub-ink); font-weight: 700; }

/* Single concert */
.dfwc-single { margin-bottom: 1.5em; }
.dfwc-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--dfwc-radius); margin-bottom: 14px; }
.dfwc-alert { border-left: 4px solid var(--dfwc-alert); padding: 10px 14px; background: color-mix(in srgb, var(--dfwc-alert) 8%, transparent); }
.dfwc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; margin: 18px 0; }
.dfwc-facts dt { font-size: .875rem; color: var(--dfwc-soft); margin: 0; }
.dfwc-facts dd { margin: 2px 0 0; line-height: 1.45; }
.dfwc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dfwc-h { font-size: 1.25rem; margin: 1.5em 0 .25em; }

@media (max-width: 640px) {
	.dfwc-card { grid-template-columns: 64px 1fr; gap: 10px 14px; }
	.dfwc-stub { min-height: 72px; }
	.dfwc-stub-d { font-size: 1.75rem; }
	.dfwc-thumb { display: none; }
	.dfwc-tix { grid-column: 2; justify-self: start; padding: 8px 14px; }
	.dfwc-price { display: block; }
	.dfwc-price::before { display: none; }
}