/* ==========================================================================
   Base — Reset + global typography + utility classes
   ========================================================================== */

/* --- Box sizing ---------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* --- Root ---------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/*
 * Global reduced-motion killswitch.
 * Catches any transition/animation added in the future that forgets its own
 * prefers-reduced-motion block. Per-component blocks can still override this
 * to keep instant state changes (e.g. opacity 0→1 with duration:0).
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration:        0.01ms !important;
		animation-iteration-count: 1      !important;
		transition-duration:       0.01ms !important;
		scroll-behavior:           auto   !important;
	}
}

body {
	margin: 0;
	font-family: var(--ac-font-family);
	font-size: var(--ac-font-size-base);
	line-height: var(--ac-line-height-normal);
	color: var(--ac-color-text);
	background-color: var(--ac-color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Prevent any element creating inadvertent horizontal scroll on mobile */
	overflow-x: hidden;
}

/* --- Media --------------------------------------------------------------- */
img,
video,
svg {
	display: block;
	max-width: 100%;
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	line-height: var(--ac-line-height-tight);
	font-weight: var(--ac-font-weight-bold);
	color: var(--ac-color-text);
}

h1 { font-size: var(--ac-font-size-4xl); }
h2 { font-size: var(--ac-font-size-3xl); }
h3 { font-size: var(--ac-font-size-2xl); }
h4 { font-size: var(--ac-font-size-xl); }
h5 { font-size: var(--ac-font-size-lg); }
h6 { font-size: var(--ac-font-size-md); }

@media (max-width: 56.25em) {
	h1 { font-size: var(--ac-font-size-3xl); }
	h2 { font-size: var(--ac-font-size-2xl); }
}

/* --- Paragraphs + inline ------------------------------------------------- */
p {
	margin-top: 0;
	margin-bottom: var(--ac-space-4);
}

a {
	color: var(--ac-color-link);   /* semantic token — adapts to dark mode */
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--ac-duration-short) var(--ac-ease-standard);
}

a:hover {
	color: var(--ac-color-primary-dark);
}

/* Do NOT change color on focus — the focus ring is the indicator.
   Changing color on focus breaks links that intentionally have non-primary colours
   (e.g. white links inside dark panels, skip link, footer links). */

/* --- Focus ring ---------------------------------------------------------- */
:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 3px;
	border-radius:  2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* On dark/primary-coloured backgrounds use a white ring with dark offset */
.ac-panel__header :focus-visible,
[style*="background"] :focus-visible {
	outline:        3px solid #ffffff;
	outline-offset: 3px;
}

/* --- Skip link ----------------------------------------------------------- */
.ac-skip-link {
	position:        absolute;
	top:             -100%;
	left:            50%;
	transform:       translateX(-50%);
	z-index:         var(--z-toast);
	padding:         var(--ac-space-3) var(--ac-space-8);
	background:      #ffdd00;       /* high-vis yellow — max contrast on any bg */
	color:           #000000;
	font-weight:     var(--ac-font-weight-bold);
	font-size:       var(--ac-font-size-base);
	text-decoration: none;
	border-radius:   0 0 var(--ac-radius-md) var(--ac-radius-md);
	white-space:     nowrap;
	transition:      top var(--ac-duration-short) var(--ac-ease-standard);
}

/* Override global a:focus — must stay white-on-navy or whatever we set above */
.ac-skip-link:focus,
.ac-skip-link:hover {
	top:             0;
	color:           #000000;
	outline:         3px solid #000000;
	outline-offset:  2px;
}

/* --- Container ----------------------------------------------------------- */
.ac-container {
	width: 100%;
	max-width: var(--ac-container-max);
	margin-inline: auto;
	padding-inline: var(--ac-container-padding);
}

/* --- Visually hidden (screen-reader only) -------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* --- Clickable elements always show hand cursor --------------------------- */
a,
button,
[role="button"],
label[for],
summary,
[onclick] {
	cursor: pointer;
}

