/* =============================================================
   LEGACY CONTENT
   Styles for the markup emitted by inc/divi-cleanup.php when it
   unwraps leftover Divi shortcodes at render time.

   Scope rule: this file styles ONLY what has no equivalent in
   CLASS-CONTRACT.md. The contract vocabulary (.btn, .card,
   .callout, .hero, .eyebrow, .container, .section, .grid*, …)
   is owned by assets/css/main.css and is never redefined here.
   ============================================================= */

/* --- Accordion items and toggles -------------------------------------- */
.legacy-accordion {
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-xl) 0;
}

.legacy-accordion__item {
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-16);
	background: var(--color-surface);
}

.legacy-accordion__summary {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: var(--lh-snug);
	color: var(--color-ink);
	cursor: pointer;
	list-style: none;
}

.legacy-accordion__summary::-webkit-details-marker {
	display: none;
}

.legacy-accordion__summary::after {
	float: right;
	margin-left: var(--space-sm);
	content: '+';
	font-weight: 700;
	color: var(--accent-dark);
	transition: transform .2s ease;
}

.legacy-accordion__item[open] .legacy-accordion__summary::after {
	content: '−';
}

.legacy-accordion__summary:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 3px;
}

.legacy-accordion__body {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--rule);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--color-ink-2);
}

.legacy-accordion__body > :first-child {
	margin-top: 0;
}

.legacy-accordion__body > :last-child {
	margin-bottom: 0;
}

/* Standalone toggles sit outside an accordion, so they need their own rhythm. */
.legacy-accordion__item + .legacy-accordion__item {
	margin-top: 0;
}

/* --- Tab panels, flattened to stacked sections ------------------------ */
.legacy-tabs {
	display: grid;
	gap: var(--space-lg);
	margin: var(--space-xl) 0;
}

.legacy-tabs__panel {
	padding: var(--space-lg);
	border-radius: var(--radius-20);
	background: var(--alt-bg);
}

.legacy-tabs__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-snug);
	color: var(--color-ink);
}

.legacy-tabs__body {
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--color-ink-2);
}

.legacy-tabs__body > :last-child {
	margin-bottom: 0;
}

/* --- Figures and embeds ---------------------------------------------- */
.legacy-image {
	margin: var(--space-xl) 0;
}

.legacy-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-18);
}

.legacy-video {
	margin: var(--space-lg) 0;
	font-size: var(--fs-md);
}

/* Raw [et_pb_code] payloads are passed through verbatim and carry no class,
   so their embeds are constrained here rather than at the element. */
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
	border: 0;
	border-radius: var(--radius-16);
}

/* main.css resets replaced elements to `height:auto`, and an iframe carries no
   intrinsic ratio, so an unwrapped one collapses to the 150px default. The
   filter wraps each iframe and sets --legacy-embed-ratio from that iframe's own
   width/height attributes — these embeds are not all 16/9; the map is 780x550. */
.legacy-embed {
	margin: var(--space-xl) 0;
}

.legacy-embed iframe {
	width: 100%;
	height: auto;
	aspect-ratio: var(--legacy-embed-ratio, 16 / 9);
}

/* A percentage width with a pixel height (the Google Map is width="100%"
   height="550") has no ratio to preserve — honour the authored height. */
.legacy-embed--fixed iframe {
	height: var(--legacy-embed-height);
	aspect-ratio: auto;
}

.legacy-divider {
	margin: var(--space-2xl) auto;
	max-width: var(--width-content);
	border: 0;
	border-top: 1px solid var(--rule);
}

/* --- Hero background image ------------------------------------------- */
/* .hero itself belongs to main.css; this adds only the scrim that keeps
   text legible over a legacy Divi background photo. */
.legacy-hero-media {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

.legacy-hero-media::before {
	position: absolute;
	inset: 0;
	background: linear-gradient( rgba( 0, 0, 0, .3 ), rgba( 0, 0, 0, .55 ) );
	content: '';
	pointer-events: none;
}

.legacy-hero-media > * {
	position: relative;
	z-index: 1;
}

.legacy-hero-media h1,
.legacy-hero-media h2,
.legacy-hero-media h3,
.legacy-hero-media p {
	color: inherit;
}

/* === SHIM STYLES — appended by shortcode-shims worker, do not edit above this line === */

/* Output of the shortcode shims in inc/shortcode-shims.php, plus the plugin
   markup those shims stand in for. None of it has a CLASS-CONTRACT.md
   equivalent. Responsive-iframe containment for [embeddoc] is already handled
   by the `.entry-content iframe` rule above and is not repeated here. */

/* --- [subpages] child-page list --------------------------------------- */
/* Two selectors, one rule block, because either path may render:
   `.subpages-page-list` is what the Page List plugin emits while it is active
   (`<ul class="page-list subpages-page-list">` of `<li class="page_item
   page-item-N">`), `.legacy-subpages` is the shim that takes over if it is
   not. Scoped to the [subpages] class rather than the shared `.page-list`, so
   [pagelist] / [siblings] elsewhere are left alone. */
.legacy-subpages,
.subpages-page-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: var(--space-sm);
	margin: var(--space-lg) 0;
	padding: 0;
	list-style: none;
}

