/**
 * Let a page-builder template control the width of a single event.
 *
 * The Events Calendar wraps single events in #tribe-events-pg-template, which
 * carries a max-width and horizontal padding. That wrapper sits *outside* the
 * Elementor template, so a full-width section inside the template is still
 * clipped by it and there is no way to reach it from the builder.
 *
 * Only the outer constraint is removed. Width then comes from the template's
 * own containers, which is where a designer expects to control it.
 */

body.single-tribe_events #tribe-events-pg-template.tribe-events-pg-template {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/**
 * Event meta row.
 *
 * Sized in em and coloured white, since it sits in a dark hero. Add the
 * --dark modifier when placing it on a light background.
 */
.oa-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em 2.5em;
	margin: 0;
	color: #fff;
}

/* For the same row on a light background. */
.oa-event-meta--dark {
	color: inherit;
}

.oa-event-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.oa-event-meta__label {
	margin: 0;
	font-size: 0.8em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Muted rather than a second colour, so it works on any background. */
	opacity: 0.7;
}

.oa-event-meta__value {
	margin: 0;
	color: inherit;
	font-weight: 700;
}

/**
 * Status pills.
 *
 * Two deliberately different weights: "featured" is a solid badge that draws
 * the eye, "registration open" is an outline so it reads as information rather
 * than competing with it.
 */
.oa-event-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45em;
	margin: 0 0 1em;
	/* Set here, not inherited: the outlined pills use currentColor for both
	   text and border, so without an explicit colour they take whatever the
	   surrounding section gives — which was dark text on a dark hero. */
	color: #fff;
}

/* For the same pills on a light background. */
.oa-event-pills--dark {
	color: inherit;
}

.oa-event-pill {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid transparent;
	border-radius: 999px;
	/* em-based, so a pill still scales with whatever type size surrounds it. */
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

.oa-event-pill--featured {
	background: #fbe9ec;
	color: #8a2424;
}

/* Outlined, and colour-agnostic: they borrow whatever text colour surrounds
   them, so they work on a dark hero or a light page without a second rule. */
.oa-event-pill--open,
.oa-event-pill--upcoming {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: currentColor;
	color: inherit;
	opacity: 0.9;
}

/* Closed and past are facts, not calls to action — same shape, less weight. */
.oa-event-pill--closed,
.oa-event-pill--past {
	background: transparent;
	border-color: currentColor;
	border-style: dashed;
	color: inherit;
	/* Muted, but not so far that it stops being readable on a dark ground. */
	opacity: 0.75;
}

/* ---------- Flier ---------- */

.oa-flier {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75em;
	margin: 1.5em 0;
}

/*
 * The parent aligns to flex-start so a text-only link sits left. When a picture
 * renders, the whole block centres instead — a centred image above a
 * left-aligned link reads as a mistake.
 */
.oa-flier--centered {
	align-items: center;
	text-align: center;
}

.oa-flier__preview {
	max-width: 100%;
}

.oa-flier__preview img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.18 );
}

.oa-flier__link {
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Flier: inline PDF viewer ---------- */

.oa-flier__embed {
	/*
	 * The .oa-flier parent is a column flexbox with align-items: flex-start, so
	 * a child collapses to its content width unless it stretches deliberately.
	 */
	align-self: stretch;
	width: 100%;
}

/*
 * A fixed height belongs only to the native fallback: an <object> has no
 * intrinsic height, so one has to be supplied. PDF Embedder sizes itself to the
 * document, and forcing a height on it leaves dead space below the last page —
 * 283px of it at the 900px default.
 */
.oa-flier__embed:not( .oa-flier__embed--plugin ) {
	height: var( --oa-flier-height, 900px );
}

.oa-flier__object {
	width: 100%;
	height: 100%;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	background: #fff;
}

/*
 * Only ever painted by a browser that cannot render the PDF: <object> shows its
 * children in place of the document. Centred in the box so the button does not
 * sit in the corner of an otherwise empty frame.
 */
.oa-flier__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
}

/*
 * Scoped to .oa-flier so it outranks the theme's bare `a` rules, which
 * otherwise paint the button's label link-purple and underline it.
 */
