/*
Theme Name:     Peach State C-PACE
Theme URI:      https://peachstatecpace.org
Description:    Child theme of Spectra One for Peach State C-PACE, Georgia's statewide Commercial Property Assessed Clean Energy program, administered by Invest Atlanta. Design tokens live in theme.json; this stylesheet covers only what theme.json cannot express.
Author:         Invest Atlanta
Author URI:     https://www.investatlanta.com
Template:       spectra-one
Version:        1.7.0
Requires at least: 6.5
Tested up to:   6.8
Requires PHP:   7.4
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    peach-state-cpace
Tags:           block-patterns, full-site-editing, one-column, custom-colors, custom-logo, accessibility-ready
*/

/* ==========================================================================
   Peach State C-PACE — child theme styles

   Everything colour, type, and spacing related is declared in theme.json so
   it stays editable in the Site Editor. Only the following live here:

   1. Eyebrow label rule           6. Comparison table
   2. Hero grid backdrop           7. Stat hairline grid
   3. Reveal-on-scroll             8. Benefit checklist
   4. Step timeline connector      9. Footer link colours
   5. Card hover lift             10. Accessibility + print
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Section flow

   Full-bleed coloured bands must butt directly against each other. Two things
   would otherwise open gaps between them:

   a) theme.json sets blockGap to 1.5rem, which core turns into a
      margin-block-start on every sibling. Between two coloured sections that
      margin shows the body colour as a stripe.
   b) Spectra One sets .wp-site-blocks to display:flex/column, so any gap
      there separates the bands as well.

   Each section owns its own vertical padding, so the rhythm is not lost.
   Core's flow rule is wrapped in :where() and carries no specificity, so a
   single class is enough to win without !important.
   -------------------------------------------------------------------------- */
.wp-site-blocks {
	gap: 0;
}

/* The three top-level regions — header, main, footer — must not be pushed
   apart. <main> was picking up a 1.5rem margin-block-start, which showed the
   body colour as a pale band between the header and the hero. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.entry-content > .wp-block-group,
.wp-site-blocks > main > .wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Sections run edge to edge; their inner constrained layout holds the measure. */
.entry-content > .wp-block-group {
	max-width: none;
}

/* --------------------------------------------------------------------------
   0b. Single-page scrolling

   The site is one continuous page; the nav links to in-page anchors. Two things
   that need handling: smooth scrolling (opt-out under reduced motion), and an
   offset so an anchored section does not land underneath the sticky header.
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* 68px header + a little breathing room. */
.psc-section[id],
[id].psc-section {
	scroll-margin-top: 84px;
}

/* --------------------------------------------------------------------------
   0c. Two-tone headings

   The original sets the second half of most headings in light blue, and the
   hero's last line in italic peach. Both are marked up with <em>, so the two
   contexts are distinguished by ancestor rather than by extra classes.
   -------------------------------------------------------------------------- */
.psc-title em {
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--blue-light);
}

.psc-hero h1 em {
	font-style: italic;
	font-weight: 700;
	color: var(--wp--preset--color--peach-light);
}

/* On navy grounds the light blue would fight the ground, so headings there
   keep the blue for the emphasis and white for the rest. */
.has-navy-background-color .psc-title em,
.psc-hero .psc-title em {
	color: var(--wp--preset--color--blue-light);
}

/* Plain horizontal rule. Coloured here rather than through a backgroundColor
   attribute, because core/separator's generated class set is awkward to
   reproduce by hand and getting it wrong fails block validation. */
.psc-hr {
	color: var(--wp--preset--color--rule);
	border-color: var(--wp--preset--color--rule);
}

/* Short gradient rule that sits under certain headings. */
.psc-rule {
	width: 36px;
	height: 2px;
	border: 0;
	margin: 0.85rem 0;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--blue-mid),
		var(--wp--preset--color--blue-light)
	);
}

/* --------------------------------------------------------------------------
   0d. Centred section headers

   Four of the sections centre their eyebrow, heading, and standfirst; the rest
   are left-aligned. Applied per-section rather than globally.
   -------------------------------------------------------------------------- */
