﻿.ftl-app-shell *,
.ftl-app-shell *::before,
.ftl-app-shell *::after {
	border-radius: 0 !important;
}
.ftl-app-shell {
	font-family: 'Montserrat', sans-serif;
	-webkit-tap-highlight-color: transparent;
}
.ftl-app-shell *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class*="fa-"]) {
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}
/* Keep Font Awesome fonts on icon elements (do not force Montserrat onto <i>) */
.ftl-app-shell i.fa,
.ftl-app-shell i.fas,
.ftl-app-shell i.far,
.ftl-app-shell i.fab,
.ftl-app-shell i.fa-solid,
.ftl-app-shell i.fa-regular,
.ftl-app-shell i.fa-brands,
.ftl-app-shell [class*="fa-"].fa-solid,
.ftl-app-shell [class*="fa-"].fa-regular,
.ftl-app-shell [class*="fa-"].fa-brands {
	font-family: "Font Awesome 6 Free" !important;
}
.ftl-app-shell i.fab,
.ftl-app-shell i.fa-brands,
.ftl-app-shell [class*="fa-"].fa-brands {
	font-family: "Font Awesome 6 Brands" !important;
}
.ftl-app-shell i.fa-solid,
.ftl-app-shell i.fas,
.ftl-app-shell [class*="fa-"].fa-solid {
	font-weight: 900 !important;
}
.ftl-app-shell i.fa-regular,
.ftl-app-shell i.far,
.ftl-app-shell [class*="fa-"].fa-regular {
	font-weight: 400 !important;
}
.ftl-app-shell a,
.ftl-app-shell button,
.ftl-app-shell .nav-btn,
.ftl-app-shell .schedule-tab,
.ftl-app-shell .artist-chip,
.ftl-app-shell .glass-card,
.ftl-app-shell .gallery-dot,
.ftl-app-shell [onclick],
.ftl-app-shell [role="button"] {
	transition:
		color 0.95s ease,
		background-color 0.95s ease,
		border-color 0.95s ease,
		opacity 0.95s ease,
		transform 0.95s ease,
		box-shadow 0.95s ease,
		filter 0.95s ease;
}
.ftl-app-shell .transition,
.ftl-app-shell .transition-all,
.ftl-app-shell .transition-colors,
.ftl-app-shell .transition-opacity,
.ftl-app-shell .transition-transform {
	transition-duration: 0.95s !important;
	transition-timing-function: ease !important;
}
body.ftl-app-body,
body.ftl-app-page {
	background-color: #000000;
	color: #ffffff;
	overflow-x: hidden;
}
.ftl-app-shell img {
	transition: filter 0.95s ease, transform 0.95s ease;
}
.ftl-app-shell img.sponsor-logo-arts-council {
	transform: translateX(24px);
}
@keyframes hero-arrow-flash {
	0%, 100% { opacity: 0.25; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(4px); }
}
.ftl-app-shell .hero-scroll-arrow {
	animation: hero-arrow-flash 1.4s ease-in-out infinite;
}
.ftl-app-shell .hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 2.2s ease-in-out;
	z-index: 0;
	pointer-events: none;
}
.ftl-app-shell .hero-slide.active {
	opacity: 1;
	z-index: 1;
}
.ftl-app-shell .hero-slide.is-leaving {
	opacity: 0;
	z-index: 2;
}
.ftl-app-shell .hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	will-change: transform, opacity;
}
.ftl-app-shell .hero-slide.active img {
	animation: kenburns-a 9s ease-in-out forwards;
}
.ftl-app-shell .hero-slide.active.kenburns-b img {
	animation-name: kenburns-b;
}
.ftl-app-shell .hero-slide.active.kenburns-c img {
	animation-name: kenburns-c;
}
@keyframes kenburns-a {
	0% { transform: scale(1) translate(0, 0); }
	100% { transform: scale(1.18) translate(-3%, -2%); }
}
@keyframes kenburns-b {
	0% { transform: scale(1.12) translate(-2%, 1%); }
	100% { transform: scale(1) translate(2%, -2%); }
}
@keyframes kenburns-c {
	0% { transform: scale(1) translate(2%, 0); }
	100% { transform: scale(1.16) translate(-1%, 3%); }
}
.ftl-app-shell .custom-scrollbar::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.ftl-app-shell .custom-scrollbar::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.4);
}
.ftl-app-shell .custom-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
}
.ftl-app-shell .glass-card {
	background: rgba(13, 13, 13, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.ftl-app-shell .glass-nav {
	background: rgba(0, 0, 0, 0.98);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Kill Hello Elementor reset.css magenta button border on bottom nav */
.ftl-app-shell .ftl-mobile-nav .nav-btn,
.ftl-app-shell .ftl-mobile-nav button {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent;
	padding: 0;
	color: inherit;
}
.ftl-app-shell .nav-btn,
.ftl-app-shell .nav-btn i,
.ftl-app-shell .nav-btn span {
	transition: color 0.95s ease, transform 0.95s ease, filter 0.95s ease, opacity 0.95s ease;
}
.ftl-app-shell .active-tab-icon {
	color: #f472b6;
	transform: translateY(-2px);
	filter: drop-shadow(0 2px 6px rgba(244, 114, 182, 0.45));
	transition: color 0.95s ease, transform 0.95s ease, filter 0.95s ease;
}
.ftl-app-shell .no-scrollbar::-webkit-scrollbar {
	display: none;
}
.ftl-app-shell .no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.ftl-app-shell .schedule-gallery,
.ftl-app-shell .swipeable {
	cursor: grab;
	/* Allow vertical page scroll while still enabling horizontal swipe */
	touch-action: pan-x pan-y;
}
.ftl-app-shell .schedule-gallery.is-dragging,
.ftl-app-shell .swipeable.is-dragging {
	cursor: grabbing;
	user-select: none;
	touch-action: pan-x;
}
.ftl-app-shell .schedule-gallery {
	display: flex;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.ftl-app-shell .schedule-gallery::-webkit-scrollbar {
	display: none;
}
.ftl-app-shell .schedule-gallery-slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
/* Day artist gallery: keep square art readable without trapping content below the fold */
.ftl-app-shell #artistGallery .schedule-gallery-slide .aspect-square {
	max-height: min(48dvh, 70vw);
	aspect-ratio: 1 / 1;
	width: min(100%, 48dvh, 70vw);
	margin-left: auto;
	margin-right: auto;
}
.ftl-app-shell .gallery-dot {
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.25);
	transition: background 0.95s ease, transform 0.95s ease;
}
.ftl-app-shell .gallery-dot.active {
	background: #f472b6;
	transform: scale(1.25);
}
.ftl-app-shell .artist-chip-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
	width: 100%;
	overflow: hidden;
}
.ftl-app-shell .artist-chip-row .artist-chip {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	line-height: 1.2;
	white-space: normal;
	word-break: break-word;
}
.ftl-app-shell .artist-photo-grid {
	width: 100%;
}
.ftl-app-shell .artist-grid-card {
	cursor: pointer;
	display: block;
	width: 100%;
}
.ftl-app-shell .artist-grid-card:active {
	transform: scale(0.97);
}
.ftl-app-shell .artist-grid-media {
	position: relative;
}
.ftl-app-shell .artist-grid-card .artist-photo {
	filter: none !important;
	transition: filter 0.45s ease, transform 0.45s ease, opacity 0.45s ease;
}
.ftl-app-shell .artist-grid-card:hover .artist-photo,
.ftl-app-shell .artist-grid-card:focus-visible .artist-photo {
	filter: brightness(1.22) contrast(1.05) !important;
}
.ftl-app-shell .artist-grid-name {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 100%;
	padding: 10px 6px 5px 6px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	text-align: left;
}
.ftl-app-shell .artist-grid-card:hover .artist-grid-name,
.ftl-app-shell .artist-grid-card:focus-visible .artist-grid-name {
	opacity: 1;
	visibility: visible;
}
.ftl-app-shell .artist-grid-name-track {
	display: inline-block;
	max-width: none;
	white-space: nowrap;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	transform: translateX(0);
	will-change: transform;
}

/* Toast + modals sit outside tab flow but inside shell */
#toast.ftl-toast,
.ftl-app-shell #toast {
	position: fixed;
}

