/*
Theme Name: ProDigital
Theme URI: https://www.prodigitalhealthcare.com/
Author: ProDigital Strategy
Description: Custom block theme for ProDigital Healthcare Marketing. No page builder, no framework dependency. The design system lives in theme.json; layout vocabulary lives in /patterns. Built to be written to programmatically.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prodigital
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready
*/

/*
 * Everything visual belongs in theme.json.
 *
 * This file exists for the two things theme.json genuinely cannot express:
 * accessibility affordances and a small number of layout behaviours with no
 * block-support equivalent. If you find yourself adding colour, spacing or
 * type here, it belongs in theme.json instead. A rule in this file that
 * duplicates a token is a bug, because it will not travel to the next site.
 */

/* Skip link. Visible only on keyboard focus. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 999;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 4px;
	text-decoration: none;
}

/* Visible focus everywhere. Never remove without a replacement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Screen reader text, matching core's convention. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	top: 1rem;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	z-index: 100000;
}

/* Wide content must scroll inside itself, never the page body. */
.wp-block-table,
.wp-block-code,
.wp-block-preformatted {
	overflow-x: auto;
}

/* Headings should not orphan a single word onto their own line. */
h1, h2, h3, h4 {
	text-wrap: balance;
}

/* The details block is our FAQ accordion. Native <details> is keyboard
   operable by default, which is the whole reason we use it over a custom
   toggle. Style the marker without breaking that. */
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	float: right;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
}

.wp-block-details[open] summary::after {
	content: "\2212"; /* minus */
}

/* Respect reduced motion globally. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Sticky header.
   The template part supplies the <header> element; keep it pinned and above
   page content. Backdrop blur keeps it legible over imagery as it scrolls. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
}

/* Anchored headings must clear the sticky header when linked from a TOC. */
:where(h2, h3, h4)[id] {
	scroll-margin-top: 6rem;
}

/* Split hero: the team photograph is a transparent cutout, so it sits on the
   band rather than being cropped into a background. Bottom-aligned so the
   figures stand on the section edge. */
/* Baseline images.
   Every cutout figure on this site sits flush on the bottom edge of its
   section. That is a deliberate design decision, so the rule is global rather
   than per-section: no bottom margin, no descender gap, bottom-aligned. */
.is-hero-figure {
	margin-bottom: 0 !important;
	display: flex;
	align-items: flex-end;
}

.is-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 34rem;
	object-fit: contain;
	object-position: bottom center;
	margin-bottom: 0;
	vertical-align: bottom;
}

/* Columns holding a baseline figure must not add their own bottom padding. */
.wp-block-column:has(> .is-hero-figure) {
	padding-bottom: 0 !important;
	align-self: flex-end;
}

@media (max-width: 781px) {
	.is-hero-figure img {
		max-height: 22rem;
	}
}

/* Cards sitting on a tinted band: shadow rather than border, so they lift off
   the colour instead of outlining against it. */
.card-lift {
	box-shadow: 0 1px 2px rgb(19 26 36 / 6%), 0 18px 40px -24px rgb(19 26 36 / 45%);
}

/* Icon sits beside the heading, not above it. */
.card-heading-row {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
}

.card-heading-row img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin-top: 0.15rem;
}

