/*
Theme Name: Light The Way YEG
Description: Custom block theme for lightthewaydowntownyeg.com.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: light-the-way
*/

/* ---------------------------------------------------------------------------
 * Block style: Image > Glow (registered in functions.php)
 * ------------------------------------------------------------------------- */

.wp-block-image.is-style-glow img {
	filter:
		drop-shadow(0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent))
		drop-shadow(0 0 14px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent));
}

/* ---------------------------------------------------------------------------
 * Block style: Image > Badge (registered in functions.php)
 * An icon centred in a Dark Blue circle with a Teal ring and a thin inner ring.
 * Use the "-light" icon versions, whose outlines are white.
 * ------------------------------------------------------------------------- */

.wp-block-image.is-style-badge {
	flex: 0 0 var(--ltw-badge-size, 7rem);
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: var(--ltw-badge-size, 7rem);
	aspect-ratio: 1;
	margin: 0;
	border: 0.375rem solid var(--wp--preset--color--secondary);
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow:
		inset 0 0 0 0.5rem var(--wp--preset--color--primary),
		inset 0 0 0 calc(0.5rem + 1px) var(--wp--preset--color--secondary);
}

.wp-block-image.is-style-badge img {
	width: 52%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Wave (shared by the header and footer)
 *
 * Traced from the mock-up. Each wave has two layers, cut to shape with an SVG mask,
 * so their colours come from the palette presets: --ltw-wave-top is the band plus
 * everything below it, and --ltw-wave-bottom is just what's below the band.
 * ------------------------------------------------------------------------- */

:root {
	/* Keeps the mock-up's proportions (64 / 1440 of the width), within limits. */
	--ltw-wave-height: clamp(1.5rem, 4.444vw, 5.5rem);
	--ltw-wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 21.7C113 9.7 225 2.6 338 2.6C661 2.6 985 45.6 1308 45.6C1352 45.6 1396 44.2 1440 41.5V64H0Z'/%3E%3C/svg%3E");
	--ltw-wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 37C113 25 225 17.9 338 17.9C661 17.9 985 60.9 1308 60.9C1352 60.9 1396 59.5 1440 56.8V64H0Z'/%3E%3C/svg%3E");
}

.ltw-header::before,
.ltw-header::after,
.ltw-footer::before,
.ltw-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--ltw-wave-height);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
}

.ltw-header::before,
.ltw-footer::before {
	-webkit-mask-image: var(--ltw-wave-top);
	mask-image: var(--ltw-wave-top);
}

.ltw-header::after,
.ltw-footer::after {
	-webkit-mask-image: var(--ltw-wave-bottom);
	mask-image: var(--ltw-wave-bottom);
}

/* The band: Green, Teal and Yellow, drawn twice the wave's width. The pattern starts and
   ends on Green, so it repeats seamlessly as it drifts slowly sideways. */
.ltw-header::before,
.ltw-footer::before {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--tertiary),
		var(--wp--preset--color--secondary),
		var(--wp--preset--color--accent),
		var(--wp--preset--color--secondary),
		var(--wp--preset--color--tertiary)
	) 0 0 / 200% 100% repeat-x;
}

@media (prefers-reduced-motion: no-preference) {
	.ltw-header::before,
	.ltw-footer::before {
		animation: ltw-wave-drift 16s linear infinite;
	}
}

@keyframes ltw-wave-drift {
	to { background-position: 200% 0; }
}

/* ---------------------------------------------------------------------------
 * Header (parts/header.html)
 * ------------------------------------------------------------------------- */

.ltw-header {
	position: relative;
}

/* The header wave is the footer wave mirrored left to right, sitting over the bottom
   of the photo with white below it. */
.ltw-header::before,
.ltw-header::after {
	bottom: -1px;
	transform: scaleX(-1);
	z-index: 2;
}

.ltw-header::after {
	background: var(--wp--preset--color--base);
}

