/*
Theme Name: RJ Mortgages
Template: zero-digital-base
Author: Zero Digital
Author URI: https://zero-digital.co.uk/
Description: Child theme for RJ Mortgages (rj-mortgages.co.uk). Brand tokens live in theme.json; this file holds only the font pairing and any component refinements. Runs on the Default look: do not pick a style variation in Appearance → Styles, as it would override these brand tokens.
Version: 1.16.1
License: GPLv2 or later
Text Domain: zerodigital-child
*/

/* -----------------------------------------------------------------------------
 * Per-client style overrides
 * -----------------------------------------------------------------------------
 * Read README.md before adding anything here. Tokens only, .zerodigital-* hooks
 * only, no !important, and never a setting the site's UI already controls.
 *
 * THE SCHEME, in one place, so nothing below looks arbitrary:
 *
 *   FRAME       Cream — header, heroes and footer, one light band top and
 *               bottom. Set after the 24 Sept review: an all-sage frame read as
 *               "too green" on load.
 *   BODY        The theme's own light surfaces — everything else.
 *   GREEN       Brand sage where it should pop: CTA banners, hero pills, badges,
 *               and the review bands on service pages (a per-block setting).
 *   KEYLINES    Sage Keyline (accent) on cards and form fields, so what can be
 *               clicked carries the brand without a green fill behind text.
 *   TEXT        Black on every light surface. Near-white on dark fills only.
 *   CONTROLS    Brand sage with black labels and icons for buttons on light
 *               surfaces — hero, header phone, contact call, Review Us, form
 *               submit — and the contact next-steps panel. Sage outlines with
 *               black labels for the Client Portal, carousel arrows and social
 *               chips. Charcoal only on the sage CTA banners.
 *   DEEP SAGE   Only for green TEXT — the home H1's first line, the footer
 *               column headings, the review stars, inline links — because
 *               brand sage fails as text (2.2:1 on cream).
 *
 * One !important exists, on the desktop menu size (section 4): the parent pins
 * that size with its own !important, and nothing else can move it.
 *
 * Why black and not the body charcoal: on sage, #474747 is 3.5:1, under the
 * 4.5:1 floor. Black is 7.9:1 there and 18:1 on cream, so one text colour is
 * legible on every surface the site uses. This is a contrast requirement, not a
 * preference.
 *
 * Why the long selector lists rather than one inherited rule: the blocks set
 * colour directly on their own elements, and a declaration on an ancestor
 * loses to any direct rule no matter how specific. Each element therefore has
 * to be named. The lists were built by scanning the rendered pages, not from
 * memory — anything not listed was already black or sits on a dark fill.
 * -------------------------------------------------------------------------- */


/* =============================================================================
 * 1. TYPEFACES
 * ========================================================================== */

/* Font pairing: Fraunces headings, Figtree body.
 *
 * Both faces are bundled by the parent. They are re-pointed here rather than
 * in theme.json because the parent declares its @font-face files inside
 * settings.typography.fontFamilies with file:./assets/fonts/ paths: a child
 * fontFamilies array replaces that list and resolves those paths against this
 * folder, so every font file would 404.
 *
 * Blocks read the heading/body presets directly, so re-pointing the two
 * variables reaches every component, not just core heading elements. Set on
 * body so it wins by inheritance whatever order the global styles print in. */
body {
	--wp--preset--font-family--heading: var(--wp--preset--font-family--fraunces);
	--wp--preset--font-family--body: var(--wp--preset--font-family--figtree);
}

/* Fraunces Italic.
 *
 * The parent bundles Fraunces upright only, at 500 and 700, so anything set in
 * italic was being slanted algorithmically by the browser. This adds the real
 * italic to the same family, which is why it needs no change to any font
 * stack: the browser picks it up for font-style: italic and leaves the upright
 * alone.
 *
 * Declared here rather than in theme.json on purpose — see the fontFamilies
 * note above. An @font-face in CSS adds a face without touching that list.
 *
 * One variable file covers both weights: Google serves the same woff2 for 500
 * and 700, so the weight range here is what maps CSS weight onto the wght
 * axis. That mapping is not optional. The file's own defaults are wght 900 and
 * opsz 9 — without the range it would render ultra-bold, and optical sizing is
 * left on (the browser default) so large headings get display proportions
 * rather than the 9pt ones.
 *
 * Latin subset only, with the matching unicode-range, so anything outside it
 * falls through to the next font rather than rendering from an incomplete
 * face. SIL Open Font License, so self-hosting is permitted. */
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 500 700;
	font-display: swap;
	src: url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Utility layer typeface.
 *
 * The spec layer — section labels, hero pills, the rating prefix, review meta
 * and the FCA number — ships in IBM Plex Mono. The client didn't get on with
 * the monospaced look, so it moves to Figtree, which the parent already
 * bundles. Re-pointed through the existing alias so every element in the layer
 * moves together and the layer stays one consistent system. Case is set by
 * specTransform in theme.json, not here. */
:root {
	--zd-mono: var(--wp--preset--font-family--figtree);
}


/* =============================================================================
 * 1b. SCALE — a tighter, more compact site (October 2026)
 * ========================================================================== */