.psc-heads--center {
	text-align: center;
}

.psc-heads--center .psc-eyebrow {
	justify-content: center;
}

.psc-heads--center .psc-rule {
	margin-left: auto;
	margin-right: auto;
}

.psc-heads--center p {
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   1. Eyebrow label — small uppercase kicker preceded by a short rule
   Used above every section heading. Colour comes from theme.json h6 styles.
   -------------------------------------------------------------------------- */
.psc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.psc-eyebrow::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	flex-shrink: 0;
	background: currentColor;
}

/* Pill variant used in the hero */
.psc-eyebrow--pill {
	background: rgba(212, 100, 58, 0.12);
	border: 1px solid rgba(212, 100, 58, 0.25);
	border-radius: 20px;
	padding: 0.4rem 0.9rem;
	color: var(--wp--preset--color--peach-light);
}

.psc-eyebrow--pill::before {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--peach);
}

/* --------------------------------------------------------------------------
   2. Hero grid backdrop — faint 60px graph paper over the navy hero
   -------------------------------------------------------------------------- */
.psc-hero {
	position: relative;
	overflow: hidden;
}

.psc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.04;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
	background-size: 60px 60px;
}

/* The homepage hero fills the viewport below the sticky header, with its
   content vertically centred — matching the original's full-height opening. */
.psc-hero--home {
	min-height: calc(100vh - 68px);
	display: flex;
	align-items: center;
}

.psc-hero--home > * {
	width: 100%;
}

/* Below the point where the two hero columns stack, a locked full height would
   crop the stats panel, so let it grow instead. */
@media (max-width: 781px) {
	.psc-hero--home {
		min-height: 0;
	}
}

/* Hairline of peach light along the bottom edge */
.psc-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	z-index: 1;
	background: linear-gradient(90deg, transparent, rgba(212, 100, 58, 0.4), transparent);
}

.psc-hero > * {
	position: relative;
	z-index: 2;
}

/* Glass card sitting on the navy — hero stats, contact card */
.psc-glass {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Programme contact — circular portrait beside the name
   -------------------------------------------------------------------------- */
.psc-contact-person {
	margin-bottom: 1.5rem;
}

.psc-avatar {
	margin: 0;
	flex-shrink: 0;
	width: 88px;
}

.psc-avatar img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	/* The source is square, but object-fit guards against a future replacement
	   with a different ratio being squashed. */
	object-fit: cover;
	object-position: center top;
	border: 2px solid rgba(255, 255, 255, 0.18);
}

/* Small caps label at the top of a glass card, ruled off from its contents */
.psc-glass-label {
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   3. Reveal on scroll — progressive enhancement.
   The .psc-reveal class only dims content once JS has confirmed support,
   so the site is fully readable with JavaScript disabled.
   -------------------------------------------------------------------------- */
.js .psc-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--wp--custom--transition--reveal, 0.65s ease),
		transform var(--wp--custom--transition--reveal, 0.65s ease);
}

.js .psc-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Arriving at a section via an anchor shows it immediately — fading in would
   mean staring at a blank screen after the jump. */
.js .psc-reveal.is-instant {
	transition: none;
	transition-delay: 0s;
}

.js .psc-reveal--d1 { transition-delay: 0.1s; }
.js .psc-reveal--d2 { transition-delay: 0.2s; }
.js .psc-reveal--d3 { transition-delay: 0.3s; }
.js .psc-reveal--d4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   4. Step timeline — five numbered circles joined by a hairline
   -------------------------------------------------------------------------- */
.psc-steps {
	position: relative;
}

/* The connector sits behind the circles, inset so it never pokes out */
.psc-steps::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 10%;
	right: 10%;
	height: 1px;
	z-index: 0;
	background: var(--wp--preset--color--rule);
}

.psc-steps > .wp-block-column {
	position: relative;
	z-index: 1;
}

.psc-step-number {
	width: 56px;
	height: 56px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--peach);
	color: var(--wp--preset--color--peach);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Stack into a left-aligned list once the row no longer fits */