.ltw-header .ltw-header__hero {
	overflow: hidden;
	min-height: 0; /* Cover's default 430px minimum would keep the header tall. */
	background-color: var(--wp--preset--color--primary);
}

/* The photo fills the right 60% of the header, anchored right and fading into the
   Dark Blue on its left edge (the Cover block would otherwise stretch it across the
   full width). It's cropped top and bottom, keeping the lower part with the street. */
.ltw-header .ltw-header__hero img.wp-block-cover__image-background {
	left: auto;
	right: 0;
	width: 60%;
	object-position: right 70%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
	mask-image: linear-gradient(90deg, transparent, #000 40%);
}

.ltw-header__columns {
	margin-bottom: 0;
}

.ltw-header__logo {
	margin: 0;
}

/* Core makes linked images inline-block, which would shrink the SVG logo to its
   default 300px; make the link fill the column instead. */
.ltw-header__logo a {
	display: block;
	max-width: clamp(260px, 26vw, 370px); /* The logo sets the header's height. */
}

.ltw-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Logo shine: a soft Yellow glint sweeps across the logo every 12s. The glint is cut to
   the logo's shape with a mask, so it never shows on the navy around it. The mask points
   at the logo file in Media, so update the URL here if the logo is ever replaced. */
.ltw-header__logo a {
	position: relative;
}

@media (prefers-reduced-motion: no-preference) {
	.ltw-header__logo a::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			105deg,
			transparent 42%,
			color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent) 50%,
			transparent 58%
		) 100% 0 / 300% 100% no-repeat;
		-webkit-mask: url("/wp-content/uploads/2026/10/logo-light-the-way-light.svg") center / 100% 100% no-repeat;
		mask: url("/wp-content/uploads/2026/10/logo-light-the-way-light.svg") center / 100% 100% no-repeat;
		pointer-events: none;
		animation: ltw-logo-shine 12s ease-in-out 2s infinite;
	}
}

/* One 1.4s pass, left to right, at the start of each 12s cycle, then rest. */
@keyframes ltw-logo-shine {
	0% { background-position: 100% 0; }
	12%, 100% { background-position: 0 0; }
}

/* Stacked on small screens: dim the photo behind the logo and text, and centre both. */
@media (max-width: 781px) {
	.ltw-header .ltw-header__hero img.wp-block-cover__image-background {
		width: 100%;
		opacity: 0.45;
	}

	.ltw-header__logo a {
		max-width: min(100%, 320px);
		margin-inline: auto;
	}

	.ltw-header__tagline .has-text-align-right {
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
 * Footer (parts/footer.html)
 * ------------------------------------------------------------------------- */

.ltw-footer {
	position: relative;
	margin-top: var(--ltw-wave-height);
}

/* The wave sits above the footer: the Green-to-Teal band, then Dark Blue running into it. */
.ltw-footer::before,
.ltw-footer::after {
	bottom: calc(100% - 1px);
}

.ltw-footer::after {
	background: var(--wp--preset--color--primary);
}

.ltw-footer__columns {
	margin-bottom: 0;
}

.ltw-footer__skyline .wp-block-image {
	margin: 0;
}

.ltw-footer__skyline img {
	display: block;
	width: 100%;
	height: auto;
}

/* Side by side: the skyline fills the column's full height, cropped from the left
   so the bridge stays anchored bottom right. */
@media (min-width: 782px) {
	.ltw-footer__skyline {
		position: relative;
		align-self: stretch;
	}

	.ltw-footer__skyline .wp-block-image {
		position: absolute;
		inset: 0;
	}

	.ltw-footer__skyline img {
		height: 100%;
		object-fit: cover;
		object-position: right bottom;
	}
}

/* Stacked on small screens: contact details first, skyline along the bottom. */
@media (max-width: 781px) {
	.ltw-footer__skyline {
		order: 2;
	}
}

/* ---------------------------------------------------------------------------
 * Home page sections (patterns/*.php)
 * ------------------------------------------------------------------------- */

/* What to Expect / At a Glance (patterns/overview.php) */

.ltw-overview {
	--ltw-badge-size: 7rem;
}

.ltw-overview__columns {
	margin-bottom: 0;
}

/* Dotted line linking each badge to the next. */
.ltw-expect__item {
	position: relative;
}

.ltw-expect__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--ltw-badge-size) / 2 - 1px);
	top: calc(var(--ltw-badge-size) + 0.75rem);
	bottom: calc(0.75rem - var(--wp--preset--spacing--60));
	border-left: 2px dotted var(--wp--preset--color--secondary);
}