/* Client logo wall: greyscale until hover, so the logos read as one set. */
.logo-wall img {
	filter: grayscale(100%);
	opacity: 0.62;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-wall img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.logo-wall img {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Brand pixel motif.

   The three-square cascade from the ProDigital mark. This is the real
   brand asset (vector-PD.webp, 314 bytes) rather than a redrawn copy,
   so it stays identical to the logo and to the rest of the site.

   Applied as a background image rather than markup so it stays out of
   post content: any group or heading can carry .brand-pixels and the
   pipeline never has to generate decorative elements.
   ------------------------------------------------------------------ */
.brand-pixels::before,
.brand-pixels-center::before {
	content: "";
	display: block;
	width: 55px;
	height: 47px;
	margin-bottom: 1.25rem;
	background-image: url("/wp-content/uploads/2023/07/vector-PD.webp");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Centred variant, for sections whose heading is centred. */
.brand-pixels.has-text-align-center::before,
.brand-pixels-center::before {
	margin-left: auto;
	margin-right: auto;
}

/* Eyebrow with flanking rules, matching the live site's section labels. */
.eyebrow-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
}

.eyebrow-rule::before,
.eyebrow-rule::after {
	content: "";
	height: 1px;
	width: 2rem;
	background: currentColor;
	opacity: 0.6;
}

/* Service-card lede carries a vertical accent bar. */
.lede-bar {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 0.9rem;
	line-height: 1.35;
}

/* Secondary links in the brand cyan. */
/* Matches the class on a wrapper or directly on the anchor. Both spellings
   occur: patterns put it on the paragraph, generated content puts it on the
   link itself, and a rule that only handles one silently does nothing. */
.link-cyan a,
a.link-cyan {
	color: #1CA9DE;
	text-decoration: none;
}

.link-cyan a:hover,
a.link-cyan:hover {
	text-decoration: underline;
}

/* Scattered pixel accents on the closing CTA band. */
.cta-band {
	position: relative;
	overflow: hidden;
}

.cta-band::before,
.cta-band::after {
	content: "";
	position: absolute;
	background-image: url("/wp-content/uploads/2023/07/vector-PD.webp");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.9;
}

.cta-band::before {
	top: 18%;
	left: 8%;
	width: 60px;
	height: 51px;
}

.cta-band::after {
	bottom: 22%;
	right: 10%;
	width: 46px;
	height: 39px;
}

@media (max-width: 781px) {
	.cta-band::before,
	.cta-band::after {
		display: none;
	}
}

/* Hero carries a second pixel accent to the right of the CTA, echoing the
   marker above the headline. */
.hero-pixel-accent {
	position: relative;
}

.hero-pixel-accent::after {
	content: "";
	position: absolute;
	left: 320px;
	bottom: 6px;
	width: 46px;
	height: 39px;
	background-image: url("/wp-content/uploads/2023/07/vector-PD.webp");
	background-repeat: no-repeat;
	background-size: contain;
}

@media (max-width: 900px) {
	.hero-pixel-accent::after { display: none; }
}

/* ---------------------------------------------------------------- footer */

.site-footer h2 {
	color: var(--wp--preset--color--highlight);
}

.site-footer a {
	color: var(--wp--preset--color--footer-text);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--highlight);
	text-decoration: underline;
}

.footer-line--phone a {
	color: var(--wp--preset--color--highlight);
}

/* Icons on the contact lines, drawn in CSS so no image requests are added. */
.footer-line {
	position: relative;
	padding-left: 2.1rem;
}

.footer-line::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--wp--preset--color--highlight);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.footer-line--place::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
}

.footer-line--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

.footer-line--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.footer-services li {
	margin-bottom: 0.85rem;
	line-height: 1.4;
}

/* Social icons as cyan outlined circles. */
.footer-social .wp-social-link {
	background: transparent !important;
	border: 1.5px solid var(--wp--preset--color--highlight);
	border-radius: 50%;
	margin-right: 0.6rem;
}

.footer-social .wp-social-link svg {
	width: 1em;
	height: 1em;
}

.footer-bar a {
	color: #06384A;
	text-decoration: none;
}

.footer-bar a:hover { text-decoration: underline; }

