/**
 * Site – global CSS (forms, focus, motion)
 *
 * Site-wide rules that Bricks controls cannot express. Visual components live in
 * Bricks global classes; design tokens come from Core Framework (var(--…)).
 * 1. Fluent Forms styled to the design system (all forms).
 * 2. Keyboard focus, selection, skip link.
 * 3. Lists produced by {eco_list:*} and rich text.
 * 4. Reduced-motion preferences.
 * 5. Mobile menu (numbered list and opening motion).
 * 6. Scroll reveal.  7. Desktop navigation and header.  8. Site frame.
 */

/* 1. Fluent Forms ---------------------------------------------------- */
.fluentform .frm-fluent-form { font-family: Inter, system-ui, sans-serif; color: var(--text-title); }
.fluentform .frm-fluent-form .ff-el-group { margin-bottom: var(--space-s); }
.fluentform .frm-fluent-form .ff-el-input--label label { font-size: var(--text-s); font-weight: 500; color: var(--text-title); line-height: 1.4; margin-bottom: 0.35em; }
.fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label::after { color: var(--tertiary); }
.fluentform .frm-fluent-form .ff-el-form-control {
	min-height: 4.8rem; padding: 1rem 1.4rem; font-family: inherit; font-size: var(--text-m); line-height: 1.4;
	color: var(--text-title); background-color: var(--light); border: 1px solid var(--dark-30, hsla(150,10%,7%,0.3));
	border-radius: var(--radius-xs); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.fluentform .frm-fluent-form textarea.ff-el-form-control { min-height: 12rem; }
.fluentform .frm-fluent-form .ff-el-form-control:hover { border-color: var(--text-title); }
.fluentform .frm-fluent-form .ff-el-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-20); outline: none; }
.fluentform .frm-fluent-form .ff-el-help-message { font-size: var(--text-xs); color: var(--text-body); font-style: normal; margin-top: 0.4em; }
.fluentform .frm-fluent-form .ff-el-form-check { margin-bottom: 0.5em; }
.fluentform .frm-fluent-form .ff-el-form-check-label { font-size: var(--text-s); color: var(--text-title); line-height: 1.5; display: flex; gap: 0.6em; align-items: flex-start; }
.fluentform .frm-fluent-form .ff-el-form-check-input, .fluentform .frm-fluent-form .ff_tc_checkbox input { width: 1.8rem; height: 1.8rem; margin-top: 0.2em; accent-color: var(--primary); flex-shrink: 0; }
.fluentform .frm-fluent-form .ff_tc_label a, .fluentform .frm-fluent-form .ff_tc_label a:visited { color: var(--primary); text-decoration: underline; }
.fluentform .frm-fluent-form .ff-btn-submit, .fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	min-height: 4.8rem; padding: 1rem 2.4rem; font-family: inherit; font-size: var(--text-s); font-weight: 500; letter-spacing: 0.01em;
	color: var(--light); background-color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-xs);
	box-shadow: none; opacity: 1; transition: background-color .2s ease;
}
.fluentform .frm-fluent-form .ff-btn-submit:hover { background-color: var(--primary-d-1); border-color: var(--primary-d-1); opacity: 1; }
.fluentform .frm-fluent-form .ff-btn-submit:focus-visible { outline: 2px solid var(--tertiary); outline-offset: 3px; }
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--error); }
.fluentform .frm-fluent-form .ff-el-is-error .text-danger, .fluentform .frm-fluent-form .error.text-danger { color: var(--error); font-size: var(--text-xs); margin-top: 0.4em; }
.fluentform .ff-errors-in-stack { color: var(--error); font-size: var(--text-s); }
.fluentform .ff-message-success, .ff-message-success {
	padding: var(--space-m); background-color: var(--success-10); border: 1px solid var(--success-20); border-left: 3px solid var(--success);
	border-radius: var(--radius-xs); color: var(--text-title); font-size: var(--text-m); box-shadow: none;
}
.ff-message-success p { margin-bottom: 0.5em; }
.fluentform .frm-fluent-form .ff-t-container { gap: var(--space-s); }
@media (max-width: 767px) {
	.fluentform .frm-fluent-form .ff-t-container { flex-direction: column; gap: 0; }
	.fluentform .frm-fluent-form .ff-t-cell { flex-basis: 100% !important; width: 100%; }
	.fluentform .frm-fluent-form .ff-btn-submit { width: 100%; }
}