/* Rachel's feedback was that everything felt too big: headings, boxes and the
 * space between sections, with too little of the site visible at once. The
 * fix is a site-wide scale pass, done through the shared tokens so every page
 * moves together rather than block by block:
 *
 *   theme.json   spacing lg 2 → 1.75rem,
 *                xl 3 → 2.25rem, 2xl 4 → 3.5rem (the 2xl step is the cap on
 *                section padding, so sections go from 64px to 56px of padding;
 *                it was 3rem / 48px at first, which felt cramped between
 *                sections, so it came back up half way).
 *   (width)      the site width was capped here for a while (1200px, then
 *                1400px). It now lives in the core plugin and parent theme,
 *                so the child no longer sets it.
 *   here         the display steps the blocks size their headings and ledes
 *                against — section headings from 46px to 36px at the top end,
 *                card titles from 24px to 21px, intro and quote text from 20px
 *                to 18px. Phones are near-unchanged: the minimums stay put, so
 *                this is a desktop change, which is where it felt big.
 *
 * The steps are re-pointed here rather than in theme.json because the parent
 * declares them as CSS custom properties on :root, not as theme.json presets.
 * Same pattern as --zd-mono above.
 *
 * Not covered here: the home hero H1, which the block sizes itself — heading
 * styling is kept in the heading content, by request. */
:root {
	--zd-step-h2: clamp(1.875rem, 1.4rem + 1.3vw, 2.25rem);
	--zd-step-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	--zd-step-lede: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
}


/* =============================================================================
 * 2. THE FRAME — cream, with sage kept for the CTA banners
 * ========================================================================== */

/* Header.
 *
 * The background goes on the template part, not on __bar. The bar is capped at
 * the site's 1600px wide width, so colouring it left the full-width white
 * header showing as gutters either side of the colour at wide viewports. The
 * template part is full-bleed, so the colour reaches the edges and lines up
 * with the hero below it.
 *
 * Cream, matching the heroes, so the header and the hero read as one block.
 * The parent's hairline along the bottom comes off for the same reason: with
 * the same colour either side, a line only splits what should be one piece.
 * Rachel picked it out on the review call as something she didn't like.
 *
 * Header colour is not a Site Settings option — that page only controls
 * traditional vs floating — so this is the right layer for it. */
header.wp-block-template-part {
	background-color: var(--wp--preset--color--cream);
	border-bottom: 0;
}

/* Header logo, larger.
 *
 * Rachel asked for a bigger logo, twice. The block caps it at 2.5rem tall and
 * 12rem wide, which on RJ's wide lockup (about 3.7:1) leaves the wordmark small.
 * It goes to 3rem on phones and 4rem from the desktop menu breakpoint up; the
 * width cap moves with it so the height, not the width, is what limits it.
 * The block has no size setting, so this is the layer for it.
 *
 * --zd-header-height (4.75rem) is left alone: the phone header stays under it
 * at about 75px and the mobile drawer places itself from the measured header.
 * The header is sticky (Site Settings), and the desktop bar runs to about
 * 91px — but --zd-anchor-offset adds 1rem on top of the 4.75rem, so anchor
 * targets stop 92px down and still clear it. Re-check if the logo grows. */
.zerodigital-site-brand__logo {
	max-height: 3rem;
	max-width: 15rem;
}

@media (min-width: 1200px) {
	.zerodigital-site-brand__logo {
		max-height: 4rem;
	}
}

/* Heroes.
 *
 * Set as a DEFAULT, not an override. The blocks emit their colour as an inline
 * style, so clearing the colour field falls through to this, while a page that
 * genuinely needs its own background can still set one in the editor and win.
 * That ordering keeps the background a UI setting. */
.zerodigital-hero-home,
.zerodigital-hero-subpage {
	background-color: var(--wp--preset--color--cream);
}

/* CTA banners stay sage — the one full-width green moment on each page, and
 * the section Rachel singled out as the one that should "pop". Same default-
 * not-override ordering as the heroes. */
.zerodigital-cta-banner {
	background-color: var(--wp--preset--color--sage);
}


/* =============================================================================
 * 3. TEXT — black on every light surface
 * ========================================================================== */

/* Header and navigation. */
.zerodigital-header__bar,
.zerodigital-header__brand,
.zerodigital-header__actions,
.zerodigital-site-brand,
.zerodigital-site-brand__logo,
.zerodigital-header__bar .wp-block-navigation,
.zerodigital-header__bar .wp-block-navigation-item,
.zerodigital-header__bar .wp-block-navigation-item a,
.zerodigital-header__bar .zerodigital-nav-toggle,
.zerodigital-nav-drill__title,
.zerodigital-nav-close {
	color: var(--wp--preset--color--black);
}

/* Home hero. */
.zerodigital-hero-home__inner,
.zerodigital-hero-home__copy,
.zerodigital-hero-home__heading,
.zerodigital-hero-home__eyebrow-inline,
.zerodigital-hero-home__heading-inline,
.zerodigital-hero-home__subtext,
.zerodigital-hero-home__pills,
.zerodigital-hero-home__ctas,
.zerodigital-hero-home__media,
.zerodigital-hero-home__trust,
.zerodigital-hero-home__trust-prefix,
.zerodigital-hero-home__trust-rating,
.zerodigital-hero-home__trust-outof {
	color: var(--wp--preset--color--black);
}

/* Subpage hero. */
.zerodigital-hero-subpage__inner,
.zerodigital-hero-subpage__copy,
.zerodigital-hero-subpage__heading,
.zerodigital-hero-subpage__eyebrow,
.zerodigital-hero-subpage__subtext,
.zerodigital-hero-subpage__pills {
	color: var(--wp--preset--color--black);
}