.footer-bar p { color: #06384A; }

/* Footer is the page's last band; the theme's default top margin would leave a
   gap above it. */
.wp-site-blocks > footer { margin-block-start: 0; }

/* ------------------------------------------------- testimonial carousel */

/* Scroll-snap rather than a JS slider: no dependency, keyboard and touch
   scrollable, and it degrades to a plain scrolling row if anything fails. */
.testimonial-rail {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 1rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.testimonial-slide {
	flex: 0 0 min(100%, 62rem);
	scroll-snap-align: center;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgb(19 26 36 / 8%), 0 24px 50px -30px rgb(19 26 36 / 55%);
}

.stars-row {
	align-items: center;
	gap: 5px;
}

.stars-row p { margin: 0 0 0 0.5rem; }

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

/* ------------------------------------------------------------ form band */

.form-band {
	position: relative;
	overflow: hidden;
}

/* Pale cyan panel bleeding off the right edge, behind the form column. */
.form-band::after {
	content: "";
	position: absolute;
	top: 12%;
	bottom: 0;
	right: 0;
	width: min(42vw, 580px);
	background: #CFF1FB;
	z-index: -1;
}

@media (max-width: 781px) {
	.form-band::after { display: none; }
}

/* Eyebrow with a single leading rule, as used above the form. */
.eyebrow-lead {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 600;
	margin-top: 0.5rem;
}

.eyebrow-lead::before {
	content: "";
	height: 2px;
	width: 1.75rem;
	background: currentColor;
}

/* Placeholder until Gravity Forms is installed on this environment. */
.gf-slot {
	margin-top: 2rem;
	min-height: 26rem;
	border: 1px dashed var(--wp--preset--color--hairline, #C9D3DF);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--contrast-soft);
	font-size: 0.9rem;
}

.gf-slot::after {
	content: "Gravity Forms not yet installed on this environment";
}

/* WordPress adds .has-border-color when a block declares any border side, and
   paints the undeclared sides in the inherited text colour. Default them away;
   blocks that want a border still set width and colour explicitly. */
.has-border-color:not([style*="border-top-width"]) { border-top-width: 0; }
.has-border-color:not([style*="border-left-width"]) { border-left-width: 0; }
.has-border-color:not([style*="border-right-width"]) { border-right-width: 0; }
.has-border-color:not([style*="border-bottom-width"]) { border-bottom-width: 0; }

/* Full-width sections butt against each other.
   WordPress puts a default block gap between siblings, which shows as a white
   stripe between coloured bands. Sections own their own vertical padding, so
   the gap between them should be zero. */
.entry-content > .alignfull,
.wp-block-post-content > .alignfull,
.wp-site-blocks > .alignfull,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ---------------------------------------------------------------- header */

/* Matched to the live site: 60% black at weight 500, fading on hover over
   0.4s, and a 1px shadow rather than a border under the bar. */
.wp-site-blocks > header {
	box-shadow: 0 1px 0 rgb(0 0 0 / 10%);
}

/* Colour and weight are set in theme.json (styles.blocks.core/navigation).
   Only the motion and focus behaviour belongs here. */
.wp-site-blocks .wp-block-navigation a {
	text-decoration: none;
	transition: opacity 0.4s ease-in-out, color 0.4s ease-in-out;
}

.wp-site-blocks .wp-block-navigation a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	opacity: 1;
}

/* Current page reads slightly stronger than its siblings. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation [aria-current="page"] {
	color: rgb(0 0 0 / 85%);
}

/* Dropdown panels: white, soft shadow, no hard border. */
.wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgb(19 26 36 / 8%), 0 18px 40px -22px rgb(19 26 36 / 45%);
	padding: 0.5rem 0;
	min-width: 17rem;
}

.wp-block-navigation__submenu-container a {
	padding: 0.6rem 1.25rem;
	line-height: 1.35;
}

.wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--base-alt);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation a { transition: none; }
}

/* Footer logo.
   Prodigital-logo-footer.webp is stored as pale lilac (#FDE2FE), not white.
   The live site forces it white with the same filter rather than shipping a
   second asset, so match that instead of re-exporting the file. */
.site-footer .wp-block-image img {
	filter: saturate(0%) brightness(200%);
}

/* ---------------------------------------------------------- gravity forms */

/* Gravity Forms ships almost no visual opinion, so the treatment is ours.
   Labels are hidden in the form settings and placeholders carry the field
   names, matching the live site. Styling lives here rather than in a plugin
   setting so it travels with the design system. */

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_fields {
	gap: 1rem 1rem;
}

.gform_wrapper .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea {
	width: 100%;
	padding: 0.95rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper textarea {
	min-height: 9rem;
	resize: vertical;
}

.gform_wrapper ::placeholder {
	color: var(--wp--preset--color--contrast-soft);
	opacity: 1;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(16 85 162 / 12%);
}

/* Consent checkbox: small print, readable, with the link in brand colour. */
.gform_wrapper .gfield--type-consent .gfield_consent_label,
.gform_wrapper .gfield--type-consent label {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
	overflow: visible;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-soft);
}

.gform_wrapper .gfield--type-consent a {
	color: var(--wp--preset--color--primary);
}

.gform_wrapper input[type="checkbox"] {
	margin-right: 0.55rem;
	accent-color: var(--wp--preset--color--primary);
}

