/* CARD3N enhancements: only what Elementor v4 can't express. Every selector is scoped to c3- classes. */

/* Condensed widths from the design (font-stretch) */
.c3-masthead-text, .c3-kicker, .c3-kicker-sm, .c3-kicker-xs, .c3-label, .c3-label-14, .c3-micro,
.c3-coverline-kicker, .c3-chip, .c3-ticket-row, .c3-ns-dow, .c3-video-tag, .c3-badge, .c3-badge-sm, .c3-pill-ink,
.c3-show-dow, .c3-show-year, .c3-tag-ink, .c3-rec, .c3-timecode, .c3-lt-sub, .c3-corner-tag { font-stretch: 70%; }
.c3-tag-dark, .c3-role-tag { font-stretch: 72%; }
.c3-btn, .c3-text-link, .c3-text-link-sm, .c3-link-yellow, .c3-link-magenta, .c3-filter, .c3-size, .c3-bio-btn, .c3-chip-link,
.c3-label-13, .c3-label-15, .c3-dt-yellow, .c3-table-cap, .c3-plot-box, .c3-plot-outline, .c3-plot-side, .c3-plot-audience { font-stretch: 75%; }
.c3-text-link-sm, .c3-link-magenta { text-underline-offset: 5px; }

/* Typography details */
.c3-cover-hl, .c3-h2-xl, .c3-h2-lg, .c3-h2-live, .c3-h3-show { text-wrap: balance; }
.c3-text-link { text-underline-offset: 5px; }
/* Accent span inside a heading (Elementor can't style inline spans) */
.c3-h2-live span, .c3-accent-pink span { color: var(--pink, #FF2E88); }
.c3-accent-magenta span { color: var(--magenta, #C80F5E); }
.c3-accent-cyan span { color: var(--cyan, #18C0E6); }

/* Cover photo: soft edges so the smaller, centred photo melts into the sky */
.c3-cover .c3-cover-layer {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
	pointer-events: none;
}
.c3-cover .c3-cover-layer:not(.c3-cover-cutout) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 70px);
	mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 70px);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
/* Tablet and mobile: the photo sits higher, so its bottom edge fades too */
@media (max-width: 1024px) {
	.c3-cover .c3-cover-layer {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 80px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, #000 calc(100% - 80px), transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
	.c3-cover .c3-cover-layer:not(.c3-cover-cutout) {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 80px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 80px), transparent 100%);
	}
}

/* Ticker crawl */
@keyframes c3-crawl { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.c3-ticker-text { animation: c3-crawl 38s linear infinite; will-change: transform; }

/* Video card: play button grows when the whole card is hovered; inline player */
a:hover .c3-play, a:focus-visible .c3-play { transform: scale(1.08); }
.c3-video-frame iframe, .c3-video-frame-lg iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

/* Big page headings: the last word gets the outlined, shadowed accent */
#shows-hl span, #about-hl span, #epk-hl span { color: var(--pink, #FF2E88); -webkit-text-stroke: 2px var(--ink, #111014); text-shadow: 6px 6px 0 var(--ink, #111014); }
#media-hl span { color: var(--yellow, #FFE135); -webkit-text-stroke: 2px var(--ink, #111014); text-shadow: 6px 6px 0 var(--ink, #111014); }
#merch-hl span { color: var(--white, #FFFFFF); -webkit-text-stroke: 2px var(--ink, #111014); text-shadow: 6px 6px 0 var(--ink, #111014); }
@media (max-width: 767px) {
	#shows-hl span, #about-hl span, #epk-hl span, #media-hl span, #merch-hl span { text-shadow: 4px 4px 0 var(--ink, #111014); }
}

/* About: drop cap, CARD3N TV badge, scanlines, blinking REC dot */
#story-lead::first-letter { font-family: var(--font-display, Anton), Impact, sans-serif; float: left; font-size: 104px; line-height: .82; padding: 6px 12px 0 0; color: var(--pink, #FF2E88); }
.c3-tv-badge span { background: var(--pink, #FF2E88); padding: 2px 6px; }
.c3-scanlines { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 4px) !important; }
.c3-rec, .c3-timecode { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
@keyframes c3-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
.c3-rec-dot { animation: c3-blink 1.4s steps(1) infinite; }
.c3-viewfinder { pointer-events: none; }

/* Booking: vertical stage-side labels */
#plot-sr { writing-mode: vertical-rl; transform: rotate(180deg); inset: 40% auto auto 1.5% !important; }
#plot-sl { writing-mode: vertical-rl; inset: 40% 1.5% auto auto !important; }

/* Toggle states set by card3n.js */
.elementor .c3-filter.is-active { background: var(--yellow, #FFE135); box-shadow: 4px 4px 0 var(--ink, #111014); }
.elementor .c3-size.is-active { background: var(--ink, #111014); color: var(--white, #FFFFFF); }
.elementor .c3-bio-btn.is-active { background: var(--yellow, #FFE135); }
.elementor .c3-bio-btn.is-copied { background: var(--cyan, #18C0E6); }
#bio-text { white-space: pre-line; }
#spotify-embed iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; display: block; }
#spotify-embed.has-player { padding: 0; background: transparent; }

/* Focus ring from the design */
.c3-section a:focus-visible, .c3-section button:focus-visible { outline: 3px solid var(--cyan, #18C0E6); outline-offset: 3px; }

/* Booking inquiry form (WPForms) — details its Elementor style controls don't cover */
.c3-form-slot .wpforms-container { margin: 0; }
.c3-form-slot .wpforms-form { font-family: var(--font-body, 'Bricolage Grotesque'), sans-serif; }
.c3-form-slot .wpforms-field { padding: 10px 0; }
.c3-form-slot .wpforms-field-label {
	font-family: var(--font-body, 'Bricolage Grotesque'), sans-serif !important; font-weight: 800 !important; font-stretch: 75%;
	font-size: 14px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink, #111014) !important;
}
.c3-form-slot .wpforms-required-label { color: var(--magenta, #C80F5E) !important; }
.c3-form-slot input.wpforms-field-large, .c3-form-slot select.wpforms-field-large, .c3-form-slot textarea {
	font-family: inherit !important; font-size: 17px !important; min-height: 50px; box-shadow: none !important;
}
.c3-form-slot input:focus, .c3-form-slot select:focus, .c3-form-slot textarea:focus {
	outline: 3px solid var(--cyan, #18C0E6) !important; outline-offset: 0; box-shadow: none !important;
}
.c3-form-slot .wpforms-submit-container { padding-top: 16px !important; }
.c3-form-slot button.wpforms-submit {
	font-family: var(--font-body, 'Bricolage Grotesque'), sans-serif !important; font-weight: 800 !important; font-stretch: 75%;
	font-size: 18px !important; letter-spacing: 0.06em; text-transform: uppercase; min-height: 54px; padding: 0 28px !important;
	box-shadow: none; transition: transform .15s ease, box-shadow .15s ease;
}
.c3-form-slot button.wpforms-submit:hover, .c3-form-slot button.wpforms-submit:focus-visible {
	transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink, #111014) !important;
	background: var(--yellow, #FFE135) !important; color: var(--ink, #111014) !important;
}
.c3-form-slot .wpforms-confirmation-container-full {
	background: var(--cyan, #18C0E6) !important; border: 3px solid var(--ink, #111014) !important; color: var(--ink, #111014) !important;
	padding: 32px !important; margin: 0 !important;
}
.c3-form-slot .wpforms-confirmation-container-full h3 {
	font-family: var(--font-display, Anton), Impact, sans-serif; font-weight: 400; font-size: 48px; line-height: .95;
	text-transform: uppercase; color: var(--ink, #111014); margin: 0 0 14px;
}
.c3-form-slot .wpforms-confirmation-container-full p { font-size: 19px; line-height: 1.5; margin: 0; }
@media (max-width: 767px) {
	.c3-form-slot .wpforms-field.wpforms-one-half { width: 100% !important; margin-left: 0 !important; float: none !important; }
	.c3-form-slot .wpforms-confirmation-container-full h3 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.c3-form-slot button.wpforms-submit { transition: none; }
	.c3-ticker-text, .c3-rec-dot { animation: none; }
	.c3-btn, .c3-lift, .c3-slide, .c3-play, .c3-event { transition: none; }
}