/* 2. Focus, selection, skip link ---------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--tertiary); outline-offset: 3px; }
.section--dark :where(a, button):focus-visible, .cta-band :where(a, button):focus-visible, .site-footer :where(a, button):focus-visible, .hero :where(a, button):focus-visible { outline-color: var(--light); }
::selection { background-color: var(--primary-20); color: var(--text-title); }
.skip-link:focus { background-color: var(--light); color: var(--text-title); padding: 1rem 1.6rem; z-index: 9999; }
/* Header stays in the document flow and sticks to the top while scrolling. */
#brx-header { position: sticky; top: 0; z-index: 50; }
.admin-bar #brx-header { top: var(--wp-admin--admin-bar--height, 32px); }
.bricks-mobile-menu-toggle { min-width: 4.4rem; min-height: 4.4rem; }
.brxe-nav-menu .bricks-nav-menu > li > a { min-height: 4.4rem; display: inline-flex; align-items: center; }

/* Visually hidden but available to screen readers (used for structural headings). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 3. Spacing, lists and rich text ------------------------------------ */
/* Layout components space their children with flex/grid gap. Bricks' base layer adds
   contextual paragraph/heading margins; reset them for single text and heading elements
   (zero specificity, so any margin set in Bricks still wins). Rich text and post content keep them. */
:where(.brxe-text-basic, .brxe-heading) { margin-block: 0; }
.eco-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6em; }
.eco-list li { position: relative; padding-left: 1.6em; }
.eco-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6em; height: 1px; background-color: var(--secondary); }
.brxe-post-content.prose > * + * { margin-top: var(--space-s); }
.brxe-post-content.prose h2 { margin-top: var(--space-l); }
.brxe-text.prose p:last-child, .brxe-text p:last-child { margin-bottom: 0; }

/* 4. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.event-card:hover .event-card__img, .activity-tile:hover .activity-tile__img { transform: none; }
}

/* 5. Mobile menu --------------------------------------------------------
   Header template → Offcanvas "Site menu" (class .mobile-menu), shown at ≤ 991px.
   Box styles live in the Bricks classes .mobile-menu__*; this section adds what
   class controls cannot express: the numbered menu list and the opening motion. */
