/**
 * 2026 redesign foundation.
 *
 * Loaded only on requests Elementor does not render (see inc/redesign.php), and
 * every rule is still scoped to `body.barkley-redesign` on purpose: the legacy
 * `css-legacy/base.css` pins the Astra-era look with bare `body` / `a` /
 * `h1`-`h6` selectors, and the added class is what outranks them. Dropping the
 * prefix would let base.css win on any equal-specificity rule.
 *
 * Component styling (cards, hero, schedule rows, …) is deliberately not here —
 * pages are authored in Kadence Blocks against the tokens below.
 */

body.barkley-redesign {
	/* --- Palette -------------------------------------------------------- */
	--brand-green: var(--wp--preset--color--brand-green, #33462e);
	--brand-green-mid: var(--wp--preset--color--brand-green-mid, #576b52);
	--brand-green-deep: var(--wp--preset--color--brand-green-deep, #222822);
	--brand-gold: var(--wp--preset--color--brand-gold, #d3bb82);
	--brand-cream: var(--wp--preset--color--cream, #f6f8f2);
	--brand-cream-deep: var(--wp--preset--color--cream-deep, #e7ecd5);
	--brand-ink: var(--wp--preset--color--ink, #2a2c2a);
	--brand-ink-subtle: var(--wp--preset--color--ink-subtle, #878787);

	/* --brand-specialty, --brand-specialty-pale and --brand-specialty-contrast
	   are printed at :root by inc/redesign.php and swap per specialty. They are
	   deliberately not redefined here — a `var()` referring to its own name is a
	   cycle, which makes the property invalid at computed-value time. */

	/* --- Type ----------------------------------------------------------- */
	--brand-font-heading: var(--wp--preset--font-family--heading, "Frank Ruhl Libre", Georgia, serif);
	--brand-font-body: var(--wp--preset--font-family--body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);

	/* --- Shape ---------------------------------------------------------- */
	--brand-radius: 16px;
	--brand-radius-pill: 999px;
	--brand-control-height: 66px;

	/* --- Layout --------------------------------------------------------- */
	/* Figma composes at 1728 with a 1392 content column, i.e. 168px gutters. */
	--wp--style--global--content-size: 1392px;
	--wp--style--global--wide-size: 1600px;
	--wp--style--root--padding-left: clamp(20px, 9.7vw, 168px);
	--wp--style--root--padding-right: clamp(20px, 9.7vw, 168px);

	background-color: #fff;
	color: var(--brand-ink);
	font-family: var(--brand-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	/* base.css inherits Astra's 0.30px tracking; the redesign sets none. */
	letter-spacing: normal;
}

/* --- Headings ---------------------------------------------------------- */

body.barkley-redesign :is(h1, h2, h3, h4, h5, h6),
body.barkley-redesign :is(.wp-block-heading, .entry-content :is(h1, h2, h3, h4, h5, h6)) {
	color: var(--brand-green);
	font-family: var(--brand-font-heading);
	letter-spacing: normal;
	text-wrap: balance;
}

/* Figma "Headings" tokens: XX-Large 98/92 medium, X-Large 64/74 semibold,
   Large 48/54 bold, Medium 40 semibold, Small 32/36 medium, X-Small 28/34
   medium. Mapped onto h1-h6 and clamped for small screens. */

body.barkley-redesign h1 {
	font-size: clamp(2.5rem, 1.2rem + 5.2vw, 4rem);
	font-weight: 600;
	line-height: 1.16;
}

body.barkley-redesign h2 {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
	font-weight: 700;
	line-height: 1.13;
}

body.barkley-redesign h3 {
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
}

body.barkley-redesign h4 {
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	font-weight: 500;
	line-height: 1.13;
}

body.barkley-redesign h5 {
	font-size: clamp(1.375rem, 1.28rem + 0.4vw, 1.75rem);
	font-weight: 500;
	line-height: 1.22;
}

body.barkley-redesign h6 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

/* The display presets exist so authors can pick a size directly in Kadence /
   Gutenberg without inheriting a heading level's weight. */

body.barkley-redesign .has-display-1-font-size {
	line-height: 0.94;
}

body.barkley-redesign .has-display-2-font-size {
	line-height: 1.16;
}

body.barkley-redesign .has-display-3-font-size {
	line-height: 1.13;
}

body.barkley-redesign .has-display-4-font-size {
	line-height: 1.1;
}

body.barkley-redesign .has-display-5-font-size {
	line-height: 1.13;
}

body.barkley-redesign .has-display-6-font-size {
	line-height: 1.22;
}

body.barkley-redesign :is(.has-body-large-font-size, .has-body-base-font-size) {
	line-height: 1.5;
}

/* --- Copy and links --------------------------------------------------- */

body.barkley-redesign p {
	letter-spacing: normal;
}

body.barkley-redesign .is-lede {
	color: var(--brand-ink);
	font-size: var(--wp--preset--font-size--body-large, 1.25rem);
	line-height: 1.5;
}

/*
 * Content links only.
 *
 * `.barkley-chrome` marks the header and footer. They are chrome, not content:
 * they set their own link colours and must look identical on redesigned and
 * Elementor pages alike. Without the carve-out this rule (specificity 0,3,2)
 * outranks the header's own `.barkley-site-header__utility-menu a` (0,1,1) and
 * painted the utility bar's links brand-green on a brand-green bar — invisible.
 *
 * The `:not()` descendant form is Selectors Level 4 and also raises this rule's
 * specificity, which is what keeps it ahead of css-legacy/base.css.
 */

body.barkley-redesign a:not(.barkley-chrome a):not([class*="wp-block-button"]):not(.barkley-btn) {
	color: var(--brand-green);
	text-decoration-color: color-mix(in srgb, var(--brand-green) 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body.barkley-redesign a:not(.barkley-chrome a):not([class*="wp-block-button"]):not(.barkley-btn):hover,
body.barkley-redesign a:not(.barkley-chrome a):not([class*="wp-block-button"]):not(.barkley-btn):focus-visible {
	color: var(--brand-green-mid);
	text-decoration-color: currentcolor;
}

body.barkley-redesign :focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 2px;
}

/* --- Buttons ---------------------------------------------------------- */

/*
 * Two shapes only, matching the footer CTA pair in the design: a solid green
 * button and a green-outlined button on cream. Both are 66px tall with the
 * universal 16px corner, and both take the serif face — in the design the
 * button label is set in Frank Ruhl Libre, not the Noto Sans body face.
 */

body.barkley-redesign :is(.barkley-btn, .wp-block-button__link, .wp-element-button) {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border: 1px solid transparent;
	border-radius: var(--brand-radius);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	font-family: var(--brand-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	gap: 0.5rem;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	line-height: 1;
	min-height: var(--brand-control-height);
	padding: 0 2rem;
	text-decoration: none;
	-webkit-transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.barkley-redesign :is(.barkley-btn, .wp-block-button__link, .wp-element-button):not(.is-style-outline) {
	background-color: var(--brand-green);
	color: var(--brand-cream);
}

body.barkley-redesign :is(.barkley-btn, .wp-block-button__link, .wp-element-button):not(.is-style-outline):hover,
body.barkley-redesign :is(.barkley-btn, .wp-block-button__link, .wp-element-button):not(.is-style-outline):focus-visible {
	background-color: var(--brand-green-mid);
	color: #fff;
}

body.barkley-redesign .barkley-btn--outline,
body.barkley-redesign .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var(--brand-green);
	color: var(--brand-green);
}

body.barkley-redesign .barkley-btn--outline:hover,
body.barkley-redesign .barkley-btn--outline:focus-visible,
body.barkley-redesign .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body.barkley-redesign .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--brand-green);
	color: var(--brand-cream);
}

/* On a green panel the pair inverts: gold-outlined and cream-filled. */

body.barkley-redesign .has-brand-green-background-color :is(.barkley-btn, .wp-block-button__link):not(.is-style-outline) {
	background-color: var(--brand-cream);
	color: var(--brand-green);
}

body.barkley-redesign .has-brand-green-background-color .barkley-btn--outline,
body.barkley-redesign .has-brand-green-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--brand-gold);
	color: var(--brand-gold);
}

/* --- Layout seams ----------------------------------------------------- */

/*
 * WP's layout stylesheet gives every non-first child of a layout container
 * `margin-block-start: var(--wp--style--block-gap)`. At the `.wp-site-blocks`
 * level that lands on <main> and <footer>, which renders as a strip of page
 * background under the header and another above the footer.
 *
 * That is wrong for this design rather than merely untidy: the header and footer
 * are solid bands and page sections are full-bleed, so a gap between them reads
 * as a seam, not as breathing room. Vertical rhythm here is always the section's
 * own padding.
 *
 * Deliberately global. It was first fixed on the homepage, but the rule it
 * corrects is global, so every block-rendered template had the same two seams.
 * Sections that want space above them should say so with padding.
 */

body.barkley-redesign .wp-site-blocks > * {
	-webkit-margin-before: 0;
	        margin-block-start: 0;
}

/* --- Buttons: no legacy shadow, no underline -------------------------- */

/*
 * `css-legacy/base.css` styles bare `button` with `box-shadow: 3px 3px 7px #666`
 * — a heavy grey Astra-era drop shadow. Nothing in the 2026 design has it, and
 * because the selector is a bare element it lands on every real <button> that
 * does not explicitly say otherwise: the specialty slider's filter pills and
 * arrows, the Support cards' Go button, and anything added later.
 *
 * `text-decoration: none` is here for the same reason — a button is a control, and
 * an underline on one reads as a link. Underlines still belong on actual links
 * (the design underlines "Learn more" and "View More Specialties", both anchors),
 * so this deliberately targets buttons only and leaves `a` alone.
 *
 * Reset once here rather than per component, so a new button starts flat and
 * unadorned instead of inheriting decoration someone then has to discover and
 * undo. Anything that genuinely wants either can still set it.
 */

body.barkley-redesign :is(button, .button) {
	-webkit-box-shadow: none;
	        box-shadow: none;
	text-decoration: none;
}

/* --- Surfaces --------------------------------------------------------- */

body.barkley-redesign :is(.brand-surface, .wp-block-group.has-background) {
	border-radius: var(--brand-radius);
}

/* Full-bleed bands should not inherit the card corner. */

body.barkley-redesign .wp-block-group.alignfull.has-background {
	border-radius: 0;
}

body.barkley-redesign :is(img, .wp-block-image img) {
	border-radius: var(--brand-radius);
}

body.barkley-redesign .wp-block-image.is-style-rounded img {
	border-radius: var(--brand-radius-pill);
}

/* Logos and chrome imagery must stay square-cornered. */

body.barkley-redesign :is(.wp-block-site-logo, .barkley-chrome) img {
	border-radius: 0;
}

/* ---------- Scroll to top (Figma 5244:6510) ---------- */

/*
 * Same Icon Button component as the card indicators: 66px, 16px corner (a
 * rounded square, not a circle), gold with the green arrow. 39px inset matches
 * the design's distance from the right edge. Fixed and revealed by
 * src/js/frontend/to-top.js after a viewport of scrolling; the `hidden`
 * attribute it ships with keeps it out of everyone's way when JS never runs.
 */

body.barkley-redesign .barkley-to-top {
	position: fixed;
	right: 39px;
	bottom: 32px;
	z-index: 90;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 66px;
	height: 66px;
	border: 0;
	border-radius: 16px;
	background-color: var(--brand-gold);
	color: var(--brand-green);
	cursor: pointer;
	opacity: 0;
	-webkit-transform: translateY(8px);
	        transform: translateY(8px);
	-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
	transition: opacity 200ms ease, -webkit-transform 200ms ease;
	transition: opacity 200ms ease, transform 200ms ease;
	transition: opacity 200ms ease, transform 200ms ease, -webkit-transform 200ms ease;
}

body.barkley-redesign .barkley-to-top.is-visible {
	opacity: 1;
	-webkit-transform: none;
	        transform: none;
}

body.barkley-redesign .barkley-to-top:hover,
body.barkley-redesign .barkley-to-top:focus-visible {
	background-color: var(--brand-green);
	color: var(--brand-cream);
}

body.barkley-redesign .barkley-to-top:focus-visible {
	outline: 2px solid var(--brand-green-deep);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.barkley-redesign .barkley-to-top {
		-webkit-transition: none;
		transition: none;
	}
}