/**
 * Kadence variable overrides.
 *
 * Single place to retune Kadence theme + Kadence Blocks design tokens, so overrides are not
 * scattered through component stylesheets or the Customizer's Additional CSS.
 *
 * WHY `:root:root` AND NOT `:root`
 * --------------------------------
 * Kadence emits its variables from three places, printed in this order on the front end:
 *
 *   13. <style id="kadence-global-inline-css">                 :root { --global-palette1 … }
 *   18. kadence-child/style.css                               (this theme)
 *   20. <style id="kadence-blocks-global-variables-inline-css"> :root { --global-kb-font-size-* }
 *   24+ per-block stylesheets (style-blocks-image.css, …)
 *
 * Anything this theme declares on a plain `:root` ties on specificity with those inline
 * blocks and then loses on source order to whatever WordPress prints after us — which is a
 * moving target as blocks are added to a page. `:root:root` scores (0,2,0) against `:root`'s
 * (0,1,0), so it wins outright no matter where it lands in the cascade, and we avoid
 * `!important` entirely.
 *
 * RULES vs VARIABLES
 * ------------------
 * Variables live in the `:root:root` block below. Component-level defaults live in the
 * COMPONENT DEFAULTS section at the bottom.
 *
 * Rules here must be written to win on *specificity*, not order: Kadence prints per-block
 * stylesheets on demand as blocks render, so their position moves depending on what is on
 * the page. Where a rule has to beat a Kadence selector, match or exceed its specificity and
 * say so in a comment. Never use `!important` — it would also stomp the per-block settings
 * authors choose in the editor, which must keep winning.
 */

:root:root {

	/* ---------------------------------------------------------------- forms
	 *
	 * Kadence Blocks never declares these — they are only ever read with a fallback, e.g.
	 * `border-radius: var(--kb-form-border-radius, 3px)` in style-blocks-advanced-form.css.
	 * Declaring them here is what gives them a value; there is nothing to out-specify.
	 *
	 * 4px matches Corner Radius/Input in the Figma design system.
	 */
	--kb-form-border-radius: 4px;

	/* Other form tokens Kadence Blocks reads, left commented until they are needed.
	 * Consumed by .kb-form-basic-style inputs, selects, checkboxes and file buttons.
	 *
	 * --kb-form-border-width: 1px;
	 * --kb-form-border-color: #cddbdb;
	 * --kb-form-border-focus-color: #007373;
	 * --kb-form-background-color: #fff;
	 * --kb-form-background-focus-color: #fff;
	 * --kb-form-text-color: #2a3838;
	 * --kb-form-text-focus-color: #0e1a1a;
	 * --kb-form-placeholder-color: #5a6a6a;
	 * --kb-form-accent-color: #005050;
	 * --kb-form-check-color: #005050;
	 * --kb-form-help-color: #5a6a6a;
	 * --kb-form-font-size: 16px;
	 * --kb-form-line-height: 1.5;
	 * --kb-form-h-padding: 12px;
	 * --kb-form-v-padding: 10px;
	 * --kb-form-btn-h-padding: 24px;
	 * --kb-form-btn-v-padding: 12px;
	 */

	/* ---------------------------------------------------------------- misc block tokens
	 *
	 * --kb-border-color: #cddbdb;
	 * --kb-border-dark-color: #002828;
	 * --kb-button-icon-size: 1em;
	 */

	/* ---------------------------------------------------------------- theme globals
	 *
	 * Declared by <style id="kadence-global-inline-css"> BEFORE this file, so plain source
	 * order would already win — but keep them here on `:root:root` too so precedence does
	 * not depend on Kadence's print order staying put across plugin updates.
	 *
	 * Set the palette from Appearance > Customize where possible; only override here when
	 * the Customizer cannot express what is needed.
	 *
	 * --global-palette1: #005050;
	 * --global-palette2: #007373;
	 * --global-palette3: #0e1a1a;
	 * --global-palette8: #e6eded;
	 * --global-palette9: #fff;
	 * --global-content-boxed-padding: 32px;
	 */

	/* ---------------------------------------------------------------- block font sizes
	 *
	 * These ARE declared by <style id="kadence-blocks-global-variables-inline-css">, which
	 * WordPress prints AFTER this stylesheet — they are the reason for `:root:root`. A plain
	 * `:root` here would be silently ignored.
	 *
	 * --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
	 * --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
	 * --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
	 * --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
	 * --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
	 * --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
	 */

	/* ---------------------------------------------------------------- navigation
	 *
	 * Width of the dropdown chevron button. Kadence's 1.6em default is 22.4px in this header,
	 * just under the 24px minimum target size (WCAG 2.5.8). Kadence also reads this variable
	 * for the link padding that makes room for the button, so the two grow together. An
	 * unregistered custom property keeps `em` unresolved until the nav uses it, so it still
	 * scales with the nav's font size.
	 */
	--kb-nav-drop-icon-width: max(24px, 1.6em);
}