/* --- Section defaults ---------------------------------------------------- */
.ac-section {
	padding-block: var(--ac-section-gap);
}

/* --- Reusable section header (title + subtitle) -------------------------
 *  Default: center-aligned.
 *  Add --left for left-aligned layout when needed.
 *
 *  Usage: <div class="ac-section-header [ac-section-header--left]">
 *           <h2 class="ac-section-header__title">…</h2>
 *           <p  class="ac-section-header__subtitle">…</p>
 *         </div>
 * -------------------------------------------------------------------- */
.ac-section-header {
	text-align:    left;
	margin-bottom: var(--ac-space-8);
}

/* --center modifier for the rare cases that explicitly need centering */
.ac-section-header--center {
	text-align: center;
}

/* Full-width page section title (Audience, Events, Programs on front page).
   Slightly larger than .ac-resource-section__title (≤32px) so full-page
   sections feel visually heavier than sidebar content sections. */
.ac-section-header__title {
	font-size:   clamp( var(--ac-font-size-2xl), 4vw, var(--ac-font-size-3xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-2);
	line-height: var(--ac-line-height-tight);
}

.ac-section-header__subtitle {
	font-size:     var(--ac-font-size-md);
	color:         var(--ac-color-text-muted);
	margin:        0;
	max-width:     56ch;
	margin-inline: 0;
	line-height:   var(--ac-line-height-normal);
}

.ac-section-header--center .ac-section-header__subtitle {
	margin-inline: auto;
}

/* --- Main content area --------------------------------------------------- */
.ac-main {
	min-height: 50vh;
}

/* --- Post content (basic page/index) ------------------------------------- */
.ac-post {
	padding-block: var(--ac-space-8);
}

.ac-post__title {
	margin-bottom: var(--ac-space-6);
}

.ac-post__content {
	max-width: 72ch;
	line-height: var(--ac-line-height-loose);
}

/* Full-width variant — used by the "Full Width" page template.
   Removes the prose reading-width cap so calendars / shortcodes
   can span the entire container. */
.ac-post__content--full {
	max-width: none;
}

/* ==========================================================================
   Divider / Spacer component
   Used on both front-page and single-resource templates.
   ========================================================================== */

.ac-divider {
	padding-block: 0;
}

.ac-divider__line {
	border:       none;
	border-top:   1px solid var(--ac-color-border);
	margin-block: 0;
}

/* Padding modifiers */
.ac-divider--pt-sm { padding-top: var(--ac-space-4);  }
.ac-divider--pt-md { padding-top: var(--ac-space-8);  }
.ac-divider--pt-lg { padding-top: var(--ac-space-16); }
.ac-divider--pt-xl { padding-top: var(--ac-space-24); }

.ac-divider--pb-sm { padding-bottom: var(--ac-space-4);  }
.ac-divider--pb-md { padding-bottom: var(--ac-space-8);  }
.ac-divider--pb-lg { padding-bottom: var(--ac-space-16); }
.ac-divider--pb-xl { padding-bottom: var(--ac-space-24); }

/* ==========================================================================
   Element: Heading (used inside the Elements flexible content layout)
   ========================================================================== */

.ac-element-heading {
	padding-block: var(--ac-space-4) 0;
}

.ac-element-heading__title {
	margin: 0;
	font-weight: var(--ac-font-weight-bold, 700);
	color: var(--ac-color-primary);
	line-height: 1.2;
}

/* Elements heading scale.
   H2 matches the section-title level (32px) — it is a major content heading.
   H3 and H4 step down proportionally. */
.ac-element-heading--h2 .ac-element-heading__title {
	font-size: var(--ac-font-size-2xl);   /* 32px */
}

.ac-element-heading--h3 .ac-element-heading__title {
	font-size: var(--ac-font-size-xl);    /* 24px */
}

.ac-element-heading--h4 .ac-element-heading__title {
	font-size: var(--ac-font-size-lg);    /* 20px */
}

.ac-element-heading__subtitle {
	margin: var(--ac-space-2) 0 0;
	color: var(--ac-color-text-muted);
	font-size: var(--ac-font-size-base);
	line-height: 1.6;
}

/* ==========================================================================
   Breadcrumb — base structure (always loaded)
   Colour overrides for dark hero backgrounds live in archive.css.
   The --on-light modifier below is used on white/light page backgrounds.
   ========================================================================== */

/* Wrapper bar — adds breathing room above/below the trail */
.ac-breadcrumb-wrap {
	padding-block: var(--ac-space-3);
	border-bottom: 1px solid var(--ac-color-border);
	margin-bottom: var(--ac-space-2);
}

.ac-breadcrumb {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         var(--ac-space-1) 0;
	font-size:   var(--ac-font-size-sm);
}

.ac-breadcrumb__item {
	display:     flex;
	align-items: center;
}

/* Separator — rendered as HTML <span aria-hidden="true"> so screen readers
   skip it entirely. No CSS content needed. */
.ac-breadcrumb__sep {
	margin-inline: var(--ac-space-2);
	font-size:     0.85em;
	line-height:   1;
	flex-shrink:   0;
}

.ac-breadcrumb a {
	text-decoration: none;
	transition:      color 0.15s ease;
}

.ac-breadcrumb a:hover,
.ac-breadcrumb a:focus-visible {
	text-decoration:       underline;
	text-underline-offset: 2px;
}

/* Visible focus ring for keyboard navigation */
.ac-breadcrumb a:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
	border-radius:  2px;
}

