/* ==========================================================================
   Ovation — shared components
   Pieces used by both the hand-built chrome and the Elementor widgets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The uppercase label voice
   Inter, medium, wide tracking. Nav links, eyebrows, buttons and footer column
   headings are all variations on this.
   -------------------------------------------------------------------------- */
.o-label,
.o-eyebrow {
	font-family: var(--o-font-ui);
	font-weight: var(--o-label-weight);
	font-size: var(--o-label-size);
	letter-spacing: var(--o-label-tracking);
	line-height: 1.25;
	text-transform: uppercase;
	margin: 0;
}

.o-eyebrow {
	font-size: var(--o-fs-body);
	letter-spacing: var(--o-label-tracking-tight);
	color: var(--o-accent);
}

/* --------------------------------------------------------------------------
   Logo
   The mark ships as inline SVG so the wordmark can inherit currentColor while
   the orange arc stays orange. Height is fixed; width follows the aspect ratio.
   -------------------------------------------------------------------------- */
.o-logo {
	display: inline-flex;
	align-items: center;
	color: var(--o-white);
	line-height: 0;
	text-decoration: none;
}

.o-logo svg,
.o-logo img {
	display: block;
	width: auto;
	height: var(--o-logo-height);
}

.o-logo:hover {
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.o-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border: 2px solid transparent;
	border-radius: 0;
	background-color: var(--o-orange);
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.0625em; /* 1px at 16px */
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--o-transition), color var(--o-transition), border-color var(--o-transition);
}

.o-btn:hover,
.o-btn:focus-visible {
	background-color: var(--o-orange-dark);
	color: var(--o-white);
}

.o-btn--outline {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.o-btn--outline:hover,
.o-btn--outline:focus-visible {
	background-color: var(--o-orange);
	border-color: var(--o-orange);
	color: var(--o-white);
}

/*
 * Navy - the solid button for a white field, beside an outlined one, where a
 * pair of orange buttons would be the loudest thing on the page.
 */
.o-btn--navy {
	background-color: var(--o-navy);
	color: var(--o-white);
}

.o-btn--navy:hover,
.o-btn--navy:focus-visible {
	background-color: var(--o-orange);
	color: var(--o-white);
}

.o-btn--ghost {
	padding-inline: 0;
	background: none;
	color: inherit;
}

.o-btn--ghost:hover {
	background: none;
	color: var(--o-accent);
}

/*
 * Inverted - a white button on a coloured field. On the orange band the accent
 * is white and its contrast colour is navy, so this reads from the scheme
 * rather than hard-coding either.
 */
.o-btn--invert {
	background-color: var(--o-accent);
	color: var(--o-accent-contrast);
}

.o-btn--invert:hover,
.o-btn--invert:focus-visible {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* The arrow after a button label, matching the text-link treatment. */
.o-btn__chevrons {
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform var(--o-transition);
}

.o-btn:hover .o-btn__chevrons,
.o-btn:focus-visible .o-btn__chevrons {
	transform: translateX(0.25em);
}

/* --------------------------------------------------------------------------
   Text link — the "LEARN MORE ⟶" treatment used throughout the comps
   The arrow is decoration, marked aria-hidden in the markup, and nudge on
   hover to signal direction.
   -------------------------------------------------------------------------- */
.o-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body-lg);
	letter-spacing: 0.025em; /* 0.45px at 18px */
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
}

.o-textlink__chevrons {
	display: inline-block;
	transition: transform var(--o-transition);
}

.o-textlink:hover,
.o-textlink:focus-visible {
	color: var(--o-accent);
}

.o-textlink:hover .o-textlink__chevrons,
.o-textlink:focus-visible .o-textlink__chevrons {
	transform: translateX(0.25em);
}

/* --------------------------------------------------------------------------
   Meta line — "date · time · venue"
   Shared by the events feed and the single event page, which is why it lives
   here rather than in either one's stylesheet. The separators are empty spans
   drawn in CSS, so they never reach the accessibility tree or copied text.
   -------------------------------------------------------------------------- */
.o-events__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body);
	line-height: 1.4;
}

.o-events__dot {
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentcolor;
	opacity: 0.6;
}

/* Once the line wraps the dots strand at line ends, so it stacks instead. */
@media (max-width: 640px) {
	.o-events__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.o-events__dot {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Icon button — the header's hamburger / search / webcam controls
   -------------------------------------------------------------------------- */
.o-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--o-white);
	transition: color var(--o-transition), opacity var(--o-transition);
}