/* ==========================================================================
   MOBILE SPACING SCALE
   ========================================================================== */

/*
 * Kadence Blocks sizes section padding from a spacing scale — rows emit things like
 *
 *   padding-top: var(--global-kb-spacing-5xl, 10rem)
 *
 * but nothing on the site ever DECLARES those variables. Across every page audited, all 609
 * references resolve to the literal fallback baked into the var() call, and that fallback is
 * a desktop value. The scale is therefore fixed: 10rem of padding on a 1440px canvas is also
 * 10rem on a 390px phone, where it is 160px of empty screen above a heading.
 *
 * The audit found 200 of 214 rows carrying vertical padding with no mobile override at all —
 * 93%. DR-109, DR-110, DR-112 and DR-113 are four instances people happened to report; the
 * cause is the whole scale, not those four rows.
 *
 * WHY DEFINE THE TOKENS RATHER THAN OVERRIDE THE ROWS
 * ---------------------------------------------------
 * The obvious fix — a media query re-padding `.kb-row-layout-id... > .kt-row-column-wrap` —
 * cannot work cleanly. Kadence emits the desktop rule and any per-row mobile rule at exactly
 * the same specificity (0,2,0), so no selector can beat the first while still losing to the
 * second; whichever way it is written it either never applies or it stomps the fourteen rows
 * where an author did set a deliberate mobile value.
 *
 * Declaring the variables sidesteps the cascade entirely. Nothing else declares them, so
 * there is no rule to outrank — a var() that used to fall back to 10rem now simply resolves
 * to the mobile value below. Rows with an explicit mobile setting keep it and, because those
 * settings are themselves written in these same tokens, they compress in proportion rather
 * than being overridden. Anything an author typed as a raw px value is untouched, which is
 * the right outcome: a literal is a deliberate choice.
 *
 * WHAT IS AND IS NOT COMPRESSED
 * -----------------------------
 * Only the section-scale tokens move. xxs/xs/sm/md/lg (8/16/24/32/48px) already read fine on
 * a phone and are load-bearing for component-level gaps — md alone has 207 references, most
 * of them internal spacing that has nothing to do with the reported gaps. Shrinking those
 * would be a redesign, not a fix.
 *
 * Scoped to Kadence's own 767px breakpoint so the two agree. If the tablet range needs the
 * same treatment later, add a second block at max-width: 1024px with values between these
 * and the desktop defaults.
 */