@media (max-width: 1024px) {
	.psc-steps::before {
		display: none;
	}

	.psc-steps > .wp-block-column {
		display: flex;
		gap: 1.25rem;
		align-items: flex-start;
		text-align: left;
	}

	.psc-step-number {
		margin: 0;
		flex-shrink: 0;
	}
}

/* --------------------------------------------------------------------------
   5. Card hover lift — project cards and any bordered card group
   -------------------------------------------------------------------------- */
.psc-card {
	transition:
		border-color var(--wp--custom--transition--fast, 0.2s ease),
		box-shadow var(--wp--custom--transition--fast, 0.2s ease),
		transform 0.2s ease;
}

.psc-card:hover,
.psc-card:focus-within {
	border-color: var(--wp--preset--color--peach-light) !important;
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* Emoji or icon glyph leading a card */
.psc-icon {
	display: block;
	font-size: 1.75rem;
	line-height: 1;
}

/* Rounded tinted tile behind a small icon */
.psc-icon-tile {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--peach-pale);
	font-size: 1.15rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.psc-icon-tile--dark {
	background: var(--wp--preset--color--peach);
}

.psc-icon-tile--neutral {
	background: var(--wp--preset--color--cream-dark);
}

/* --------------------------------------------------------------------------
   6. Comparison table — Traditional Loan vs C-PACE
   Built on core/table so the content stays editable in the block editor.
   -------------------------------------------------------------------------- */
/* The hook class may sit on the wrapping group (patterns) or on the table
   figure itself (sidebar block style), so both are matched throughout. */
.psc-compare,
.is-style-psc-compare {
	--psc-compare: 1;
}

.psc-compare table,
.is-style-psc-compare table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.psc-compare thead th,
.is-style-psc-compare thead th {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.95rem;
	font-weight: 600;
	text-align: left;
	padding: 0.9rem 1.15rem;
	border: none;
}

/* Second column is the favourable one — tint it peach */
.psc-compare thead th:last-child {
	background: var(--wp--preset--color--peach);
}

.psc-compare tbody td {
	padding: 0.85rem 1.15rem;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--text-mid);
	vertical-align: top;
	line-height: 1.6;
}

/* Even rows only, matching the original. The right-hand column is deliberately
   not tinted — the peach header is enough to distinguish it, and tinting the
   whole column made the table read as a highlight block rather than a
   comparison. */
.psc-compare tbody tr:nth-child(even) td,
.is-style-psc-compare tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--cream);
}

.psc-compare tbody tr:last-child td,
.is-style-psc-compare tbody tr:last-child td {
	border-bottom: none;
}

/* Rounded clipped frame. The figure is a descendant when the hook class is on
   the group, and is the element itself when applied as a block style. */
.psc-compare .wp-block-table,
.wp-block-table.is-style-psc-compare {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--rule);
}

/* On narrow screens let the table scroll rather than crush the columns */
@media (max-width: 680px) {
	.psc-compare .wp-block-table,
	.wp-block-table.is-style-psc-compare {
		overflow-x: auto;
	}

	.psc-compare table,
	.is-style-psc-compare table {
		min-width: 34rem;
	}
}

/* --------------------------------------------------------------------------
   7. Stat hairline grid — 1px gaps read as dividers against the parent
   -------------------------------------------------------------------------- */
.psc-stat-grid {
	background: rgba(255, 255, 255, 0.07);
	border-radius: 8px;
	overflow: hidden;
	gap: 1px !important;
}

.psc-stat-grid > .wp-block-column {
	background: rgba(255, 255, 255, 0.03);
	padding: 0.9rem;
	text-align: center;
}

.psc-stat-number {
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--peach-light);
	margin-bottom: 0.2rem;
}

.psc-stat-label {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.45);
}

/* Numbered fact rows in the "Program at a Glance" panel */
.psc-fact {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.psc-fact:last-child {
	border-bottom: none;
}

.psc-fact-num {
	min-width: 52px;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--peach-light);
}

