/**
 * La Grande Partie — 2026 flyer reskin (design only).
 * Recolours the existing blue-sky layout to the flyer palette
 * (deep purple, stone cream, gold/teal/coral, Dia de los Muertos tokens).
 * No widths, paddings, or structural changes — layout is untouched.
 */

:root {
	--lgp-purple: #43297c;
	--lgp-purple-dark: #2f1d57;
	--lgp-cream: #ece0c8;
	--lgp-gold: #fabb2c;
	--lgp-teal: #4bc0a3;
	--lgp-coral: #f25470;
	--lgp-white: #ffffff;
}

/* ---- Page background: orange -> warm stone cream ---- */
body {
	background-color: var(--lgp-cream) !important;
}

/* ---- Elementor global brand colours: blue -> flyer purple ----
   These two globals drive every blue gradient/fill on the site (hero, footer,
   section overlays). Overriding them here recolours ANY page that uses them —
   including pages that are currently hidden/unpublished or built later — without
   needing to know each element id. (They are only used for backgrounds/fills,
   never text, so this is safe.) */
.elementor-kit-1659 {
	--e-global-color-3b99ab1: #43297c; /* was #0479A5 */
	--e-global-color-7b9b807: #2f1d57; /* was #4C98E7 */
}

/* ==========================================================================
   Hero (element 9783628): blue sky -> deep purple flyer night
   ========================================================================== */
.elementor-element-9783628 {
	background-image: linear-gradient(180deg, var(--lgp-purple) 0%, var(--lgp-purple-dark) 100%) !important;
	position: relative;
	overflow: hidden;
}

/* Title + subtitle to white for contrast on purple */
.elementor-element-9783628 h1,
.elementor-element-9783628 h1 a,
.elementor-element-9783628 h2,
.elementor-element-9783628 h2 a {
	color: var(--lgp-white) !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.30);
}

/* Keep hero content above the decorative tokens */
.elementor-element-9783628 > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Game-token motifs from the flyer: red d20 (left) + sugar skull (right).
   Only on pages with a tall hero (home/agenda/galerie) so they never crowd
   the logo on the compact banner heroes. */
:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628::before,
:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.96;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628::before {
	left: clamp(12px, 4.5vw, 96px);
	top: 64%;
	width: clamp(64px, 8vw, 116px);
	height: clamp(64px, 8vw, 116px);
	background-image: var(--lgp-icon-dice);
	transform: translateY(-50%) rotate(-9deg);
	opacity: 0.82;
	/* less flashy: mute the bright vector red + ground it with a soft shadow */
	filter: saturate(0.78) brightness(0.9) contrast(0.96)
		drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
}
:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628::after {
	right: clamp(12px, 4.5vw, 96px);
	top: 56%;
	width: clamp(66px, 8vw, 120px);
	height: clamp(66px, 8vw, 120px);
	background-image: var(--lgp-icon-skull);
	transform: translateY(-50%) rotate(7deg);
}

/* Old crescent next to the logo: removed (moved under the title) */
.site-logo-img::before {
	display: none !important;
}

/* Baked gold 3D crescent. Shared style; placement differs desktop vs mobile. */
:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628 > .e-con-inner::after {
	content: "";
	position: absolute;
	pointer-events: none;
	aspect-ratio: 1 / 1;
	background: var(--lgp-moon) center / contain no-repeat;
	filter:
		drop-shadow(3px 5px 5px rgba(0, 0, 0, 0.4))
		drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
	/* hidden by default; only shown on phones (bottom-left corner) */
	display: none;
}

/* Desktop: moon rests ON the clouds (foreground), under the right of the title.
   Attached to each page's cloud-divider section so it sits above the clouds. */