@media (max-width: 767px) {

	:root:root {
		--global-kb-spacing-xl: 2.5rem;   /* was 4rem   — 64px  -> 40px */
		--global-kb-spacing-xxl: 3rem;    /* was 5rem   — 80px  -> 48px */
		--global-kb-spacing-3xl: 3.5rem;  /* was 6.5rem — 104px -> 56px */
		--global-kb-spacing-4xl: 4rem;    /* was 8rem   — 128px -> 64px */
		--global-kb-spacing-5xl: 4.5rem;  /* was 10rem  — 160px -> 72px */
	}

	/*
	 * The first section keeps the full scale — it is clearance, not rhythm.
	 *
	 * Where the header is transparent it is positioned absolutely and overlays the section
	 * beneath it, so that section's top padding is the only thing keeping the hero's first
	 * line out from under the logo. Compressing it along with everything else is what caused
	 * DR-149: the homepage eyebrow moved up 24px and ended up 13px behind the logo. Measured
	 * before the compression it cleared by 11px, after it overlapped by 13.
	 *
	 * Restoring the tokens on this one element rather than hard-coding a pixel floor means
	 * the clearance comes back to exactly what it was, whichever token the row happens to use
	 * for its padding — there is no magic number here to drift out of step with the header.
	 *
	 * Scoped to the first row because that is the only one the header can reach. None of the
	 * four gaps this compression was asked for (DR-109, DR-110, DR-112, DR-113) is a first
	 * row, so nothing they fixed is given back.
	 *
	 * Pages tagged doral-header-solid are excluded: their header is opaque and sits in flow,
	 * so there is nothing to clear and the section should stay compressed.
	 */
	body:not(.doral-header-solid) .entry-content > .kb-row-layout-wrap:first-child > .kt-row-column-wrap {
		--global-kb-spacing-xl: 4rem;
		--global-kb-spacing-xxl: 5rem;
		--global-kb-spacing-3xl: 6.5rem;
		--global-kb-spacing-4xl: 8rem;
		--global-kb-spacing-5xl: 10rem;
	}
}

/*
 * Per-block settings chosen in the editor still win, and should: Kadence Blocks writes those
 * as inline <style> rules scoped to a block's unique class, which outranks :root:root. If a
 * value set here is not taking effect on one particular block, check that block's own
 * settings first before adding specificity here.
 */


/* ==========================================================================
   COMPONENT DEFAULTS
   ========================================================================== */

/*
 * Advanced Button icon — default 20px.
 *
 * Kadence sizes the glyph relatively:
 *
 *   .wp-block-kadence-advancedbtn .kb-svg-icon-wrap svg { width: 1em; height: 1em }
 *
 * so the icon tracks the *wrapper's font-size*. Setting font-size here is what makes that
 * svg render at 20px, and it is deliberately not `width`/`height` on the svg itself:
 * class-kadence-blocks-singlebtn-block.php:142 emits a per-block icon size as
 *
 *   .kb-btn{uid}.kb-button .kb-svg-icon-wrap { font-size: Npx; --kb-button-icon-size: Npx }
 *
 * at specificity (0,3,0). Hard-coding svg width/height would silently override that and
 * break the Icon Size control in the editor; a font-size default at (0,2,0) loses to it
 * cleanly, which is what makes this a default rather than a lock.
 *
 * --kb-button-icon-size is set alongside because the `icon-reveal` style animates the
 * wrapper's width to var(--kb-button-icon-size, 24px) on hover — left at the 24px fallback
 * a reveal button would animate to 24px around a 20px glyph.
 */
.wp-block-kadence-advancedbtn .kb-svg-icon-wrap {
	font-size: 20px;
	--kb-button-icon-size: 20px;
}

/*
 * Lighter icon stroke.
 *
 * Kadence renders these Feather icons with stroke-width hardcoded to 2 — see
 * class-kadence-blocks-singlebtn-block.php:423 — emitted as a presentation attribute on the
 * <svg>, not as CSS. There is no Icon Stroke control in the editor, so nothing authorial is
 * being overridden here, and CSS beats presentation attributes unconditionally.
 *
 * Setting it on the <svg> is enough: the child circle/line/polyline elements carry no
 * stroke-width of their own, so they inherit this. (Had any child declared its own, the
 * attribute on that child would have beaten inheritance from the parent and this rule would
 * have needed to target the children directly.)
 *
 * The value is unitless, i.e. 1 user unit in the icon's 24-unit viewBox — so at the 20px size
 * above it paints ~0.83px. That is the intended hairline weight. If a constant on-screen
 * thickness is ever needed regardless of icon size, add `vector-effect: non-scaling-stroke`
 * rather than converting this to px, which is also scaled by the viewBox.
 */