/* Submit button matches the site's buttons rather than the plugin default. */
/* Gravity Forms 2.5+ paints its submit button through its own custom
   properties and a selector more specific than a bare class, so setting one
   background declaration loses to the plugin's default indigo. Both the
   properties and the specific selector are set here. */
.gform_wrapper.gravity-theme,
.gform_wrapper.gform-theme--foundation,
.gform_wrapper.gform-theme--framework {
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-deep);
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--base);
}

.gform_wrapper .gform_button,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper .gform_footer input[type="submit"] {
	appearance: none;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	padding: 0.95rem 2.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gform_wrapper .gform_button:hover {
	background: var(--wp--preset--color--primary-deep);
}

.gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Validation states legible rather than shouty. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border-color: #A8421C;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-size: var(--wp--preset--font-size--x-small);
	color: #A8421C;
	background: none;
	border: 0;
	padding: 0.35rem 0 0;
}

.gform_wrapper .gform_validation_errors {
	border: 1px solid #A8421C;
	background: #F6E7E1;
	border-radius: 2px;
	padding: 0.9rem 1.1rem;
}

/* Honeypot. Hidden from people, reachable by bots that fill everything. */
.gform_wrapper .gf-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper input,
	.gform_wrapper textarea,
	.gform_wrapper .gform_button { transition: none; }
}

/* ------------------------------------------------------------- blog post */

/* Table of contents.
   Generated in functions.php from the post's own headings, so every post the
   Hub publishes gets one automatically with nothing to remember. Native
   <details> keeps it keyboard operable. */
.post-toc {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	margin: 0 0 2.5rem;
	background: var(--wp--preset--color--base);
}

.post-toc > summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast-soft);
}

.post-toc > summary::-webkit-details-marker { display: none; }