/* Current page item — visually distinct */
.ac-breadcrumb [aria-current="page"] span {
	font-weight: var(--ac-font-weight-medium, 500);
}

/* ==========================================================================
   Breadcrumb — on-light variant (white/light backgrounds)
   ========================================================================== */

.ac-breadcrumb--on-light {
	color: var(--ac-color-text-muted);
}

.ac-breadcrumb--on-light .ac-breadcrumb__sep {
	color: var(--ac-color-text-muted);
}

.ac-breadcrumb--on-light a {
	color: var(--ac-color-text-muted);
}

.ac-breadcrumb--on-light a:hover,
.ac-breadcrumb--on-light a:focus-visible {
	color: var(--ac-color-primary);
}

.ac-breadcrumb--on-light [aria-current="page"] span {
	color: var(--ac-color-text);
}

/* =============================================================================
   GHL / LeadConnector Form — Modal Popup
   Triggered by .ac-ghl-form__popup-trigger; uses the native <dialog> element.
   ============================================================================= */

/* Trigger button wrapper (centres the button) */
.ac-ghl-form__popup-wrap {
	display:     flex;
	justify-content: center;
	padding-block: var(--ac-space-4);
}

/* ── <dialog> base ──────────────────────────────────────────────────────────── */
.ac-ghl-form-modal {
	border:        none;
	border-radius: var(--ac-radius-lg, 12px);
	padding:       0;
	width:         min( 640px, 92vw );
	max-height:    90dvh;
	overflow:      hidden;
	box-shadow:    0 24px 64px rgba( 0, 0, 0, 0.22 );
	/* Override browser default margin (auto-centering) */
	margin:        auto;
}

.ac-ghl-form-modal::backdrop {
	background: rgba( 0, 0, 0, 0.55 );
	backdrop-filter: blur( 3px );
}

/* Opening animation */
@keyframes ac-modal-in {
	from { opacity: 0; transform: translateY( -16px ) scale( 0.97 ); }
	to   { opacity: 1; transform: translateY( 0 )     scale( 1 );    }
}

.ac-ghl-form-modal[open] {
	animation: ac-modal-in 0.2s ease forwards;
}

/* ── Inner scroll container ─────────────────────────────────────────────────── */
.ac-ghl-form-modal__inner {
	position:   relative;
	padding:    var(--ac-space-10) var(--ac-space-8) var(--ac-space-8);
	overflow-y: auto;
	max-height: 90dvh;
}