.wp-block-kadence-advancedbtn .kb-svg-icon-wrap svg {
	stroke-width: 1;
}


/*
 * Inline links on dark section backgrounds.
 *
 * Kadence paints every link from a single global — global.min.css carries
 *
 *   a { color: var(--global-palette-highlight) }
 *
 * and --global-palette-highlight resolves to var(--global-palette1), #005050. That is the
 * very colour behind any row set to Palette 1, so a link inside one of those sections is
 * drawn in its own background and vanishes: a 1.0:1 contrast ratio. DR-125 reports this
 * against the "Project Outcome" copy on Vista Sands, where the "here." link is unreadable.
 *
 * Palette 2 (#007373) is the same failure one step less severe — #005050 on #007373 is
 * 1.6:1, still far under the 4.5:1 AA floor — so it is corrected here too. White lands at
 * 9.3:1 on Palette 1 and 5.7:1 on Palette 2, comfortably passing on both.
 *
 * SCOPE. Restricted to <p> and <li> on purpose:
 *   - Links wrapping an image live in a <figure>, and an underline under a picture is noise.
 *   - The Advanced Button block renders its own <a class="kb-button"> whose colours are
 *     chosen per block in the editor; those must keep winning, so they are excluded by name
 *     as well as by container.
 *   - Heading links already take `color: inherit` from global.min.css, so they follow the
 *     heading and are legible without help.
 *
 * SPECIFICITY. (0,3,2) against Kadence's (0,0,1). That is decided on specificity rather than
 * source order because per-block stylesheets print as blocks render, so their position in
 * the cascade moves with page content.
 *
 * The underline is load-bearing, not ornament: these sections already run white body copy,
 * so colour alone would leave nothing at all distinguishing a link from the text around it
 * (WCAG 1.4.1, Use of Color).
 *
 * THE .doral-on-light ESCAPE HATCH
 * -------------------------------
 * "Inside a dark row" is not the same as "on a dark background". A card can paint its own
 * light background and sit nested inside one of these rows, and a link in it is then white on
 * near-white — which is what happened to the local office address added for DR-187..DR-192,
 * measured at 1.19:1 on a #e6eded card.
 *
 * CSS cannot see that an ancestor painted itself light, so the markup has to say so. Anything
 * carrying .doral-on-light is excluded here and coloured for a light surface below. Put that
 * class on a link whenever it sits on a light card inside a dark section.
 */
.wp-block-kadence-rowlayout.has-theme-palette1-background-color :is(p, li) a:not(.kb-button):not(.button):not(.doral-on-light),
.wp-block-kadence-rowlayout.has-theme-palette2-background-color :is(p, li) a:not(.kb-button):not(.button):not(.doral-on-light) {
	color: var(--global-palette9);
	text-decoration: underline;
}

.wp-block-kadence-rowlayout.has-theme-palette1-background-color :is(p, li) a:not(.kb-button):not(.button):not(.doral-on-light):hover,
.wp-block-kadence-rowlayout.has-theme-palette2-background-color :is(p, li) a:not(.kb-button):not(.button):not(.doral-on-light):hover {
	color: var(--global-palette8);
}

/*
 * A link on a light card. Palette 1 on the #e6eded card is 7.3:1, and the underline carries
 * the same job it does above — marking the link as a link without relying on colour alone.
 * (0,1,1) beats Kadence's bare `a` rule, and the exclusion above keeps the dark-section rule
 * out of the way entirely.
 */
a.doral-on-light {
	color: var(--global-palette1);
	text-decoration: underline;
}

