/* ==========================================================================
   Arenex — section library
   Structure only. Every colour, size and space is a Customizer token, so a site
   changes its whole look from wp-admin without this file being edited. A hardcoded
   hex or px here is a bug: it silently overrides the Customizer and makes the
   control look broken.

   Base styles only. Breakpoint overrides live in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared

   Attribute selectors, not a list of section names, and deliberately so: a
   section built in a CHILD theme picks all of this up for free. Naming each
   section here would mean the shared library had to know about every site's
   private sections, which is exactly backwards.
   -------------------------------------------------------------------------- */

[class*="arnx-"] > * { min-width: 0; }   /* grid children must be allowed to shrink */

/* Container. Any section's __inner gets the page's measure and gutter. */
[class*="arnx-"] [class$="__inner"] {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	width: 100%;
}

/* Background variants — the rhythm control (WEBSITE-BUILD-RULES §5, step 5). */
[class*="--bg-raised"] { background: var(--bg-alt); }
[class*="--bg-accent"] { background: var(--primary-color); color: var(--bg-color); }

/* Width variants */
[class*="--w-full"] { width: 100%; max-width: none; }
[class*="--w-wide"] > [class$="__inner"] { max-width: min(1600px, 100%); }

/* Vertical rhythm. The heroes opt out — they size themselves.
 *
 * section[class*=...], NOT [class*=...] on its own. Every partial renders a
 * <section> root, so the element selector is what limits this to wrappers. Without
 * it the attribute matches EVERY descendant carrying an arnx- class — the list,
 * the item, the value — and each one takes a full section's padding. That shipped
 * once: 95 of 102 elements on the homepage got 56px top and bottom, and the page
 * came out 11,000px tall instead of 4,000. */
section[class*="arnx-"]:not([class*="arnx-hero"]):not([class*="arnx-phero"]) { padding-block: var(--section-padding); }

/* Every image in a section fills its frame; the focal point is per-instance and
   arrives as --arnx-focus on the section element. */
[class*="arnx-"] picture { display: block; height: 100%; }
[class*="arnx-"] picture img,
[class*="__media"] img,
[class*="__frame"] img,
[class*="__bg"] img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--arnx-focus, 50% 50%);
	display: block;
}

/* Eyebrows */
[class$="__eyebrow"] {
	font-size: var(--h6-size);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-color);
	margin: 0 0 var(--gap-sm);
}

/* Buttons */
.arnx-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--gap-sm);
	/* 44px minimum tap target, and the padding keeps it there as type scales */
	min-height: 44px;
	padding: 14px 26px;
	border-radius: var(--radius);
	font-family: var(--font-heading);
	font-size: var(--h6-size);
	font-weight: var(--heading-weight, 700);
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.arnx-btn--primary { background: var(--primary-color); color: var(--bg-color); }
.arnx-btn--primary:hover,
.arnx-btn--primary:focus-visible { background: var(--primary-light); }
.arnx-btn--secondary { background: transparent; color: var(--text-color); border-color: var(--border-color); }
.arnx-btn--secondary:hover,
.arnx-btn--secondary:focus-visible { border-color: var(--primary-color); color: var(--primary-light); }

/* --------------------------------------------------------------------------
   hero-split
   -------------------------------------------------------------------------- */

.arnx-hero {
	display: grid;
	grid-template-columns: 1.14fr .86fr;
	align-items: stretch;
	min-height: clamp(470px, 68dvh, 640px);
	max-width: var(--container-max-width);
	margin-inline: auto;
	position: relative;
	isolation: isolate;
}
.arnx-hero__text {
	display: flex; flex-direction: column; justify-content: center;
	gap: var(--gap-md);
	padding: var(--section-padding) var(--gap-lg) var(--section-padding) var(--container-padding);
}
.arnx-hero__title { font-size: var(--hero-title-size); margin: 0; }
.arnx-hero__title-accent { display: block; color: var(--primary-color); }
.arnx-hero__body { color: var(--muted-color); }
.arnx-hero__body > :first-child { margin-top: 0; }
.arnx-hero__body > :last-child  { margin-bottom: 0; }
.arnx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.arnx-hero__media { position: relative; overflow: hidden; }

/* Media left instead of right — the control the Elementor library never had. */
.arnx-hero--media-left { grid-template-columns: .86fr 1.14fr; }
.arnx-hero--media-left .arnx-hero__media { order: -1; }
.arnx-hero--media-left .arnx-hero__text  { padding-inline: var(--gap-lg) var(--container-padding); }

/* Photo behind the copy. */
.arnx-hero--media-background { grid-template-columns: 1fr; max-width: none; }
.arnx-hero--media-background .arnx-hero__media { position: absolute; inset: 0; z-index: -2; }
.arnx-hero--media-background .arnx-hero__text {
	max-width: var(--container-max-width);
	margin-inline: auto; width: 100%;
	padding-inline: var(--container-padding);
}
.arnx-hero--media-background::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
}
/* Two stacked scrims rather than one diagonal: the horizontal buys contrast for the
   copy, the vertical anchors the baseline, and because they multiply instead of
   adding, the far side clears far lighter than a single gradient would allow. */