/* ── Close button ───────────────────────────────────────────────────────────── */
.ac-ghl-form-modal__close {
	position:        absolute;
	top:             var(--ac-space-4);
	right:           var(--ac-space-4);
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	background:      var(--ac-color-surface, #f5f5f5);
	border:          1px solid var(--ac-color-border);
	border-radius:   50%;
	color:           var(--ac-color-text-muted);
	font-size:       1rem;
	cursor:          pointer;
	transition:      background 0.15s ease, color 0.15s ease;
	z-index:         1;
}

.ac-ghl-form-modal__close:hover,
.ac-ghl-form-modal__close:focus-visible {
	background: var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color: var(--ac-color-white);
}

/* ── Heading inside modal ───────────────────────────────────────────────────── */
.ac-ghl-form-modal__heading {
	font-size:    var(--ac-font-size-xl);
	font-weight:  var(--ac-font-weight-bold);
	color:        var(--ac-color-text);
	margin-block: 0 var(--ac-space-6);
}

/* ── Body (form wrapper) ────────────────────────────────────────────────────── */
.ac-ghl-form-modal__body {
	/* Give the LeadConnector iframe room to breathe */
}

/* ── Dark mode ──────────────────────────────────────────────────────────────── */
html[data-color-scheme="dark"] .ac-ghl-form-modal {
	background:   var(--ac-color-surface);
	box-shadow:   0 24px 64px rgba( 0, 0, 0, 0.5 );
}

html[data-color-scheme="dark"] .ac-ghl-form-modal__close {
	background:   var(--ac-color-surface);
	border-color: var(--ac-color-border);
	color:        var(--ac-color-text-muted);
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-ghl-form-modal   { background: var(--ac-color-surface); box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
	html:not([data-color-scheme="light"]) .ac-ghl-form-modal__close { background: var(--ac-color-surface); border-color: var(--ac-color-border); color: var(--ac-color-text-muted); }
}

/* ── WP Event Manager overrides ── */
.event_listings {
	padding-inline-start: 0;  /* remove browser default 40px UA padding on <ul> */
}

.wpem-event-listings .wpem-event-layout-wrapper .event_featured,
.wpem-event-listings .wpem-event-layout-wrapper .event_featured:hover,
.event_summary_shortcode .wpem-single-event-widget .event_featured,
.widget_featured_events .wpem-single-event-widget {
	background: transparent;  /* remove featured-event yellow #ffffe4 */
}

/* Registration button — match .ac-btn.ac-btn--primary */
.registration_button.wpem-theme-button,
a.registration_button.wpem-theme-button {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	font-family:      inherit;
	font-size:        0.9375rem;
	font-weight:      600;
	line-height:      1.2;
	text-transform:   none;
	letter-spacing:   normal;
	text-decoration:  none;
	padding:          0.5rem 1.25rem;
	min-height:       2.5rem;
	border:           2px solid #002F86;
	border-radius:    0.625rem;
	background-color: #002F86;
	color:            #ffffff !important;
	cursor:           pointer;
	transition:       background-color 150ms cubic-bezier(0.4,0,0.2,1),
	                  border-color     150ms cubic-bezier(0.4,0,0.2,1),
	                  transform        150ms cubic-bezier(0.4,0,0.2,1),
	                  box-shadow       150ms cubic-bezier(0.4,0,0.2,1);
}

.registration_button.wpem-theme-button:hover,
.registration_button.wpem-theme-button:focus-visible,
a.registration_button.wpem-theme-button:hover,
a.registration_button.wpem-theme-button:focus-visible {
	background-color: #001F60;
	border-color:     #001F60;
	color:            #ffffff !important;
	transform:        translateY(-1px);
	box-shadow:       0 4px 16px rgba(0,47,134,0.10), 0 2px 4px rgba(0,47,134,0.06);
	text-decoration:  none;
}

.registration_button.wpem-theme-button:active,
a.registration_button.wpem-theme-button:active {
	transform:  translateY(0);
	box-shadow: none;
}