/* Centre each icon on its text. Overrides the Group's "top" alignment setting. */
.ltw-glance .ltw-glance__item {
	align-items: center;
}

.ltw-glance__icon {
	flex: 0 0 3rem;
	width: 3rem;
	margin: 0;
}

.ltw-glance__icon img {
	display: block;
	width: 100%;
	height: auto;
}

/* Dotted divider between side-by-side columns. */
@media (min-width: 782px) {
	.ltw-glance,
	.ltw-faq__columns > .wp-block-column + .wp-block-column {
		padding-left: var(--wp--preset--spacing--60);
		border-left: 2px dotted var(--wp--preset--color--secondary);
	}
}

@media (max-width: 781px) {
	.ltw-overview {
		--ltw-badge-size: 5rem;
	}
}

/* Icon animation (What to Expect / At a Glance). Runs continuously, no hover or scroll:
   a yellow highlight travels around each badge's teal ring, and a soft shine sweeps
   across the At a Glance icons one at a time, top to bottom, then pauses. Negative
   delays (--ltw-d) stagger the badges; --ltw-s sets each icon's turn in the shine.
   Nothing moves for visitors who prefer reduced motion. */

.ltw-expect__item:nth-child(2) { --ltw-d: -1.3s; }
.ltw-expect__item:nth-child(3) { --ltw-d: -2.6s; }

.ltw-glance__item:nth-child(2) { --ltw-s: 0.45s; }
.ltw-glance__item:nth-child(3) { --ltw-s: 0.9s; }
.ltw-glance__item:nth-child(4) { --ltw-s: 1.35s; }
.ltw-glance__item:nth-child(5) { --ltw-s: 1.8s; }
.ltw-glance__item:nth-child(6) { --ltw-s: 2.25s; }
.ltw-glance__item:nth-child(7) { --ltw-s: 2.7s; }

@media (prefers-reduced-motion: no-preference) {
	.ltw-overview .is-style-badge {
		position: relative;
	}

	/* The highlight: a Yellow arc on the ring, cut to the ring's width with a mask. */
	.ltw-overview .is-style-badge::before {
		content: "";
		position: absolute;
		inset: -0.375rem;
		border-radius: 50%;
		background: conic-gradient(transparent 0 72%, var(--wp--preset--color--accent) 88%, transparent 100%);
		-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.375rem), #000 calc(100% - 0.375rem));
		mask: radial-gradient(farthest-side, transparent calc(100% - 0.375rem), #000 calc(100% - 0.375rem));
		pointer-events: none;
		animation: ltw-orbit 6s linear var(--ltw-d, 0s) infinite;
	}

	/* The shine: a pale diagonal band that crosses the icon. "overlay" blending brightens
	   the icon's colours but leaves the white page untouched, so it only shows on the icon. */
	.ltw-glance__icon {
		position: relative;
		overflow: hidden;
	}

	.ltw-glance__icon::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.95) 50%, transparent 70%);
		mix-blend-mode: overlay;
		transform: translateX(-120%);
		pointer-events: none;
		animation: ltw-shine 7s ease-in-out calc(1s + var(--ltw-s, 0s)) infinite;
	}
}

/* One 0.8s pass at the start of each 7s cycle, then rest. */
@keyframes ltw-shine {
	0% { transform: translateX(-120%); }
	11%, 100% { transform: translateX(120%); }
}

@keyframes ltw-orbit {
	to { transform: rotate(1turn); }
}