/* --------------------------------------------------------------------------
   8. Benefit checklist — peach circle with a white tick
   -------------------------------------------------------------------------- */
.psc-checklist {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.psc-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.65rem;
	line-height: 1.5;
}

.psc-checklist li::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-top: 0.25em;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--blue-mid);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Peach variant for use on light backgrounds */
.psc-checklist--peach li::before {
	background-color: var(--wp--preset--color--peach);
}

/* --------------------------------------------------------------------------
   9. Footer — muted links that warm to peach on hover
   -------------------------------------------------------------------------- */
.psc-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast, 0.2s ease);
}

.psc-footer a:hover,
.psc-footer a:focus {
	color: var(--wp--preset--color--peach-light);
	text-decoration: underline;
}

.psc-footer .wp-block-heading {
	color: rgba(255, 255, 255, 0.35);
}

/* Footer link lists carry no bullets */
.psc-footer-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.psc-footer-legal,
.psc-footer-legal a {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.3);
}

/* Brand wordmark — "Peach State C-PACE" with C-PACE picked out in peach */
.psc-brand-name a {
	color: inherit;
	text-decoration: none;
}

.psc-brand-name span {
	color: var(--wp--preset--color--peach-light);
}

/* Brand mark — the "PS" square */
.psc-brand-mark {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Navigation — navy bar, peach CTA pill.
   Spectra One supplies the sticky behaviour; this is colour only.
   -------------------------------------------------------------------------- */
.psc-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast, 0.2s ease);
}

.psc-nav .wp-block-navigation-item__content:hover,
.psc-nav .wp-block-navigation-item__content:focus,
.psc-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
}

/* Last item in the menu is the Express Interest call to action */
.psc-nav .wp-block-navigation-item.psc-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--peach);
	color: var(--wp--preset--color--white);
	padding: 0.45rem 1.15rem;
	border-radius: 4px;
}

.psc-nav .wp-block-navigation-item.psc-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--peach-mid);
}

/* Sticky behaviour.

   Core puts position:sticky on the nav group itself, but that group's
   containing block is the .wp-block-template-part wrapper, which is only as
   tall as the header — so the sticky element has no room to travel and never
   sticks. Promoting the wrapper gives it .wp-site-blocks as its containing
   block, which spans the whole page.

   The admin-bar offset is carried over so the header does not hide behind the
   toolbar for logged-in editors. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, 0px);
	z-index: 200;
}

/* Core does not always define that offset variable, in which case the top of
   the sticky header ends up behind the fixed admin bar for logged-in users.
   The admin bar is 32px on desktop, 46px on tablet, and stops being fixed
   below 600px, so it needs no offset there. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

body.admin-bar .psc-section[id] {
	scroll-margin-top: 116px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}

	body.admin-bar .psc-section[id] {
		scroll-margin-top: 130px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}

	body.admin-bar .psc-section[id] {
		scroll-margin-top: 84px;
	}
}

/* With the wrapper sticky, the inner group must not be — and its generated
   z-index of 10 would let later sections cover it. */
.wp-site-blocks > header.wp-block-template-part > .psc-nav {
	position: static;
	z-index: auto;
}

/* Shadow appears once the page has scrolled past 40px (added by site.js) */
.psc-nav {
	transition: box-shadow 0.3s ease;
}

.psc-nav.is-scrolled {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Mobile drawer inherits the navy ground */
.psc-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy);
	padding-top: 5rem;
}

.psc-nav .wp-block-navigation__responsive-container.is-menu-open a {
	color: rgba(255, 255, 255, 0.85);
}

/* Outline button — the secondary hero action. Matched on the button wrapper
   (patterns) and via the registered block style (editor sidebar). */
.psc-btn-outline .wp-block-button__link,
.is-style-psc-btn-outline .wp-block-button__link {
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: none;
}

