/* ==========================================================================
   RODE — global tokens, base and shared components.
   Loaded on the front end and inside the block editor.
   Figma reference frame: 1680px wide, 1440px wrap, 1408px content.
   ========================================================================== */

:root {
	/* ---- Brand palette (exact Figma values) ---- */
	--rode-red:          #d51b31;
	--rode-red-soft:     rgba(213, 27, 49, 0.16);
	--rode-green:        #7bc24e;
	--rode-green-soft:   rgba(123, 194, 78, 0.4);
	--rode-sand-soft:    rgba(204, 159, 83, 0.16);
	--rode-yellow:       #fab600;
	--rode-black:        #000000;
	--rode-white:        #ffffff;
	--rode-placeholder:  #c6c6c6;

	/* ---- Layout ---- */
	--rode-wrap:    1440px; /* Figma "Wrap" frame */
	--rode-gutter:  16px;   /* inner padding of the wrap */
	--rode-content: 1408px; /* wrap minus gutters */

	/* Left inset that lines a split section's text column up with the wrap. */
	--rode-inset: max(var(--rode-gutter), calc((100% - var(--rode-content)) / 2));

	/* ---- Fluid type: design size at 1680px, floor at 375px ---- */
	--rode-fs-display: clamp(40px, calc(6.743vw + 14.71px), 128px); /* 128/136 */
	--rode-fs-h2:      clamp(30px, calc(1.992vw + 22.53px), 56px);  /*  56/64  */
	--rode-fs-h2-sm:   clamp(24px, calc(1.226vw + 19.40px), 40px);  /*  40/48  */
	--rode-fs-h3:      clamp(22px, calc(0.766vw + 19.13px), 32px);  /*  32/40  */
	--rode-fs-h4:      clamp(19px, calc(0.383vw + 17.56px), 24px);  /*  24/32  */
	--rode-fs-lead:    clamp(18px, calc(0.460vw + 16.28px), 24px);  /*  24/32  */
	--rode-fs-body:    clamp(17px, calc(0.230vw + 16.14px), 20px);  /*  20/28  */
	--rode-fs-body-sm: clamp(16px, calc(0.153vw + 15.43px), 18px);  /*  18/26  */
	--rode-fs-label:   16px;                                        /*  16/24  */
	--rode-fs-legal:   14px;                                        /*  14/22  */

	/* Line heights as ratios so they track the fluid sizes. */
	--rode-lh-display: 1.0625;
	--rode-lh-h2:      1.1429;
	--rode-lh-h2-sm:   1.2;
	--rode-lh-h3:      1.25;
	--rode-lh-h4:      1.3333;
	--rode-lh-lead:    1.3333;
	--rode-lh-body:    1.4;
	--rode-lh-body-sm: 1.4444;
	--rode-lh-label:   1.5;
	--rode-lh-legal:   1.5714;

	/* ---- Weights ---- */
	--rode-fw-regular:   400;
	--rode-fw-bold:      700;
	--rode-fw-extrabold: 800;

	/* ---- Spacing ---- */
	--rode-section-y:  clamp(48px, 4.762vw, 80px); /* py-80 */
	--rode-title-gap:  clamp(24px, 2.381vw, 40px); /* pb-40 under titles */
	--rode-gap-32:     clamp(20px, 1.905vw, 32px);
	--rode-gap-24:     clamp(16px, 1.429vw, 24px);
	--rode-gap-16:     16px;
	--rode-gap-12:     12px;
	--rode-gap-8:      8px;

	/* ---- Other ---- */
	--rode-radius:      12px;
	--rode-header-h:    92px;
	--rode-transition:  180ms ease;
	--rode-focus:       3px solid var(--rode-red);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets clear the sticky header. */
	scroll-padding-top: calc(var(--rode-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--rode-white);
	color: var(--rode-black);
	font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--rode-fs-body);
	font-weight: var(--rode-fw-regular);
	line-height: var(--rode-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-underline-offset: 0.18em;
}

a:hover {
	opacity: 0.8;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* Visible, consistent focus ring for keyboard users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--rode-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

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

.rode-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 16px 24px;
	background: var(--rode-red);
	color: var(--rode-white);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
}

.rode-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.rode-wrap {
	width: 100%;
	max-width: var(--rode-wrap);
	margin-inline: auto;
	padding-inline: var(--rode-gutter);
}

/* Full-bleed section with vertical rhythm. */
.rode-section {
	position: relative;
	padding-block: var(--rode-section-y);
}

/* Centred narrow column used by most section headings (960px in Figma). */
.rode-measure {
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}

/* Section background variants. */
.rode-section--green  { background: var(--rode-green); }
.rode-section--green-soft { background: var(--rode-green-soft); }
.rode-section--sand   { background: var(--rode-sand-soft); }
.rode-section--red    { background: var(--rode-red); color: var(--rode-white); }
.rode-section--white  { background: var(--rode-white); }

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.rode-display {
	font-size: var(--rode-fs-display);
	line-height: var(--rode-lh-display);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.rode-h2 {
	font-size: var(--rode-fs-h2);
	line-height: var(--rode-lh-h2);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.rode-h2--sm {
	font-size: var(--rode-fs-h2-sm);
	line-height: var(--rode-lh-h2-sm);
}

.rode-h3 {
	font-size: var(--rode-fs-h3);
	line-height: var(--rode-lh-h3);
	font-weight: var(--rode-fw-bold);
}

.rode-h4 {
	font-size: var(--rode-fs-h4);
	line-height: var(--rode-lh-h4);
	font-weight: var(--rode-fw-bold);
}

.rode-eyebrow {
	font-size: var(--rode-fs-h4);
	line-height: var(--rode-lh-h4);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
}

.rode-lead {
	font-size: var(--rode-fs-lead);
	line-height: var(--rode-lh-lead);
}

.rode-body {
	font-size: var(--rode-fs-body);
	line-height: var(--rode-lh-body);
}

.rode-body-sm {
	font-size: var(--rode-fs-body-sm);
	line-height: var(--rode-lh-body-sm);
}

.rode-legal {
	font-size: var(--rode-fs-legal);
	line-height: var(--rode-lh-legal);
}

.rode-tagline {
	font-size: var(--rode-fs-body);
	line-height: var(--rode-lh-body);
	font-weight: var(--rode-fw-bold);
	font-style: italic;
}

/* Rich-text bodies: paragraph spacing that matches the Figma blocks. */
.rode-prose > p + p {
	margin-top: 1.4em;
}

.rode-prose strong,
.rode-prose b {
	font-weight: var(--rode-fw-bold);
}

.rode-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.rode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 34px 48px;
	border: 0;
	border-radius: 0;
	font-size: var(--rode-fs-label);
	line-height: var(--rode-lh-label);
	font-weight: var(--rode-fw-extrabold);
	letter-spacing: 0.32px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--rode-transition), color var(--rode-transition), transform var(--rode-transition);
}

.rode-btn:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.rode-btn--red {
	background: var(--rode-red);
	color: var(--rode-white);
}

.rode-btn--red:hover {
	background: #b8152a;
}

.rode-btn--white {
	background: var(--rode-white);
	color: var(--rode-black);
}

.rode-btn--white:hover {
	background: #f0f0f0;
}

.rode-btn[disabled],
.rode-btn[aria-disabled='true'] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

@media (max-width: 600px) {
	.rode-btn {
		padding: 24px 28px;
		width: 100%;
	}
}

/* ==========================================================================
   Check list (shared by several sections)
   ========================================================================== */

.rode-checks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rode-gap-24);
	list-style: none;
}