.legacy-subpages > li,
.subpages-page-list > li {
	margin: 0;
	list-style: none;
}

.legacy-subpages > li > a,
.subpages-page-list > li > a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-14);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: none;
}

.legacy-subpages > li > a:hover,
.legacy-subpages > li > a:focus,
.subpages-page-list > li > a:hover,
.subpages-page-list > li > a:focus {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-hover);
	text-decoration: none;
}

/* Page List defaults to depth 0, so a grandchild level can appear.
   Nothing on the site nests today; keep it legible if it ever does. */
.subpages-page-list .children {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-sm);
	margin: var(--space-2xs) 0 0;
	padding: 0 var(--space-md);
	list-style: none;
}

.subpages-page-list .children a {
	color: var(--sage-link);
	font-size: var(--fs-sm);
}

/* --- PDF Embedder ------------------------------------------------------ */
/* The plugin writes inline pixel widths on the viewer, so the width reset
   has to out-specify them. The page canvas is not an iframe and so is not
   covered by the embed rule above. */
.pdfemb-viewer {
	width: 100% !important;
	max-width: var(--width-content) !important;
	margin-inline: auto;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-16);
	background: var(--color-surface);
	overflow: hidden;
}

.pdfemb-inner-div,
.pdfemb-the-canvas {
	max-width: 100%;
}

.pdfemb-the-canvas {
	display: block;
	height: auto !important;
	margin-inline: auto;
}

.pdfemb-toolbar {
	border-top: 1px solid var(--hairline);
	background: var(--alt-bg);
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
}

.pdfemb-loadingmsg,
.pdfemb-errormsg {
	padding: var(--space-md);
	color: var(--color-ink-2);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	text-align: center;
}

.pdfemb-errormsg {
	color: var(--error-text);
	background: var(--error-soft);
}

/* --- Embed Any Document, [embeddoc] ------------------------------------ */
/* The plugin sets padding-top on .ead-document for its own aspect ratio;
   keep that, just contain and frame it. */
.ead-preview {
	max-width: var(--width-content);
	margin: var(--space-lg) auto;
}

.ead-document {
	max-width: 100%;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-16);
	background: var(--color-surface);
	overflow: hidden;
}

.ead-preview .awsm-branding {
	display: block;
	margin-top: var(--space-2xs);
	color: var(--color-ink-2);
	font-size: var(--fs-xs);
}

/* --- The Events Calendar ----------------------------------------------- */
/* The v2 views ship their own reset, which ignores the theme's type and
   colour. Pull it back in. */
.tribe-common,
.tribe-events {
	font-family: var(--font-body);
	color: var(--color-ink);
}

.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h5,
.tribe-common .tribe-common-h6,
.tribe-common .tribe-common-h7,
.tribe-events-single h1,
.tribe-events-single h2 {
	font-family: var(--font-display);
	color: var(--color-ink);
}

.tribe-common .tribe-common-anchor,
.tribe-common a {
	color: var(--sage-link);
}

.tribe-common .tribe-common-anchor:hover,
.tribe-common a:hover {
	color: var(--accent-hover);
}

.tribe-events .tribe-events-l-container,
.tribe-common .tribe-common-l-container {
	max-width: var(--width-site);
	padding-inline: var(--gutter);
}

.tribe-events-calendar-list__event-row {
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--rule);
}

.tribe-events-calendar-list__event-date-tag-daynum {
	font-family: var(--font-display);
	color: var(--accent-dark);
}

.tribe-common .tribe-common-c-btn,
.tribe-common .tribe-common-c-btn-border,
.tribe-common .tribe-common-c-btn-border-small {
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
}

/* --- Narrow screens ----------------------------------------------------- */
/* Nothing embedded may push the page sideways. */
@media (max-width: 600px) {
	.pdfemb-viewer,
	.ead-preview,
	.ead-document {
		border-radius: var(--radius-12);
	}

	.ead-document {
		padding-top: 130% !important;
	}

	.tribe-events .tribe-events-l-container,
	.tribe-common .tribe-common-l-container {
		padding-inline: var(--space-md);
	}

	.legacy-subpages,
	.subpages-page-list {
		grid-template-columns: 1fr;
	}
}