/**
 * Home page section styles.
 *
 * These style core blocks through the `aru-*` classes the patterns carry. They
 * are deliberately shallow — one class, one job — because an editor is going to
 * move these blocks around, and a selector that depends on a particular nesting
 * breaks the moment they do.
 *
 * Every token has a literal fallback, matching tokens.css exactly, so there is
 * no third copy of the palette to drift and the page renders correctly even if
 * the tokens stylesheet is not present.
 *
 * THE CONTRAST RULE, restated because it is the easiest thing to get wrong:
 * --aru-gold on white is 2.85:1 and must never carry text. On a light surface
 * use --aru-gold-deep (7.19:1). Plain gold is for the dark stage only, where it
 * measures 6.58:1. Anywhere below that sets gold on a light background, it is
 * gold-deep.
 */

/* ---- Shared section shell -------------------------------------------- */

/* Every section paints its own background.
   Without this the section is transparent and whatever the theme puts behind it
   shows through — which on Astra's default palette is a cream #f2f1e5 left over
   from the old brand. A section that does not declare its own background is a
   section at the mercy of whichever theme it lands in. */
.aru-section {
	padding-block: clamp(3rem, 8vh, 5.5rem);
	padding-inline: var(--aru-gutter, 16px);
	background-color: var(--aru-surface, #ffffff);
}

.aru-section__heading {
	margin: 0 0 1.25rem;
	max-width: 20ch;
	font-family: var(--aru-font-display, system-ui, sans-serif);
	font-size: var(--aru-step-4, 2.07rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--aru-ink, #0f1724);
}

.aru-section p {
	max-width: var(--aru-measure, 68ch);
	font-size: var(--aru-step-0, 1rem);
	line-height: 1.65;
	color: var(--aru-ink-muted, #4a5058);
}

/* The opening line of a section carries more weight than the body under it —
   it is usually the sentence that decides whether the rest gets read. */
.aru-section .aru-lede {
	font-size: var(--aru-step-1, 1.2rem);
	line-height: 1.5;
	color: var(--aru-ink, #0f1724);
}

.aru-section a {
	color: var(--aru-blue, #004aad);
	text-underline-offset: 0.2em;
}

/* Sections that sit on the dark stage. Applied by the pattern, not inferred,
   so an editor moving a section between light and dark backgrounds only has to
   add or remove one class. */
.aru-on-stage {
	background-color: var(--aru-stage, #051129);
	color: #ffffff;
}

.aru-on-stage .aru-section__heading,
.aru-on-stage .aru-lede,
.aru-on-stage strong {
	color: #ffffff;
}

.aru-on-stage p {
	color: rgb(255 255 255 / 0.94);
}

.aru-on-stage a {
	color: var(--aru-gold, #cc8c31);  /* 6.58:1 on the stage — passes */
}

/* ---- 2. Trust row ----------------------------------------------------- */

.aru-trust {
	padding-block: 1.5rem;
	padding-inline: var(--aru-gutter, 16px);
	background: var(--aru-surface-alt, #f6f8fb);
	border-block: 1px solid var(--aru-border, #dcded6);
}

.aru-trust__item {
	margin: 0;
	font-size: var(--aru-step--1, 0.9rem);
	line-height: 1.4;
	color: var(--aru-ink, #0f1724);
}

/* The gold tick is the one decorative use of the accent on a light surface.
   It is a bullet, not text, so the 4.5:1 rule does not apply to it — but it is
   also not carrying meaning on its own, which is why the text says everything
   and this is purely ornamental. */
.aru-trust__item::before {
	content: "✓";
	margin-right: 0.5rem;
	font-weight: 700;
	color: var(--aru-gold-deep, #814a0d);
}

/* Four columns collapse to two on a phone rather than one — these are short
   phrases, and one per row wastes a screen of height on a four-item list. */
@media (max-width: 781px) {
	.aru-trust__cols.wp-block-columns {
		flex-wrap: wrap !important;
		gap: 0.75rem 1rem;
	}
	.aru-trust__cols > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
	}
}

/* ---- 4. Three things -------------------------------------------------- */

.aru-fix {
	padding: 1.5rem;
	background: var(--aru-surface, #ffffff);
	border: 1px solid var(--aru-border, #dcded6);
	border-radius: var(--aru-radius-lg, 18px);
}

.aru-fix__title {
	margin: 0 0 0.6rem;
	font-size: var(--aru-step-1, 1.2rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--aru-ink, #0f1724);
}

/* ---- 5. Packages ------------------------------------------------------ */

.aru-package {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--aru-surface, #ffffff);
	border: 1px solid var(--aru-border, #dcded6);
	border-radius: var(--aru-radius-lg, 18px);
}

.aru-package__name {
	margin: 0 0 0.25rem;
	font-size: var(--aru-step-1, 1.2rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--aru-ink, #0f1724);
}

/* Gold-deep, not gold: this is text on white. */
.aru-package__price {
	margin: 0 0 0.75rem;
	font-size: var(--aru-step-3, 1.73rem);
	font-weight: 700;
	line-height: 1;
	color: var(--aru-gold-text, #814a0d);
}

.aru-section__more {
	margin-top: 1.5rem;
	font-size: var(--aru-step-0, 1rem);
}

/* ---- 6. How it works -------------------------------------------------- */

/* Counter rather than list-style, so the number can be styled without
   pulling the marker out of the accessibility tree — it stays a real <ol>. */
.aru-steps.wp-block-list {
	max-width: var(--aru-measure, 68ch);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: aru-step;
}

.aru-steps > li {
	position: relative;
	counter-increment: aru-step;
	padding-left: 3rem;
	padding-block: 0.75rem;
	font-size: var(--aru-step-0, 1rem);
	line-height: 1.6;
	color: var(--aru-ink-muted, #4a5058);
}

.aru-steps > li + li {
	border-top: 1px solid var(--aru-border, #dcded6);
}

.aru-steps > li::before {
	content: counter(aru-step);
	position: absolute;
	left: 0;
	top: 0.7rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--aru-blue, #004aad);
	color: #ffffff;
	font-size: 0.85rem;
	font-weight: 700;
}

.aru-steps strong {
	color: var(--aru-ink, #0f1724);
}

/* ---- 7. Guarantee ----------------------------------------------------- */

/* The strongest promise on the page, so it gets the only gold rule. A left
   border is decoration; the sentence does the work. */
.aru-section--guarantee {
	border-left: 4px solid var(--aru-gold, #cc8c31);
	background: var(--aru-surface-alt, #f6f8fb);
}

/* ---- 9. Final CTA ----------------------------------------------------- */

.aru-section--cta {
	text-align: center;
}

.aru-section--cta .aru-section__heading,
.aru-section--cta p {
	margin-inline: auto;
}

.aru-cta__buttons {
	justify-content: center;
	margin-top: 1.75rem;
}

/* White on blue, not blue on stage: #004aad against #051129 is 2.31:1 and
   would fail. Inverted it passes and reads hotter. */
.aru-cta__button .wp-block-button__link {
	min-height: 3rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--aru-radius, 10px);
	background-color: var(--aru-blue, #004aad);
	color: #ffffff;
	font-weight: 600;
}

.aru-cta__button .wp-block-button__link:hover,
.aru-cta__button .wp-block-button__link:focus-visible {
	background-color: var(--aru-blue-600, #003c8c);
}

.aru-cta__phone {
	margin-top: 1rem;
	font-size: var(--aru-step-0, 1rem);
}

/* ---- 11. Footer ------------------------------------------------------- */

.aru-footer {
	padding-block: clamp(2rem, 6vh, 3.5rem);
	padding-inline: var(--aru-gutter, 16px);
	font-size: var(--aru-step--1, 0.9rem);
}

.aru-footer__name {
	margin-bottom: 0.4rem;
	font-size: var(--aru-step-0, 1rem);
}

.aru-footer__address {
	margin-block: 0 0.75rem;
	line-height: 1.6;
}

.aru-footer__legal {
	margin-top: 1.25rem;
	color: rgb(255 255 255 / 0.82);
}

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

.aru-section :is(a, button):focus-visible,
.aru-footer a:focus-visible {
	outline: 3px solid var(--aru-blue-400, #2f6fc4);
	outline-offset: 3px;
}

.aru-on-stage :is(a, button):focus-visible {
	outline-color: var(--aru-gold-light, #f7e9ab);
}

/* ======================================================================
   Packages page
   ====================================================================== */

/* The packages hero is a stage band without the WebGL. The canvas is the home
   page's signature; repeating it here would cost 331 KB to say the same thing
   twice. */
.aru-section--pkg-hero {
	padding-block: clamp(3.5rem, 12vh, 6rem);
}

.aru-section--pkg-hero .aru-section__heading {
	font-size: var(--aru-step-5, 2.49rem);
	max-width: 16ch;
}

/* ---- A single package ------------------------------------------------ */

.aru-pkg {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-block-end: 1.5rem;
	background: var(--aru-surface, #ffffff);
	border: 1px solid var(--aru-border, #dcded6);
	border-radius: var(--aru-radius-lg, 18px);
}

/* The flagship gets a gold edge and nothing else — no "most popular" badge,
   no "best value" flag. The business is pre-revenue; a popularity claim would
   be an invented one. The border says "this is the big one" without saying
   anything that is not true. */
.aru-pkg--flagship {
	border-color: var(--aru-gold, #cc8c31);
	border-width: 2px;
}

.aru-pkg__name {
	margin: 0 0 0.35rem;
	font-size: var(--aru-step-3, 1.73rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--aru-ink, #0f1724);
}

.aru-pkg__meta {
	margin: 0 0 1.1rem;
	font-size: var(--aru-step--1, 0.9rem);
	color: var(--aru-ink-muted, #4a5058);
}

.aru-pkg__list.wp-block-list {
	max-width: var(--aru-measure, 68ch);
	margin-block: 1rem;
	padding-left: 1.25rem;
}

.aru-pkg__list > li {
	margin-bottom: 0.55rem;
	font-size: var(--aru-step-0, 1rem);
	line-height: 1.6;
	color: var(--aru-ink-muted, #4a5058);
}

.aru-pkg__list > li::marker {
	color: var(--aru-gold-deep, #814a0d);
}

.aru-pkg__list strong,
.aru-pkg__list li > strong:first-child {
	color: var(--aru-ink, #0f1724);
}

/* ---- Callouts -------------------------------------------------------- */

/* The tinted note that carries an offer or a caveat. Blue edge, not gold:
   these are conditions, and gold is reserved for the guarantee. */
.aru-note {
	margin-block: 1.25rem;
	padding: 0.9rem 1.1rem;
	background: var(--aru-blue-050, #e8f0fb);
	border-left: 3px solid var(--aru-blue, #004aad);
	border-radius: 0 var(--aru-radius, 10px) var(--aru-radius, 10px) 0;
	font-size: var(--aru-step--1, 0.9rem);
	line-height: 1.6;
	color: var(--aru-ink, #0f1724);
}

.aru-on-stage .aru-note {
	background: rgb(255 255 255 / 0.08);
	border-left-color: var(--aru-gold, #cc8c31);
	color: #ffffff;
}

/* ink-muted, not ink-subtle. Subtle is 4.8:1 — technically a pass, and it
   still read as washed out next to everything around it. Footnotes are small
   enough already without also being pale. */
.aru-footnote {
	margin-top: 1rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--aru-ink-muted, #4a5058);
}

.aru-on-stage .aru-footnote {
	color: rgb(255 255 255 / 0.72);
}

/* ---- Add-ons table --------------------------------------------------- */

.aru-table.wp-block-table {
	margin-block: 1.25rem;
	overflow-x: auto;   /* a price table must be able to scroll on a phone
	                       rather than force the whole page sideways */
}

.aru-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--aru-step--1, 0.9rem);
}

.aru-table th,
.aru-table td {
	padding: 0.7rem 0.8rem;
	text-align: left;
	border-bottom: 1px solid var(--aru-border, #dcded6);
	vertical-align: top;
}

.aru-table thead th {
	background: var(--aru-surface-alt, #f6f8fb);
	font-weight: 700;
	color: var(--aru-ink, #0f1724);
}

.aru-table td:nth-child(2) {
	white-space: nowrap;
	font-weight: 700;
	color: var(--aru-gold-text, #814a0d);   /* gold-deep: this is on white */
}

/* ---- Ongoing plans --------------------------------------------------- */

.aru-plan {
	padding: 1.5rem;
	background: var(--aru-surface, #ffffff);
	border: 1px solid var(--aru-border, #dcded6);
	border-radius: var(--aru-radius-lg, 18px);
}

.aru-plan__name {
	margin: 0 0 0.5rem;
	font-size: var(--aru-step-2, 1.44rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--aru-ink, #0f1724);
}

/* Tinted bands, so the page alternates rather than running as one slab of
   white. The cards inside keep their own white background, which is what
   makes them read as cards against the tint. */
.aru-section--plans,
.aru-section--own,
.aru-section--terms {
	background: var(--aru-surface-alt, #f6f8fb);
}


/* ======================================================================
   Theme-proofing
   ====================================================================== */

/* These sections get dropped into whatever theme the site runs — Astra today.
   Astra sets heading colour with :where(), which has zero specificity, so our
   own rules win; but anything we DON'T colour explicitly inherits the theme's
   body colour, which on the old palette is a warm brown on cream. So state it
   once, here, rather than discovering another pale paragraph later. */

.aru-section,
.aru-trust,
.aru-scene__content {
	color: var(--aru-ink, #0f1724);
}

.aru-section :is(li, td, th, dd, dt) {
	color: var(--aru-ink-muted, #4a5058);
}

.aru-section :is(h1, h2, h3, h4, h5, h6) {
	color: var(--aru-ink, #0f1724);
}

.aru-on-stage :is(h1, h2, h3, h4, h5, h6, li, td, th) {
	color: #ffffff;
}

/* ======================================================================
   Claiming the page — only where our blocks actually are
   ====================================================================== */

/* `aru-page` is added by the plugin to any page using our blocks or patterns.
   Everything below is scoped to it, so a page without them is completely
   unaffected and deactivating the plugin undoes all of it.

   WHY THIS EXISTS: Astra's global palette on this site is still the old brand
   — colour 4, the page background, is #f2f1e5 cream, and the text colours are
   warm browns. The theme paints the page background, the header and the footer
   from those, so restyling our sections alone could never fix the margins
   around them. That was "the old background".

   Remapping the variables rather than overriding a list of selectors lets the
   theme keep doing its own layout, and simply do it in our colours. */
body.aru-page {
	--ast-global-color-0: var(--aru-blue, #004aad);
	--ast-global-color-1: var(--aru-blue-600, #003c8c);
	--ast-global-color-2: var(--aru-ink, #0f1724);
	--ast-global-color-3: var(--aru-ink-muted, #4a5058);
	--ast-global-color-4: var(--aru-surface, #ffffff);   /* was the cream */
	--ast-global-color-5: var(--aru-surface-alt, #f6f8fb);
	--ast-global-color-6: var(--aru-border, #dcded6);
	--ast-global-color-7: var(--aru-gold, #cc8c31);
	--ast-global-color-8: var(--aru-gold-deep, #814a0d);

	background-color: var(--aru-surface, #ffffff);
	color: var(--aru-ink, #0f1724);
}

/* Astra's boxed layout wraps content in a padded card on a tinted page
   background. The page meta asks for the full-width unboxed layout; this is
   the belt to that braces, and covers the case where the meta is reset. */
body.aru-page .ast-separate-container,
body.aru-page .ast-plain-container {
	background-color: var(--aru-surface, #ffffff);
}

body.aru-page .ast-separate-container .ast-article-single,
body.aru-page .ast-separate-container .ast-article-post,
body.aru-page .site-content > .ast-container,
body.aru-page .entry-content {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
	background-color: transparent;
}

body.aru-page #primary {
	margin-block: 0;
	padding-block: 0;
}

/* The theme's page title. The page meta disables it properly; this hides it in
   the meantime — and leaving it means two <h1>s on the page, the theme's
   "Home (redesign draft)" sitting above the real headline. */
body.aru-page .ast-single-entry-banner,
body.aru-page .entry-header {
	display: none;
}

/* Our sections manage their own vertical rhythm; the theme's margins inside
   .entry-content fight them at the joins and open gaps of page background
   between full-bleed bands. */
body.aru-page .entry-content > * {
	margin-block: 0;
}

/* ---- Contact form result notice -------------------------------------- */

/* Shown after the redirect back from admin-post.php. Colour alone does not
   carry the meaning — the wording says what happened — because roughly one man
   in twelve cannot reliably separate the green from the red. */
.aru-form__notice {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--aru-radius, 10px);
	border-left: 4px solid;
	font-size: var(--aru-step-0, 1rem);
	line-height: 1.55;
}

.aru-form__notice--ok {
	background: #e8f5ec;
	border-left-color: #2f6b4f;
	color: #14321f;
}

.aru-form__notice--error {
	background: #fdeceb;
	border-left-color: #b3261e;
	color: #410e0b;
}

.aru-form__note {
	margin: 1rem 0 0;
	font-size: var(--aru-step--1, 0.9rem);
	color: var(--aru-ink-muted, #4a5058);
}