/**
 * 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);
	 */
}

/*
 * 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;
}