/* Social icons (Home › "Light the way socials"): each Image block shows as a Dark Blue circle
   with the platform logo in white (Yellow on hover/focus). The logo file is used as a mask
   and filled with a palette colour; the <img> stays in place, invisible, for its alt text.
   Each icon's class sets its file; add a class + URL here for any new platform. */
.ltw-social__icon--instagram { --ltw-icon: url("/wp-content/uploads/2026/10/icons-instagram.svg"); }
.ltw-social__icon--facebook { --ltw-icon: url("/wp-content/uploads/2026/10/icons-facebook.svg"); }
.ltw-social__icon--linkedin { --ltw-icon: url("/wp-content/uploads/2026/10/icons-linkedin.svg"); }

.wp-block-image.ltw-social__icon {
	margin: 0;
}

.ltw-social__icon a {
	position: relative;
	display: block;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.ltw-social__icon a::before {
	content: "";
	position: absolute;
	inset: 27%;
	background: var(--wp--preset--color--base);
	-webkit-mask: var(--ltw-icon) center / contain no-repeat;
	mask: var(--ltw-icon) center / contain no-repeat;
	transition: background-color 0.2s ease;
}

.ltw-social__icon a:hover::before,
.ltw-social__icon a:focus-visible::before {
	background: var(--wp--preset--color--accent);
}

.ltw-social__icon a:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-dark);
	outline-offset: 3px;
}

.ltw-social__icon img {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
}

/* "Photos" and "Light the way socials" (Light Teal) and "Help Spread the Light" (Light Yellow)
   each sit on a full-width band. The groups are wide (not full) width, so the colour is extended to the
   screen edges with a box-shadow, clipped so it doesn't spill above or below. The two
   sections are adjacent, so the gap between them is removed and the bands meet. */
.ltw-photos,
.ltw-socials,
.ltw-help {
	--ltw-band: var(--wp--preset--color--secondary-light);
	background: var(--ltw-band);
	box-shadow: 0 0 0 100vmax var(--ltw-band);
	clip-path: inset(0 -100vmax);
}

.ltw-help {
	--ltw-band: var(--wp--preset--color--accent-light);
}

.ltw-socials + .ltw-help {
	margin-block-start: 0;
}

/* Help Spread the Light: dotted divider between the two columns, as in the FAQ, and a
   tighter gap between each tip's heading and its sentence. */
.ltw-help__columns {
	margin-bottom: 0;
}

.ltw-help__columns h4 + p {
	margin-block-start: 0.35rem;
}

@media (min-width: 782px) {
	.ltw-help__columns > .wp-block-column + .wp-block-column {
		padding-left: var(--wp--preset--spacing--60);
		border-left: 2px dotted var(--wp--preset--color--secondary);
	}
}

/* Our Sponsors (Home): three tiers, each a centred heading over rows of logos. Each logo's
   width is set on its Image block (sized to its shape so logos look equally prominent);
   height follows from the width. */
.wp-block-image.ltw-sponsors__logo {
	margin: 0;
}

.ltw-sponsors__logo a {
	display: block;
}

.ltw-sponsors__logo img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Rows of logos within a tier sit a little closer together than the tiers do. */
.ltw-sponsors__logos + .ltw-sponsors__logos {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Performance schedule (patterns/schedule.php)
   Selectors include .wp-block-table to outrank core's table borders. */

.ltw-schedule__week {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-table.ltw-schedule__table {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.wp-block-table.ltw-schedule__table table {
	border-collapse: collapse;
}

.wp-block-table.ltw-schedule__table thead {
	border: 0;
}

.wp-block-table.ltw-schedule__table th,
.wp-block-table.ltw-schedule__table td {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.ltw-schedule__table th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	letter-spacing: 0.04em;
}

.wp-block-table.ltw-schedule__table tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 10%, transparent);
}

.wp-block-table.ltw-schedule__table td:first-child {
	font-weight: 700;
}

/* "To be announced" is typed in italics; soften it. */
.wp-block-table.ltw-schedule__table td em {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent);
}

