/*
Theme Name: Octa Origin
Theme URI: https://octaorigin.com
Description: Standalone custom theme for Octa Origin, built without Elementor dependencies.
Author: Octa Origin
Version: 2.2.1
Text Domain: octa-origin
*/

/*
 * Design tokens.
 *
 * theme.json is the single source of truth for colour, type scale and layout
 * widths; these properties alias its generated custom properties so the editor
 * and the front end cannot drift apart.
 *
 * Every alias carries a literal fallback because this stylesheet is also
 * injected into pages rendered by the legacy theme (see
 * wp-content/mu-plugins/octa-navigation-bridge.php). In that context WordPress
 * emits the legacy theme's presets, not these, so the fallback is what actually
 * applies and the header must still look correct.
 */
:root {
	--octa-ink: var(--wp--preset--color--ink, #161e2d);
	--octa-accent: var(--wp--preset--color--accent, #29a7ff);
	--octa-accent-strong: var(--wp--preset--color--accent-strong, #0878c9);
	/*
	 * Hover/focus must be DARKER than the resting accent. The previous value
	 * (#0b8ce9) was lighter, giving white text only 3.53:1 - below the 4.5:1 AA
	 * threshold for normal text. The resting #0878c9 passes at 4.63:1; this
	 * value is ~6.4:1.
	 */
	--octa-accent-hover: var(--wp--preset--color--accent-hover, #06639f);
	--octa-line: var(--wp--preset--color--line, #354154);
	--octa-header-height: var(--wp--custom--header-height, 72px);
	--octa-utility-height: var(--wp--custom--utility-height, 36px);
	/* Total sticky chrome, used to position the mega panel backdrop. */
	--octa-chrome-height: calc(var(--octa-utility-height) + var(--octa-header-height));
	--octa-admin-bar-height: 0px;
	--octa-content-width: var(--wp--custom--content-width, 1440px);
}

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

/* Honour a reduced-motion preference: smooth scrolling is opt-in, not default
   (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: #fff;
	color: var(--octa-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

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

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 10px 14px;
	clip: auto;
	background: #fff;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--octa-ink);
	border: 0 !important;
	box-shadow: 0 3px 16px rgba(0, 0, 0, .18);
}

/* Hide the legacy Elementor header embedded in migrated Canvas pages. */
.elementor[data-elementor-type="header"] { display: none !important; }

.admin-bar {
	--octa-admin-bar-height: 32px;
}

.admin-bar .site-header { top: var(--octa-admin-bar-height); }

.utility-bar {
	display: block !important;
	width: 100% !important;
	background: #101725;
	border-bottom: 1px solid #2b3648;
}

.utility-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	width: min(calc(100% - 48px), var(--octa-content-width));
	height: var(--octa-utility-height);
	margin-inline: auto;
	padding: 0 !important;
}

.utility-inner a,
.utility-inner > span {
	color: #d6dce5;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

/*
 * Brand tagline. It previously sat at #9da8b8 / weight 400, making it the
 * faintest text in the utility bar even though the links beside it were
 * brighter and bolder. Now it reads as the statement it is: white, bold, with
 * an accent dot, using the same uppercase eyebrow treatment as .mega-eyebrow
 * and .mega-panel-label.
 */
.utility-inner > span {
	position: relative;
	margin-right: auto;
	padding-left: 15px;
	color: #fff;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.utility-inner > span::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: var(--octa-accent);
	border-radius: 50%;
	content: '';
}

.utility-inner a:hover,
.utility-inner a:focus-visible { color: #fff; }

.header-inner {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.5vw, 44px);
	width: min(calc(100% - 48px), var(--octa-content-width));
	min-height: var(--octa-header-height);
	margin-inline: auto;
	padding: 0 !important;
}

.site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 clamp(150px, 13vw, 210px);
}

.custom-logo-link,
.site-logo-fallback { display: inline-flex; align-items: center; text-decoration: none; }
.custom-logo { display: block; width: 210px; max-height: 58px; object-fit: contain; }
.site-logo-fallback { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.primary-navigation { margin-left: auto; }
.mega-menu-list {
	display: flex;
	align-items: center;
	gap: clamp(8px, .8vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mega-menu-item { margin: 0; }
.mega-direct-link,
.mega-trigger {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: var(--octa-header-height);
	padding: 0 6px;
	background: transparent;
	border: 0;
	color: #f4f7fb;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.mega-direct-link { position: relative; }
.mega-direct-link::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--octa-accent);
	content: '';
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .22s ease;
}
.mega-direct-link:hover::after,
.mega-direct-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.mega-trigger svg { width: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform .2s ease; }
.mega-trigger:hover,
.mega-trigger:focus-visible,
.mega-trigger[aria-expanded="true"] { background: #273448; color: #fff; }
.mega-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 3;
	margin: 0;
	/*
	 * The panel spans the full viewport, but its inner grid is capped at the
	 * header's 1440px column. That left the dark intro column stranded, with a
	 * white strip between the screen edge and "EXPLORE".
	 *
	 * Painting the panel background as a two-stop gradient carries the intro
	 * colour out to the left edge while the card area stays white. The stop sits
	 * on the intro column's right edge: half the panel, minus half the inner
	 * width, plus the intro's 29% share (matching grid-template-columns on
	 * .mega-panel-inner).
	 *
	 * A gradient rather than a pseudo-element because .mega-panel-inner sets
	 * overflow-y, which forces overflow-x to auto and would clip anything
	 * bleeding sideways - and could add a horizontal scrollbar.
	 */
	--octa-panel-inner-width: min(100%, var(--octa-content-width));
	--octa-intro-edge: calc(50% - (var(--octa-panel-inner-width) / 2) + (var(--octa-panel-inner-width) * 0.29));
	background-color: #fff;
	background-image: linear-gradient(
		to right,
		#202c3e 0,
		#202c3e var(--octa-intro-edge),
		#fff var(--octa-intro-edge),
		#fff 100%
	);
	border: 0;
	border-top: 1px solid #485568;
	box-shadow: 0 22px 46px rgba(0, 0, 0, .3);
}
.mega-panel[hidden],
.mega-backdrop[hidden] { display: none; }
.mega-panel-inner {
	display: grid;
	grid-template-columns: minmax(260px, 29%) 1fr;
	width: min(100%, var(--octa-content-width));
	max-height: calc(100vh - 130px);
	margin-inline: auto;
	overflow-y: auto;
}
.mega-panel-intro {
	padding: clamp(32px, 4vw, 64px) clamp(28px, 3.5vw, 54px);
	background: #202c3e;
	color: #fff;
}
.mega-eyebrow {
	display: block;
	margin-bottom: 12px;
	color: #7cc8ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mega-panel-intro h2 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 2.5vw, 40px); line-height: 1.1; }
.mega-panel-intro p { margin: 0 0 28px; color: #c7d0dc; font-size: 15px; line-height: 1.65; }
.mega-view-all { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.mega-view-all span { color: var(--octa-accent); font-size: 20px; transition: transform .2s ease; }
.mega-view-all:hover span { transform: translateX(4px); }
.mega-panel-content { padding: clamp(28px, 3vw, 46px) clamp(28px, 4vw, 64px); }
.mega-panel-label { margin: 0 0 18px; color: #5e6978; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mega-link-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.mega-link-card {
	display: block;
	min-height: 132px;
	padding: 18px 22px;
	color: var(--octa-ink);
	border-top: 1px solid #e1e6eb;
	border-left: 3px solid transparent;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}
.mega-link-card:hover,
.mega-link-card:focus-visible { background: #f3f7fb; border-left-color: var(--octa-accent-strong); outline: none; }
.mega-link-title { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 7px; color: #182335; font-size: 15px; font-weight: 700; line-height: 1.35; }
.mega-link-title > span { color: var(--octa-accent-strong); }
.mega-link-description { display: block; color: #5a6573; font-size: 13px; line-height: 1.5; }
/* Derived from the sticky chrome height rather than a hardcoded 108px, so the
   backdrop stays aligned if the header or utility bar height changes, and it
   accounts for the admin bar. */
.mega-backdrop {
	position: fixed;
	inset: calc(var(--octa-chrome-height) + var(--octa-admin-bar-height)) 0 0;
	z-index: 2;
	background: rgba(7, 13, 23, .56);
}

/* Prevent legacy theme and Elementor button styles from repainting navigation. */
.site-header .mega-trigger {
	min-width: 0 !important;
	min-height: var(--octa-header-height) !important;
	padding: 0 7px !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	color: #f4f7fb !important;
	font: 600 14px/1.25 Arial, Helvetica, sans-serif !important;
	text-transform: none !important;
}
.site-header .mega-trigger:hover,
.site-header .mega-trigger:focus-visible,
.site-header .mega-trigger[aria-expanded="true"] { background-color: #273448 !important; }
.site-header .header-cta {
	background-color: var(--octa-accent-strong) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
}
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible { background-color: var(--octa-accent-hover) !important; }

.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.menu-toggle-bar { display: block; width: 24px; height: 2px; margin: 5px auto; background: #fff; transition: transform .2s, opacity .2s; }
/* Child 1 of .menu-toggle is the screen-reader label, so the three bars are
   children 2, 3 and 4. Targeting 1-3 previously blanked the top bar, rotated the
   middle one the wrong way and left the bottom bar untouched. */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: 4px; }
.header-search {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	border: 1px solid transparent;
}
.header-search:hover,
.header-search:focus-visible { border-color: #69758a; }
.header-search svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	background: var(--octa-accent-strong);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.header-cta:hover,
.header-cta:focus-visible { background: var(--octa-accent-hover); }

.site-main { min-height: calc(100vh - var(--octa-header-height)); }
.site-main > .entry-content { width: 100%; }

@media (max-width: 1280px) {
	.header-inner { width: min(calc(100% - 32px), var(--octa-content-width)); }
	.menu-toggle { display: block; }
	.primary-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		max-height: calc(100vh - var(--octa-header-height));
		overflow-y: auto;
		background: var(--octa-ink);
		border-top: 1px solid var(--octa-line);
		box-shadow: 0 14px 24px rgba(0, 0, 0, .2);
	}
	.primary-navigation.is-open { display: block; }
	.mega-menu-list { display: block; width: min(calc(100% - 32px), var(--octa-content-width)); margin-inline: auto; padding-block: 12px 20px; }
	.mega-direct-link,
	.mega-trigger { justify-content: space-between; width: 100%; min-height: 0; padding: 15px 6px; font-size: 16px; white-space: normal; }
	.site-header .mega-trigger { min-height: 0 !important; padding: 15px 6px !important; font-size: 16px !important; }
	.mega-direct-link::after { display: none; }
	.mega-panel { position: static; background: #f7f9fb; border-top: 3px solid var(--octa-accent); box-shadow: none; }
	.mega-panel-inner { display: block; width: 100%; max-height: none; overflow: visible; }
	.mega-panel-intro { padding: 24px; }
	.mega-panel-intro h2 { font-size: 26px; }
	.mega-panel-content { padding: 22px 24px 28px; }
	.mega-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mega-link-card { min-height: 0; }
	.mega-backdrop { display: none !important; }
	.header-actions { margin-left: auto; }
}

@media (max-width: 782px) {
	.admin-bar { --octa-admin-bar-height: 46px; }
}
@media (max-width: 560px) {
	:root { --octa-header-height: 72px; }
	.header-inner { width: calc(100% - 24px); }
	.utility-bar { display: none; }
	/* Utility bar is hidden here, so the sticky chrome is the header alone. */
	:root { --octa-utility-height: 0px; }
	.site-branding { flex-basis: 170px; }
	.custom-logo { max-height: 54px; }
	.header-search { display: none; }
	.header-cta { display: none; }
	.mega-link-grid { grid-template-columns: 1fr; }
	.mega-panel-content { padding: 14px 16px 20px; }
	.mega-link-card { padding: 15px 12px; }
}


/* ==========================================================================
   Content templates
   Added with the template hierarchy (404 / search / archive / single / index).
   No !important here - these rules only apply once octa-origin is the active
   theme, so there is no competing Elementor cascade to fight.
   ========================================================================== */

:root {
	--octa-content-narrow: var(--wp--custom--content-narrow, 820px);
	--octa-gutter: var(--wp--custom--gutter, 24px);
	--octa-muted: var(--wp--preset--color--muted, #5a6573);
	--octa-hairline: var(--wp--preset--color--hairline, #e1e6eb);
	--octa-surface: var(--wp--preset--color--surface, #f3f7fb);
}

.site-main {
	padding-block: clamp(32px, 5vw, 72px);
}

/*
 * Width is constrained at exactly ONE level: the content wrappers.
 *
 * Previously both `.site-main > *` and `.entry-single > *` were constrained.
 * Because article.entry-single is itself a child of .site-main, the gutter was
 * applied twice (820px - 48px, then another 100% - 48px inside that), leaving
 * roughly 724px of prose. It also trapped .alignwide, whose `100%` resolved
 * against the already-narrow parent so it could never reach 1440px.
 */
.site-main > .page-header,
.site-main > .entry-list,
.site-main > .no-results,
.site-main > .error-404,
.site-main > .navigation,
.site-main > .post-navigation,
.site-main > .comments-area,
.entry-single > .entry-header,
.entry-single > .entry-content,
.entry-single > .entry-featured-image,
.entry-single > .entry-tags,
.entry-single > .page-links {
	width: min(calc(100% - (var(--octa-gutter) * 2)), var(--octa-content-narrow));
	margin-inline: auto;
}

/* The article spans the main column; only its children are constrained. */
.site-main > .entry-single {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/*
 * Wide and full blocks break out of the narrow column. The margin calculation
 * centres the element on its parent even when it is wider than that parent,
 * which `margin-inline: auto` cannot do.
 */
.entry-content > .alignwide {
	--octa-break: min(var(--octa-content-width), calc(100vw - (var(--octa-gutter) * 2)));
	width: var(--octa-break);
	max-width: none;
	margin-inline: calc(50% - (var(--octa-break) / 2));
}

.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* Pages migrated from Elementor render full-bleed layouts of their own, so they
   must escape the prose constraint above rather than be squeezed into it. */
.site-main > .entry-builder,
.entry-builder > .entry-content,
.site-main > .entry-content {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Elementor Canvas pages get a landmark wrapper that must stay full-bleed. */
.canvas-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Programmatic skip-link target; no visible ring needed when focused via #primary. */
.canvas-main:focus {
	outline: none;
}

.page-header {
	margin-bottom: clamp(24px, 3vw, 44px);
}

.page-title,
.entry-title {
	margin: 0 0 12px;
	color: var(--octa-ink);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.15;
	letter-spacing: -.015em;
}

.entry-card .entry-title {
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.25;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus-visible {
	color: var(--octa-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.archive-description,
.search-result-count {
	margin: 0;
	color: var(--octa-muted);
	font-size: 15px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 14px;
	color: var(--octa-muted);
	font-size: 13px;
}

.entry-meta a {
	color: var(--octa-accent-strong);
	text-decoration: none;
}

.entry-meta a:hover,
.entry-meta a:focus-visible {
	text-decoration: underline;
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.8em;
	line-height: 1.25;
}

.entry-content a {
	color: var(--octa-accent-strong);
	text-underline-offset: 2px;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--octa-accent);
	color: var(--octa-muted);
}

.entry-content :is(pre, code) {
	font-size: .92em;
}

.entry-content pre {
	overflow-x: auto;
	padding: 16px;
	background: var(--octa-surface);
	border-radius: 4px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--octa-hairline);
	text-align: left;
}

.entry-featured-image {
	margin: 0 0 28px;
}

.entry-featured-image img {
	display: block;
	width: 100%;
	border-radius: 4px;
}

/* Listings ---------------------------------------------------------------- */

.entry-list {
	display: grid;
	gap: clamp(24px, 3vw, 40px);
}

.entry-card {
	display: grid;
	gap: 18px;
	padding-bottom: clamp(24px, 3vw, 36px);
	border-bottom: 1px solid var(--octa-hairline);
}

.entry-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

@media (min-width: 720px) {
	.entry-card:has(.entry-card-media) {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		align-items: start;
	}
}

.entry-card-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.entry-excerpt {
	color: var(--octa-muted);
}

.entry-excerpt p {
	margin: 0 0 12px;
}

.entry-more,
.button-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--octa-accent-strong);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.entry-more:hover,
.entry-more:focus-visible,
.button-link:hover,
.button-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-tags {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--octa-hairline);
	font-size: 13px;
}

/* Pagination and post navigation ------------------------------------------ */

.pagination {
	margin-top: clamp(32px, 4vw, 56px);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 10px;
	color: var(--octa-ink);
	border: 1px solid var(--octa-hairline);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	background: var(--octa-surface);
	border-color: var(--octa-accent-strong);
}

.pagination .page-numbers.current {
	background: var(--octa-ink);
	border-color: var(--octa-ink);
	color: #fff;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

.post-navigation {
	display: grid;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--octa-hairline);
}

@media (min-width: 720px) {
	.post-navigation {
		grid-template-columns: 1fr 1fr;
	}
	.post-navigation .nav-next {
		text-align: right;
	}
}

.post-navigation a {
	color: var(--octa-ink);
	font-weight: 600;
	text-decoration: none;
}

.post-navigation a:hover,
.post-navigation a:focus-visible {
	color: var(--octa-accent-strong);
	text-decoration: underline;
}

.post-navigation .nav-label {
	display: block;
	color: var(--octa-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.page-links {
	margin-top: 24px;
	font-size: 14px;
}

.page-links-title {
	margin-right: 8px;
	font-weight: 700;
}

/* Search form ------------------------------------------------------------- */

.search-form-label {
	display: block;
	margin-bottom: 8px;
	color: var(--octa-ink);
	font-size: 13px;
	font-weight: 700;
}

.search-form-controls {
	display: flex;
	gap: 8px;
	max-width: 520px;
}

.search-field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--octa-line);
	color: var(--octa-ink);
	font-family: inherit;
	font-size: 15px;
}

.search-field:focus-visible {
	outline: 2px solid var(--octa-accent-strong);
	outline-offset: 1px;
}

.search-submit {
	min-height: 46px;
	padding: 0 20px;
	background: var(--octa-accent-strong);
	border: 0;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
	background: var(--octa-accent-hover);
}

.page-header-search {
	margin-top: 20px;
}

/* Empty states and 404 ---------------------------------------------------- */

.no-results,
.error-404 {
	padding-block: clamp(24px, 4vw, 48px);
}

.no-results-title {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.4vw, 30px);
}

.no-results p,
.error-message {
	color: var(--octa-muted);
}

.error-code {
	margin: 0;
	color: var(--octa-accent);
	font-size: clamp(64px, 12vw, 132px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
}

.error-404-search {
	margin-block: 28px;
}

.error-404-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-404-menu a {
	color: var(--octa-accent-strong);
	font-weight: 600;
	text-decoration: none;
}

.error-404-menu a:hover,
.error-404-menu a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Comments ---------------------------------------------------------------- */

.comments-area {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: 28px;
	border-top: 1px solid var(--octa-hairline);
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list ol.children {
	list-style: none;
	padding-left: clamp(16px, 3vw, 36px);
}

.comment-body {
	padding-block: 18px;
	border-bottom: 1px solid var(--octa-hairline);
}


/* ==========================================================================
   Site footer
   Native replacement for Elementor Theme Builder footer template #103.
   ========================================================================== */

.site-footer {
	background: var(--octa-ink);
	color: #c7d0dc;
}

.footer-main {
	padding-block: clamp(36px, 5vw, 64px);
}

.footer-inner {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	width: min(calc(100% - 48px), var(--octa-content-width));
	margin-inline: auto;
}

@media (min-width: 900px) {
	.footer-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
		align-items: start;
	}
	.footer-inner:has(.footer-nav) {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

.footer-brand .custom-logo,
.footer-brand img {
	display: block;
	width: 200px;
	max-height: 56px;
	object-fit: contain;
}

.footer-logo-link {
	text-decoration: none;
}

.footer-logo-text {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.footer-heading {
	margin: 0 0 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.footer-heading + .footer-heading,
.footer-address + .footer-heading {
	margin-top: 22px;
}

.footer-address {
	margin: 0;
	color: #c7d0dc;
	font-size: 14px;
	font-style: normal;
	line-height: 1.65;
	max-width: 34ch;
}

.footer-email {
	margin: 0;
	font-size: 14px;
}

.footer-email a,
.footer-menu a,
.footer-legal-menu a {
	color: #c7d0dc;
	text-decoration: none;
	text-underline-offset: 3px;
}

.footer-email a:hover,
.footer-email a:focus-visible,
.footer-menu a:hover,
.footer-menu a:focus-visible,
.footer-legal-menu a:hover,
.footer-legal-menu a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.footer-menu,
.footer-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu {
	display: grid;
	gap: 10px;
	font-size: 14px;
}

.footer-menu .sub-menu {
	display: grid;
	gap: 8px;
	margin-top: 8px;
	padding-left: 14px;
	border-left: 1px solid #354154;
	font-size: 13px;
}

.footer-subscribe-title {
	font-size: clamp(17px, 1.6vw, 20px);
}

.footer-subscribe-copy {
	margin: 0 0 18px;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.65;
}

.footer-subscribe .button-link {
	color: #7cc8ff;
}

.footer-subscribe .button-link:hover,
.footer-subscribe .button-link:focus-visible {
	color: #fff;
}

.footer-bottom {
	background: #101725;
	border-top: 1px solid #2b3648;
}

.footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
	width: min(calc(100% - 48px), var(--octa-content-width));
	min-height: 56px;
	margin-inline: auto;
	padding-block: 12px;
}

.footer-copyright {
	margin: 0;
	color: #9da8b8;
	font-size: 13px;
}

.footer-legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 560px) {
	.footer-inner,
	.footer-bottom-inner {
		width: calc(100% - 24px);
	}
	.footer-bottom-inner {
		justify-content: flex-start;
	}
}


/* ==========================================================================
   Reduced motion
   Suppress the decorative transitions for users who ask for less motion.
   Declared last so it wins on specificity ties without needing !important.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mega-direct-link::after,
	.mega-trigger svg,
	.mega-view-all span,
	.mega-link-card,
	.menu-toggle-bar,
	.entry-more,
	.button-link {
		transition: none;
	}
}

/* ==========================================================================
   Focus visibility
   Every interactive control needs a visible focus ring; the mega panel cards
   previously relied on a background change alone.
   ========================================================================== */

.mega-trigger:focus-visible,
.mega-direct-link:focus-visible,
.mega-link-card:focus-visible,
.mega-view-all:focus-visible,
.menu-toggle:focus-visible,
.header-search:focus-visible,
.header-cta:focus-visible {
	outline: 2px solid var(--octa-accent);
	outline-offset: -2px;
}

.mega-link-card:focus-visible {
	outline-offset: -3px;
}


/* ==========================================================================
   Header palette: match the homepage
   The header was navy (#161e2d) with a blue accent (#0878c9). The homepage uses
   the deep-green / lime palette, so these rules remap the header and mega menu
   onto it. Declared last so they win without needing new specificity, except
   where the original rules used !important and must be matched.
   ========================================================================== */

.site-header {
	--oh-ink: #102725;
	--oh-green: #144f48;
	--oh-lime: #d9f77e;
	--oh-cream: #f5f3ea;
	--oh-mint: #b8ead5;
	--oh-line: #d8ded7;
	--oh-utility: #144f48;
	--oh-hover: #1c463f;
	--oh-panel-bg: #fafaf7;

	background: var(--oh-ink);
}

/* Utility bar ------------------------------------------------------------- */

.site-header .utility-bar {
	background: var(--oh-utility);
	border-bottom: 1px solid #24443e;
}

.site-header .utility-inner a { color: #cfe0da; }

.site-header .utility-inner a:hover,
.site-header .utility-inner a:focus-visible { color: #fff; }

/* Brand tagline dot picks up the homepage lime. */
.site-header .utility-inner > span::before { background: var(--oh-lime); }

/* Top-level items --------------------------------------------------------- */

.site-header .mega-direct-link,
.site-header .mega-trigger { color: #eef5f1; }

.site-header .mega-direct-link::after { background: var(--oh-lime); }

.site-header .mega-trigger:hover,
.site-header .mega-trigger:focus-visible,
.site-header .mega-trigger[aria-expanded="true"] {
	background: var(--oh-hover);
	background-color: var(--oh-hover) !important;
	color: #fff !important;
}

/* Panel ------------------------------------------------------------------- */

.site-header .mega-panel {
	background-color: var(--oh-panel-bg);
	background-image: linear-gradient(
		to right,
		var(--oh-green) 0,
		var(--oh-green) var(--octa-intro-edge),
		var(--oh-panel-bg) var(--octa-intro-edge),
		var(--oh-panel-bg) 100%
	);
	border-top: 1px solid #2a5d55;
}

.site-header .mega-panel-intro { background: var(--oh-green); }

.site-header .mega-eyebrow { color: var(--oh-mint); }

.site-header .mega-panel-intro p { color: #b9cec9; }

.site-header .mega-view-all span { color: var(--oh-lime); }

.site-header .mega-panel-label { color: #67736f; }

/* Cards ------------------------------------------------------------------- */

.site-header .mega-link-card { border-top: 1px solid var(--oh-line); }

.site-header .mega-link-card:hover,
.site-header .mega-link-card:focus-visible {
	background: var(--oh-cream);
	border-left-color: var(--oh-green);
}

.site-header .mega-link-title { color: var(--oh-ink); }
.site-header .mega-link-title > span { color: #347c70; }
.site-header .mega-link-description { color: #64736f; }

/* Actions ----------------------------------------------------------------- */

/*
 * CTA mirrors the homepage's .button-light: lime background with dark ink text.
 * That reads as the same button family and gives very high contrast, unlike the
 * previous white-on-blue which failed AA on hover.
 */
.site-header .header-cta,
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
	background: var(--oh-lime) !important;
	background-color: var(--oh-lime) !important;
	color: var(--oh-ink) !important;
}

.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
	background: #fff !important;
	background-color: #fff !important;
}

.site-header .header-search { color: #eef5f1; }

.site-header .header-search:hover,
.site-header .header-search:focus-visible { border-color: #4d8c82; }

/* Focus rings ------------------------------------------------------------- */

.site-header .mega-trigger:focus-visible,
.site-header .mega-direct-link:focus-visible,
.site-header .mega-link-card:focus-visible,
.site-header .mega-view-all:focus-visible,
.site-header .menu-toggle:focus-visible,
.site-header .header-search:focus-visible,
.site-header .header-cta:focus-visible {
	outline-color: var(--oh-lime);
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 1280px) {
	.site-header .primary-navigation {
		background: var(--oh-ink);
		border-top: 1px solid #24443e;
	}

	.site-header .mega-panel {
		background: var(--oh-cream);
		background-image: none;
		border-top: 3px solid var(--oh-lime);
	}
}


/* ==========================================================================
   Footer palette: match the homepage
   Mirrors the header treatment - deep green body with a green band, so the top
   and bottom of the page bookend each other.
   ========================================================================== */

.site-footer {
	--oh-ink: #102725;
	--oh-green: #144f48;
	--oh-lime: #d9f77e;
	--oh-mint: #b8ead5;

	background: var(--oh-ink);
	color: #b9cec9;
}

.site-footer .footer-heading,
.site-footer .footer-logo-text { color: #fff; }

.site-footer .footer-address { color: #b9cec9; }

.site-footer .footer-email a,
.site-footer .footer-menu a,
.site-footer .footer-legal-menu a { color: #b9cec9; }

.site-footer .footer-email a:hover,
.site-footer .footer-email a:focus-visible,
.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible,
.site-footer .footer-legal-menu a:hover,
.site-footer .footer-legal-menu a:focus-visible { color: #fff; }

.site-footer .footer-menu .sub-menu { border-left: 1px solid #2a5d55; }

.site-footer .footer-subscribe .button-link { color: var(--oh-lime); }

.site-footer .footer-subscribe .button-link:hover,
.site-footer .footer-subscribe .button-link:focus-visible { color: #fff; }

.site-footer .footer-bottom {
	background: var(--oh-green);
	border-top: 1px solid #24443e;
}

.site-footer .footer-copyright { color: #cfe0da; }


/* ==========================================================================
   Wordmark
   Replaces the blue PNG logo with a CSS mark, so branding tracks the palette
   instead of fighting it. Mirrors the homepage design's .brand treatment.
   ========================================================================== */

/*
 * Layout only. Size, colour, shape and font come from the Logo section in the
 * Customizer, which outputs lower-specificity `.brand-mark` / `.brand-text`
 * rules - so anything set here would silently override the user's choices.
 * Keep this block free of configurable properties.
 */
.site-header .site-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.site-header .brand-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.site-header .brand-text {
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.1;
	white-space: nowrap;
}

.site-header .brand-text b { font-weight: 700; }

.site-header .site-brand:hover .brand-mark,
.site-header .site-brand:focus-visible .brand-mark { background: #fff; }

.site-header .site-brand:focus-visible {
	outline: 2px solid var(--oh-lime);
	outline-offset: 4px;
}

@media (max-width: 560px) {
	.site-header .brand-text { font-size: 17px; }
	.site-header .brand-mark { width: 30px; height: 30px; font-size: 16px; }
}


/* Wordmark base, shared by header and footer. Colour and size come from the
   Logo section in the Customizer. */
.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.brand-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.brand-text {
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.1;
	white-space: nowrap;
}

.brand-text b { font-weight: 700; }

.site-footer .site-brand,
.site-footer .brand-text { color: #fff; }

.site-brand:hover .brand-mark,
.site-brand:focus-visible .brand-mark { background: #fff; }

.site-brand:focus-visible {
	outline: 2px solid var(--oh-lime, #d9f77e);
	outline-offset: 4px;
}