@media (min-width: 601px) {
	.elementor-page-1448 .elementor-element-59b78b8,
	.elementor-page-1937 .elementor-element-c1a8a22,
	.elementor-page-1994 .elementor-element-b6d8f66 {
		position: relative;
	}
	.elementor-page-1448 .elementor-element-59b78b8::before,
	.elementor-page-1937 .elementor-element-c1a8a22::before,
	.elementor-page-1994 .elementor-element-b6d8f66::before {
		content: "";
		position: absolute;
		z-index: 20;
		top: -3.6rem;
		left: auto;
		right: 15%;
		bottom: auto;
		width: clamp(74px, 6.5vw, 112px);
		aspect-ratio: 1 / 1;
		pointer-events: none;
		background: var(--lgp-moon) center / contain no-repeat;
		filter:
			drop-shadow(3px 6px 6px rgba(0, 0, 0, 0.45))
			drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.3));
	}
}
@media (max-width: 880px) {
	.elementor-element-9783628::before,
	.elementor-element-9783628::after { opacity: 0.5; }
}
/* Mobile: keep d20 / skull / moon but shrink + drop to the bottom corners
   (above the clouds) so they never overlap the wrapped title. */
@media (max-width: 600px) {
	/* phone: die OFF, moon takes the bottom-left corner, skull bottom-right */
	.elementor-element-9783628::before {
		display: none !important;
	}
	:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628::after {
		top: auto;
		bottom: 14%;
		right: 5%;
		width: 52px;
		height: 52px;
		opacity: 1;
		transform: rotate(7deg);
	}
	:is(.elementor-page-1448, .elementor-page-1937, .elementor-page-1994) .elementor-element-9783628 > .e-con-inner::after {
		display: block;
		top: auto;
		bottom: 14%;
		left: 5%;
		right: auto;
		width: 56px;
	}
}

/* ==========================================================================
   Agenda — FullCalendar list restyled to the flyer (card, purple day headers,
   gold time pills, bold purple titles)
   ========================================================================== */
.fc-theme-standard .fc-list,
.fc .fc-list {
	border: 1px solid rgba(75, 41, 124, 0.18) !important;
	border-radius: 16px;
	overflow: hidden;
	background: var(--lgp-white);
	box-shadow: 0 10px 28px rgba(47, 29, 87, 0.10);
}

/* kill default cell borders/striping */
.fc .fc-list-table td,
.fc .fc-list-table th {
	border: 0 !important;
}
/* title cell: full white, light gold on hover */
.fc .fc-list-event-title {
	background: var(--lgp-white) !important;
}
.fc .fc-list-event:hover .fc-list-event-title {
	background: rgba(250, 187, 44, 0.16) !important;
}

/* Day header → purple band */
.fc .fc-list-day-cushion,
.fc .fc-list-day th {
	background: var(--lgp-purple) !important;
	padding: 12px 18px !important;
}
.fc .fc-list-day-cushion,
.fc .fc-list-day-cushion a,
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
	color: var(--lgp-white) !important;
	font-weight: 700 !important;
	text-transform: capitalize;
	text-decoration: none !important;
}

/* Event rows */
.fc-list-table {
	width: 100%;
}
.fc .fc-list-event > td {
	padding: 10px 18px !important;
	vertical-align: middle;
	/* white gap above/below the pill row -> separates it from the purple headers */
	border-top: 8px solid var(--lgp-white) !important;
	border-bottom: 8px solid var(--lgp-white) !important;
}
/* drop the coloured dot column entirely */
.fc .fc-list-event-graphic {
	display: none !important;
}
/* Time → gold capsule (the td itself; tight row height makes it read as a pill) */
.fc td.fc-list-event-time {
	width: 1%;
	white-space: nowrap;
	text-align: center;
	background: var(--lgp-gold) !important;
	color: var(--lgp-purple-dark) !important;
	font-weight: 700;
	font-size: 0.86em;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 6px 16px !important;
}
/* Title */
.fc .fc-list-event-title a {
	color: var(--lgp-purple-dark) !important;
	font-weight: 700;
	text-decoration: none !important;
}
.fc .fc-list-event-title a:hover {
	color: var(--lgp-coral) !important;
}