.ftl-app-shell .featured-headliners-track {
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
}

.ftl-app-shell .ftl-install-sheet {
	animation: ftl-install-up 0.35s ease;
}
@keyframes ftl-install-up {
	from { transform: translateY(18px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.ftl-app-shell.ftl-is-standalone #installMenuBtn,
.ftl-app-shell.ftl-is-standalone #installPromptModal {
	display: none !important;
}

/* ==========================================================================
   Inclusive contrast (WCAG 2.1 AA) — text / CTAs / focus (borders left subtle)
   ========================================================================== */
.ftl-app-shell {
	--ftl-accent: #f472b6; /* pink-400 ≈ 7.9:1 on black */
	--ftl-accent-solid: #ec4899;
	--ftl-muted: #d1d5db; /* gray-300 ≈ 14:1 */
	--ftl-muted-strong: #e5e7eb; /* gray-200 */
	--ftl-on-accent: #000000; /* black on pink-500 ≈ 5.95:1 */
	color: #ffffff;
}

/* Muted text that previously used gray-400/500/600 */
.ftl-app-shell .text-gray-400,
.ftl-app-shell .text-gray-500,
.ftl-app-shell .text-gray-600,
.ftl-app-shell .hover\:text-gray-300:hover {
	color: var(--ftl-muted) !important;
}
.ftl-app-shell .text-gray-300 {
	color: var(--ftl-muted-strong) !important;
}

/* Accent text: brighten brand pink for small labels */
.ftl-app-shell .text-pink-500,
.ftl-app-shell .hover\:text-pink-500:hover,
.ftl-app-shell .active-tab-icon {
	color: var(--ftl-accent) !important;
}

/* Pink fills: white-on-pink fails AA — use black label text */
.ftl-app-shell .bg-pink-500,
.ftl-app-shell .bg-pink-400,
.ftl-app-shell .hover\:bg-pink-400:hover {
	color: var(--ftl-on-accent) !important;
}
.ftl-app-shell .bg-pink-500.text-white,
.ftl-app-shell .bg-pink-400.text-white,
.ftl-app-shell .bg-pink-500 .text-white,
.ftl-app-shell .bg-pink-400 .text-white,
.ftl-app-shell .bg-pink-500 i,
.ftl-app-shell .bg-pink-400 i,
.ftl-app-shell a.bg-pink-500,
.ftl-app-shell button.bg-pink-500 {
	color: var(--ftl-on-accent) !important;
}

.ftl-app-shell .gallery-dot.active {
	background: var(--ftl-accent) !important;
}

.ftl-app-shell ::placeholder {
	color: #c4c4c4 !important;
	opacity: 1;
}

/* Clear keyboard focus for interactive controls */
.ftl-app-shell a:focus-visible,
.ftl-app-shell button:focus-visible,
.ftl-app-shell input:focus-visible,
.ftl-app-shell textarea:focus-visible,
.ftl-app-shell select:focus-visible,
.ftl-app-shell [role="button"]:focus-visible,
.ftl-app-shell [tabindex]:focus-visible {
	outline: 2px solid var(--ftl-accent) !important;
	outline-offset: 2px;
}

/* Inactive bottom nav: keep labels readable at tiny sizes */
.ftl-app-shell .nav-btn.text-gray-400,
.ftl-app-shell .nav-btn.text-gray-400 span,
.ftl-app-shell .nav-btn.text-gray-400 i {
	color: var(--ftl-muted) !important;
}
.ftl-app-shell .nav-btn.text-pink-500,
.ftl-app-shell .nav-btn.text-pink-500 span,
.ftl-app-shell .nav-btn.text-pink-500 i {
	color: var(--ftl-accent) !important;
}

/* Modals always fit the viewport; close stays visible */
.ftl-app-shell .ftl-modal-overlay {
	overscroll-behavior: contain;
}
.ftl-app-shell .ftl-modal-panel {
	display: flex;
	flex-direction: column;
	max-height: 100dvh;
	max-height: 100svh;
	width: 100%;
	overflow: hidden;
	position: relative;
}
.ftl-app-shell .ftl-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.ftl-app-shell .ftl-modal-close-sticky {
	position: absolute;
	top: max(10px, env(safe-area-inset-top, 0px));
	right: max(10px, env(safe-area-inset-right, 0px));
	z-index: 90;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	flex-shrink: 0;
}
.ftl-app-shell #scheduleDetailModal .ftl-modal-panel {
	/* Bottom-sheet on mobile still cannot exceed the screen */
	max-height: 100dvh;
	max-height: 100svh;
}
.ftl-app-shell #scheduleGallery.schedule-gallery {
	flex: 1 1 auto;
	min-height: 0;
	/* Keep horizontal swipe; do not clip with overflow-x:hidden */
	overflow-x: auto;
	overflow-y: hidden;
}
.ftl-app-shell #scheduleDetailModal .schedule-gallery-slide {
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.ftl-app-shell #scheduleDetailModal .schedule-gallery-slide .aspect-square {
	max-height: min(42dvh, 70vw);
	aspect-ratio: 1 / 1;
	width: min(100%, 42dvh, 70vw);
	margin-left: auto;
	margin-right: auto;
}
.ftl-app-shell #appMenu {
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.ftl-modal-open,
body.ftl-modal-open {
	overflow: hidden !important;
}