.arnx-hero--scrim-light::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .55) 30%, rgb(0 0 0 / .10) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .10) 50%, transparent 80%);
}
.arnx-hero--scrim-medium::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .78) 28%, rgb(0 0 0 / .24) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .70) 0%, rgb(0 0 0 / .18) 45%, transparent 75%);
}
.arnx-hero--scrim-heavy::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, var(--bg-color) 26%, rgb(0 0 0 / .56) 62%, rgb(0 0 0 / .30) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .80) 0%, rgb(0 0 0 / .28) 45%, transparent 75%);
}

/* Media runs off the right edge of the screen.
   Rails declared symmetrically so they resolve to the container's own side
   margins and the copy stays aligned with every section below; the media then
   spans its column PLUS the right rail. Not 100vw — that counts the scrollbar
   and overflows. Every track needs a zero minimum, or just above the container
   width the two rail minimums do not fit and the page gains a scrollbar. */
.arnx-hero--w-bleed-right {
	max-width: none;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, calc(var(--container-max-width) * .57))
		minmax(0, calc(var(--container-max-width) * .43))
		minmax(0, 1fr);
}
.arnx-hero--w-bleed-right .arnx-hero__text  { grid-column: 2; padding-left: var(--container-padding); }
.arnx-hero--w-bleed-right .arnx-hero__media { grid-column: 3 / -1; }

/* --------------------------------------------------------------------------
   hero-page
   -------------------------------------------------------------------------- */

.arnx-phero {
	position: relative; isolation: isolate;
	display: flex; align-items: flex-end;
	min-height: clamp(280px, 34vw, 420px);
	border-bottom: 1px solid var(--border-color);
}
.arnx-phero__bg { position: absolute; inset: 0; z-index: -2; }
.arnx-phero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.arnx-phero--scrim-light::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .50) 30%, rgb(0 0 0 / .06) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .12) 45%, transparent 75%);
}
.arnx-phero--scrim-medium::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .72) 26%, rgb(0 0 0 / .14) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .70) 0%, rgb(0 0 0 / .18) 42%, transparent 72%);
}
.arnx-phero--scrim-heavy::after {
	background:
		linear-gradient(90deg, var(--bg-color) 0%, var(--bg-color) 22%, rgb(0 0 0 / .60) 60%, rgb(0 0 0 / .34) 100%),
		linear-gradient(0deg,  rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .30) 45%, transparent 75%);
}
.arnx-phero__inner {
	padding-block: calc(var(--section-padding) * .9) calc(var(--section-padding) * .7);
	display: flex; flex-direction: column; gap: var(--gap-sm);
}
.arnx-phero__title { font-size: var(--page-title-size); margin: 0; }
.arnx-phero__sub   { color: var(--muted-color); max-width: 54ch; }

.arnx-crumb__list {
	list-style: none; margin: 0 0 var(--gap-sm); padding: 0;
	display: flex; gap: var(--gap-sm); align-items: center;
	font-size: var(--h6-size); letter-spacing: .12em; text-transform: uppercase;
}
.arnx-crumb__list a { color: var(--muted-color); }
.arnx-crumb__item--current { color: var(--text-color); }

/* --------------------------------------------------------------------------
   card-grid
   -------------------------------------------------------------------------- */

.arnx-cards__head  { margin-bottom: var(--gap-lg); max-width: 46rem; }
.arnx-cards__title { margin: 0 0 var(--gap-sm); }
.arnx-cards__intro { color: var(--muted-color); }
.arnx-cards__grid  { display: grid; gap: var(--gap-md); }
.arnx-cards--cols-2 .arnx-cards__grid { grid-template-columns: repeat(2, 1fr); }
.arnx-cards--cols-3 .arnx-cards__grid { grid-template-columns: repeat(3, 1fr); }
.arnx-cards--cols-4 .arnx-cards__grid { grid-template-columns: repeat(4, 1fr); }
.arnx-card--feature { grid-column: span 2; }

.arnx-card {
	position: relative; display: flex; flex-direction: column;
	border-radius: var(--radius); overflow: hidden;
}
.arnx-cards--bordered .arnx-card { border: 1px solid var(--border-color); }
.arnx-cards--filled   .arnx-card { background: var(--bg-alt); }
.arnx-card__media { height: var(--media-card-height); overflow: hidden; }
.arnx-card__text  { padding: var(--gap-md); display: flex; flex-direction: column; gap: 8px; }
.arnx-cards--plain .arnx-card__text { padding-inline: 0; }
.arnx-card__title { font-size: var(--h5-size); margin: 0; }
.arnx-card__body  { color: var(--muted-color); margin: 0; }
.arnx-card__link  { color: inherit; text-decoration: none; }
/* Stretch the title's anchor over the whole card: the card is clickable, but the
   accessible name stays the title instead of swallowing the body copy. */
.arnx-card__link::after { content: ""; position: absolute; inset: 0; }
.arnx-card:hover { border-color: var(--primary-color); }