/* On phones each day becomes a card with the time beside each performer. The time
   labels are written here, so update them if the slot times ever change. */
@media (max-width: 600px) {
	.wp-block-table.ltw-schedule__table table,
	.wp-block-table.ltw-schedule__table tbody,
	.wp-block-table.ltw-schedule__table tr,
	.wp-block-table.ltw-schedule__table td {
		display: block;
		width: 100%;
	}

	.wp-block-table.ltw-schedule__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wp-block-table.ltw-schedule__table tr {
		margin-bottom: 1rem;
		overflow: hidden;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent);
		border-radius: 0.5rem;
	}

	.wp-block-table.ltw-schedule__table tbody tr:nth-child(even) td {
		background: none;
	}

	.wp-block-table.ltw-schedule__table td {
		display: flex;
		gap: 1rem;
	}

	.wp-block-table.ltw-schedule__table td:last-child {
		border-bottom: 0;
	}

	.wp-block-table.ltw-schedule__table tbody tr td:first-child {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	.wp-block-table.ltw-schedule__table td:nth-child(n + 2)::before {
		flex: 0 0 3.5rem;
		font-weight: 700;
	}

	.wp-block-table.ltw-schedule__table td:nth-child(2)::before {
		content: "12 PM";
	}

	.wp-block-table.ltw-schedule__table td:nth-child(3)::before {
		content: "4 PM";
	}

	.wp-block-table.ltw-schedule__table td:nth-child(4)::before {
		content: "6 PM";
	}
}

/* FAQ (patterns/faq.php) */

.ltw-faq__columns {
	margin-bottom: 0;
}

.ltw-faq__accordion .wp-block-accordion-item {
	border-bottom: 2px dotted color-mix(in srgb, var(--wp--preset--color--secondary) 60%, transparent);
}

.ltw-faq__accordion .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--secondary-dark); /* Teal is too light to read on white. */
	font-size: var(--wp--preset--font-size--medium);
}

.ltw-faq__accordion .wp-block-accordion-heading__toggle {
	padding: 1rem 0;
	font-weight: 700;
	text-align: left;
}

.ltw-faq__accordion .wp-block-accordion-heading__toggle-icon {
	font-size: 1.5em;
	line-height: 1;
}

/* Core hides a closed panel outright (hidden="until-found"), so it snaps open and shut.
   Instead, keep it rendered and animate its row height from 0 to its natural height,
   with a fade. A closed panel gets visibility:hidden (after the closing animation), so
   it still drops out of the tab order and screen readers. Trade-off: the browser's
   find-in-page no longer auto-opens a closed answer. No motion for reduced-motion users. */
.ltw-faq__accordion .wp-block-accordion-item {
	display: grid;
	grid-template-rows: auto 0fr;
}

.ltw-faq__accordion .wp-block-accordion-item.is-open {
	grid-template-rows: auto 1fr;
}

.ltw-faq__accordion .wp-block-accordion-panel {
	min-height: 0;
	margin-top: 0;
	padding: 0;
	overflow: hidden;
	opacity: 1;
}

.ltw-faq__accordion .wp-block-accordion-panel[hidden] {
	display: block;
	content-visibility: visible;
	visibility: hidden;
	opacity: 0;
}

.ltw-faq__accordion .wp-block-accordion-panel > :first-child {
	margin-top: 0;
}

.ltw-faq__accordion .wp-block-accordion-panel > :last-child {
	margin-bottom: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
	.ltw-faq__accordion .wp-block-accordion-item {
		transition: grid-template-rows 0.4s ease;
	}

	.ltw-faq__accordion .wp-block-accordion-panel {
		transition: opacity 0.4s ease, visibility 0s;
	}

	.ltw-faq__accordion .wp-block-accordion-panel[hidden] {
		transition: opacity 0.3s ease, visibility 0s 0.4s;
	}
}