.o-icon-btn:hover,
.o-icon-btn:focus-visible {
	color: var(--o-orange);
}

.o-icon-btn svg {
	display: block;
	width: auto;
	height: 100%;
	max-height: 24px;
}

/* --------------------------------------------------------------------------
   Save heart - the fill
   Every heart is an outline with a solid copy of its inside hidden behind it
   (assets/svg/icon-heart.svg). Saving shows the solid one, so the signal is
   the heart filling in; each control keeps its own colours.
   -------------------------------------------------------------------------- */
.o-heart-fill {
	transition: opacity var(--o-transition);
}

[aria-pressed="true"] > svg .o-heart-fill,
.o-heart-fill.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.o-heart-fill {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Social buttons — lettering in a circle, per the footer design
   -------------------------------------------------------------------------- */
.o-socials {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid currentColor;
	border-radius: var(--o-radius-pill);
	color: var(--o-white);
	text-decoration: none;
	transition: background-color var(--o-transition), color var(--o-transition), border-color var(--o-transition);
}

.o-socials__glyph {
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-small);
	line-height: 1;
	text-transform: uppercase;
}

.o-socials__link:hover,
.o-socials__link:focus-visible {
	background-color: var(--o-orange);
	border-color: var(--o-orange);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Section heading block (eyebrow / title / intro)
   Rendered by Ovation_Section_Controls::render_heading_block().
   -------------------------------------------------------------------------- */
.o-section-heading {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: var(--o-space-xl);
	text-align: center;
}

.o-section-heading__title {
	margin: var(--o-space-sm) 0 0;
	font-size: var(--o-fs-h2);
}

.o-section-heading__intro {
	margin: var(--o-space-md) 0 0;
	color: var(--o-text-soft);
	font-size: var(--o-fs-body-lg);
	line-height: var(--o-lh-body);
}

/* --------------------------------------------------------------------------
   Wave pattern
   The recurring diagonal waves behind sections. One seamless tile
   (assets/svg/pattern-wave.svg, generated by tools/build-wave-pattern.py)
   repeated at --o-pattern-tile, so the waves are the same size everywhere
   whatever shape the section is.

   The element is a positioned, clipped layer; ::before pours a flat colour
   (--o-pattern-ink) through the tile used as a mask, so one file serves every
   colour. A second mask layer, --o-pattern-fade, is intersected with the
   tile: that is how a pattern fades in from an edge. Because the fade is a
   mask rather than the section colour painted back over the lines, it works
   over photographs and overlays as well as flat fields.

   Each widget only decides where the layer sits (its own class), how strong
   it is (opacity on the layer or its ::before) and which fade it uses:

     <div class="o-feature-split__pattern o-pattern o-pattern--corner-right">
   -------------------------------------------------------------------------- */
.o-pattern {
	--o-pattern-ink: var(--o-aqua);
	--o-pattern-fade: linear-gradient(#000, #000);

	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.o-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--o-pattern-ink);
	-webkit-mask-image: url("../svg/pattern-wave.svg"), var(--o-pattern-fade);
	mask-image: url("../svg/pattern-wave.svg"), var(--o-pattern-fade);
	-webkit-mask-size: var(--o-pattern-tile) var(--o-pattern-tile), 100% 100%;
	mask-size: var(--o-pattern-tile) var(--o-pattern-tile), 100% 100%;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Strongest at one edge, gone by 60% of the way across. */
.o-pattern--from-right {
	--o-pattern-fade: linear-gradient(to left, #000 0%, transparent 60%);
}

.o-pattern--from-left {
	--o-pattern-fade: linear-gradient(to right, #000 0%, transparent 60%);
}

/* Strongest in a lower corner, clear across the opposite upper third. */
.o-pattern--corner-right {
	--o-pattern-fade: linear-gradient(135deg, transparent 36%, #000 100%);
}

.o-pattern--corner-left {
	--o-pattern-fade: linear-gradient(225deg, transparent 36%, #000 100%);
}

/* Finer on phones, where 800px waves would read as a few fat bands. */
@media (max-width: 767px) {
	.o-pattern {
		--o-pattern-tile: 600px;
	}
}

/*
 * Without mask support the ::before would be a solid sheet of ink over the
 * whole section, which is far worse than no pattern.
 */
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
	.o-pattern {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Search form
   -------------------------------------------------------------------------- */
.o-search-form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

.o-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.875rem 0 0.875rem;
	border: 0;
	border-bottom: 2px solid var(--o-rule-on-dark);
	background: transparent;
	color: var(--o-white);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-h4);
}

.o-search-form__field::placeholder {
	color: var(--o-mist);
	opacity: 1;
}

.o-search-form__field:focus {
	border-bottom-color: var(--o-orange);
	outline: none;
}

.o-search-form__submit {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Icon box - the card from "Why Ovation?" (165:441 / 165:467)
   A 64px icon tile, an uppercase title and a short paragraph in an outlined
   white card. Shared by the Icon Boxes grid and the single Box element.
   Rendered as <a> with a link and <div> without, so both need the same box.
   -------------------------------------------------------------------------- */
.o-icon-box {
	--o-ibox-bg: var(--o-white);
	--o-ibox-rule: var(--o-rule-cool);

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-space-md); /* 20, per the comp */
	padding: 2.75rem 2.5rem; /* 44 / 40, per the comp */
	border: 1.5px solid var(--o-ibox-rule);
	background-color: var(--o-ibox-bg);
	color: var(--o-text);
	text-decoration: none;
}

/*
 * White cards on the white and pale blue schemes, as drawn. On the dark and
 * orange schemes a white card would hold white text, so it steps down a shade.
 */
.o-scheme-dark .o-icon-box {
	--o-ibox-bg: var(--o-navy-ink);
	--o-ibox-rule: var(--o-rule-on-dark);
}

.o-scheme-orange .o-icon-box {
	--o-ibox-bg: var(--o-orange-alt);
	--o-ibox-rule: var(--o-rule);
}

.o-icon-box__title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-h4); /* 18 -> 22 */
	font-weight: var(--o-fw-medium);
	line-height: 1.273; /* 28 on 22 */
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-icon-box__text {
	margin: 0;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body); /* 16 */
	line-height: 1.625; /* 26 on 16 */
	text-wrap: pretty;
}

.o-scheme-dark .o-icon-box__title,
.o-scheme-orange .o-icon-box__title {
	color: var(--o-text);
}

.o-scheme-dark .o-icon-box__text,
.o-scheme-orange .o-icon-box__text {
	color: var(--o-text-soft);
}

/*
 * The icon tile.
   A designed tile is a finished 64px SVG and is printed at its own size. A
   library or uploaded icon gets the same pale square and a 30px glyph - the
   comp's icons span 30 of the tile's 64 - in the colour picked for it.
 */
.o-icon-box__icon {
	display: block;
	flex: none;
	line-height: 0;
}

.o-icon-box__icon--drawn {
	--o-ibox-tone: var(--o-teal);

	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	background-color: var(--o-ice);
	color: var(--o-ibox-tone);
	font-size: 28px; /* Font icons: sits optically with a 30px SVG. */
}

.o-icon-box__icon--orange { --o-ibox-tone: var(--o-orange); }
.o-icon-box__icon--teal { --o-ibox-tone: var(--o-teal); }
.o-icon-box__icon--red { --o-ibox-tone: var(--o-red); }
.o-icon-box__icon--navy { --o-ibox-tone: var(--o-navy); }

/*
 * Elementor draws a font icon as <i>, or as an inline <svg> when its
 * "Inline Font Icons" setting is on, and an upload as <svg> or <img>.
 */
.o-icon-box__icon--drawn svg,
.o-icon-box__icon--drawn img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.o-icon-box__icon--drawn svg {
	fill: currentColor;
}

/*
 * Linked cards. The comp draws no hover. The border darkens and the card
 * lifts, which says "link" without moving anything.
 */
a.o-icon-box {
	transition: border-color var(--o-transition), box-shadow var(--o-transition);
}

a.o-icon-box:hover,
a.o-icon-box:focus-visible {
	border-color: var(--o-mist);
	box-shadow: var(--o-shadow-card);
	color: var(--o-text);
}

@media (prefers-reduced-motion: reduce) {
	a.o-icon-box {
		transition: none;
	}
}

/* Narrow: 44 / 40 is a lot of a phone's width once the cards stack. */
@media (max-width: 599px) {
	.o-icon-box {
		padding: var(--o-space-lg) var(--o-space-md);
	}
}