/* CTA banner — now on sage, so its copy flips from light to black. */
.zerodigital-cta-banner__inner,
.zerodigital-cta-banner__heading,
.zerodigital-cta-banner__subtext {
	color: var(--wp--preset--color--black);
}

/* About / story. */
.zerodigital-about__inner,
.zerodigital-about__copy,
.zerodigital-about__lede,
.zerodigital-about__eyebrow,
.zerodigital-about__heading,
.zerodigital-about__body,
.zerodigital-about__media,
.zerodigital-about__stats,
.zerodigital-about__stat-number,
.zerodigital-about__stat-label {
	color: var(--wp--preset--color--black);
}

/* Services grid. */
.zerodigital-services-grid__container,
.zerodigital-services-grid__eyebrow,
.zerodigital-services-grid__heading,
.zerodigital-services-grid__intro,
.zerodigital-services-grid__items,
.zerodigital-services-grid__item,
.zerodigital-services-grid__item-body,
.zerodigital-services-grid__item-title,
.zerodigital-services-grid__item-description {
	color: var(--wp--preset--color--black);
}

/* Process. */
.zerodigital-process__container,
.zerodigital-process__eyebrow,
.zerodigital-process__heading,
.zerodigital-process__steps,
.zerodigital-process__step,
.zerodigital-process__step-marker,
.zerodigital-process__step-body,
.zerodigital-process__step-title,
.zerodigital-process__step-description {
	color: var(--wp--preset--color--black);
}

/* Testimonials, including the carousel controls, which sat on the old green
 * section background and would otherwise stay near-white on a light surface. */
.zerodigital-testimonials__container,
.zerodigital-testimonials__eyebrow,
.zerodigital-testimonials__heading,
.zerodigital-testimonials__intro,
.zerodigital-testimonials__grid,
.zerodigital-testimonials__slider,
.zerodigital-testimonials__slide,
.zerodigital-testimonials__carousel,
.zerodigital-testimonials__quote,
.zerodigital-testimonials__meta,
.zerodigital-testimonials__controls,
.zerodigital-testimonials__pagination,
.zerodigital-testimonials__prev,
.zerodigital-testimonials__next,
.zerodigital-testimonials__pause {
	color: var(--wp--preset--color--black);
}

/* FAQ. */
.zerodigital-faq__container,
.zerodigital-faq__header,
.zerodigital-faq__eyebrow,
.zerodigital-faq__heading,
.zerodigital-faq__intro,
.zerodigital-faq__items,
.zerodigital-faq__item,
.zerodigital-faq__question,
.zerodigital-faq__answer {
	color: var(--wp--preset--color--black);
}

/* The trigger is the button that holds the question text itself, not just a
 * chevron, and it shipped in the accent green at 3.4:1 — a text failure on
 * every FAQ on the site. Two classes here to match the parent's own rule for
 * it; a single class loses. */
.zerodigital-faq__item .zerodigital-faq__trigger {
	color: var(--wp--preset--color--black);
}

/* Review stars are real ★ characters, not an icon, and shipped in the accent
 * green at 3.4:1. Deep sage keeps them green and branded at 7:1. Left green
 * rather than black because they read as a rating; note the hero's rating uses
 * a separate amber star, so the two are not yet consistent. */
.zerodigital-testimonials__stars {
	color: var(--wp--preset--color--primary);
}

/* The reviewer's name is a bare <cite> inside a <blockquote><footer> — it
 * carries no class of its own, so the per-element lists above could never have
 * reached it and it stayed on the muted grey. Named by element, scoped to the
 * block. */
.zerodigital-testimonials cite {
	color: var(--wp--preset--color--black);
}

/* Review text size.
 *
 * Both the disclaimer and the quotes ran at the lede step — 20px on desktop —
 * which is a standfirst size being used for four columns of body copy, so the
 * cards ran very tall. Dropped to the body step.
 *
 * Line height is deliberately not set alongside it: the block uses a unitless
 * multiplier, so it follows the size down on its own (32px to 25.6px) and the
 * rhythm is preserved. Card height falls by about a fifth as a result. */
.zerodigital-testimonials__intro,
.zerodigital-testimonials__quote {
	font-size: var(--wp--preset--font-size--medium);
}

/* Card links.
 *
 * "Learn more →" on a service card kept the old primary green while the
 * equivalent link on a blog card had already moved to black, so the same
 * component read two different ways. Black matches the hero's secondary link,
 * and the arrow carries the affordance. */
.zerodigital-services-grid__item-link {
	color: var(--wp--preset--color--black);
}

/* The skip link is invisible until it takes focus, so it never showed up by
 * eye — but it is the first thing a keyboard user lands on. It draws its own
 * light background, so it was legible, just off-palette. */
.zerodigital-skip-link {
	color: var(--wp--preset--color--black);
}

/* Contact form labels.
 *
 * The parent styles Fluent Forms at 0,4,0 to clear the plugin's own per-form
 * inline styles, so this matches that selector shape — a shorter one silently
 * loses. Labels only: the value a visitor types is left in the body charcoal,
 * which is already 9.3:1 and resists override from this layer anyway. */
.fluentform .frm-fluent-form .ff-el-input--label label {
	color: var(--wp--preset--color--black);
}