.oa-flier .oa-flier__button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 4px;
	background: var( --oa-flier-btn-bg, #1a4a7a );
	color: var( --oa-flier-btn-text, #fff );
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

/*
 * Elementor's kit declares `.elementor-kit-N a:hover { color; font-family;
 * font-size; font-weight; line-height; letter-spacing }` at specificity
 * (0,2,1). A base rule at (0,2,0) therefore loses on hover only, so a button
 * whose weight and line-height live in the base rule visibly changes size the
 * moment a pointer touches it. Every state below restates the whole set, and
 * the :is() wrapper lifts the selector to (0,3,0) so it wins outright rather
 * than tying and depending on stylesheet order.
 */
.oa-flier .oa-flier__button:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	background: var( --oa-flier-btn-bg, #1a4a7a );
	color: var( --oa-flier-btn-text, #fff );
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-flier .oa-flier__button:is( :hover, :focus, :focus-visible ) {
	background: var( --oa-flier-btn-bg-hover, #143a60 );
}

/*
 * The viewer is shown at every width. A full 900px of it on a phone would push
 * everything else off the screen, so cap it against the viewport instead — and
 * never below 320px, or a short viewport leaves a letterbox too small to read.
 */
@media ( max-width: 782px ) {
	.oa-flier__embed:not( .oa-flier__embed--plugin ) {
		height: max( 320px, min( var( --oa-flier-height, 900px ), 75vh ) );
	}
}

/*
 * The text link keeps the theme's own link colours on purpose — a colour change
 * on hover is intended design, not the wonkiness. What is pinned is the
 * metrics, so the line never reflows under the pointer.
 */
.oa-flier .oa-flier__link:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* ---------- Officers ---------- */

.oa-officers {
	/*
	 * Tokens rather than literals so a theme can restyle the cards without
	 * overriding every rule below.
	 */
	--oa-officer-bg: #fff;
	--oa-officer-border: rgba( 0, 0, 0, 0.06 );
	--oa-officer-role: #4a4a5a;
	--oa-officer-name: #1b1b4b;
	--oa-officer-open-bg: #fbe0dc;
	--oa-officer-open-text: #bc3b2c;

	display: grid;
	grid-template-columns: repeat( var( --oa-officers-columns, 2 ), minmax( 0, 1fr ) );
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 0;
}

.oa-officer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
	border: 1px solid var( --oa-officer-border );
	border-radius: 14px;
	background: var( --oa-officer-bg );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}

.oa-officer__role {
	margin: 0;
	color: var( --oa-officer-role );
	font-weight: 400;
	/* The role wraps before the name does; the name is the shorter string. */
	min-width: 0;
}

.oa-officer__name {
	margin: 0;
	color: var( --oa-officer-name );
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.oa-officer__badge {
	display: inline-block;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: var( --oa-officer-open-bg );
	color: var( --oa-officer-open-text );
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A single column below the point where two cards stop fitting side by side. */
@media ( max-width: 782px ) {
	.oa-officers {
		grid-template-columns: 1fr;
	}
}

/* ---------- Donate button ---------- */

.oa-donate {
	--oa-donate-bg: #1b1b4b;
	--oa-donate-bg-hover: #10102f;
	--oa-donate-text: #fff;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin: 1.5rem 0;
}

.oa-donate--center {
	justify-content: center;
	text-align: center;
}

.oa-donate--right {
	justify-content: flex-end;
}

/*
 * Scoped to .oa-donate so it outranks the theme's bare `a` rules, which would
 * otherwise paint the label link-coloured and underline it.
 */
.oa-donate .oa-donate__button {
	display: inline-block;
	padding: 0.8em 1.8em;
	border: 0;
	border-radius: 999px;
	background: var( --oa-donate-bg );
	color: var( --oa-donate-text );
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

/* Same reasoning as the flier button above. */
.oa-donate .oa-donate__button:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	background: var( --oa-donate-bg );
	color: var( --oa-donate-text );
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-donate .oa-donate__button:is( :hover, :focus, :focus-visible ) {
	background: var( --oa-donate-bg-hover );
}

/* A visible ring, since the theme's outline is not guaranteed to survive. */
.oa-donate .oa-donate__button:focus-visible,
.oa-flier .oa-flier__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.oa-donate__note {
	color: inherit;
	font-size: 0.9em;
	opacity: 0.85;
}

/* Admin-only hint when no link is configured; never shown to visitors. */
.oa-donate__notice {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 8px;
	font-size: 0.95em;
}

/* ---------- Home page events block ---------- */

.oa-home-events {
	--oa-home-navy: #1b1b4b;
	--oa-home-navy-soft: rgba( 255, 255, 255, 0.78 );
	--oa-home-accent: #e2664f;
	--oa-home-card-bg: #fdf8f6;
	--oa-home-card-border: rgba( 0, 0, 0, 0.06 );
	--oa-home-muted: #6b6b7b;
	--oa-home-link: #4d47d1;

	margin: 2rem 0;
}

/* --- Featured card --- */

.oa-home-hero {
	padding: 2.5rem;
	border-radius: 18px;
	background: var( --oa-home-navy );
	color: #fff;
}

.oa-home-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.25rem;
	padding: 0.45em 1em;
	border-radius: 999px;
	background: var( --oa-home-accent );
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.oa-home-hero__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
}

.oa-home-hero__title {
	margin: 0 0 0.75rem;
	color: #fff;
	font-size: clamp( 1.6rem, 3.2vw, 2.4rem );
	line-height: 1.15;
}

/*
 * The title is a link inside a dark card, so the theme's link colour would make
 * it unreadable. All states pinned for the same specificity reason as the
 * buttons above — Elementor's `a:hover` would otherwise recolour it and change
 * its weight mid-hover.
 */
.oa-home-hero__title a:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.oa-home-hero__title a:is( :hover, :focus, :focus-visible ) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.oa-home-hero__excerpt {
	max-width: 34em;
	margin: 0 0 1.5rem;
	color: var( --oa-home-navy-soft );
}

.oa-home-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin: 0 0 1.75rem;
	color: var( --oa-home-navy-soft );
	font-size: 0.95em;
}

.oa-home-hero__fact {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.oa-home-hero__actions {
	margin: 0;
}

.oa-home-hero .oa-home-hero__button:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.95em 1.7em;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: var( --oa-home-navy );
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-home-hero .oa-home-hero__button:is( :hover, :focus, :focus-visible ) {
	background: #ece9ff;
}

/* --- Calendar list --- */

.oa-home-events__heading {
	margin: 2rem 0 1rem;
	color: var( --oa-home-muted );
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.oa-home-list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oa-home-item {
	margin: 0;
}

.oa-home-item .oa-home-item__link:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: grid;
	/* Fixed date chip, elastic middle, natural-width action. */
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 1.5rem;
	border: 1px solid var( --oa-home-card-border );
	border-radius: 12px;
	background: var( --oa-home-card-bg );
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.4;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-home-item .oa-home-item__link:is( :hover, :focus, :focus-visible ) {
	border-color: rgba( 0, 0, 0, 0.14 );
	background: #fff;
}

.oa-home-item__link:focus-visible {
	outline: 2px solid var( --oa-home-link );
	outline-offset: 2px;
}

.oa-home-item__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.2em;
	padding: 0.6em 0;
	border-radius: 10px;
	background: var( --oa-home-navy );
	color: #fff;
	line-height: 1.1;
}

.oa-home-item__month {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.oa-home-item__day {
	font-size: 1.5em;
	font-weight: 700;
}

.oa-home-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
}

.oa-home-item__title {
	color: var( --oa-home-navy );
	font-weight: 700;
}

.oa-home-item__when {
	color: var( --oa-home-muted );
	font-size: 0.92em;
}

.oa-home-item__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var( --oa-home-link );
	font-weight: 500;
	white-space: nowrap;
}

@media ( max-width: 782px ) {
	.oa-home-hero {
		padding: 1.75rem 1.5rem;
	}

	.oa-home-item .oa-home-item__link:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
		/* The action drops below the text rather than squeezing the title. */
		grid-template-columns: auto minmax( 0, 1fr );
		gap: 1rem;
	}

	.oa-home-item__more {
		grid-column: 2;
	}
}

/* ---------- Meeting list ---------- */

.oa-meetings {
	--oa-meetings-bg: #1b1b4b;
	--oa-meetings-bg-hover: #10102f;
	--oa-meetings-text: #fff;

	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 1.5rem 0 0.75rem;
}

/* All states pinned so the theme cannot resize the label on hover. */
.oa-meetings .oa-meetings__button:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: inline-block;
	padding: 0.85em 1.7em;
	border: 0;
	border-radius: 6px;
	background: var( --oa-meetings-bg );
	color: var( --oa-meetings-text );
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
}

.oa-meetings .oa-meetings__button:is( :hover, :focus, :focus-visible ) {
	background: var( --oa-meetings-bg-hover );
}

.oa-meetings .oa-meetings__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.oa-meetings__updated {
	margin: 0 0 1.5rem;
	color: #6b6b7b;
	font-size: 0.9em;
}

.oa-meetings__notice {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 8px;
	font-size: 0.95em;
}

/* One per line where two side by side would wrap awkwardly. */
@media ( max-width: 600px ) {
	.oa-meetings {
		flex-direction: column;
	}
}

/* --- Meeting list: secondary button and embedded reader --- */

.oa-meetings .oa-meetings__button--secondary:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	background: transparent;
	border: 1px solid rgba( 0, 0, 0, 0.18 );
	color: var( --oa-meetings-bg );
}

.oa-meetings .oa-meetings__button--secondary:is( :hover, :focus, :focus-visible ) {
	background: rgba( 0, 0, 0, 0.04 );
	border-color: rgba( 0, 0, 0, 0.32 );
	color: var( --oa-meetings-bg );
}

.oa-meetings__viewer {
	margin: 0 0 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.1 );
	border-radius: 10px;
	/* Clips the viewer's own square corners to the card's rounded ones. */
	overflow: hidden;
	background: #fdf8f6;
}

.oa-meetings__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.15rem;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
	background: #fff;
}