.rode-checks__item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--rode-fs-body);
	line-height: var(--rode-lh-body);
	font-weight: var(--rode-fw-bold);
}

.rode-checks__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Split section (image one side, content the other)
   ========================================================================== */

.rode-split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 800px;
}

.rode-split__media {
	position: absolute;
	inset-block: 0;
	width: 50%;
	overflow: hidden;
	background: var(--rode-placeholder);
}

.rode-split--media-right .rode-split__media { right: 0; }
.rode-split--media-left  .rode-split__media { left: 0; }

.rode-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rode-split__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rode-gap-24);
	max-width: 664px;
	padding-block: var(--rode-section-y);
}

.rode-split--media-right .rode-split__content {
	grid-column: 1;
	padding-left: var(--rode-inset);
	padding-right: var(--rode-gutter);
}

.rode-split--media-left .rode-split__content {
	grid-column: 2;
	padding-right: var(--rode-inset);
	padding-left: var(--rode-gutter);
	margin-left: auto;
}

@media (max-width: 900px) {
	.rode-split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.rode-split__media {
		position: relative;
		width: 100%;
		height: clamp(240px, 55vw, 420px);
	}

	.rode-split--media-right .rode-split__content,
	.rode-split--media-left .rode-split__content {
		grid-column: 1;
		max-width: none;
		margin-left: 0;
		padding-inline: var(--rode-gutter);
	}

	/* Image first on small screens regardless of desktop side. */
	.rode-split--media-right .rode-split__media { order: -1; }
}

/* ==========================================================================
   Site header
   ========================================================================== */

.rode-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.rode-header__inner {
	display: flex;
	align-items: stretch;
	gap: 40px;
	min-height: var(--rode-header-h);
}

.rode-header__brand {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: 12px 0 24px 48px;
}

.rode-logo {
	display: block;
	line-height: 0;
}

.rode-logo:hover {
	opacity: 1;
}

.rode-logo__img {
	width: 154px;
	height: 56px;
	object-fit: contain;
}

/* Primary navigation (empty in the Figma design, wired for future use). */
.rode-nav {
	display: flex;
	align-items: center;
}

.rode-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
}

.rode-nav__list a {
	font-size: var(--rode-fs-label);
	line-height: var(--rode-lh-label);
	font-weight: var(--rode-fw-extrabold);
	letter-spacing: 0.32px;
	text-transform: uppercase;
	text-decoration: none;
}

