/*
Theme Name: Lights on the River
Theme URI: https://lightsontheriver.org/
Author: Lights on the River
Author URI: https://lightsontheriver.org/
Description: A light, phone-friendly block theme for the Lights on the River holiday light show. It is a child theme of Twenty Twenty-Five, so keep Twenty Twenty-Five installed.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lights-on-the-river
Tags: full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks, holiday
*/

/* =========================================================
   Page frame: on short pages the footer sits at the bottom of the screen
   ========================================================= */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* The main content takes up any spare height, which pushes the footer down. */
.wp-site-blocks > main {
	flex-grow: 1;
}

/* Show text exactly as typed. Manrope otherwise draws "(c)" as ©, turning "501(c)(3)" into "501©(3)". */
body {
	font-variant-ligatures: no-common-ligatures;
}

/* =========================================================
   Header: red top bar with the address
   ========================================================= */

.lotr-topbar p {
	margin: 0;
}

.lotr-topbar a {
	text-decoration: none;
}

.lotr-topbar a:hover,
.lotr-topbar a:focus-visible {
	text-decoration: underline;
}

.lotr-address a::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.4em;
	vertical-align: -0.17em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 599px) {
	.lotr-topbar .alignwide {
		justify-content: center !important;
		text-align: center;
	}

	.lotr-topbar-social {
		display: none !important;
	}
}

/* =========================================================
   Header: logo, menu and Donate button
   ========================================================= */

.lotr-mainbar {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

.lotr-logo img {
	height: auto;
}

@media (max-width: 599px) {
	.lotr-logo img {
		width: 128px !important;
	}
}

.lotr-donate .wp-block-button__link {
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.lotr-donate .wp-block-button__link {
		padding: 0.45rem 0.85rem;
	}
}

/* Desktop dropdowns show as a soft card. */
.lotr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(11, 22, 51, 0.16);
	padding: 0.4rem 0 !important;
	min-width: 250px !important;
}

.lotr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem !important;
}

/* On wide screens, the logo and menu get more room to breathe. */
@media (min-width: 1400px) {
	.lotr-logo img {
		width: 190px !important;
	}

	.lotr-nav.wp-block-navigation {
		gap: 2rem;
		font-size: 0.95rem;
	}
}

/* The menu has many items, so the menu button is used up to 1200px wide. */
@media (min-width: 600px) and (max-width: 1199px) {
	.lotr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lotr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Menu links turn red on hover and show the current page in red, even if a plugin loads Bootstrap. */
.lotr-nav .wp-block-navigation-item__content:hover,
.lotr-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-1);
}

/*
 * A clear focus ring for keyboard users. After a tap or click, functions.php marks the
 * page with "lotr-pointer", so opening the phone menu doesn't draw a ring around the first link.
 */
.lotr-nav a:focus-visible,
.lotr-nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: 4px;
}

.lotr-nav a:focus:not(:focus-visible),
.lotr-nav button:focus:not(:focus-visible),
html.lotr-pointer .lotr-nav a:focus,
html.lotr-pointer .lotr-nav button:focus {
	outline: none;
}

/* The Donate button inside the menu only shows in the phone menu, because the header has its own. */
body:not(.editor-styles-wrapper) .lotr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .lotr-menu-donate {
	display: none !important;
}

/* =========================================================
   Phone menu (opens from the menu button)
   A winter night sky with a string of holiday lights, falling snow and gold
   accents, matching the homepage banner.
   ========================================================= */

