/*
 * Happy Tunes Events - frontend.
 * Builds on the Happy Tunes theme (.ht-* classes and --ht-* colours);
 * only the parts the theme does not have are defined here.
 */

/* Anchors styled as theme tabs/chips (the theme's ".ht-site a" would make them inherit). */
.hte-wrap a.ht-tab,
.hte-wrap a.ht-chip { color: var(--ht-dim, #666); text-decoration: none; }
.hte-wrap a.ht-tab.is-active,
.hte-wrap a.ht-chip.is-active { color: #fff; }
.hte-wrap a.ht-chip:hover,
.hte-wrap a.ht-tab:not(.is-active):hover { border-color: var(--ht-pink, #e11d74); }

/* Single event: details column + text. */
.hte-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas: "body aside";
	gap: 22px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}
.hte-single .hte-aside { grid-area: aside; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
.hte-single .hte-body { grid-area: body; max-width: none; margin: 0; }
@media (max-width: 900px) {
	.hte-single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "body"; }
	.hte-single .hte-aside { position: static; }
}

.hte-box { padding: 18px 20px; }
.hte-label {
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ht-mute, #888);
}
.hte-label i { color: var(--ht-pink, #e11d74); }
.hte-big { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ht-text, #222); }
.hte-line { font-weight: 800; font-size: 16px; color: var(--ht-text, #222); overflow-wrap: anywhere; }
.hte-tz { color: var(--ht-mute, #888); font-size: 13px; margin-left: 4px; }
.hte-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ht-mute, #888); }
.hte-rel:empty { display: none; }
.hte-rel {
	display: inline-block; margin-top: 10px; padding: 4px 11px; border-radius: 999px;
	font-size: 12.5px; font-weight: 800;
	color: var(--ht-cyan, #0b93a1); border: 1px solid currentColor;
}
.hte-rel.is-live { color: #fff; background: var(--ht-pink, #e11d74); border-color: transparent; }
.hte-rel.is-ended { color: var(--ht-mute, #888); }

.hte-mini {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 7px 12px;
	border-radius: 10px; border: 1px solid var(--ht-border2, #ddd); background: var(--ht-surface2, #f6f6f6);
	color: var(--ht-text, #222); font: inherit; font-size: 13px; font-weight: 800; line-height: 1.2;
	cursor: pointer; text-decoration: none; transition: .15s;
}
.hte-mini:hover { border-color: var(--ht-pink, #e11d74); }
/* The parent theme sets button text to upper case. */
.hte-wrap .hte-mini,
.hte-wrap .hte-share { text-transform: none; letter-spacing: normal; }
.hte-mini.is-copied { color: #fff; background: var(--ht-pink, #e11d74); border-color: transparent; }
.hte-cal { display: flex; flex-wrap: wrap; gap: 8px; }
.hte-cal .hte-mini { margin-top: 0; }

.hte-bands { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hte-bands li { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ht-text, #222); }
.hte-bands a:hover { color: var(--ht-pink, #e11d74); }
.hte-bands .hte-ext { font-size: 12px; color: var(--ht-mute, #888); }
.hte-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.hte-tags .ht-chip { padding: 5px 12px; font-size: 12.5px; }

.hte-links { display: flex; flex-wrap: wrap; gap: 10px; }
.hte-links .ht-btn { flex: 1 1 140px; justify-content: center; padding: 12px 16px; }
.hte-share { width: 100%; justify-content: center; }
.hte-share.is-copied { filter: brightness(1.1); }

.hte-logo { margin: 0 0 20px; text-align: center; }
.hte-logo img { display: inline-block; max-width: 100%; max-height: 340px; width: auto; height: auto; object-fit: contain; }

.hte-back { text-align: center; margin-top: 26px; }

/* Lists. */
.hte-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hte-toolbar .hte-mini { margin-top: 0; }
.hte-filter { margin-bottom: 18px; }
.hte-intro { max-width: 640px; margin: 12px auto 0; color: var(--ht-dim, #666); font-weight: 600; }
.hte-card { color: inherit; text-decoration: none; }
.hte-card.is-past { opacity: .82; }
.hte-card.is-past:hover { opacity: 1; }
.hte-card .ht-event-title { overflow-wrap: anywhere; }
.hte-card .ht-event-loc { align-items: flex-start; }
.hte-card .ht-event-loc i { margin-top: 3px; }
.hte-card-logo { flex: none; align-self: center; width: 58px; height: 58px; }
.hte-card-logo img { width: 58px; height: 58px; object-fit: cover; border-radius: 14px; display: block; }
@media (max-width: 420px) { .hte-card-logo { display: none; } }
.hte-empty-card { padding: 34px; text-align: center; color: var(--ht-dim, #666); font-weight: 700; }
.hte-empty-icon { font-size: 34px; margin-bottom: 8px; }
.hte-more { text-align: center; margin-top: 20px; }
.hte-shortcode .ht-events-list { margin: 1em 0; }
.ht-content .hte-shortcode a.ht-event { text-decoration: none; color: inherit; }
.ht-content .hte-shortcode a.ht-btn { text-decoration: none; }