/* Post feed. */
.zerodigital-post-feed__inner,
.zerodigital-post-feed__header,
.zerodigital-post-feed__eyebrow,
.zerodigital-post-feed__heading,
.zerodigital-post-feed__slider,
.zerodigital-post-feed__card,
.zerodigital-post-feed__media,
.zerodigital-post-feed__image,
.zerodigital-post-feed__body,
.zerodigital-post-feed__title,
.zerodigital-post-feed__excerpt,
.zerodigital-post-feed__meta,
.zerodigital-post-feed__link,
.zerodigital-post-feed__more-link,
.zerodigital-post-feed__controls,
.zerodigital-post-feed__pagination,
.zerodigital-post-feed__prev,
.zerodigital-post-feed__next {
	color: var(--wp--preset--color--black);
}

/* Contact. The next-steps panel and the call button are handled with the
 * controls and badges below. */
.zerodigital-contact__inner,
.zerodigital-contact__container,
.zerodigital-contact__eyebrow,
.zerodigital-contact__heading,
.zerodigital-contact__intro,
.zerodigital-contact__form,
.zerodigital-contact__details,
.zerodigital-contact__list,
.zerodigital-contact__item,
.zerodigital-contact__address {
	color: var(--wp--preset--color--black);
}

/* Team. */
.zerodigital-team__container,
.zerodigital-team__eyebrow,
.zerodigital-team__heading,
.zerodigital-team__intro,
.zerodigital-team__member,
.zerodigital-team__name,
.zerodigital-team__role,
.zerodigital-team__bio {
	color: var(--wp--preset--color--black);
}

/* Risk warning prominence.
 *
 * FCA rules require a risk warning to be no less prominent than the benefits
 * it balances. The block sets 0.85rem in the muted colour against 20px body
 * copy, so the on-page variants take the body size and the footer strip steps
 * up to the small preset. The colour moves to black with everything else,
 * which raises its contrast rather than lowering it.
 *
 * Scoped to the two on-page variants deliberately. An unscoped rule on
 * __text also reaches the footer strip, which sits on the dark green footer —
 * that turned the FCA line black at 2.99:1 and bumped its size. The footer
 * strip is handled with the footer, below. */
.zerodigital-compliance-bar--accent-line,
.zerodigital-compliance-bar--dedicated-section {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--black);
}

.zerodigital-compliance-bar--accent-line .zerodigital-compliance-bar__text,
.zerodigital-compliance-bar--dedicated-section .zerodigital-compliance-bar__text {
	color: var(--wp--preset--color--black);
}

.zerodigital-compliance-bar--footer-strip {
	font-size: var(--wp--preset--font-size--small);
}


/* =============================================================================
 * 4. CONTROLS — brand sage with black labels; charcoal on sage banners
 * ========================================================================== */

/* Buttons on the cream and white surfaces are brand sage with a black label
 * and icon, so every call to action is Rachel's own green: the hero buttons,
 * the header phone button, the contact page's call button, the footer's
 * Review Us and the form submit. Black on sage is 7.9:1 — higher contrast than
 * the near-white-on-deep-sage it replaces (7:1).
 *
 * The fill itself is 2.2:1 against cream, so the button's shape reads a little
 * softer than a dark fill would. That is acceptable under WCAG: the black label
 * identifies the control, and the fill is not the only cue.
 *
 * The CTA banner button stays charcoal, because the banner itself is sage and
 * a sage button would disappear into it. Charcoal on sage is 3.5:1.
 *
 * The phone link is scoped to the header bar at two classes to match the
 * parent's own specificity for it — a single class loses — and the descendant
 * selector carries its label and inline SVG, which set their own colour. The
 * contact call button is two classes for the same reason. */
.zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary),
.zerodigital-hero-subpage__cta:not(.zerodigital-hero-subpage__cta--secondary),
.zerodigital-about__cta:not(.zerodigital-about__cta--secondary),
.zerodigital-header__bar .zerodigital-business-phone,
.zerodigital-contact__details .zerodigital-contact__call,
.zerodigital-footer-columns__review-cta,
.fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
	background-color: var(--wp--preset--color--sage);
	border-color: transparent;
	color: var(--wp--preset--color--black);
}

.zerodigital-cta-banner__button {
	background-color: var(--wp--preset--color--foreground);
	border-color: transparent;
	color: var(--wp--preset--color--background);
}

.zerodigital-header__bar .zerodigital-business-phone *,
.zerodigital-footer-columns__review-cta * {
	color: var(--wp--preset--color--black);
}

/* The contact page's outlined call button, if it is ever switched on: black
 * label, sage ring, matching the Client Portal outline. */
.zerodigital-contact__details .zerodigital-contact__call--secondary {
	color: var(--wp--preset--color--black);
	box-shadow: inset 0 0 0 var(--rj-keyline-w) var(--wp--preset--color--sage);
}

/* Secondary hero link — no fill, so it is black text with its arrow. Sage as
 * text would be 2.2:1 on cream. Both heroes carry one since platform 0.56.0. */
.zerodigital-hero-home__cta--secondary,
.zerodigital-hero-subpage__cta--secondary,
.zerodigital-about__cta--secondary {
	color: var(--wp--preset--color--black);
}

/* Hover and focus.
 *
 * The hover deepens the fill a step, sage to the Sage Keyline (accent), and
 * the label stays black: 6.1:1. Charcoal still deepens to black under a light
 * label. focus-visible is included so keyboard users get the same treatment.
 * The call button's hover selector matches the parent's own, which is longer. */
.zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary):hover,
.zerodigital-hero-home__cta:not(.zerodigital-hero-home__cta--secondary):focus-visible,
.zerodigital-hero-subpage__cta:not(.zerodigital-hero-subpage__cta--secondary):hover,
.zerodigital-hero-subpage__cta:not(.zerodigital-hero-subpage__cta--secondary):focus-visible,
.zerodigital-about__cta:not(.zerodigital-about__cta--secondary):hover,
.zerodigital-about__cta:not(.zerodigital-about__cta--secondary):focus-visible,
.zerodigital-header__bar .zerodigital-business-phone:hover,
.zerodigital-header__bar .zerodigital-business-phone:focus-visible,
.zerodigital-contact__details .zerodigital-contact__call:not(.zerodigital-contact__call--secondary):hover,
.zerodigital-contact__details .zerodigital-contact__call:not(.zerodigital-contact__call--secondary):focus-visible,
.zerodigital-contact__details .zerodigital-contact__call--secondary:hover,
.zerodigital-footer-columns__review-cta:hover,
.zerodigital-footer-columns__review-cta:focus-visible,
.fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
.fluentform .frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: transparent;
	color: var(--wp--preset--color--black);
}

.zerodigital-cta-banner__button:hover,
.zerodigital-cta-banner__button:focus-visible {
	background-color: var(--wp--preset--color--black);
	border-color: transparent;
	color: var(--wp--preset--color--background);
}

.zerodigital-header__bar .zerodigital-business-phone:hover *,
.zerodigital-header__bar .zerodigital-business-phone:focus-visible *,
.zerodigital-footer-columns__review-cta:hover *,
.zerodigital-footer-columns__review-cta:focus-visible * {
	color: var(--wp--preset--color--black);
}

/* Carousel arrows and pause, on every carousel (reviews, guides).
 *
 * The parent draws them from one ink colour — ring, chevron and hover fill —
 * which defaulted to deep sage. The ink is now brand sage, so the ring and the
 * hover fill match the buttons, and the inverse (the chevron on hover) is
 * black. At rest the chevron is already black: the blocks' own control classes
 * are in the black-text lists in section 3. The dark-band override the parent
 * sets for these at two classes is left alone. */
.zd-carousel-nav {
	--zd-carousel-ink: var(--wp--preset--color--sage);
	--zd-carousel-ink-inverse: var(--wp--preset--color--black);
	border-width: var(--rj-keyline-w);
}

/* On a coloured band — a block given its own background, which the parent marks
 * zd-has-ground, like the sage review band on each service page — sage controls
 * disappear into the band: the rings, and the active pagination dot (the
 * accent) with them. Black reads on any light band, so the ink goes black
 * there: black ring and chevron, filling black on hover with a light chevron.
 * The dots go black too, the inactive ones keeping the parent's lower
 * opacity so the active one still stands out. Dark bands keep the parent's
 * own light treatment. */
.zd-has-ground:not(.zd-bg-dark) .zd-carousel-nav {
	--zd-carousel-ink: var(--wp--preset--color--black);
	--zd-carousel-ink-inverse: var(--wp--preset--color--background);
}

.zd-has-ground:not(.zd-bg-dark) .zd-carousel-pagination {
	--swiper-theme-color: var(--wp--preset--color--black);
	--swiper-pagination-color: var(--wp--preset--color--black);
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--black);
}

/* Desktop menu, a size up.
 *
 * Rachel asked for slightly larger menu text. The parent pins the desktop menu
 * at 0.9375rem with !important — its own guard against the navigation block's
 * font-size preset classes — so the only way past it is another !important at
 * a higher specificity. This is that case and no other: it is scoped to the
 * desktop breakpoint the parent uses, so the mobile drawer keeps its own size.
 *
 * The phone and Client Portal buttons take the same size, with a shared line
 * height, so the two pills line up at the same height beside the menu. */
@media (min-width: 1200px) {
	.zerodigital-header__bar .zerodigital-header__actions .wp-block-navigation,
	.zerodigital-header__bar .zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item {
		font-size: 1.0625rem !important;
	}

	/* Gap between menu items. The bar holds the logo, seven links, the Client
	 * Portal pill and the phone button, which needs about 1,245px at the
	 * default 24px gap (inherited block spacing — the navigation block has no
	 * gap set of its own). The desktop menu starts at 1200px, where the bar is
	 * narrower than that, and at the default gap the Client Portal wrapped onto
	 * a second row. 16px brings it back to one row; the band just above the
	 * breakpoint, where the scrollbar also takes its share, steps down to
	 * 12px. Measured to hold one row with the bar at its narrowest (1185px);
	 * the bar only gets wider from there, whatever the site width is set to. */
	.zerodigital-header__bar .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--sm);
	}

	/* Client Portal's size is set on its own rule below, which comes later at
	 * the same specificity and would otherwise win. */
	.zerodigital-header__bar .zerodigital-business-phone {
		font-size: 1.0625rem;
		line-height: 1.5;
		border-width: var(--rj-keyline-w);
	}
}

@media (min-width: 1200px) and (max-width: 1279.98px) {
	.zerodigital-header__bar .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--xs);
	}
}