.post-toc > summary::after {
	content: "\002B";
	float: right;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.post-toc[open] > summary::after { content: "\2212"; }

/* Numbering restarts under each parent rather than running 1..n across both
   levels, which read as one flat list. Counters rather than <ol> nesting,
   because the headings are a flat list with a level attribute. */
.post-toc ol {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: toc-h2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.post-toc li {
	line-height: 1.4;
	padding-left: 2rem;
	position: relative;
}

.post-toc .toc-level-2 {
	counter-increment: toc-h2;
	counter-reset: toc-h3;
}

.post-toc .toc-level-2::before {
	content: counter(toc-h2) ".";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.post-toc .toc-level-3 {
	counter-increment: toc-h3;
	margin-left: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.post-toc .toc-level-3::before {
	content: counter(toc-h2) "." counter(toc-h3);
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--x-small);
}

.post-toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.post-toc a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Post body: comfortable measure and clear heading rhythm. */
.post-main .entry-content > * { max-width: 100%; }

.post-main .entry-content h2 {
	margin-top: 2.75rem;
	scroll-margin-top: 6rem;
}

.post-main .entry-content h3 {
	margin-top: 2rem;
	scroll-margin-top: 6rem;
}

.post-main .entry-content p,
.post-main .entry-content li {
	line-height: 1.7;
}

.post-main .entry-content img {
	border-radius: 4px;
}

.post-meta { color: var(--wp--preset--color--contrast-soft); }

/* Author box */
.author-box { gap: 1.25rem; align-items: flex-start; }
.author-box .wp-block-avatar img { border-radius: 50%; }

/* Sidebar */
.post-sidebar { align-self: flex-start; position: sticky; top: 7rem; }

.sidebar-panel .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.sidebar-panel .wp-block-post-title a:hover { text-decoration: underline; }

.sidebar-panel .wp-block-read-more {
	color: #1CA9DE;
	text-decoration: none;
	display: inline-block;
}

.sidebar-panel .wp-block-read-more:hover { text-decoration: underline; }

.sidebar-cta h2,
.sidebar-cta p { color: #FFFFFF; }

@media (max-width: 900px) {
	.post-sidebar { position: static; }
}

/* Related posts */
.related-posts .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	line-height: 1.35;
}

.related-posts .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }

/* Submenu parents with no hub page.
   "Who We Help" and "Our Services" are section labels, not destinations. With
   no URL, core renders them as a <button> toggle. Make sure they read that way
   too: no underline, no link colour shift, and a normal pointer. */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.wp-block-navigation .wp-block-navigation-submenu__toggle:hover {
	text-decoration: none;
}

/* Core renders a submenu parent with no URL as an <a> with no href, alongside
   the toggle button. It is not navigable, but it should not invite a click
   either: no pointer cursor, no hover shift. */
.wp-block-navigation a:not([href]),
.wp-block-navigation .wp-block-navigation-submenu > a:not([href]) {
	cursor: default;
}

.wp-block-navigation a:not([href]):hover {
	opacity: 1;
	text-decoration: none;
}

/* Submenu children are real links and should behave like them. */
.wp-block-navigation__submenu-container a[href] {
	cursor: pointer;
}

/* A post with no featured image otherwise shifts its title to the top of the
   grid row and knocks the others out of alignment. */
.related-posts .wp-block-post,
.recent-posts .wp-block-post {
	display: flex;
	flex-direction: column;
}

.related-posts .wp-block-post-title {
	margin-top: auto;
}

/* ------------------------------------------------------ checklist columns */

/* The live site marks these items with a purple checkbox graphic and sets the
   text in the same purple. Used on About and four of the vertical pages. */
.check-list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.check-list li {
	position: relative;
	padding-left: 2.4rem;
	color: var(--wp--preset--color--accent);
	line-height: 1.5;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.35rem;
	height: 1.35rem;
	background-image: url("/wp-content/uploads/2023/10/Checked-Checkbox-100x100-1.png");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ------------------------------------------------------------- photo band */

.photo-band img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------ about page */

.about-grid h3 { line-height: 1.25; }

/* ---------------------------------------------------------- contact page */

/* The live page sits on a soft wash rather than flat white: cool at the left
   behind the heading, warm at the right behind the form. */
.contact-band {
	background:
		radial-gradient(60rem 40rem at 0% 20%, var(--wp--preset--color--primary-tint) 0%, transparent 60%),
		radial-gradient(50rem 40rem at 100% 30%, var(--wp--preset--color--accent-tint) 0%, transparent 60%),
		var(--wp--preset--color--base);
}

/* Left-aligned variant of the eyebrow: rule on one side only. */
.eyebrow-left {
	text-align: left;
}

.eyebrow-left::after { content: none; }

.contact-phone-icon {
	flex: 0 0 auto;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--highlight);
	position: relative;
}

/* Handset drawn with a mask so it inherits a colour rather than shipping a
   second image for one icon. */
.contact-phone-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.5rem;
	height: 1.5rem;
	background-color: #ffffff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact-phone-label {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0;
}

.contact-phone-number { margin-top: 0.15rem; }

.contact-phone-number a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.contact-phone-number a:hover { color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------------ legal pages */

/* Long-form policy text: a narrower measure and clear heading separation,
   since these are read in sequence rather than scanned. */
.legal-page h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.legal-page h3 {
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.legal-page p,
.legal-page li {
	color: var(--wp--preset--color--contrast-soft);
	line-height: 1.7;
}

.legal-page ul,
.legal-page ol { margin-top: 1rem; }

.legal-page li { margin-bottom: 0.5rem; }

/* The footer link lists carry is-style-no-bullets, but that is a block style
   name, not a stylesheet rule: nothing defines it unless the theme does. The
   live footer shows these as plain stacked links. */
.footer-services,
.wp-block-list.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}

.footer-services li {
	margin-bottom: 0.85rem;
	line-height: 1.45;
}

/* Footer CTA. Purple against the cyan headings and icons so the one action in
   the footer is not competing with everything else for attention. */
.footer-cta .wp-block-button__link {
	padding: 0.85rem 1.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease;
}

.footer-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent) !important;
}


/* ---------------------------------------------------------------- youtube */

/* Click-to-play facade (see prodigital_youtube_facade in functions.php). It
   takes the iframe's place inside core's responsive 16:9 wrapper, so it is
   positioned the same way the iframe would be. */
.wp-block-embed .yt-facade {
	position: absolute;
	inset: 0;
	display: block;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}

.yt-facade img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yt-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	background: rgb(33 33 33 / 80%);
	transition: background-color 0.2s ease;
}

.yt-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
}

.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
	background: #f00;
}

.yt-facade:focus-visible {
	outline: 3px solid var(--wp--preset--color--highlight);
	outline-offset: 3px;
}