.rode-nav__list .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Header CTA — full-height red block, flush to the right edge. */
.rode-header__cta {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--rode-red);
	color: var(--rode-white);
	font-size: var(--rode-fs-label);
	line-height: var(--rode-lh-label);
	font-weight: var(--rode-fw-extrabold);
	letter-spacing: 0.32px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--rode-transition);
}

.rode-header__cta:hover {
	background: #b8152a;
	opacity: 1;
}

/* Hamburger — only rendered when a primary menu is assigned. */
.rode-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	background: none;
	border: 0;
	cursor: pointer;
}

.rode-header__toggle-bars,
.rode-header__toggle-bars::before,
.rode-header__toggle-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--rode-black);
	transition: transform var(--rode-transition), opacity var(--rode-transition);
}

.rode-header__toggle-bars::before,
.rode-header__toggle-bars::after {
	content: '';
	position: relative;
}

.rode-header__toggle-bars::before { top: -8px; }
.rode-header__toggle-bars::after  { top: 6px; }

.rode-header__toggle[aria-expanded='true'] .rode-header__toggle-bars {
	background: transparent;
}

.rode-header__toggle[aria-expanded='true'] .rode-header__toggle-bars::before {
	transform: translateY(8px) rotate(45deg);
}

.rode-header__toggle[aria-expanded='true'] .rode-header__toggle-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1100px) {
	.rode-header__brand { padding-left: var(--rode-gutter); }

	.rode-header__cta {
		padding: 20px;
		font-size: 14px;
	}
}

@media (max-width: 900px) {
	.rode-header__inner { gap: 8px; }

	.rode-header__toggle { display: flex; }

	.rode-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--rode-white);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}

	.rode-nav.is-open { display: block; }

	.rode-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--rode-gutter) 16px;
	}

	.rode-nav__list a {
		display: block;
		padding: 14px 0;
	}
}

@media (max-width: 600px) {
	.rode-logo__img { width: 112px; height: 40px; }

	.rode-header__cta {
		padding: 12px 14px;
		font-size: 12px;
		letter-spacing: 0.24px;
	}
}

/* ==========================================================================
   Site footer
   ========================================================================== */

.rode-footer {
	background: var(--rode-white);
	padding-block: var(--rode-section-y) 40px;
}

.rode-footer__wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	max-width: var(--rode-wrap);
	margin-inline: auto;
	padding-inline: var(--rode-gutter);
}

.rode-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rode-gap-32);
}

.rode-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--rode-gap-8);
	min-width: 0;
}

.rode-footer__col--logo {
	align-items: flex-end;
	justify-content: flex-start;
}

.rode-footer__title {
	font-size: var(--rode-fs-body);
	line-height: var(--rode-lh-body);
	font-weight: var(--rode-fw-extrabold);
	text-transform: uppercase;
}

.rode-footer__line {
	font-size: var(--rode-fs-body-sm);
	line-height: var(--rode-lh-body-sm);
}

.rode-footer__legal {
	padding-top: 40px;
	border-top: 1px solid var(--rode-black);
}

.rode-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rode-gap-24);
	flex-wrap: wrap;
}

.rode-footer__links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--rode-gap-24);
	list-style: none;
	font-size: var(--rode-fs-legal);
	line-height: var(--rode-lh-legal);
}

.rode-footer__links a {
	text-decoration: none;
}

.rode-footer__links a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.rode-footer__cols { grid-template-columns: 1fr 1fr; }

	.rode-footer__col--logo {
		grid-column: 1 / -1;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.rode-footer__cols { grid-template-columns: 1fr; }

	.rode-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.rode-footer__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   Interior pages / archives
   ========================================================================== */

.rode-page__header {
	padding-block: var(--rode-section-y) var(--rode-title-gap);
}

.rode-page__body {
	padding-bottom: var(--rode-section-y);
}

.rode-page__body .rode-prose {
	max-width: 800px;
}

.rode-page__body .rode-prose :is(h2, h3, h4) {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.rode-page__body .rode-prose h2 {
	font-size: var(--rode-fs-h3);
	line-height: var(--rode-lh-h3);
	font-weight: var(--rode-fw-extrabold);
}

.rode-page__body .rode-prose h3 {
	font-size: var(--rode-fs-h4);
	line-height: var(--rode-lh-h4);
	font-weight: var(--rode-fw-bold);
}

.rode-page__body .rode-prose :is(ul, ol) {
	margin: 1.2em 0;
	padding-left: 1.4em;
}

.rode-page__body .rode-prose li + li {
	margin-top: 0.4em;
}

.rode-page--404 {
	padding-block: clamp(64px, 10vw, 160px);
	text-align: center;
}

.rode-page--404 > .rode-wrap > * + * {
	margin-top: var(--rode-gap-24);
}

.rode-list__item + .rode-list__item {
	margin-top: var(--rode-gap-32);
	padding-top: var(--rode-gap-32);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}