.mobile-menu__nav .bricks-nav-menu { flex-direction: column; gap: 0; counter-reset: eco-menu; }
.mobile-menu__nav .bricks-nav-menu > li { margin: 0; counter-increment: eco-menu; border-bottom: 1px solid var(--light-20); }
.mobile-menu__nav .bricks-nav-menu > li > a {
	display: flex; align-items: flex-start; gap: var(--space-s); width: 100%; min-height: 4.8rem;
	padding: var(--space-2xs) 0; font-family: "Playfair Display", Georgia, serif; font-size: var(--text-3xl); line-height: 1.1;
	letter-spacing: -0.015em; color: var(--light); text-decoration: none; transition: color .2s ease, padding-left .3s ease;
}
.mobile-menu__nav .bricks-nav-menu > li > a::before {
	content: counter(eco-menu, decimal-leading-zero); flex-shrink: 0; min-width: 2.6em; margin-top: 0.85em;
	font-family: Inter, system-ui, sans-serif; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; line-height: 1; color: var(--tertiary-l-2);
}
.mobile-menu__nav .bricks-nav-menu > li > a:hover { padding-left: 0.3em; color: var(--tertiary-l-3); }
.mobile-menu__nav .bricks-nav-menu > .current-menu-item > a { color: var(--tertiary-l-3); }
.mobile-menu__nav .bricks-nav-menu > .current-menu-item > a::after {
	content: ""; align-self: center; width: 0.8rem; height: 0.8rem; margin-left: auto; border-radius: 50%; background-color: var(--tertiary-l-2);
}
.mobile-menu .brxe-toggle .brxa-inner, .mobile-menu .brxe-toggle .brxa-inner::before, .mobile-menu .brxe-toggle .brxa-inner::after { background-color: currentColor; }
.mobile-menu__open, .mobile-menu__close { align-items: center; justify-content: center; min-width: 4.4rem; min-height: 4.4rem; padding: 0; }
.mobile-menu__close .brxa-wrap { margin: 0 auto; }
.mobile-menu__actions .brxe-button { width: 100%; }
.mobile-menu__event-title a { color: inherit; text-decoration: none; }
.mobile-menu__event-title a::after { content: ""; position: absolute; inset: 0; }
.mobile-menu__event-item:focus-within { outline: 2px solid var(--light); outline-offset: 6px; border-radius: var(--radius-xs); }
.mobile-menu :where(a, button):focus-visible { outline-color: var(--light); }
@keyframes eco-menu-in { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }
.mobile-menu.brx-open .mobile-menu__top,
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li,
.mobile-menu.brx-open .mobile-menu__event,
.mobile-menu.brx-open .mobile-menu__actions,
.mobile-menu.brx-open .mobile-menu__footer { animation: eco-menu-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.mobile-menu.brx-open .mobile-menu__top { animation-delay: .05s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(1) { animation-delay: .12s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(2) { animation-delay: .17s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(3) { animation-delay: .22s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(4) { animation-delay: .27s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(5) { animation-delay: .32s; }
.mobile-menu.brx-open .mobile-menu__nav .bricks-nav-menu > li:nth-child(n+6) { animation-delay: .37s; }
.mobile-menu.brx-open .mobile-menu__event { animation-delay: .42s; }
.mobile-menu.brx-open .mobile-menu__actions { animation-delay: .48s; }
.mobile-menu.brx-open .mobile-menu__footer { animation-delay: .54s; }
@media (min-width: 992px) { .mobile-menu { display: none; } }

/* 6. Scroll reveal --------------------------------------------------------
   Driven by the "Site – scroll reveal and header state" JS snippet, which marks
   below-the-fold blocks [data-reveal]. Hiding is instant (nothing is on screen yet)
   and only the reveal is animated. Page headers and the hero animate with CSS from
   first paint. Nothing applies without .eco-motion (reduced motion or no JavaScript). */
.eco-motion [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(2rem); }
.eco-motion [data-reveal].is-revealed {
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--eco-i, 0) * 90ms);
}
.eco-motion [data-reveal]:not(.is-revealed) :is(.img-cover, .event-hero__media) { transform: scale(1.05); }
.eco-motion [data-reveal].is-revealed :is(.img-cover, .event-hero__media) { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.eco-motion :is(.hero__content, .page-hero__inner) { animation: eco-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.eco-motion .hero__media { animation: eco-hero-settle 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes eco-rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@keyframes eco-hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* 7. Desktop navigation and header ------------------------------------------
   Hairline underline that draws in on hover, siblings recede while one is
   hovered, the current page keeps its underline; header tightens on scroll. */
.site-nav .bricks-nav-menu > li > a { position: relative; color: var(--text-title); transition: color .3s ease, opacity .3s ease; }
.site-nav .bricks-nav-menu > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0.45em; height: 1px; background-color: currentColor;
	transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.site-nav .bricks-nav-menu > li > a:hover::after, .site-nav .bricks-nav-menu > li > a:focus-visible::after, .site-nav .bricks-nav-menu > li > a[aria-current="page"]::after {
	transform: scaleX(1); transform-origin: left center;
}
.site-nav .bricks-nav-menu > li > a[aria-current="page"] { color: var(--primary); }
.site-nav .bricks-nav-menu:hover > li > a:not(:hover), .site-nav .bricks-nav-menu:focus-within > li > a:not(:focus-visible):not(:hover) { opacity: .5; }
.site-header__cta::after { content: "→"; display: inline-block; margin-left: 0.15em; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.site-header__cta:hover::after, .site-header__cta:focus-visible::after { transform: translateX(0.25em); }
#brx-header .site-header { padding-top: calc(var(--space-xs) + var(--eco-frame)); transition: padding .35s ease, box-shadow .35s ease; }
#brx-header.is-scrolled .site-header { padding-top: calc(var(--space-3xs) + var(--eco-frame)); padding-bottom: var(--space-3xs); box-shadow: 0 1px 0 var(--border-primary), 0 12px 32px -24px var(--shadow-primary); border-bottom-color: transparent; }

/* 8. Site frame ---------------------------------------------------------------
   Fixed 4–6px frame around the viewport with softly rounded inner corners.
   Change --eco-frame-color / --eco-frame below; set --eco-frame: 0px to remove. */
:root { --eco-frame: clamp(4px, 0.25vw + 2.5px, 6px); --eco-frame-radius: 8px; --eco-frame-color: var(--primary); }
body::after {
	content: ""; position: fixed; inset: var(--eco-frame); border-radius: var(--eco-frame-radius);
	box-shadow: 0 0 0 calc(var(--eco-frame) + var(--eco-frame-radius) + 4px) var(--eco-frame-color);
	pointer-events: none; z-index: 2147483000;
}
@media print { body::after { display: none; } }