/* Client Portal — a sage outline pill in the menu.
 *
 * It is the one menu link that leaves the site, so it needs to read as a
 * button, but one step quieter than the filled sage phone button beside it:
 * same pill shape and green, outline only, with a black label (18:1 on cream).
 * The ring is the card keyline weight so the sage holds up on cream; on hover
 * it fills to match the phone button. The menu item carries no class of its
 * own (the navigation block has no per-item style), so it is found by its
 * destination. If the portal address changes, change it here too.
 *
 * The size matches the desktop menu and the phone button (1.0625rem). Below
 * the desktop breakpoint the link lives in the mobile drawer, whose rule
 * further down sets its own size. */
.zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item:has(> a[href*="portal.myac.re"]) {
	margin-inline-start: var(--wp--preset--spacing--xs);
}

.zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item a[href*="portal.myac.re"] {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
	border: var(--rj-keyline-w) solid var(--wp--preset--color--sage);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--black);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color var(--zd-ease);
}

/* The parent draws the menu's hover underline with ::after. On a pill it
 * reads as a stray line under the outline. */
.zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item a[href*="portal.myac.re"]::after {
	content: none;
	display: none;
}

.zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item a[href*="portal.myac.re"]:hover,
.zerodigital-header__actions .wp-block-navigation .wp-block-navigation-item a[href*="portal.myac.re"]:focus-visible {
	background-color: var(--wp--preset--color--sage);
}

/* Mobile pop-out menu: a full-width button under the list, label centred.
 * The border is restated because the parent clears the bottom border of the
 * menu's last item, which is this one — it clipped the pill's lower edge. The
 * .zd-nav-js line matches the parent's JS-enhanced menu rule, which would
 * otherwise win on padding. */
.zerodigital-header__actions .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> a[href*="portal.myac.re"]) {
	margin-inline-start: 0;
	margin-block-start: var(--wp--preset--spacing--sm);
}

.zd-nav-js .zerodigital-header__actions .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[href*="portal.myac.re"],
.zerodigital-header__actions .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a[href*="portal.myac.re"] {
	justify-content: center;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--medium);
	border: var(--rj-keyline-w) solid var(--wp--preset--color--sage);
	color: var(--wp--preset--color--black);
}

/* Pills.
 *
 * Solid chips in brand sage — with the hero now cream, these carry Rachel's
 * green into the top of the page. They share the buttons' sage and black, but
 * stay smaller, lighter-weight and in the small-caps label face, so they read
 * as tags rather than as something to press. Black on sage is 7.9:1. The icon
 * is listed with the label so the two stay together. */
.zerodigital-hero-home__pill,
.zerodigital-hero-subpage__pill {
	background-color: var(--wp--preset--color--sage);
	border-color: transparent;
	border-radius: var(--wp--custom--radius--full);
}

.zerodigital-hero-home__pill,
.zerodigital-hero-home__pill-label,
.zerodigital-hero-home__pill-icon,
.zerodigital-hero-subpage__pill,
.zerodigital-hero-subpage__pill-label,
.zerodigital-hero-subpage__pill-icon {
	color: var(--wp--preset--color--black);
}


/* =============================================================================
 * 5. BADGES — brand sage with a black glyph
 * ========================================================================== */

/* The two badge shapes on the site — the services icon chip and the numbered
 * step marker — both shipped in the deeper structural green with a near-white
 * glyph. They now take the hero's own sage with black on top, so they read as
 * one family and carry Rachel's green rather than the structural one.
 *
 * The glyph is black, matching the text rule for sage everywhere else. It was
 * near-white, which put the step numbers — rendered text — at 2.64:1, a clear
 * AA failure. Black on sage is 7.9:1.
 *
 * The badge itself sits at 2.6:1 against the white card behind it, which is
 * fine for a decorative container — nothing is identified by that edge alone.
 * Size, shape and stroke are left exactly as the blocks ship them. */
.zerodigital-services-grid__item-icon,
.zerodigital-process__step-number {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--black);
}

/* The contact page's "What happens next" panel: brand sage with black copy,
 * like the buttons, in place of the parent's deep-sage panel with light text.
 *
 * The block marks the panel zd-bg-dark in its markup, and the parent's dark-
 * surface rules then push its heading, list items and step numbers light at
 * 0,1,1. Each is named here at the same weight or above so black wins; the
 * step numbers are the list items' ::before and follow them. */
.zerodigital-contact__next {
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--black);
}

.zerodigital-contact__next .zerodigital-contact__next-heading,
.zerodigital-contact__next .zerodigital-contact__next-steps,
.zerodigital-contact__next-steps li {
	color: var(--wp--preset--color--black);
}


/* =============================================================================
 * 5b. KEYLINES — the brand green on cards and form fields
 * ========================================================================== */

/* On the review call Rachel's main note was that nothing clickable stood out:
 * pale cards on a pale page. A sage FILL can't carry text (white on sage is
 * 2.53:1), so the green goes on the edge instead — white card, green outline.
 *
 * The colour is the palette's Sage Keyline (accent) rather than brand sage:
 * the same green family, but 3.4:1 against white, which clears the 3:1 that
 * WCAG asks of a control's boundary. Brand sage would be 2.6:1.
 *
 * The width is doubled from the parent's 1px hairline. An earlier 1px green
 * outline was tried and Rachel found it "too thin". Declared once here so every
 * keyline stays the same weight. */
:root {
	--rj-keyline-w: 2px;
}