.lotr-nav .is-menu-open {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-justify: flex-start;
	isolation: isolate;
	padding-top: 44px !important;
	background-color: var(--wp--preset--color--midnight) !important;
	background-image:
		radial-gradient(70% 38% at 0% 0%, rgba(212, 31, 53, 0.34), transparent 70%),
		radial-gradient(60% 32% at 100% 12%, rgba(244, 182, 63, 0.2), transparent 70%),
		radial-gradient(95% 40% at 50% 108%, rgba(27, 111, 135, 0.6), transparent 70%) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Snowflakes (before), a string of lights (after) and their twinkle (on the close wrapper). */
.lotr-nav .is-menu-open::before,
.lotr-nav .is-menu-open::after,
.lotr-nav .is-menu-open .wp-block-navigation__responsive-close::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.lotr-nav .is-menu-open .wp-block-navigation__responsive-close {
	position: static;
}

/* Five layers of flakes with different sizes and spacing, so the snow looks scattered rather than gridded. */
.lotr-nav .is-menu-open::before {
	inset: 0;
	opacity: 0.6;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 2px),
		radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.7px),
		radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.85) 0 1.8px, transparent 2.6px),
		radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.7) 0 1.3px, transparent 2.1px),
		radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.45) 0 2.4px, transparent 3.4px);
	background-size: 89px 107px, 61px 79px, 173px 149px, 131px 97px, 211px 193px;
	background-position: 0 0, 30px 10px, 50px 40px, 20px 60px, 70px 20px;
}

/* Each layer falls exactly one tile per loop, so the snowfall never jumps. */
@media (prefers-reduced-motion: no-preference) {
	.lotr-nav .is-menu-open::before {
		animation: lotr-snow 18s linear infinite;
	}
}

@keyframes lotr-snow {
	to {
		background-position: 0 107px, 30px 89px, 50px 189px, 20px 157px, 70px 213px;
	}
}

.lotr-nav .is-menu-open::after {
	inset: 0 0 auto 0;
	height: 36px;
	background:
		radial-gradient(circle at 50% 23px, #ffd76a 0 5px, rgba(255, 215, 106, 0.3) 6px 10px, transparent 11px) 0 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #ff5a6b 0 5px, rgba(255, 90, 107, 0.3) 6px 10px, transparent 11px) 30px 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #7ee2b0 0 5px, rgba(126, 226, 176, 0.3) 6px 10px, transparent 11px) 60px 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #8fd0ff 0 5px, rgba(143, 208, 255, 0.3) 6px 10px, transparent 11px) 90px 0 / 120px 36px repeat-x,
		linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) 0 14px / 100% 1px no-repeat;
}

.lotr-nav .is-menu-open .wp-block-navigation__responsive-close::before {
	inset: 0 0 auto 0;
	height: 36px;
	opacity: 0.2;
	background:
		radial-gradient(circle at 50% 23px, rgba(255, 215, 106, 0.55) 0 14px, transparent 16px) 0 0 / 240px 36px repeat-x,
		radial-gradient(circle at 50% 23px, rgba(126, 226, 176, 0.5) 0 14px, transparent 16px) 180px 0 / 240px 36px repeat-x;
}

@media (prefers-reduced-motion: no-preference) {
	.lotr-nav .is-menu-open .wp-block-navigation__responsive-close::before {
		animation: lotr-twinkle 2.6s ease-in-out infinite alternate;
	}
}

/* Top row: a gold star and "Menu", lined up with the close button. */
.lotr-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "Menu";
	display: flex;
	align-items: center;
	min-height: 48px;
	margin-bottom: 0.25rem;
	padding-left: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F4B63F' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.8 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") left center / 16px no-repeat;
	color: var(--wp--preset--color--accent-3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lotr-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 2px;
	right: -10px;
	padding: 10px;
	border-radius: 8px;
	color: var(--wp--preset--color--base);
}

.lotr-nav .is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--accent-3);
}

.lotr-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0 !important;
}

/* Full-width rows with thin dividers, so every item is easy to tap. */
.lotr-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.lotr-nav .is-menu-open .wp-block-navigation__container,
.lotr-nav .is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
	text-align: left;
}

.lotr-nav .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

.lotr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lotr-nav .is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

.lotr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	padding: 0.8rem 0 !important;
	font-size: 1.1rem;
	font-weight: 700;
}

/* The pages under Events: indented and lighter, each with a small gold sparkle. */
.lotr-nav .is-menu-open .wp-block-navigation__submenu-container {
	gap: 0 !important;
	padding: 0 0 0.6rem 0.9rem !important;
	border: 0 !important;
	background: transparent !important;
}

.lotr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 0.45rem 0 !important;
	font-size: 1rem;
	font-weight: 500;
}

.lotr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:not(:hover):not([aria-current="page"]) {
	color: rgba(255, 255, 255, 0.75);
}