/* Image-led: photo fills the card, text sits over it. */
.arnx-cards--media .arnx-card { min-height: var(--media-card-height); }
.arnx-cards--media .arnx-card__media { position: absolute; inset: 0; height: auto; }
.arnx-cards--media .arnx-card__text {
	position: relative; margin-top: auto;
	background: linear-gradient(0deg, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .55) 60%, transparent 100%);
	padding-top: calc(var(--gap-lg) * 1.4);
}

/* --------------------------------------------------------------------------
   media-band
   -------------------------------------------------------------------------- */

.arnx-band {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: 1fr 1fr;
	align-items: center;
}
.arnx-band__media { min-height: var(--media-split-height); overflow: hidden; }
.arnx-band__panel {
	padding: var(--section-padding) var(--container-padding);
	display: flex; flex-direction: column; gap: var(--gap-sm);
	align-items: flex-start;
}
.arnx-band__title { margin: 0; }
.arnx-band__body  { color: var(--muted-color); }
.arnx-band__cta   { margin-top: var(--gap-sm); }
.arnx-band--media-left .arnx-band__media { order: -1; }

/* Photo behind the copy — the variant that needed a rewrite last time. */
.arnx-band--media-background { grid-template-columns: 1fr; min-height: var(--media-split-height); align-items: center; }
.arnx-band--media-background .arnx-band__media { position: absolute; inset: 0; z-index: -2; min-height: 0; }
.arnx-band--media-background .arnx-band__panel {
	max-width: var(--container-max-width); margin-inline: auto; width: 100%;
}
.arnx-band--media-background::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.arnx-band--scrim-light::after {
	background: linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .50) 34%, rgb(0 0 0 / .08) 100%);
}
.arnx-band--scrim-medium::after {
	background: linear-gradient(90deg, var(--bg-color) 0%, rgb(0 0 0 / .74) 30%, rgb(0 0 0 / .20) 100%);
}
.arnx-band--scrim-heavy::after {
	background: linear-gradient(90deg, var(--bg-color) 0%, var(--bg-color) 30%, rgb(0 0 0 / .66) 62%, rgb(0 0 0 / .34) 100%);
}
.arnx-band--media-background .arnx-band__panel > * { max-width: 46rem; }

/* --------------------------------------------------------------------------
   faq-accordion
   -------------------------------------------------------------------------- */

.arnx-faq__head  { margin-bottom: var(--gap-lg); }
.arnx-faq__title { margin: 0; }
.arnx-faq__list  { max-width: 52rem; }
.arnx-faq__item  { border-top: 1px solid var(--border-color); }
.arnx-faq__item:last-child { border-bottom: 1px solid var(--border-color); }
.arnx-faq__q {
	display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
	padding-block: var(--gap-md);
	cursor: pointer; list-style: none;
	min-height: 44px;
}
.arnx-faq__q::-webkit-details-marker { display: none; }
.arnx-faq__q-text { font-size: var(--h5-size); margin: 0; }
.arnx-faq__marker { position: relative; flex: none; width: 14px; height: 14px; }
.arnx-faq__marker::before,
.arnx-faq__marker::after {
	content: ""; position: absolute; background: var(--primary-color);
	transition: transform .25s ease;
}
.arnx-faq__marker::before { inset: 6px 0; height: 2px; }
.arnx-faq__marker::after  { inset: 0 6px; width: 2px; }
.arnx-faq__item[open] .arnx-faq__marker::after { transform: scaleY(0); }
.arnx-faq__a { padding-bottom: var(--gap-md); color: var(--muted-color); max-width: 60ch; }
.arnx-faq__a > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   form-block
   -------------------------------------------------------------------------- */

.arnx-form__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-lg); align-items: start; }
.arnx-form__title { margin: 0 0 var(--gap-sm); }
.arnx-form__intro { color: var(--muted-color); }
.arnx-form__details { margin: var(--gap-md) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px var(--gap-md); }
.arnx-form__details dt { color: var(--muted-color); font-size: var(--h6-size); text-transform: uppercase; letter-spacing: .1em; }
.arnx-form__details dd { margin: 0; }
.arnx-form__fallback { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.arnx-form__map { margin-top: var(--gap-md); aspect-ratio: 16 / 10; }
.arnx-form__map iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   cta-banner
   -------------------------------------------------------------------------- */

.arnx-cta { position: relative; isolation: isolate; }
.arnx-cta__bg { position: absolute; inset: 0; z-index: -2; }
.arnx-cta--bg-image::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgb(0 0 0 / .62);
}
.arnx-cta__inner { display: flex; flex-direction: column; gap: var(--gap-sm); }
.arnx-cta--centre .arnx-cta__inner { align-items: center; text-align: center; }
.arnx-cta__title { margin: 0; }
.arnx-cta__actions { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap-sm); }
.arnx-cta--bg-accent .arnx-btn--primary { background: var(--bg-color); color: var(--primary-color); }
.arnx-cta--bg-accent .arnx-btn--secondary { border-color: var(--bg-color); color: var(--bg-color); }