/* Cards: the service boxes (home, and the credit-file cards on Bad Credit), the
 * review cards, and the guides/blog cards. Colour and width only — the style,
 * radius and fill stay as each block ships them.
 *
 * Testimonials is two classes because the block's own rule is: it scopes the
 * card to its carousel/grid wrapper, and a single class loses. */
.zerodigital-services-grid__item,
.zerodigital-testimonials .zerodigital-testimonials__slide,
.zerodigital-post-feed__card {
	border-color: var(--wp--preset--color--accent);
	border-width: var(--rj-keyline-w);
}

/* Except the review carousel, which is borderless: the cards sit as plain
 * white panels, on the sage band of the service pages and on the page alike.
 * Same two-class weight as the rule above and later in the file, so it wins
 * for the carousel variant only — the grid layout keeps its keyline. */
.zerodigital-testimonials--carousel .zerodigital-testimonials__slide {
	border: 0;
}

/* The Insurance & Protection service card stands out from the mortgage cards:
 * a sage card with the colours turned round — the icon chip goes white where
 * the others are sage. The copy stays black rather than flipping to white,
 * because white on sage is 2.5:1 and black is 7.9:1.
 *
 * The block has no per-card style, so the card is found by its link to the
 * Protection page, the same way the Client Portal pill is found by its
 * destination. If that page's address changes, change it here too. It applies
 * wherever the card appears in a services grid. */
.zerodigital-services-grid__item:has(.zerodigital-services-grid__item-link[href*="insurance-services"]) {
	background-color: var(--wp--preset--color--sage);
	border-color: var(--wp--preset--color--sage);
}

.zerodigital-services-grid__item:has(.zerodigital-services-grid__item-link[href*="insurance-services"]) .zerodigital-services-grid__item-icon {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--black);
}

/* It also takes the width of two cards wherever the grid is a grid. With the
 * home page's seven cards that closes the last row on desktop (four across:
 * Remortgage, Buy-to-Let, then Protection across two) and gives Protection a
 * full row of its own on tablets (two across). At 600px and below the block
 * turns the grid into a swipe carousel, where a span means nothing, so the
 * rule starts just above that. */
@media (min-width: 601px) {
	.zerodigital-services-grid__item:has(.zerodigital-services-grid__item-link[href*="insurance-services"]) {
		grid-column: span 2;
	}
}

/* Service card titles, a step up. With the icons removed from the home page
 * cards the title leads each card, so it goes from the shared h3 step (about
 * 21px on desktop) to 24px. Phones stay close to where they were. */
.zerodigital-services-grid__item-title {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
}

/* FAQs. The "joined" variant draws one outline round the whole list, so that
 * is the keyline; the rows inside keep their faint dividers. The separate-card
 * variant outlines each item, and its hover and open states — which fade the
 * edge towards the accent — are pinned to the full keyline so hovering doesn't
 * make it lighter. Each selector matches the parent's own.
 *
 * The item rules don't box the rows of a joined list: the parent clears their
 * border style there, and a width with no style draws nothing, while its
 * row dividers sit at 0,4,0 and keep their own weight. */
.zerodigital-faq--joined .zerodigital-faq__items,
.zerodigital-faq__item,
.zerodigital-faq__item:hover,
.zerodigital-faq__item:has(.zerodigital-faq__trigger[aria-expanded="true"]) {
	border-color: var(--wp--preset--color--accent);
	border-width: var(--rj-keyline-w);
}

/* Form fields.
 *
 * The parent draws every field's edge from the border colour token, at a
 * specificity built to clear Fluent Forms' own inline styles (0,5,1 on text
 * inputs). Rather than escalate past that, the token is re-pointed for forms
 * only, so the fields take the keyline colour and nothing else about them
 * changes. Fields keep the parent's 1px weight: at input height the doubled
 * card keyline reads as heavy, and the green is what makes them part of the set.
 *
 * Known parent issue, not fixed here: that 0,5,1 base rule also outranks the
 * parent's own :focus (0,4,1) and error (0,4,0) border rules, so a clicked field
 * shows no border change and an invalid one no red edge. The keyboard
 * focus-visible outline is unaffected. It is a shared bug, so it belongs in
 * zero-digital-base/assets/css/fluent-forms.css, not in this child. */
.fluentform .frm-fluent-form {
	--wp--preset--color--border: var(--wp--preset--color--accent);
}


/* =============================================================================
 * 6. HOME HERO — composition
 * ========================================================================== */

/* The second half of the H1 is set in italic via an <em> in the heading field.
 * That is markup only — the heading reads exactly as before, word for word —
 * and the real Fraunces Italic registered above means it is a drawn italic
 * rather than a browser-slanted upright. No CSS needed for it.
 *
 * Display scale: Fraunces ships at 500 and 700 and the H1 already runs at 700,
 * so the extra presence has to come from size. The display step is
 * re-tokenised inside the hero only, leaving every other heading alone. */
.zerodigital-hero-home {
	--zd-step-display: clamp(3rem, 1.5rem + 5.5vw, 5.5rem);
}

/* Home hero H1 — capped at 52px on desktop.
 *
 * The heading's colours and its 52px desktop size are set inline in the
 * heading field (a span with font-size: min(1em, 3.25rem)). That shrinks the
 * text but not the lines: WordPress strips display from inline styles, so the
 * span stays inline and each line still sits on the H1's own 68px line box,
 * which left the two lines visibly far apart on desktop. Capping the H1 at the
 * same 52px brings its line box down with the text — lines go from 69px apart
 * to 53px — and the inline cap then has nothing left to do. This is the
 * block's own clamp with only the top end lowered, so phones and tablets,
 * which never reach 52px, are unchanged. */