.lotr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.6em;
	background-color: var(--wp--preset--color--accent-3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover and the current page glow gold. */
.lotr-nav .is-menu-open .wp-block-navigation-item__content:hover,
.lotr-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-3);
}

.lotr-nav .is-menu-open a:focus-visible,
.lotr-nav .is-menu-open button:focus-visible {
	outline-color: var(--wp--preset--color--accent-3);
}

/* A full-width, softly glowing Donate button at the bottom of the phone menu. */
.lotr-nav .is-menu-open .lotr-menu-donate {
	width: 100%;
	margin-top: 1.75rem;
}

.lotr-nav .is-menu-open .lotr-menu-donate .wp-block-button,
.lotr-nav .is-menu-open .lotr-menu-donate .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.lotr-nav .is-menu-open .lotr-menu-donate .wp-block-button__link {
	padding: 0.95rem 1rem;
	font-size: 1rem;
	box-shadow: 0 10px 28px rgba(212, 31, 53, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* =========================================================
   Homepage banner with a string of holiday lights
   ========================================================= */

.lotr-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	background-image:
		radial-gradient(55% 60% at 10% 0%, rgba(212, 31, 53, 0.38), transparent 70%),
		radial-gradient(45% 55% at 90% 8%, rgba(244, 182, 63, 0.26), transparent 70%),
		radial-gradient(75% 65% at 50% 118%, rgba(27, 111, 135, 0.6), transparent 70%);
}

.lotr-hero::before,
.lotr-hero::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 36px;
	z-index: -1;
	pointer-events: none;
}

.lotr-hero::before {
	background:
		radial-gradient(circle at 50% 23px, #ffd76a 0 5px, rgba(255, 215, 106, 0.3) 6px 10px, transparent 11px) 0 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #ff5a6b 0 5px, rgba(255, 90, 107, 0.3) 6px 10px, transparent 11px) 30px 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #7ee2b0 0 5px, rgba(126, 226, 176, 0.3) 6px 10px, transparent 11px) 60px 0 / 120px 36px repeat-x,
		radial-gradient(circle at 50% 23px, #8fd0ff 0 5px, rgba(143, 208, 255, 0.3) 6px 10px, transparent 11px) 90px 0 / 120px 36px repeat-x,
		linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) 0 14px / 100% 1px no-repeat;
}

/* A soft glow that fades in and out, so the lights seem to twinkle. */
.lotr-hero::after {
	background:
		radial-gradient(circle at 50% 23px, rgba(255, 215, 106, 0.55) 0 14px, transparent 16px) 0 0 / 240px 36px repeat-x,
		radial-gradient(circle at 50% 23px, rgba(126, 226, 176, 0.5) 0 14px, transparent 16px) 180px 0 / 240px 36px repeat-x;
	opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
	.lotr-hero::after {
		animation: lotr-twinkle 2.6s ease-in-out infinite alternate;
	}
}

@keyframes lotr-twinkle {
	to {
		opacity: 0.9;
	}
}

.lotr-hero .lotr-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.lotr-hero .wp-block-post-title {
	margin-top: 0.5rem;
	margin-inline: auto !important;
	max-width: 24ch;
	text-wrap: balance;
}

/* Countdown Timer block, restyled so the four boxes stay in one row on phones. */
.lotr-hero .wp-block-ctb-countdown-time {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}

.lotr-hero .wp-block-ctb-countdown-time .ctbCountdownTime {
	width: 100% !important;
	max-width: 620px;
	margin-inline: auto;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.lotr-hero .wp-block-ctb-countdown-time .countdownItems,
.lotr-hero .wp-block-ctb-countdown-time .countdownItems.ctbResponsive {
	flex-direction: row !important;
	flex-wrap: nowrap;
	gap: clamp(6px, 2vw, 14px) !important;
}

.lotr-hero .wp-block-ctb-countdown-time .countdownItems .countdownItem {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
	height: auto !important;
	padding: clamp(0.7rem, 3vw, 1.2rem) 0.25rem;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 14px !important;
	box-shadow: none !important;
}

.lotr-hero .wp-block-ctb-countdown-time .countdownItems .countdownItem .digit {
	color: #fff !important;
	font-size: clamp(1.6rem, 7vw, 3.1rem) !important;
	font-weight: 700 !important;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lotr-hero .wp-block-ctb-countdown-time .countdownItems .countdownItem .label {
	margin-top: 0.5em;
	color: var(--wp--preset--color--accent-3) !important;
	font-size: clamp(0.62rem, 2.4vw, 0.85rem) !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase !important;
}

.lotr-hero .wp-block-ctb-countdown-time .countdownItems .separator {
	display: none;
}

/* =========================================================
   Page title band
   ========================================================= */

.lotr-page-header {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

.lotr-page-header .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}

.lotr-page-header .wp-block-post-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 0.9rem;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-3));
}