/* ==========================================================================
   Desktop / laptop layout (≥1024px)
   ========================================================================== */
.ftl-app-shell .ftl-desktop-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ftl-app-shell .ftl-desktop-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex: 1 1 auto;
		min-width: 0;
	}

	.ftl-app-shell .ftl-desktop-nav-btn {
		appearance: none;
		background: transparent;
		border: 0;
		border-bottom: 2px solid transparent;
		color: #d1d5db;
		cursor: pointer;
		font-family: inherit;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.08em;
		line-height: 1;
		padding: 10px 14px;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.ftl-app-shell .ftl-desktop-nav-btn:hover {
		color: #fff;
	}

	.ftl-app-shell .ftl-desktop-nav-btn.is-active {
		color: var(--ftl-accent, #f472b6);
		border-bottom-color: var(--ftl-accent, #f472b6);
	}

	.ftl-app-shell .ftl-mobile-only,
	.ftl-app-shell .ftl-mobile-nav {
		display: none !important;
	}

	.ftl-app-shell .ftl-app-header {
		padding-left: 28px;
		padding-right: 28px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.ftl-app-shell .ftl-app-header h1 {
		font-size: 15px;
	}

	.ftl-app-shell > .ftl-app-frame > main {
		padding-bottom: 40px;
	}

	/* Home: hero + intro side by side */
	.ftl-app-shell #screen-home {
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 28px 24px;
		box-sizing: border-box;
	}

	.ftl-app-shell .ftl-home-top {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 28px;
		align-items: stretch;
		margin-bottom: 8px;
	}

	.ftl-app-shell .ftl-home-hero {
		aspect-ratio: 16 / 10;
		border-bottom: 0;
		min-height: 360px;
		max-height: 520px;
	}

	.ftl-app-shell .ftl-home-hero .sponsor-logo {
		width: 28% !important;
		top: 18px !important;
		right: 18px !important;
	}

	.ftl-app-shell .ftl-home-hero .hero-scroll-arrow {
		display: none;
	}

	.ftl-app-shell .ftl-home-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 12px 0 0 !important;
		gap: 18px;
	}

	.ftl-app-shell .ftl-home-copy h1 .text-3xl {
		font-size: 2.75rem;
		line-height: 1.05;
	}

	.ftl-app-shell .ftl-home-copy p.text-xs {
		font-size: 14px;
		line-height: 1.65;
		max-width: 42ch;
	}

	.ftl-app-shell .ftl-home-copy .text-\[10px\] {
		font-size: 12px;
	}

	.ftl-app-shell .ftl-home-rest {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.ftl-app-shell .ftl-day-widgets {
		gap: 14px;
	}

	.ftl-app-shell .ftl-day-widgets > div {
		padding: 18px 14px !important;
	}

	.ftl-app-shell .ftl-day-widgets h3 {
		font-size: 11px !important;
	}

	.ftl-app-shell .ftl-day-widgets h4 {
		font-size: 13px !important;
		margin-top: 6px !important;
	}

	.ftl-app-shell #featuredHeadlinersTrack {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		overflow: visible;
	}

	.ftl-app-shell .ftl-featured-card {
		width: auto !important;
		flex-shrink: 1;
	}

	/* Schedule / artists / about / contact content width */
	.ftl-app-shell #screen-lineup,
	.ftl-app-shell #screen-artists,
	.ftl-app-shell #screen-about,
	.ftl-app-shell #screen-contact {
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
		padding: 28px 28px 40px !important;
		box-sizing: border-box;
	}

	.ftl-app-shell #screen-lineup > .space-y-1 h1,
	.ftl-app-shell #screen-artists > .space-y-1 h1,
	.ftl-app-shell #screen-about > .space-y-1 h1,
	.ftl-app-shell #screen-contact h1 {
		font-size: 2rem;
	}

	.ftl-app-shell #screen-lineup > .space-y-1 h3,
	.ftl-app-shell #screen-artists > .space-y-1 h3,
	.ftl-app-shell #screen-about > .space-y-1 h3 {
		font-size: 13px;
	}

	.ftl-app-shell #screen-lineup > .flex.space-x-2 {
		flex-wrap: wrap;
		overflow: visible;
		gap: 8px;
	}

	.ftl-app-shell #scheduleFeed {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.ftl-app-shell #scheduleFeed > .glass-card {
		height: 100%;
	}

	.ftl-app-shell #scheduleFeed > .glass-card:only-child {
		grid-column: 1 / -1;
	}

	.ftl-app-shell .artist-chip-row {
		gap: 8px;
		overflow: visible;
	}

	.ftl-app-shell .artist-chip-row .artist-chip {
		flex: 0 1 auto;
		min-width: 120px;
		padding: 10px 14px !important;
		font-size: 11px !important;
	}

	.ftl-app-shell .artist-photo-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 14px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.ftl-app-shell #artistsContainer {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.ftl-app-shell .artist-grid-name {
		opacity: 1;
		visibility: visible;
	}

	.ftl-app-shell .artist-grid-name-track {
		font-size: 11px;
	}

	.ftl-app-shell .ftl-about-hero {
		height: 260px !important;
	}

	.ftl-app-shell .ftl-about-hero h2 {
		font-size: 1.35rem !important;
	}

	.ftl-app-shell .ftl-about-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.ftl-app-shell .ftl-about-grid .glass-card p,
	.ftl-app-shell .ftl-about-grid .glass-card h2,
	.ftl-app-shell .ftl-about-grid .glass-card h3 {
		font-size: 14px !important;
		line-height: 1.6;
	}

	.ftl-app-shell .ftl-partners-row {
		max-width: 640px;
		margin: 0 auto;
		gap: 24px;
	}

	.ftl-app-shell .ftl-partners-row img {
		height: 48px !important;
	}

	.ftl-app-shell .ftl-contact-grid {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 18px;
		align-items: start;
	}

	.ftl-app-shell .ftl-contact-grid > .glass-card:last-child {
		grid-column: 1 / -1;
	}

	.ftl-app-shell #screen-contact input,
	.ftl-app-shell #screen-contact textarea,
	.ftl-app-shell #screen-contact select {
		font-size: 14px !important;
		padding: 12px 14px !important;
	}

	.ftl-app-shell #scheduleDetailModal .ftl-modal-panel {
		max-width: min(920px, 92vw);
		max-height: min(88dvh, 880px);
	}

	.ftl-app-shell #scheduleDetailModal .schedule-gallery-slide .aspect-square {
		max-height: min(48dvh, 420px);
		width: min(100%, 48dvh, 420px);
	}

	.ftl-app-shell #toast {
		top: 24px;
	}
}

@media (min-width: 1280px) {
	.ftl-app-shell #featuredHeadlinersTrack {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.ftl-app-shell .artist-photo-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}