a.doral-on-light:hover {
	color: var(--global-palette2);
}


/* ==========================================================================
   HEADER BACKDROP
   ========================================================================== */

/*
 * Give the header a background on pages that do not supply one.
 *
 * The header block is transparent at the top of every page and only takes a background once
 * it sticks. Its logo and nav links are white, so that treatment depends entirely on the page
 * opening with something dark behind it. Where a page does not — a project with no detail
 * page, the newsroom, the terms page, search results — the header is painted white on white
 * and simply is not there until you scroll. DR-115, DR-118 and DR-128 are three reports of
 * that one fault.
 *
 * kadence_child_view_has_dark_header_backdrop() in functions.php decides which case a view is
 * in and tags the body; this hands the tagged ones the same palette-1 background the header
 * would have taken on scroll anyway. Using the sticky colour rather than inventing a new one
 * means the header does not change appearance as you scroll down these pages — it just starts
 * out looking the way it always ends up.
 *
 * WHY THE ROW INNER AND NOT <header>
 * ----------------------------------
 * The <header> element itself measures zero pixels tall. In the transparent state Kadence
 * lifts the header rows into an absolutely positioned container so they overlay the hero,
 * which collapses the element that looks like the obvious target — a background on it paints
 * nothing at all. .kadence-header-row-inner is the element Kadence paints its own row
 * backgrounds on, so matching it lands on the same geometry the sticky state uses, full
 * bleed and the full height of the bar.
 *
 * SPECIFICITY: (0,3,0), and nothing to fight — the transparent state declares no background
 * at all, since the header's Transparent Background colour is left empty. The sticky rules
 * still apply on top when scrolled, and resolve to this same colour.
 */
body.doral-header-solid .wp-block-kadence-header .kadence-header-row-inner {
	background-color: var(--global-palette1);
}

/* -----------------------------------------------------------------------------------------
 * DR-211 — the homepage press carousel starts at the viewport edge
 * -----------------------------------------------------------------------------------------
 * Every other section on the homepage is a row with Kadence's "inherit max width" on, so its
 * contents sit inside the 1290px container: at a 1665px viewport they begin 212px in. The
 * "Recent press." row is the one exception. It was made full width so the cards can run off
 * the right-hand edge and signal that the carousel scrolls — but that switched off the left
 * inset along with the right one, so the heading and the first card were landing at 24px,
 * 188px to the left of everything above them. That is the step the ticket is pointing at.
 *
 * What is wanted is asymmetric: the left edge lined up with every other section, the right
 * edge still running off the screen. So rather than give the row its container back, this
 * reproduces the container's own left edge as padding, and leaves the right at 0.
 *
 * The expression is the container's geometry, not an approximation of it: a centred 1290px
 * box sits max(0, (100% - 1290px) / 2) from the edge, and its own 24px of padding goes inside
 * that. Below 1290px the max() collapses to 0 and this resolves to the same 24px the
 * container itself falls back to, so the two stay in step at every width instead of needing a
 * breakpoint. Verified against a neighbouring row: both land on 212px at 1665px.
 *
 * KEYED ON THE BLOCK ID, WHICH IS THE COST OF IT
 * ----------------------------------------------
 * 12_03553d-9f is this row on the homepage (post 12). Kadence writes padding-right:0 for this
 * block and no padding-left at all, so there is nothing here to override and no specificity
 * to win — this only fills in the side Kadence leaves unset. The tradeoff is that deleting
 * and rebuilding the section in the editor mints a new uniqueID and this rule stops matching.
 * It is a CSS-only fix, which is the point: it deploys with the theme and needs no script run
 * on staging, unlike anything stored in the block itself.
 */
.kb-row-layout-id12_03553d-9f > .kt-row-column-wrap {
	padding-left: calc(max(0px, (100% - var(--global-content-width, 1290px)) / 2) + var(--global-content-edge-padding, 1.5rem));
}