/* =========================================================
   Buttons
   ========================================================= */

/* One consistent, slightly smaller text size, even when a whole row of buttons was set to a bigger size. */
body .wp-block-buttons .wp-block-button .wp-block-button__link {
	font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
}

/* Buttons set to a fixed width need less side padding, so their text stays on one line. */
body .wp-block-button.has-custom-width .wp-block-button__link {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

/*
 * Keep white text on red when a button is hovered or focused. Some plugins load
 * Bootstrap, whose blue link hover color would otherwise win.
 */
body .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
body .wp-element-button:not(.wp-block-button__link):hover,
body .wp-element-button:not(.wp-block-button__link):focus-visible {
	color: var(--wp--preset--color--base);
}

body .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
body .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus-visible {
	background-color: #a8182b;
}

/*
 * PayPal and Venmo buttons, styled to follow each service's button guidelines.
 * Give a Button block the class "lotr-paypal" or "lotr-venmo" under
 * Advanced > Additional CSS class, and put the official logo inside it as an
 * image (see readme.txt). If a logo can't load, its description shows instead.
 *
 * PayPal: gold #FFC439 and a pill shape, which PayPal recommends; 25-55px tall.
 * Venmo: blue #008CFF with the white logo; at least 40px tall and at least three
 * times the height of the logo; 16px of space around the button.
 */
body .wp-block-buttons .wp-block-button.lotr-paypal .wp-block-button__link,
body .wp-block-buttons .wp-block-button.lotr-venmo .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	min-height: 3.25rem;
	padding: 0.5rem 1.5rem;
	border-radius: 999px;
	line-height: 1.2;
	text-decoration: none;
}

body .wp-block-buttons .wp-block-button.lotr-paypal .wp-block-button__link img,
body .wp-block-buttons .wp-block-button.lotr-venmo .wp-block-button__link img {
	display: block;
	width: auto;
	max-width: none;
	height: 1.6rem;
}

body .wp-block-buttons .wp-block-button.lotr-paypal .wp-block-button__link {
	background-color: #ffc439;
	color: #003087;
}

body .wp-block-buttons .wp-block-button.lotr-venmo .wp-block-button__link {
	background-color: #008cff;
	color: #fff;
}

/* Keep the brand color on hover and just shade it slightly, like the official buttons. */
body .wp-block-buttons .wp-block-button.lotr-paypal:not(.is-style-outline) .wp-block-button__link:hover,
body .wp-block-buttons .wp-block-button.lotr-paypal:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #ffc439;
	color: #003087;
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.06);
}

body .wp-block-buttons .wp-block-button.lotr-venmo:not(.is-style-outline) .wp-block-button__link:hover,
body .wp-block-buttons .wp-block-button.lotr-venmo:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #008cff;
	color: #fff;
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.08);
}

/* A dark focus ring, because the site's gold ring would blend into the gold PayPal button. */
body .wp-block-buttons .wp-block-button.lotr-paypal .wp-block-button__link:focus-visible,
body .wp-block-buttons .wp-block-button.lotr-venmo .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* A row of big donate buttons: side by side on wide screens, stacked on phones. Class "lotr-donate-buttons". */
.lotr-donate-buttons {
	gap: 1rem !important;
}

.lotr-donate-buttons > .wp-block-button {
	flex: 1 1 240px;
}

body .lotr-donate-buttons .wp-block-button .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 1rem 1.25rem;
	font-size: 1.05rem;
	text-align: center;
}