.oa-meetings__name {
	color: var( --oa-meetings-bg );
	font-weight: 700;
}

/* Pinned states, so the theme cannot resize the label mid-hover. */
.oa-meetings__viewer .oa-meetings__open:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var( --oa-meetings-link, #4d47d1 );
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
	white-space: nowrap;
}

.oa-meetings__viewer .oa-meetings__open:is( :hover, :focus, :focus-visible ) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* The viewer brings its own spacing; the card supplies the frame. */
.oa-meetings__frame .oa-flier__embed {
	margin: 0;
}

.oa-meetings__help {
	margin: 0 0 1.5rem;
	color: #6b6b7b;
	font-size: 0.9em;
}

@media ( max-width: 600px ) {
	.oa-meetings__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Joining online ---------- */

.oa-virtual {
	--oa-virtual-bg: #1b1b4b;
	--oa-virtual-bg-hover: #10102f;
	--oa-virtual-text: #fff;

	/*
	 * No outer spacing: this sits inside an Elementor widget that already has
	 * its own margin controls, and a margin here fights them.
	 */
	margin: 0;
}

/* Nothing trailing on the last child either, or the block is not flush. */
.oa-virtual > :last-child {
	margin-bottom: 0;
}

.oa-virtual__heading {
	margin: 0 0 0.75rem;
	font-weight: 700;
}

.oa-virtual__actions {
	margin: 0 0 0.75rem;
}

/* All states pinned, so the theme cannot resize the label on hover. */
.oa-virtual .oa-virtual__button:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: inline-block;
	padding: 0.8em 1.7em;
	border: 0;
	border-radius: 6px;
	background: var( --oa-virtual-bg );
	color: var( --oa-virtual-text );
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-virtual .oa-virtual__button:is( :hover, :focus, :focus-visible ) {
	background: var( --oa-virtual-bg-hover );
}

.oa-virtual .oa-virtual__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.oa-virtual__details {
	margin: 0;
}

.oa-virtual__details dt {
	margin: 0 0 0.15em;
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.75;
	text-transform: uppercase;
}

.oa-virtual__details dd {
	margin: 0;
	/* An ID and passcode read better as data than as prose. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05em;
}

.oa-virtual__notice {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 8px;
	font-size: 0.95em;
}

/* A plain text link instead of a button, for display="link". */
.oa-virtual .oa-virtual__link:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: inherit;
	/* Colour is left to the theme; only the metrics are pinned so the line
	   cannot reflow under the pointer. */
}

/* ---------- Outer spacing: none ---------- */

/*
 * Every shortcode renders inside a page-builder widget that already controls
 * the gap between elements. A margin here fights that control and leaves
 * spacing that cannot be tuned from the editor, so each root is flush and the
 * last child's trailing margin goes with it. Spacing *within* a shortcode is
 * untouched — that is layout, not gap.
 */
/*
 * Each class is repeated to reach (0,2,0). Elementor's kit declares
 * `.elementor-kit-N p { margin-block-end: 20px }` at (0,1,1), which outranks a
 * single class — and several of these roots are paragraphs. margin-block is set
 * alongside the physical properties because that is the form the kit uses, and
 * a logical declaration later in the cascade would otherwise win.
 */
.oa-event-meta.oa-event-meta,
.oa-event-pills.oa-event-pills,
.oa-flier.oa-flier,
.oa-officers.oa-officers,
.oa-donate.oa-donate,
.oa-donate__notice.oa-donate__notice,
.oa-meetings.oa-meetings,
.oa-meetings__updated.oa-meetings__updated,
.oa-meetings__viewer.oa-meetings__viewer,
.oa-meetings__help.oa-meetings__help,
.oa-meetings__notice.oa-meetings__notice,
.oa-home-events.oa-home-events,
.oa-virtual.oa-virtual,
.oa-virtual__notice.oa-virtual__notice {
	margin-block: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Same reasoning for the trailing margin on whatever ends each block. */
.oa-event-meta > :last-child,
.oa-flier > :last-child,
.oa-officers > :last-child,
.oa-donate > :last-child,
.oa-home-events > :last-child,
.oa-virtual > :last-child,
.oa-meetings__viewer > :last-child {
	margin-block-end: 0;
	margin-bottom: 0;
}

/* ---------- Meeting list viewer height ---------- */

/*
 * Capped against the viewport so a long list cannot run past the screen: the
 * reader scrolls inside its own frame instead of pushing the page down.
 * max-height clamps the plugin's inline height without needing to outrank it.
 */
.oa-meetings__frame .oa-flier__embed,
.oa-meetings__frame iframe {
	max-height: 80vh;
}

/* ---------- Regional link list ---------- */

/*
 * Colours are expressed against the parent rather than fixed, so the list works
 * on the dark panel it was designed for and on a light one without a second
 * stylesheet. Override the tokens to tune it.
 */
/*
 * Structure only. The two themes below carry every colour, including the text
 * colour — which is the whole point of the attribute. An earlier version used
 * `color: inherit` and assumed the surrounding section would supply something
 * light; it does not. Elementor colours widgets, not containers, so a shortcode
 * dropped into a navy panel still inherits the global body grey and the cards
 * came out unreadable.
 */
.oa-links {
	/* Overall scale: one token resizes every card. */
	--oa-links-size: 0.92em;

	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oa-links__item {
	margin: 0;
}

/* Every state pinned: the theme's link rules would otherwise recolour the
   whole card and change its metrics on hover. */
.oa-links .oa-links__link:is( :link, :visited, :hover, :focus, :focus-visible, :active ) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.15rem;
	border: 1px solid var( --oa-links-border );
	border-radius: 10px;
	background: var( --oa-links-bg );
	color: var( --oa-links-text );
	font-family: inherit;
	/* Label and description scale from this, not from the page. */
	font-size: var( --oa-links-size, 0.92em );
	font-weight: inherit;
	line-height: 1.4;
	letter-spacing: normal;
	text-decoration: none;
}

.oa-links .oa-links__link:is( :hover, :focus, :focus-visible ) {
	background: var( --oa-links-bg-hover );
}

.oa-links .oa-links__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.oa-links__body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
}

.oa-links__label {
	font-size: 1.05em;
	font-weight: 700;
}

.oa-links__desc {
	font-size: 0.92em;
	opacity: var( --oa-links-desc );
}

.oa-links__arrow {
	flex: 0 0 auto;
	font-size: 1.1em;
	opacity: 0.8;
}

.oa-links .oa-links__link:is( :hover, :focus-visible ) .oa-links__arrow {
	opacity: 1;
}

.oa-links__notice {
	margin: 0;
	padding: 0.9rem 1.1rem;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-size: 0.95em;
	opacity: 0.8;
}

/*
 * Light variant. The dark defaults live on .oa-links itself, so only the
 * overlays change: a translucent black instead of a translucent white, and a
 * slightly stronger description since dark grey on white needs less dimming
 * than white on navy.
 */
/* For a dark panel: light text on a translucent white card. */
.oa-links--dark {
	--oa-links-text: #fff;
	--oa-links-bg: rgba( 255, 255, 255, 0.06 );
	--oa-links-bg-hover: rgba( 255, 255, 255, 0.12 );
	--oa-links-border: rgba( 255, 255, 255, 0.16 );
	--oa-links-desc: 0.78;
}

/* For a light panel: the page's own text colour on a translucent black card. */
.oa-links--light {
	--oa-links-text: inherit;
	--oa-links-bg: rgba( 0, 0, 0, 0.025 );
	--oa-links-bg-hover: rgba( 0, 0, 0, 0.055 );
	--oa-links-border: rgba( 0, 0, 0, 0.12 );
	--oa-links-desc: 0.68;
}

/* ---------- Cancelled event notice ---------- */

.oa-cancelled {
	--oa-cancelled-bg: #fcf0f1;
	--oa-cancelled-border: #b32d2e;
	--oa-cancelled-text: #8a2424;

	margin: 0;
	padding: 1.15rem 1.4rem;
	border-left: 4px solid var( --oa-cancelled-border );
	border-radius: 6px;
	background: var( --oa-cancelled-bg );
	color: var( --oa-cancelled-text );
}

.oa-cancelled__heading {
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
}

.oa-cancelled__note,
.oa-cancelled__paid {
	margin: 0.5em 0 0;
}

.oa-cancelled__paid {
	font-size: 0.95em;
	opacity: 0.9;
}