/* -----------------------------------------------------------------------------------------
 * DR-197/198/199 — keep the stat row's values on one line
 * -----------------------------------------------------------------------------------------
 * Renaming "Date" to "Commercial Operation Date" made the longest label on the row three
 * times taller than the others. The cells are each a label stacked on a value, so the value
 * under the long label dropped with it: on Mammoth North the other three values sat at 674px
 * and "March 2026" at 734px. Four values at two different heights reads as a mistake.
 *
 * Every cell is the same height already, because they are grid columns and grid stretches
 * them. So the fix is only to stop the value sitting directly under its own label and let it
 * fall to the bottom of the cell it is in, which puts all of them on one line whatever the
 * labels above do. That holds for any label length, so it will not need revisiting if the
 * client shortens this one or renames another.
 *
 * WHAT THIS DELIBERATELY DOES NOT MATCH
 * -------------------------------------
 * "A column holding exactly two headings" also describes the two-paragraph prose columns
 * further down a project page, and bottom-aligning those would drop the second paragraph away
 * from the first. The stat row is distinguishable without resorting to block ids: it is the
 * only place this shape appears inside a three- or four-column row. The prose rows have two
 * columns, so kt-has-3-columns / kt-has-4-columns separates them cleanly, and scoping to
 * .single-project keeps it off the rest of the site entirely.
 *
 * Structural rather than keyed to uniqueIDs, so it applies to all eleven project pages at
 * once and survives a page being rebuilt in the editor.
 */