/* Phones: stack each row (date / time pill / title) */
@media (max-width: 600px) {
	.fc-list-table,
	.fc-list-table tbody,
	.fc-list-table tr.fc-list-event,
	.fc-list-table tr.fc-list-day,
	.fc-list-table tr.fc-list-day > th,
	.fc-list-table .fc-list-day-cushion {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.fc-list-table tr.fc-list-event > td {
		display: block;
		width: 100% !important;
		white-space: normal;
		padding: 4px 18px !important;
	}
	.fc-list-table tr.fc-list-event > td.fc-list-event-graphic {
		display: none !important;
	}
	.fc .fc-list-event > td.fc-list-event-time {
		margin: 10px 0 2px;
		border-right: 0 !important;
		padding-right: 18px !important;
		width: 100% !important;
		color: var(--lgp-purple) !important;
	}
	.fc-list-event-title {
		padding-bottom: 14px !important;
	}
	.fc-list-event-title a {
		white-space: normal;
		font-size: 1.05em;
	}
}

/* ---- Cloud shape divider: was sky blue, match the purple hero ---- */
.elementor-shape .elementor-shape-fill {
	fill: var(--lgp-purple-dark) !important;
}

/* ==========================================================================
   Header / navigation — white links on the purple hero, gold on hover
   ========================================================================== */
.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link,
.ast-header-custom-item,
.ast-header-custom-item a,
.site-header .ast-builder-layout-element a {
	color: var(--lgp-white) !important;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link,
.ast-builder-menu .current-menu-item > .menu-link {
	color: var(--lgp-gold) !important;
}

/* Mobile hamburger toggle + off-canvas menu */
.menu-toggle,
.ast-mobile-menu-buttons .menu-toggle,
.main-header-menu-toggle,
.ast-mobile-menu-trigger-fill {
	background-color: var(--lgp-purple) !important;
	color: var(--lgp-white) !important;
}
.menu-toggle svg,
.menu-toggle .menu-toggle-icon,
.ast-mobile-menu-trigger-fill svg {
	color: var(--lgp-white) !important;
	fill: var(--lgp-white) !important;
}
/* Mobile dropdown menu panel: was white (white links became invisible) ->
   purple panel with readable white links, gold for active/hover. */
@media (max-width: 921px) {
	.main-header-menu,
	.main-header-menu .sub-menu,
	.ast-builder-menu .main-header-menu {
		background-color: var(--lgp-purple) !important;
	}
	.main-header-menu .menu-item > .menu-link,
	.ast-builder-menu .menu-item > .menu-link {
		color: var(--lgp-white) !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
	}
	.main-header-menu .menu-item:hover > .menu-link,
	.main-header-menu .current-menu-item > .menu-link,
	.ast-builder-menu .menu-item:hover > .menu-link,
	.ast-builder-menu .current-menu-item > .menu-link {
		color: var(--lgp-gold) !important;
	}
}

/* ==========================================================================
   Buttons / submits — flyer purple, gold on hover
   ========================================================================== */
.elementor-button,
.wp-block-button__link,
.ast-custom-button,
.menu-link.ast-menu-toggle,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.forminator-button {
	background-color: var(--lgp-purple) !important;
	border-color: var(--lgp-purple-dark) !important;
	color: var(--lgp-white) !important;
}
.elementor-button:hover,
.wp-block-button__link:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.forminator-button:hover {
	background-color: var(--lgp-gold) !important;
	border-color: var(--lgp-gold) !important;
	color: var(--lgp-purple-dark) !important;
}

/* ==========================================================================
   Content accents — links & dividers pick up the flyer purple
   ========================================================================== */
.entry-content a:not(.elementor-button):hover,
.elementor-widget-text-editor a:hover {
	color: var(--lgp-purple) !important;
}

/* Footer on purple */
.site-footer,
.ast-footer-overlay,
.footer-sml-layout,
.site-below-footer-wrap,
.site-primary-footer-wrap {
	background-color: var(--lgp-purple) !important;
	color: var(--lgp-white) !important;
}
.site-footer a { color: var(--lgp-cream) !important; }
.site-footer a:hover { color: var(--lgp-gold) !important; }

/* Elementor footer band (element 0684464) — was a blue gradient, make it purple.
   Mirrors the hero override; applies on every page (no page-id prefix) via !important. */
.elementor-element-0684464:not(.elementor-motion-effects-element-type-background),
.elementor-element-0684464 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-image: linear-gradient(180deg, var(--lgp-purple-dark) 0%, var(--lgp-purple) 100%) !important;
	background-color: var(--lgp-purple) !important;
}
.elementor-element-0684464,
.elementor-element-0684464 .elementor-heading-title,
.elementor-element-0684464 .elementor-widget-text-editor,
.elementor-element-0684464 a {
	color: var(--lgp-white) !important;
}
.elementor-element-0684464 a:hover { color: var(--lgp-gold) !important; }