.zerodigital-hero-home__heading {
	font-size: clamp(2.4rem, 1.3rem + 3.9vw, 3.25rem);
}

/* Crop the hero image to 4:3. The block renders it at its natural ratio with
 * object-fit: fill, so a ratio alone would squash the photo rather than crop
 * it — cover is what makes this a crop.
 *
 * It was square, and at a 1400px site width a square photo was the tallest thing
 * in the hero (592px), so it set the hero's height and pushed everything below
 * the first screen. At 4:3 it is 444px and the copy column sets the height
 * instead: the hero drops from 688px to 612px at 1440 wide.
 *
 * The current source (the coffee table) is portrait, so the crop sits low —
 * 70% down — to keep the table, vase and cup in frame with the plant above.
 * Re-check the focal point if the image changes. */
.zerodigital-hero-home__media img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: 50% 70%;
}

/* Photography sits flush, with no frame, everywhere on the site.
 *
 * The hero and About blocks draw a 1px light-grey border on the image itself.
 * Around the cut-out portrait of Rachel on her sage shape, and on the photos
 * generally, it reads as a stray box rather than a finish, so it comes off on
 * all of them. These are the only image borders the site renders (scanned
 * across every page type). The corner radius stays — that is the shape, not
 * the frame. */
.zerodigital-hero-home__media img,
.zerodigital-hero-subpage__media img,
.zerodigital-about__media img {
	border: 0;
}

/* The Google rating sits in its own borderless white card, with the card
 * radius. The block's hairline above the rating comes off, since the card now
 * frames it, and inline-flex keeps the card hugging its content rather than
 * running the width of the column. Its text colour is set with the rest of
 * the hero in section 3. */
.zerodigital-hero-home__trust {
	display: inline-flex;
	width: auto;
	border: 0;
	background-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	border-radius: var(--zd-card-radius, var(--wp--custom--radius--lg));
}


/* =============================================================================
 * 7. FOOTER
 * ========================================================================== */

/* The footer group's colour is a block-editor setting (a has-*-background-color
 * class), which only !important could beat — and overriding a UI setting is
 * the one thing the child theme must never do. So the background is changed in
 * the Site Editor, not here. It is set to Cream, to match the header and hero,
 * so every page starts and ends on the same colour.
 *
 * These rules are scoped to the parent's zd-bg-light class rather than to one
 * colour. The parent adds it to the footer group whenever the chosen colour is
 * light, so the copy goes black on sage, cream or anything else light, and
 * drops back to the parent's light-on-dark treatment if a dark colour is ever
 * picked — no window where black text sits on a dark fill. */
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__brand,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__tagline,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__actions,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__socials,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__social,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__accordion,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__column,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__heading,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__nav,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__nav a,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__business-info,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__areas-served,
footer.wp-block-template-part .zd-bg-light .zerodigital-compliance-bar--footer-strip,
footer.wp-block-template-part .zd-bg-light .zerodigital-compliance-bar__text,
footer.wp-block-template-part .zd-bg-light .zerodigital-compliance-bar__fca {
	color: var(--wp--preset--color--black);
}

/* The green, brought through the footer the same way as the rest of the page:
 * the Review Us button is sage (section 4), and here the column headings, the
 * social chips and the rule above the disclaimer pick it up too.
 *
 * Headings: deep sage text, 6:1 on cream. They are <summary> elements — the
 * columns fold into an accordion on phones — so they are named by element. */
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__column > summary {
	color: var(--wp--preset--color--primary);
}

/* Social chips: the footer's own colour inside a sage ring, with a black icon
 * — the same pairing as the Client Portal outline — filling to sage on hover
 * like it does. The fill is transparent rather than a named colour so the
 * chips always match whatever the footer is set to. They sat on a translucent
 * black wash designed for a dark footer, and this rule's fill would otherwise
 * hold through hover, so the hover is restated. */
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__social {
	background-color: transparent;
	border: var(--rj-keyline-w) solid var(--wp--preset--color--sage);
	color: var(--wp--preset--color--black);
}

footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__social:hover,
footer.wp-block-template-part .zd-bg-light .zerodigital-footer-columns__social:focus-visible {
	background-color: var(--wp--preset--color--sage);
}

/* The hairline between the link columns and the disclaimer, in the keyline
 * green. The selector matches the parent's own rule for the strip, which
 * would otherwise win on specificity. */
footer.wp-block-template-part .wp-block-group.zd-bg-light > .zerodigital-compliance-bar.zerodigital-compliance-bar--footer-strip {
	border-top-color: var(--wp--preset--color--accent);
}

/* Footer column gaps, capped.
 *
 * The block's gaps grow with the viewport (up to 5rem beside the brand column,
 * 3rem between link columns) but the footer is capped at the site width, so on
 * screens past about 1600px the gaps kept growing while the space didn't and
 * the four link columns wrapped onto two rows. Capping both gaps holds them on
 * one row at every desktop width. Matches the block's own 783px breakpoint. */
@media (min-width: 783px) {
	.zerodigital-footer-columns {
		column-gap: clamp(2rem, 4vw, 3rem);
	}

	.zerodigital-footer-columns__accordion {
		gap: clamp(1.5rem, 2.5vw, 2.5rem);
	}
}