.single-project
	:is(.kt-has-3-columns, .kt-has-4-columns)
	> .wp-block-kadence-column
	> .kt-inside-inner-col:has(> .wp-block-kadence-advancedheading + .wp-block-kadence-advancedheading:last-child) {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.single-project
	:is(.kt-has-3-columns, .kt-has-4-columns)
	> .wp-block-kadence-column
	> .kt-inside-inner-col:has(> .wp-block-kadence-advancedheading + .wp-block-kadence-advancedheading:last-child)
	> .wp-block-kadence-advancedheading:last-child {
	margin-top: auto;
}

/* -----------------------------------------------------------------------------------------
 * DR-218 — the note under stock project photography
 * -----------------------------------------------------------------------------------------
 * Emitted by doral-core (includes/project-photo-note.php), which decides which projects get
 * it; this only has to make it look like a footnote rather than a paragraph.
 *
 * It appears on two different backgrounds — under the hero image on the dark teal row, and
 * under the gallery further down — so it takes its colour from whatever it lands in rather
 * than naming one. inherit plus opacity keeps it legible and quiet in both places without a
 * second rule, and without the risk of white-on-white that the dark-section link rule caused
 * on the local-office card.
 *
 * The asterisk is a span so it can be nudged without affecting the sentence, and it is
 * aria-hidden: to a screen reader "asterisk not an actual photo" is noise, and the sentence
 * says everything on its own.
 */
.doral-photo-note {
	margin: 0.5rem 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: inherit;
	opacity: 0.7;
}

.doral-photo-note__mark {
	margin-right: 0.15em;
}

/* -----------------------------------------------------------------------------------------
 * DR-240 — the investor logos, grey until you hover them
 * -----------------------------------------------------------------------------------------
 * "Can the investor logos be grey on static and change to color on hover?" Three logos, alone
 * in this row, so the row id is enough of a hook and no markup had to change. One of them is
 * an SVG, but it arrives through an <img> like the other two, so grayscale() treats all three
 * the same.
 *
 * Each logo answers for itself rather than the row lighting up together: hovering a thing and
 * having its neighbours react is the sort of effect that reads as a bug.
 *
 * WHY TOUCH GETS COLOUR
 * ---------------------
 * There is no hover on a phone, so a hover-only treatment would leave every touch visitor
 * looking at three grey logos with no way to see them as they are. The (hover: hover) query
 * means the greyscale is only applied where it can be undone; everywhere else the logos simply
 * render in colour, which is the same compromise the project map makes for its cards.
 */
@media (hover: hover) {
	.kb-row-layout-id12_8cd026-c9 img {
		filter: grayscale(1);
		transition: filter 0.2s ease;
	}

	.kb-row-layout-id12_8cd026-c9 img:hover {
		filter: grayscale(0);
	}
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.kb-row-layout-id12_8cd026-c9 img {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------------------
 * DR-242 — the About dropdown, in the site's clothes
 * -----------------------------------------------------------------------------------------
 * It was Kadence's untouched default: a square white box with no padding, no radius and no
 * shadow, hanging off a dark teal bar, with its one link set at 20px — six pixels larger than
 * the nav item it belongs to. Nothing about it said it came from this site.
 *
 * It now continues the header rather than puncturing it: the same palette-1 the bar carries,
 * so it reads as the bar extending downwards, corners rounded at the bottom, and a soft shadow
 * to lift it over the page. Links drop to 14px to match the item above them and take palette-2
 * on hover — the same teal the buttons use.
 *
 * Contrast: white on palette-1 is 8.9:1, and on the palette-2 hover 5.7:1. Both clear AA, which
 * matters more than usual here because a dropdown is read in a hurry.
 *
 * SET THROUGH KADENCE'S OWN VARIABLES, NOT OVER ITS RULES
 * ------------------------------------------------------
 * The first attempt declared background and box-shadow directly and lost: Kadence paints the
 * panel from
 *   .wp-block-kadence-navigation.navigation-desktop-orientation-horizontal .sub-menu
 * at (0,3,0), which outranks anything sensible scoped to the header, and the result was white
 * text on the white box it had left in place — worse than before the change. The block exposes
 * a --kb-nav-dropdown-* property for each of these, so setting those lets Kadence's own rule do
 * the painting with our values. No specificity contest, nothing to re-fight when the plugin
 * updates. Font size is the exception — there is no variable for it — so it stays a rule.
 *
 * DESKTOP ONLY, DELIBERATELY
 * --------------------------
 * Below 1025px this navigation renders inside the off-canvas panel, where the submenu is an
 * accordion in the flow rather than a floating panel; a radius and a drop shadow would look
 * like a mistake there. 1025px is Kadence's own breakpoint for the switch.
 */
@media (min-width: 1025px) {
	.wp-block-kadence-header {
		--kb-nav-dropdown-background: var(--global-palette1);
		--kb-nav-dropdown-box-shadow: 0 12px 28px rgb(0 0 0 / 0.22);
		--kb-nav-dropdown-border-bottom-left-radius: 6px;
		--kb-nav-dropdown-border-bottom-right-radius: 6px;
		--kb-nav-dropdown-padding-top: 6px;
		--kb-nav-dropdown-padding-bottom: 6px;
		--kb-nav-dropdown-link-padding-top: 10px;
		--kb-nav-dropdown-link-padding-bottom: 10px;
		--kb-nav-dropdown-link-padding-left: 18px;
		--kb-nav-dropdown-link-padding-right: 18px;
		--kb-nav-dropdown-link-color: var(--global-palette9);
		--kb-nav-dropdown-link-color-hover: var(--global-palette9);
		--kb-nav-dropdown-link-background-hover: var(--global-palette2);
	}

	/*
	 * Padding and radius are not read from those variables — Kadence sets padding to 0 on
	 * .wp-block-kadence-navigation .sub-menu outright, and never declares a radius — so these
	 * two are declared here. The doubled class takes it to (0,3,0) so it clears that rule
	 * regardless of which stylesheet the browser happens to load first.
	 */
	.wp-block-kadence-header .kb-nav-sub-menu.kb-nav-sub-menu {
		padding-block: 6px;
		border-radius: 0 0 6px 6px;
		overflow: hidden;
	}

	.wp-block-kadence-header .kb-nav-sub-menu a.kb-nav-link-content {
		font-size: 14px;
	}
}