.psc-btn-outline .wp-block-button__link:hover,
.psc-btn-outline .wp-block-button__link:focus,
.is-style-psc-btn-outline .wp-block-button__link:hover,
.is-style-psc-btn-outline .wp-block-button__link:focus {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Block style aliases

   The patterns apply these treatments as plain classes. register_block_style()
   in functions.php exposes the same treatments in the editor sidebar, but core
   prefixes those with is-style-, so each needs an alias here. Without these,
   picking a style from the sidebar would apply a class nothing matches.
   -------------------------------------------------------------------------- */
.is-style-psc-card {
	transition:
		border-color var( --wp--custom--transition--fast, 0.2s ease ),
		box-shadow var( --wp--custom--transition--fast, 0.2s ease ),
		transform 0.2s ease;
}

.is-style-psc-card:hover,
.is-style-psc-card:focus-within {
	border-color: var( --wp--preset--color--peach-light ) !important;
	box-shadow: var( --wp--preset--shadow--card );
	transform: translateY( -2px );
}

.is-style-psc-glass {
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	border-radius: 12px;
}

.is-style-psc-checklist,
.is-style-psc-checklist-peach {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.is-style-psc-checklist li,
.is-style-psc-checklist-peach li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.65rem;
	line-height: 1.5;
}

.is-style-psc-checklist li::before,
.is-style-psc-checklist-peach li::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-top: 0.25em;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var( --wp--preset--color--blue-mid );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.is-style-psc-checklist-peach li::before {
	background-color: var( --wp--preset--color--peach );
}

.is-style-psc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--blue-mid );
}

.is-style-psc-eyebrow::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	flex-shrink: 0;
	background: currentColor;
}

/* --------------------------------------------------------------------------
   Links on dark grounds

   theme.json sets the global link colour to blue-mid, which is correct on the
   light sections but measures 1.68:1 against the navy — unreadable. Inside the
   navy hero, glass panels, and any navy section, links take the peach-light
   accent instead, which measures 7.6:1.

   Buttons are excluded: they carry their own background and colour.
   -------------------------------------------------------------------------- */
.psc-hero a:not(.wp-element-button):not(.wp-block-navigation-item__content),
.psc-glass a:not(.wp-element-button),
.has-navy-background-color a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
	color: var(--wp--preset--color--peach-light);
	text-decoration-color: rgba(242, 196, 168, 0.5);
}

.psc-hero a:not(.wp-element-button):hover,
.psc-glass a:not(.wp-element-button):hover,
.has-navy-background-color a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--white);
	text-decoration-color: currentColor;
}

/* The nav sits on navy too, but has its own colour treatment above. */
.psc-nav a {
	text-decoration-color: transparent;
}

/* --------------------------------------------------------------------------
   Embedded Microsoft Form

   A cross-origin iframe cannot report its content height, so the height is
   set here. Too short and the form gets its own inner scrollbar nested inside
   the page scroll, which is unpleasant to use. Tune this number if the number
   of questions changes.
   -------------------------------------------------------------------------- */
.psc-form-embed iframe {
	width: 100%;
	min-height: 1200px;
	border: none;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
}

/* Forms grow taller as they get narrower, so give small screens more room. */
@media (max-width: 600px) {
	.psc-form-embed iframe {
		min-height: 1500px;
	}
}

/* --------------------------------------------------------------------------
   Custom scrollbar — matches the peach accent
   -------------------------------------------------------------------------- */
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		width: 6px;
	}

	::-webkit-scrollbar-track {
		background: var(--wp--preset--color--cream-dark);
	}

	::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--peach-mid);
		border-radius: 3px;
	}
}

/* --------------------------------------------------------------------------
   10. Accessibility and print
   -------------------------------------------------------------------------- */

/* Skip link, visible only on focus */
.psc-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.psc-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Honour reduced-motion: no reveals, no lifts, no smooth scroll */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .psc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.psc-card,
	.psc-card:hover {
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Respect forced-colors / high-contrast mode */
@media (forced-colors: active) {
	.psc-checklist li::before {
		background: ButtonText;
	}

	.psc-card {
		border: 1px solid CanvasText;
	}
}

@media print {
	.psc-nav,
	.psc-footer,
	.psc-form-embed,
	.psc-hero::before,
	.psc-hero::after {
		display: none !important;
	}

	.js .psc-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}