/* A stack of full-width buttons for quick links, like the page people reach from a QR code. Class "lotr-quick-links". */
.lotr-quick-links {
	flex-direction: column;
	align-items: stretch !important;
	gap: 1rem !important;
	max-width: 480px;
	margin-inline: auto !important;
}

.lotr-quick-links > .wp-block-button {
	width: 100%;
}

body .lotr-quick-links .wp-block-button .wp-block-button__link {
	display: block;
	width: 100%;
	padding: 1rem 1.25rem;
	font-size: 1.05rem;
	text-align: center;
}

/* Full-width blocks follow the page layout. Some plugins force them to the screen width, which makes them overhang. */
.wp-site-blocks .alignfull {
	width: auto !important;
}

.wp-block-template-part > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* =========================================================
   Content fixes that help on phones
   ========================================================= */

/* Button rows set to a fixed width or "no wrap" stack into full-width buttons on phones. */
@media (max-width: 599px) {
	.wp-block-buttons {
		flex-wrap: wrap !important;
	}

	.wp-block-buttons > .wp-block-button.has-custom-width,
	.wp-block-buttons > .wp-block-button[class*="wp-block-button__width"] {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

.wp-block-verse {
	white-space: pre-wrap;
}

/* =========================================================
   Embedded forms (for example a Google Form in a Custom HTML block)
   ========================================================= */

/*
 * Give the iframe the class "lotr-form-embed". Set its heights with the custom properties
 * --lotr-form-height-phone and --lotr-form-height-desktop, so the whole form shows without
 * a second scroll bar inside the page.
 */
.lotr-form-embed {
	display: block;
	width: 100%;
	height: var(--lotr-form-height-phone, 1800px);
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

@media (min-width: 782px) {
	.lotr-form-embed {
		height: var(--lotr-form-height-desktop, 1500px);
	}
}

/* =========================================================
   Tap-to-open sections (the Details block)
   ========================================================= */

.wp-block-details {
	padding: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

.wp-block-details + .wp-block-details {
	margin-top: 0.75rem;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.85rem 1.25rem;
	list-style: none;
	cursor: pointer;
	color: var(--wp--preset--color--midnight);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* A chevron that points down when closed and up when open. */
.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.2em;
	border-right: 2px solid var(--wp--preset--color--accent-1);
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.wp-block-details[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}

.wp-block-details > summary:hover {
	color: var(--wp--preset--color--accent-1);
}

.wp-block-details[open] > summary {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	background: var(--wp--preset--color--accent-5);
}

.wp-block-details > :not(summary) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

.wp-block-details > :not(summary):first-of-type,
.wp-block-details > summary + * {
	margin-top: 1rem;
}

.wp-block-details > :last-child:not(summary) {
	margin-bottom: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details > summary::after {
		transition: none;
	}
}

/*
 * Tap-to-open rows on phones, open cards two across on wider screens.
 * Wrap Details blocks in a Group block with the class "lotr-ways".
 * functions.php opens the cards on wide screens and folds them back on phones.
 */
@media (min-width: 782px) {
	.lotr-ways {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	/* A card left over at the end fills its row, so the grid never has a hole. */
	.lotr-ways > .wp-block-details:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.lotr-ways > .wp-block-details,
	.lotr-ways > .wp-block-details + .wp-block-details {
		margin: 0 !important;
	}

	/* The heading becomes the card's title band, not a button. */
	.lotr-ways .wp-block-details > summary {
		cursor: default;
		pointer-events: none;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
		background: var(--wp--preset--color--accent-5);
	}

	.lotr-ways .wp-block-details > summary::after {
		display: none;
	}
}

/* In browsers that support it, the card text shows right away, before the script runs. */
@media (min-width: 782px) {
	.lotr-ways .wp-block-details::details-content {
		content-visibility: visible;
	}
}

/* =========================================================
   Footer
   ========================================================= */

.lotr-site-footer h2 {
	color: var(--wp--preset--color--accent-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.lotr-site-footer a {
	text-decoration: none;
}

.lotr-site-footer a:hover,
.lotr-site-footer a:focus-visible {
	text-decoration: underline;
}

.lotr-site-footer p {
	margin-block: 0.4rem;
}

.lotr-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.8);
}