/*
 * Apollo base styles.
 *
 * Element defaults and site chrome only. Colour, type and spacing values come
 * from theme.json as --wp--preset--* custom properties, so this file should
 * contain almost no literal values — if you are hardcoding a colour here, it
 * probably belongs in the palette instead.
 *
 * Block-specific CSS does NOT belong here. Put it in blocks/<name>/style.css so
 * it loads only where the block is used.
 */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

[id] {
    scroll-margin-top: calc(
        var(--apollo-header-height) + var(--wp--preset--spacing--40)
    );
}

@media (max-width: 47.99rem) {
    [id] {
        scroll-margin-top: calc(
            var(--apollo-header-height) + var(--wp--preset--spacing--30)
        );
    }
}

@media (max-width: 34.99rem) {
    [id] {
        scroll-margin-top: calc(
            var(--apollo-header-height) + var(--wp--preset--spacing--20)
        );
    }
}




/* ---------------------------------
   Fonts
   --------------------------------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');
}

/* ---------------------------------
   Local aliases
   --------------------------------- */
:root {
	--apollo-header-height: 4.5rem;
	--apollo-transition: 150ms ease;
	--apollo-focus-ring: 2px solid var(--wp--preset--color--primary);

	/* One radius for everything. A single value is what makes a set of
	   components read as one system rather than several. */
	--apollo-radius: 20px;
	--apollo-radius-sm: 20px;

	/* Comfortable line length for prose, ~68 characters. */
	--apollo-measure: 42rem;

	/*
	 * Ink-tinted rather than pure black. These two cannot be palette entries
	 * because they are translucent and theme.json presets are flat colours, so
	 * they live here — but they are still written once and referenced, never
	 * retyped into a component.
	 */
	/*
	 * One button shape for the whole site.
	 *
	 * The site had five: theme.json's, the shop card's, the add-to-cart's, the
	 * filter bar's and the sticky buy bar's, all the same colour and radius but
	 * none the same size. These are the values theme.json uses, so every other
	 * button now matches the one the block editor produces.
	 *
	 * Three font weights, and only three: 400 for text, 600 for controls and
	 * labels, 700 for headings and numerals. The 650 that used to be scattered
	 * about is not a weight system-ui has - browsers were resolving it to 700
	 * anyway.
	 *
	 * Radius is a token for the same reason the others are. It was the one
	 * button property that was not, and it drifted exactly as you would
	 * predict: pills in theme.json and most of the site, 8px on the header's
	 * menu button, a 50% circle on the drawer close, and 8px again once the
	 * shop was restyled - four shapes for one control. theme.json reads this
	 * variable too, so the block editor's buttons and the theme's cannot
	 * disagree.
	 *
	 * It applies to anything you press or type into. Badges, counts, tags and
	 * navigation pills stay fully round on purpose: they are labels and
	 * navigation, not actions, and the different shape is what says so.
	 */
	--apollo-button-padding-block: 0.8rem;
	--apollo-button-padding-inline: 1.5rem;
	--apollo-button-min-height: 2.9rem;
	--apollo-button-weight: 600;
	--apollo-button-radius: 8px;

	--apollo-scrim: rgba(23, 20, 15, 0.45);
	--apollo-shadow-drawer: -12px 0 40px rgba(23, 20, 15, 0.16);

    --apollo-button-padding-block: 1.1rem;
    --apollo-button-padding-inline: 2rem;
}

/* ---------------------------------
   Reset
   --------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/*
	 * The off-canvas nav parks itself one drawer-width to the right of the
	 * viewport. Fixed elements are specified not to contribute to scrollable
	 * overflow; Chrome counts this one anyway, and every page on a phone got a
	 * horizontal scrollbar with 380px of empty space to swipe into.
	 *
	 * On the ROOT element, not on body. Overflow set here propagates to the
	 * viewport and the root itself stays `visible`, so the viewport goes on
	 * being the scroll container and every sticky element keeps working. The
	 * same declaration on body would make body the scroll container and the
	 * sticky header would stop sticking.
	 */
	overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;

}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* ---------------------------------
   Accessibility
   --------------------------------- */

/* Never remove focus indication — only replace it with something better. */
:focus-visible {
	outline: var(--apollo-focus-ring);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-150%);
	transition: transform var(--apollo-transition);
}

.skip-link:focus {
	transform: translateY(0);
}

/* ---------------------------------
   Layout
   --------------------------------- */
/*
 * The gutter is added OUTSIDE the wide size, so the container's content box is
 * exactly wide-size — the same width an .alignwide block gets from the block
 * canvas grid.
 *
 * With a plain `max-width: wide-size` the padding eats into it, leaving
 * container content inset by one gutter from every full-width block on the
 * page. On the cart that showed up as the page title sitting 24px right of the
 * cart itself.
 */
.apollo-container {
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1200px) + (var(--wp--preset--spacing--50) * 2));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.apollo-main {
	padding-block: var(--wp--preset--spacing--70);
}

/*
 * The same double-padding bug, in every place a template supplies its own
 * hero/head spacing instead of relying on .apollo-main's default rhythm.
 *
 * .apollo-main gives every page a default top and bottom gap. That is correct
 * for a plain page, but wrong the moment a template renders its own header
 * block with its own deliberate spacing — the two stack. This was first found
 * on WooCommerce pages (104px of empty space above the shop breadcrumb) and
 * turned out to recur on the blog index, 404 and single posts too: each adds
 * its own top padding on top of .apollo-main's, so the real number a phone
 * visitor saw before any content was 80–104px, not the ~40–64px intended.
 *
 * In each case the inner, more specific wrapper is the one that already sets a
 * complete and reasonable padding-block for its own template, so it wins and
 * .apollo-main contributes nothing extra on that side.
 */
.apollo-main:has(> .apollo-woo),
.apollo-main:has(> .apollo-news),
.apollo-main:has(> .apollo-404) {
	padding-block: 0;
}

/*
 * A single post's own header (.apollo-article__head) only owns its own top
 * gap - the page's bottom spacing before the footer still comes from
 * .apollo-main as normal, so only padding-top is reset here.
 */
.apollo-main:has(> article.apollo-article) {
	padding-top: 0;
}

/*
 * One step down the spacing scale on phones. 64px above and below the content
 * is right on a 1000px-tall desktop window and is a tenth of the screen on a
 * phone. The scale is the same, the step is not.
 */
@media (max-width: 47.99rem) {
	.apollo-main {
		padding-block: var(--wp--preset--spacing--50);
	}

	/* Same one-step-down rhythm for the templates that own their own head
	   spacing instead of .apollo-main's — see the comment above. */
	.apollo-article__head {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.apollo-404 {
		padding-block: var(--wp--preset--spacing--60);
	}

	.apollo-news {
		padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}
}

/*
 * Readable measure for long-form prose.
 *
 * ~68 characters is a comfortable line length. Holding prose to it in CSS is
 * what lets posts run full width without becoming unreadable — no sidebar is
 * needed to keep the column narrow, which is why the theme no longer has one.
 */
.apollo-prose {
	max-width: var(--apollo-measure);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.apollo-prose > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.apollo-prose > :where(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--70);
}

.apollo-prose > :where(h2, h3, h4) + * {
	margin-top: var(--wp--preset--spacing--40);
}

.apollo-prose :where(img, figure) {
	border-radius: var(--apollo-radius);
}

.apollo-prose blockquote {
	margin-inline: 0;
	padding-left: var(--wp--preset--spacing--50);
	border-left: 2px solid var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

.apollo-prose :where(ul, ol) {
	padding-left: 1.25rem;
}

.apollo-prose li + li {
	margin-top: 0.4rem;
}

.apollo-prose code {
	padding: 0.15em 0.4em;
	border-radius: var(--apollo-radius-sm);
	background: var(--wp--preset--color--surface);
	font-size: 0.9em;
}

.apollo-prose pre {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--apollo-radius);
	background: var(--wp--preset--color--surface);
	overflow-x: auto;
}

.apollo-prose hr {
	margin-block: var(--wp--preset--spacing--70);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------------------------------
   Block canvas
   --------------------------------- */

/*
 * Constrains block content and gives alignwide/alignfull a way out.
 *
 * Named grid columns rather than max-width on the wrapper, because a wrapper
 * with max-width cannot be escaped — full-bleed blocks would need negative
 * margins and would fight the gutter. Here every child lands in the content
 * column by default and only opts out if it is aligned.
 *
 * Without this, the_content() renders edge-to-edge with no gutters at all.
 */
.apollo-entry-content {
	--apollo-gutter: var(--wp--preset--spacing--50);
	--apollo-content: var(--wp--style--global--content-size, 720px);
	--apollo-wide: var(--wp--style--global--wide-size, 1200px);
	--apollo-wide-step: calc((var(--apollo-wide) - var(--apollo-content)) / 2);

	display: grid;
	row-gap: var(--wp--preset--spacing--50);
	grid-template-columns:
		[full-start] minmax(var(--apollo-gutter), 1fr)
		[wide-start] minmax(0, var(--apollo-wide-step))
		[content-start] min(var(--apollo-content), 100% - var(--apollo-gutter) * 2) [content-end]
		minmax(0, var(--apollo-wide-step)) [wide-end]
		minmax(var(--apollo-gutter), 1fr) [full-end];
}

.apollo-entry-content > * {
	grid-column: content;
	min-width: 0;
	text-align: center;
}

.apollo-entry-content > .alignwide {
	grid-column: wide;
}

.apollo-entry-content > .alignfull {
	grid-column: full;
	max-width: none;
}


/* ---------------------------------
   Eyebrow
   --------------------------------- */

/*
 * The small uppercase section label used across the site - "Menu" atop the
 * mobile drawer, "Previous"/"Next" on post navigation, "Recent dispatches" on
 * the 404 page, "Filters" on the news index, the masthead's issue line. Six
 * near-identical rules had drifted to six different letter-spacing values
 * (0.06em to 0.14em) over time, each written in isolation rather than against
 * a shared rule - visible only when you look for it, but exactly the kind of
 * thing that makes a set of pages feel like six components instead of one
 * system. One rule now, referenced by every site it used to be redeclared at.
 *
 * The mark before each one is a small brass rivet - the site's one recurring
 * signature device, standing in for the stud that holds a strap fitting or a
 * tool handle together. It appears nowhere else, so it reads as a mark of this
 * particular kind of label rather than decoration scattered at random.
 */
.primary-nav__label,
.apollo-post-nav__label,
.apollo-404__recent-title,
.apollo-filters__label,
.apollo-masthead__issue {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.primary-nav__label::before,
.apollo-post-nav__label::before,
.apollo-404__recent-title::before,
.apollo-filters__label::before,
.apollo-masthead__issue::before {
	content: "";
	flex: none;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 30%,
		var(--wp--preset--color--primary-hover) 0%,
		var(--wp--preset--color--primary) 55%,
		var(--wp--preset--color--primary-hover) 100%
	);
	box-shadow: inset 0 0 0 1px rgba(23, 20, 15, 0.2);
}

/* ---------------------------------
   Pill
   --------------------------------- */

/*
 * A small rounded label-and-count control, used for the news index filters and
 * for the shop's category row on phones. Shared here rather than duplicated in
 * both stylesheets, because two lookalikes drift apart the first time one of
 * them is adjusted.
 */
.apollo-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.apollo-pill:hover {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.apollo-pill.is-active {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.apollo-pill__count {
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------
   Site header
   --------------------------------- */
.site-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Toggled by the header.sticky_header option — see header.php. */
.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	min-height: var(--apollo-header-height);
}

.site-branding__link {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	/* Inherited 1.6 is a paragraph value. A two-line site name was making the
	   header 73px tall on a phone for 32px of text. */
	line-height: 1.2;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.site-branding__logo img {
	max-height: 3.5rem;
	width: auto;
}

/* ---------------------------------
   Navigation
   --------------------------------- */
/*
 * min-height/min-width, not padding alone: the visible icon is three thin
 * bars, and the top/bottom bars are absolutely-positioned pseudo-elements on
 * .nav-toggle__bars, which do not contribute to that element's own box size.
 * Padding alone measured 20x38px - a real tap target under half the visual
 * icon's height, on every single page, since this is the site header.
 */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--apollo-button-radius);
}

.nav-toggle__bars {
	position: relative;
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

.primary-nav__list {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------
   Header actions
   --------------------------------- */

/*
 * The WooCommerce cart link hooks in here and renders on every page, so its
 * styles live in base.css rather than the Woo stylesheet — that one loads only
 * on shop pages, which would leave the link unstyled everywhere else. Shop and
 * product page styling stays in assets/css/woocommerce.css.
 */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-left: auto;
}

.apollo-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.4rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.apollo-cart-link:hover {
	color: var(--wp--preset--color--primary);
}

.apollo-cart-link__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 1.15rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.15rem;
	text-align: center;
}

/* Empty cart: the badge is hidden by the [hidden] attribute from PHP, but
   display:flex on the parent would otherwise override it. */
.apollo-cart-link__count[hidden] {
	display: none;
}

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

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------
   Mobile drawer
   --------------------------------- */

/*
 * The drawer chrome (backdrop, head, close button) is always present in the
 * markup and hidden by CSS on desktop, so no JavaScript builds it and the menu
 * still renders if the script never loads.
 */
.nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--apollo-scrim);
	backdrop-filter: blur(2px);
	animation: apollo-fade-in 200ms ease;
}

.nav-backdrop[hidden] {
	display: none;
}

@keyframes apollo-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.primary-nav__head {
	display: none;
}

.nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--apollo-button-radius);
	background: none;
	color: inherit;
}

.nav-close:hover {
	border-color: var(--wp--preset--color--contrast);
}

.nav-close__icon {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
}

@media (max-width: 61.99rem) {
	.primary-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 300;
		display: flex;
		flex-direction: column;
		width: min(21rem, 86vw);
		padding: var(--wp--preset--spacing--40);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--wp--preset--color--card, #fff);
		box-shadow: var(--apollo-shadow-drawer);
		/*
		 * Off-canvas by default. transform animates; visibility keeps the
		 * closed drawer out of the accessibility tree and untabbable.
		 *
		 * The `0s linear 280ms` delay on visibility is load-bearing, not
		 * decoration. Transitioning visibility over the same duration means it
		 * is still `hidden` at the moment the script calls .focus() on open —
		 * and a hidden element cannot take focus, so keyboard users never
		 * entered the drawer. Here it flips to visible instantly on open, and
		 * back to hidden only after the slide-out has finished.
		 */
		transform: translateX(100%);
		visibility: hidden;
		transition:
			transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 280ms;
	}

	.primary-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition:
			transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
	}

	.primary-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.primary-nav__label {
		color: var(--wp--preset--color--contrast-muted);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.primary-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.primary-nav__list > li {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	/* Generous tap targets — the whole row is the hit area, not just the text. */
	.primary-nav__list a {
		display: block;
		padding: 0.9rem 0.25rem;
		font-size: var(--wp--preset--font-size--lg);
		letter-spacing: -0.01em;
	}

	/* Second-level items indent rather than opening a nested flyout, which is
	   unusable on touch. */
	.primary-nav__list .sub-menu {
		margin: 0 0 0.5rem;
		padding: 0 0 0 0.9rem;
		list-style: none;
	}

	.primary-nav__list .sub-menu a {
		padding: 0.6rem 0.25rem;
		font-size: var(--wp--preset--font-size--md);
		color: var(--wp--preset--color--contrast-muted);
	}
}

@media (min-width: 62rem) {
	.nav-toggle,
	.nav-backdrop {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.primary-nav {
		transition: none;
	}

	.nav-backdrop {
		animation: none;
	}
}

/* ---------------------------------
   Entries
   --------------------------------- */
.entry + .entry {
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--border);
}

.entry__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.entry__title a {
	text-decoration: none;
	color: inherit;
}

.entry__title a:hover {
	color: var(--wp--preset--color--primary);
}

.entry__meta {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: var(--wp--preset--spacing--40);
}

.entry__thumb {
	margin-bottom: var(--wp--preset--spacing--40);
}

.entry__thumb img {
	border-radius: var(--apollo-radius-sm);
}

.entry__content > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------------------------------
   Sidebar and widgets
   --------------------------------- */
.widget + .widget {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * Widget-area headings must not inherit the global h2 size (up to 2.5rem),
 * which is meant for content headings.
 *
 * Two things to know here:
 *
 * 1. Since WP 5.8 widget areas use block widgets, which render
 *    <h2 class="wp-block-heading"> and IGNORE register_sidebar()'s
 *    before_title/after_title. Targeting .widget__title alone matches nothing.
 *    Both selectors are listed so this survives a switch to classic widgets.
 * 2. theme.json emits `:root :where(h2)` at specificity (0,1,0), which ties
 *    with a single class and then wins on source order. Two classes (0,2,0)
 *    settle it without !important.
 */
.site-footer .wp-block-heading,
.site-footer .widget__title {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.3;
	margin-bottom: var(--wp--preset--spacing--30);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: var(--wp--preset--spacing--20);
}

/* ---------------------------------
   Pagination
   --------------------------------- */
.apollo-pagination {
	margin-top: var(--wp--preset--spacing--70);
}

.apollo-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--apollo-radius-sm);
	text-decoration: none;
}

.apollo-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* ---------------------------------
   Site footer
   --------------------------------- */
.site-footer {
	margin-top: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--sm);
}

/* One step down, same rationale as .apollo-main's phone rhythm above - this
   margin was missed when that rule was written, and stacked with
   .apollo-main's own bottom padding the un-stepped 96px left a ~136px dead
   zone above the footer on short pages like an empty-ish cart. */
@media (max-width: 47.99rem) {
	.site-footer {
		margin-top: var(--wp--preset--spacing--50);
	}
}

.site-footer__widgets {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-bottom: var(--wp--preset--spacing--60);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-muted);
}

.site-footer__bottom p {
	margin: 0;
}

ul.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------
   Archive header
   --------------------------------- */
.apollo-archive-header {
	margin-bottom: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.apollo-archive-header__description {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-muted);
}

/* ---------------------------------
   404
   --------------------------------- */
.apollo-404 {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	text-align: center;
}

.apollo-404 > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------------------------------
   Search form
   --------------------------------- */
.wp-block-search__inside-wrapper,
.search-form {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.search-form input[type="search"],
.wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--apollo-button-radius);
	background: var(--wp--preset--color--card, #fff);
}

.search-form input[type="search"]:focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
}

.search-form button,
.search-form input[type="submit"] {
	padding: 0.7rem 1.4rem;
	border: none;
	border-radius: var(--apollo-button-radius);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 47.99rem) {

  /* Stack search input + button on mobile */
  .search-form,
  .wp-block-search__inside-wrapper {
    flex-direction: column;
    width: 100%;
  }

.search-form input[type="search"], .wp-block-search__input {
    width: 100%;
}

}

/* ---------------------------------
   Article
   --------------------------------- */
.apollo-article__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--apollo-measure);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	text-align: center;
}

.apollo-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

/* Two classes: beats theme.json's `:root :where(h1)`. */
.apollo-article .apollo-article__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.apollo-article__standfirst {
	margin: 0;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	text-wrap: pretty;
}

.apollo-article__figure {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--50);
}

.apollo-article__img {
	width: 100%;
	border-radius: var(--apollo-radius);
}

.apollo-article__figure figcaption {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

.apollo-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: var(--apollo-measure);
	margin-top: var(--wp--preset--spacing--70);
}

.apollo-article__tags a {
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-decoration: none;
}

.apollo-article__tags a:hover {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------
   Post navigation
   --------------------------------- */
.apollo-post-nav {
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.apollo-post-nav .nav-links {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.apollo-post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.apollo-post-nav .nav-next {
		text-align: right;
	}
}

.apollo-post-nav a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-decoration: none;
}

.apollo-post-nav__label {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.apollo-post-nav__title {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.apollo-post-nav a:hover .apollo-post-nav__title {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------
   Page header
   --------------------------------- */
/*
 * The header keeps the full container width so its left edge lines up with the
 * block content below it. The measure is applied to the text instead.
 *
 * Narrowing max-width on this element does not work: it also carries
 * .apollo-container, whose `margin-inline: auto` would then centre the whole
 * narrowed header, leaving the title floating out of alignment with the content
 * underneath — which is exactly how the cart page's title drifted.
 */
/*
 * No top padding here: .apollo-main already owns the space under the site
 * header. The two were stacking to 128px, which is why the cart and checkout
 * titles sat a third of a phone screen below the header.
 */
.apollo-page__head {
	padding-block: 0 var(--wp--preset--spacing--50);
}

.apollo-page .apollo-page__title {
	max-width: var(--apollo-measure);
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.apollo-page__standfirst {
	max-width: var(--apollo-measure);
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

/* ---------------------------------
   404
   --------------------------------- */
.apollo-404 {
	max-width: var(--apollo-measure);
	padding-block: var(--wp--preset--spacing--80);
}

.apollo-404__code {
	margin: 0;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.2em;
}

.apollo-404 .apollo-404__title {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.apollo-404__lead {
	font-weight: 700;
}

/* Same sans/serif pairing as the masthead, so a 404 still feels like the site. */
/* .apollo-404__tail {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
} */

.apollo-404__text {
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--contrast-muted);
}

.apollo-404__search {
	margin-bottom: var(--wp--preset--spacing--70);
}

.apollo-404__recent {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Typography: see .apollo-eyebrow. */
.apollo-404 .apollo-404__recent-title {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.apollo-404__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apollo-404__list li {
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.apollo-404__list li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.apollo-404__list a {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.apollo-404__list a:hover {
	color: var(--wp--preset--color--primary);
}




/*=============================================================================== EDIT START ===============================================================================*/


/* =========================================================
   Shared responsive typography
   ========================================================= */
@media (max-width: 79.99rem) {
    :root {
        --wp--preset--font-size--hero: 3.375rem;
        --wp--preset--font-size--display-sm: 2.5rem;
        --wp--preset--font-size--title-lg: 1.625rem;
        --wp--preset--font-size--service-card-title: 1.125rem;

        --wp--preset--font-size--body: 0.9375rem;
        --wp--preset--font-size--button: 0.875rem;
        --wp--preset--font-size--link-xs: 0.75rem;
        --wp--preset--font-size--eyebrow: 0.8125rem;
        --wp--preset--font-size--hero-eyebrow: 1.125rem;

        --wp--preset--font-size--xs: 0.75rem;
        --wp--preset--font-size--sm: 0.875rem;
        --wp--preset--font-size--md: 0.9375rem;
        --wp--preset--font-size--lg: 1.125rem;
        --wp--preset--font-size--xl: 1.5rem;
        --wp--preset--font-size--xxl: 2.25rem;
        --wp--preset--font-size--xxxl: 3.125rem;
        --wp--preset--font-size--display: 4.75rem;
    }
}

@media (max-width: 61.99rem) {
    :root {
        --wp--preset--font-size--hero: 2.875rem;
        --wp--preset--font-size--display-sm: 2.25rem;
        --wp--preset--font-size--title-lg: 1.5rem;
        --wp--preset--font-size--service-card-title: 1.0625rem;

        --wp--preset--font-size--body: 0.9375rem;
        --wp--preset--font-size--button: 0.875rem;
        --wp--preset--font-size--link-xs: 0.75rem;
        --wp--preset--font-size--eyebrow: 0.8125rem;
        --wp--preset--font-size--hero-eyebrow: 1.0625rem;

        --wp--preset--font-size--xs: 0.75rem;
        --wp--preset--font-size--sm: 0.8125rem;
        --wp--preset--font-size--md: 0.9375rem;
        --wp--preset--font-size--lg: 1.0625rem;
        --wp--preset--font-size--xl: 1.375rem;
        --wp--preset--font-size--xxl: 2rem;
        --wp--preset--font-size--xxxl: 2.75rem;
        --wp--preset--font-size--display: 4.25rem;
    }
}

@media (max-width: 47.99rem) {
    :root {
        --wp--preset--font-size--hero: 2.375rem;
        --wp--preset--font-size--display-sm: 2rem;
        --wp--preset--font-size--title-lg: 1.375rem;
        --wp--preset--font-size--service-card-title: 1rem;

        --wp--preset--font-size--body: 0.875rem;
        --wp--preset--font-size--button: 0.8125rem;
        --wp--preset--font-size--link-xs: 0.6875rem;
        --wp--preset--font-size--eyebrow: 0.75rem;
        --wp--preset--font-size--hero-eyebrow: 1rem;

        --wp--preset--font-size--xs: 0.6875rem;
        --wp--preset--font-size--sm: 0.8125rem;
        --wp--preset--font-size--md: 0.875rem;
        --wp--preset--font-size--lg: 1rem;
        --wp--preset--font-size--xl: 1.25rem;
        --wp--preset--font-size--xxl: 1.75rem;
        --wp--preset--font-size--xxxl: 2.375rem;
        --wp--preset--font-size--display: 3.75rem;
    }
}

@media (max-width: 34.99rem) {
    :root {
        --wp--preset--font-size--hero: 2.125rem;
        --wp--preset--font-size--display-sm: 1.75rem;
        --wp--preset--font-size--title-lg: 1.25rem;
        --wp--preset--font-size--service-card-title: 0.9375rem;

        --wp--preset--font-size--body: 0.8125rem;
        --wp--preset--font-size--button: 0.75rem;
        --wp--preset--font-size--link-xs: 0.6875rem;
        --wp--preset--font-size--eyebrow: 0.6875rem;
        --wp--preset--font-size--hero-eyebrow: 0.9375rem;

        --wp--preset--font-size--xs: 0.625rem;
        --wp--preset--font-size--sm: 0.75rem;
        --wp--preset--font-size--md: 0.8125rem;
        --wp--preset--font-size--lg: 0.9375rem;
        --wp--preset--font-size--xl: 1.125rem;
        --wp--preset--font-size--xxl: 1.5rem;
        --wp--preset--font-size--xxxl: 2rem;
        --wp--preset--font-size--display: 3.25rem;
    }
    .apollo-eyebrow {
        justify-content: center;
    }
}

@media (max-width: 24.99rem) {
    :root {
        --wp--preset--font-size--hero: 1.875rem;
        --wp--preset--font-size--display-sm: 1.625rem;
        --wp--preset--font-size--title-lg: 1.125rem;
        --wp--preset--font-size--service-card-title: 0.875rem;

        --wp--preset--font-size--body: 0.75rem;
        --wp--preset--font-size--button: 0.6875rem;
        --wp--preset--font-size--link-xs: 0.625rem;
        --wp--preset--font-size--eyebrow: 0.625rem;
        --wp--preset--font-size--hero-eyebrow: 0.875rem;

        --wp--preset--font-size--xs: 0.5625rem;
        --wp--preset--font-size--sm: 0.6875rem;
        --wp--preset--font-size--md: 0.75rem;
        --wp--preset--font-size--lg: 0.875rem;
        --wp--preset--font-size--xl: 1rem;
        --wp--preset--font-size--xxl: 1.375rem;
        --wp--preset--font-size--xxxl: 1.75rem;
        --wp--preset--font-size--display: 2.875rem;
    }
}




#apollo-cart-drawer button.nav-close > span[aria-hidden="true"]{
  display: block;
  transform: translateY(-3px); 
}

/* Desktop header layout*/
@media (min-width: 62rem) {
  .site-header__inner {
    justify-content: flex-start;
  }
  .site-branding {
    order: 1;
  }
  .primary-nav {
    order: 2;
    margin-left: auto;
  }
  .site-header__actions {
    order: 3;
    margin-left: 0;
  }
  .nav-toggle {
    order: 4;
  }
}


/* ---------------------------------
   Buttons
   --------------------------------- */
.apollo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--20);
    min-height: var(--apollo-button-min-height);
    padding: var(--apollo-button-padding-block) var(--apollo-button-padding-inline);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--wp--preset--font-size--button);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.apollo-button:hover,
.apollo-button:focus-visible {
    text-decoration: none;
}

.apollo-button--primary {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--on-primary);
}

.apollo-button--primary:hover,
.apollo-button--primary:focus-visible {
    background: var(--wp--preset--color--primary-hover);
    border-color: var(--wp--preset--color--primary-hover);
    color: var(--wp--preset--color--on-primary);
}

.apollo-button--secondary {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.apollo-button--secondary:hover,
.apollo-button--secondary:focus-visible {
    background: var(--wp--preset--color--primary-soft);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.apollo-button--outline {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--on-primary);
}

.apollo-button--outline:hover,
.apollo-button--outline:focus-visible {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

/* Outlined button that fills blue on hover. */
.apollo-button--outline-fill {
    border: 1px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
    background: transparent;
    transition:
        color 200ms ease,
        background-color 200ms ease;
}

.apollo-button--outline-fill:hover,
.apollo-button--outline-fill:focus-visible {
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--primary);
}

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

.apollo-button--outline-teal {
    background: var(--wp--preset--color--teal);
    border-color: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--on-primary);
}

.apollo-button--outline-teal:hover,
.apollo-button--outline-teal:focus-visible {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--teal);
    color: var(--wp--preset--color--teal);
}

.apollo-button--outline-teal:focus-visible {
    outline-color: var(--wp--preset--color--teal);
}

.apollo-button__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--wp--preset--spacing--40);
    height: var(--wp--preset--spacing--40);
    align-items: center;
    justify-content: center;
}

.apollo-button__icon svg {
    width: 100%;
    height: 100%;
}



/* ---------------------------------
   Section eyebrow
   --------------------------------- */
.apollo-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--eyebrow);
    font-weight: 400;
    line-height: 1.4;
}





/* ---------------------------------
   Southcare footer
   --------------------------------- */
.site-footer.apollo-footer {
    margin-top: 0;
    padding: 0;
    border-top: 0;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.apollo-footer-cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--wp--preset--spacing--70);
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

.apollo-footer-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--60);
    text-align: left;
}

.apollo-footer-cta__content {
    flex: 1 1 0;
    min-width: 0;
}

.apollo-footer-cta__title {
    margin: 0;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--display-sm);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.apollo-footer-cta__description {
    margin: var(--wp--preset--spacing--30) 0 0;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--body);
    font-weight: 400;
    line-height: 1.5;
}

.apollo-footer-cta__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--30);
}

.apollo-footer-cta .apollo-button--outline-fill {
    border-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--base);
}

.apollo-footer-cta .apollo-button--outline-fill:hover,
.apollo-footer-cta .apollo-button--outline-fill:focus-visible {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
}

.apollo-footer-cta__mark {
    position: absolute;
    z-index: 0;
    width: 12rem;
    height: auto;
    opacity: 0.2;
    pointer-events: none;
}

.apollo-footer-cta__mark--top-left {
    top: -18px;
    left: -35px;
}

.apollo-footer-cta__mark--bottom-right {
    right: 0;
    bottom: -55px;
}

.apollo-footer__inner {
    margin-top: var(--wp--preset--spacing--70);
}

.apollo-footer__columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--80);
}

.apollo-footer__column {
    flex: 1 1 0;
    min-width: 0;
}

.apollo-footer__brand {
    flex-grow: 1.25;
}

.apollo-footer__contact {
    flex-grow: 1.1;
}

.apollo-footer__brand .site-branding {
    margin-bottom: var(--wp--preset--spacing--50);
}

.apollo-footer__brand .site-branding__logo img {
    max-width: 12rem;
    max-height: none;
    width: auto;
    height: auto;
}

.apollo-footer__description {
    max-width: 22rem;
    margin: 0;
    color: var(--wp--preset--color--contrast-muted);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.5;
}

.apollo-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
}

.apollo-footer__brand .apollo-footer__social {
    margin-top: var(--wp--preset--spacing--50);
}

.apollo-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wp--preset--spacing--60);
    height: var(--wp--preset--spacing--60);
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--on-primary);
    text-decoration: none;
    transition:
        background-color var(--apollo-transition),
        color var(--apollo-transition);
}

.apollo-footer__social-link:hover,
.apollo-footer__social-link:focus-visible {
    border-color: var(--wp--preset--color--primary);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
}

.apollo-footer__social-link svg {
    width: var(--wp--preset--spacing--40);
    height: var(--wp--preset--spacing--40);
}

.apollo-footer__heading {
    margin: 0 0 var(--wp--preset--spacing--50);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--title-lg);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.apollo-footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    margin: 0;
    padding: 0;
    list-style: none;
}

.apollo-footer__nav a {
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none;
}

.apollo-footer__nav a:hover,
.apollo-footer__nav a:focus-visible {
    color: var(--wp--preset--color--primary);
}

.apollo-footer__hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.apollo-footer__hours-list p {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    column-gap: var(--wp--preset--spacing--20);
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.4;
}

.apollo-footer__hours-list p span:last-child {
    color: var(--wp--preset--color--primary);
}

.apollo-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.apollo-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.45;
    text-decoration: none;
}

a.apollo-footer__contact-item:hover,
a.apollo-footer__contact-item:focus-visible {
    color: var(--wp--preset--color--primary);
}

.apollo-footer__contact-icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.apollo-footer__contact-icon svg {
    width: var(--wp--preset--spacing--40);
    height: var(--wp--preset--spacing--40);
}

.apollo-footer__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--50);
}

.apollo-footer__hotdoc-row {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.4;
}

.apollo-footer__hotdoc-row .apollo-footer__hotdoc {
    flex: 0 0 auto;
}

.apollo-footer__hotdoc {
    width: auto;
    max-width: 13rem;
    max-height: 1.6rem;
    object-fit: contain;
}

.apollo-footer__accreditation {
    width: auto;
    max-width: 10rem;
    max-height: 4.5rem;
    object-fit: contain;
}

.apollo-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
    min-height: 3.5rem;
    padding-block: var(--wp--preset--spacing--30);
    border-top: 1px solid var(--wp--preset--color--border);
    color: var(--wp--preset--color--contrast-muted);
    font-size: var(--wp--preset--font-size--xs);
}

.apollo-footer__bottom p {
    margin: 0;
}

.apollo-footer__credit {
    color: var(--wp--preset--color--contrast);
    text-align: right;
}

.apollo-footer__credit a {
    color: inherit;
    text-decoration: none;
}

.apollo-footer__credit a:hover,
.apollo-footer__credit a:focus-visible {
    color: var(--wp--preset--color--primary);
}


/* Below 1280px */
@media (max-width: 79.99rem) {
    .apollo-footer__columns {
        gap: var(--wp--preset--spacing--50);
        padding-bottom: var(--wp--preset--spacing--70);
    }

    .apollo-footer__heading {
        margin-bottom: var(--wp--preset--spacing--40);
    }

    .apollo-footer__inner {
        margin-top: var(--wp--preset--spacing--60);
    }

    .apollo-footer__hotdoc-row {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* Below 992px — full-width brand, then three columns */
@media (max-width: 61.99rem) {
    .apollo-footer-cta {
        padding-block: var(--wp--preset--spacing--60);
    }

    .apollo-footer-cta__inner {
        flex-direction: column;
        gap: var(--wp--preset--spacing--50);
    }

    .apollo-footer-cta__content {
        flex: 0 0 auto;
        width: 100%;
    }
    .apollo-footer-cta__title,
    .apollo-footer-cta__description {
        text-align: center;
    }

    .apollo-footer-cta__actions {
        justify-content: flex-start;
    }

    .apollo-footer-cta__mark {
        width: 9rem;
        opacity: 0.1;
    }

    .apollo-footer-cta__mark--top-left {
        top: 0;
        left: -2.5rem;
    }

    .apollo-footer-cta__mark--bottom-right {
        right: -1rem;
        bottom: -3rem;
    }

    .apollo-footer-cta__actions .apollo-button {
        min-height: 2.6rem;
        padding: 0.6rem 1.1rem;
    }

    .apollo-footer__inner {
        margin-top: var(--wp--preset--spacing--60);
    }

    .apollo-footer__columns {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--60)
            var(--wp--preset--spacing--40);
        padding-bottom: var(--wp--preset--spacing--60);
    }

    /* Quick Links, Opening Hours, and Contact Info share a row. */
    .apollo-footer__column {
        flex: 0 0 calc(
            (100% - (var(--wp--preset--spacing--40) * 2)) / 3
        );
    }

    .apollo-footer__brand {
        flex: 0 0 100%;
        width: 100%;
    }

    .apollo-footer__contact {
        flex-grow: 0;
    }

    .apollo-footer__description {
        max-width: 28rem;
    }

    .apollo-footer__hotdoc-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .apollo-footer__bottom {
        align-items: flex-start;
    }
}

/* Remove the brand text limit without affecting the below-400px layout. */
@media (min-width: 25rem) and (max-width: 61.99rem) {
    .apollo-footer__brand,
    .apollo-footer__description {
        max-width: none;
    }
}


/* Below 768px — links/hours together, contact full width */
@media (max-width: 47.99rem) {
    .apollo-footer-cta__actions .apollo-button {
        min-height: 2.5rem;
        padding: 0.55rem 1rem;
        font-size: var(--wp--preset--font-size--xs);
    }

    .apollo-footer-cta__mark {
        width: 6rem;
        opacity: 0.16;
    }

    .apollo-footer-cta__mark--top-left {
        top: 0;
        left: -1.75rem;
    }

    .apollo-footer-cta__mark--bottom-right {
        right: -1rem;
        bottom: -2rem;
    }

    .apollo-footer__inner {
        margin-top: var(--wp--preset--spacing--50);
    }

    .apollo-footer__columns {
        row-gap: var(--wp--preset--spacing--50);
        padding-bottom: var(--wp--preset--spacing--50);
    }

    .apollo-footer__links,
    .apollo-footer__hours {
        flex: 0 0 calc(
            (100% - var(--wp--preset--spacing--40)) / 2
        );
    }

    .apollo-footer__contact {
        flex: 0 0 100%;
        width: 100%;
    }

    .apollo-footer__brand .site-branding {
        margin-bottom: var(--wp--preset--spacing--40);
    }

    .apollo-footer__brand .apollo-footer__social {
        margin-top: var(--wp--preset--spacing--40);
    }

    .apollo-footer__heading {
        margin-bottom: var(--wp--preset--spacing--30);
    }

    .apollo-footer__hours-list,
    .apollo-footer__contact-list {
        gap: var(--wp--preset--spacing--20);
    }

    .apollo-footer__hours-list p {
        flex-direction: column;
    }

    .apollo-footer__badges {
        margin-top: var(--wp--preset--spacing--40);
    }

    .apollo-footer__credit {
        text-align: left;
    }
}

/* Keep both badge images on one row, excluding the original smallest layout. */
@media (min-width: 25rem) and (max-width: 47.99rem) {
    .apollo-footer__badges {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .apollo-footer__badges > .apollo-footer__hotdoc-row {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
    }

    .apollo-footer__badges > .apollo-footer__accreditation {
        flex: 0 0 auto;
    }
}


/* Below 560px */
@media (max-width: 34.99rem) {
    .apollo-footer-cta {
        padding-block: var(--wp--preset--spacing--50);
    }

    .apollo-footer-cta__mark {
        width: 4.5rem;
        opacity: 0.14;
    }

    .apollo-footer-cta__mark--top-left {
        top: 0.25rem;
        left: -1.25rem;
    }

    .apollo-footer-cta__mark--bottom-right {
        right: -0.75rem;
        bottom: -1.5rem;
    }

    .apollo-footer__inner {
        margin-top: var(--wp--preset--spacing--40);
    }

    .apollo-footer__brand .site-branding__logo img {
        max-width: 10rem;
    }

    .apollo-footer__hotdoc-row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--wp--preset--spacing--20);
    }

    .apollo-footer__hotdoc {
        max-width: 11rem;
    }

    .apollo-footer__accreditation {
        max-width: 8.5rem;
    }

    .apollo-footer__bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--wp--preset--spacing--20);
        text-align: center;
    }

    .apollo-footer__credit {
        text-align: center;
    }
}


/* Below 400px — preserve the original single-column layout */
@media (max-width: 24.99rem) {
    .apollo-footer-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .apollo-footer-cta__actions .apollo-button {
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        padding: 0.65rem 1rem;
        font-size: var(--wp--preset--font-size--sm);
    }

    .apollo-footer__columns {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--wp--preset--spacing--50);
        padding-bottom: var(--wp--preset--spacing--40);
    }

    .apollo-footer__column,
    .apollo-footer__brand,
    .apollo-footer__contact {
        flex: 0 0 auto;
        width: 100%;
    }

    .apollo-footer__brand .site-branding__logo img {
        max-width: 9rem;
    }

    .apollo-footer__brand .apollo-footer__social {
        gap: var(--wp--preset--spacing--20);
    }

    .apollo-footer__social-link {
        width: var(--wp--preset--spacing--60);
        height: var(--wp--preset--spacing--60);
    }

    .apollo-footer__contact-item {
        overflow-wrap: anywhere;
    }

    .apollo-footer__hotdoc {
        max-width: 10rem;
    }

    .apollo-footer__accreditation {
        max-width: 7.5rem;
    }

     .apollo-footer__hours-list p {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        justify-content: space-between;
    }

    .apollo-footer__hours-list p span {
        white-space: nowrap;
    }
}











/* =========================================================
   Shared navigation: header actions
   ========================================================= */
.site-header__cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--wp--preset--spacing--30);
}

.site-header__cta .apollo-button {
    min-height: 3.25rem;
    padding: 0.75rem 1.1rem;
}

.primary-nav__actions,
.primary-nav__mobile-toggle {
    display: none;
}


/* =========================================================
   Desktop navigation
   ========================================================= */
@media (min-width: 62rem) {
    .site-header__inner {
        justify-content: flex-start;
        gap: var(--wp--preset--spacing--50);
    }
    .site-header__inner > .site-branding {
        order: 1;
        flex: 0 0 auto;
    }
    .site-header__inner > .primary-nav {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
    }
    .site-header__inner > .site-header__actions {
        order: 3;
        flex: 0 0 auto;
        margin-left: 0;
    }
    .site-header__inner > .site-header__cta {
        order: 4;
        flex: 0 0 auto;
        margin-left: 0;
    }
    .site-header__inner > .nav-toggle {
        order: 5;
    }
    .primary-nav {
        position: relative;
    }
    .primary-nav__list {
        align-items: center;
        justify-content: center;
        gap: clamp(0.75rem, 1.5vw, 2rem);
    }
    .primary-nav__list > li > a,
    .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--base);
        font-size: var(--wp--preset--font-size--body);
        font-weight: 600;
        white-space: nowrap;
    }
    .primary-nav__list > li > a:hover,
    .primary-nav__list > li.current-menu-item > a,
    .primary-nav__list > li.current-menu-ancestor > a,
    .primary-nav__item-wrap > a:hover,
    .primary-nav__list > li.current-menu-item .primary-nav__item-wrap > a,
    .primary-nav__list > li.current-menu-ancestor .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--primary);
    }
    .primary-nav__list > .menu-item-has-children > .sub-menu {
        display: none;
    }
    .primary-nav__item-wrap {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    .primary-nav__dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.625rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--wp--preset--color--base);
        cursor: pointer;
        transition: color var(--apollo-transition);
    }
    .primary-nav__dropdown-toggle:hover,
    .primary-nav__dropdown-toggle:focus-visible,
    .primary-nav__dropdown-toggle[aria-expanded="true"] {
        background: transparent;
        color: var(--wp--preset--color--primary);
    }
    .primary-nav__dropdown-toggle svg {
        width: 0.875rem;
        height: 0.875rem;
        transition: transform var(--apollo-transition);
    }
    .primary-nav__dropdown-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }
    .apollo-nav-dropdown {
        position: fixed;
        z-index: 400;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 1.25rem;
        background: var(--wp--preset--color--base);
        box-shadow: 0 1.25rem 2.5rem rgba(23, 20, 15, 0.16);
    }
    .apollo-nav-dropdown[hidden] {
        display: none;
    }
    .apollo-nav-dropdown__inner {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .apollo-nav-dropdown__column {
        flex: 1 1 0;
        min-width: 0;
    }
    .apollo-nav-dropdown__column:first-child {
        flex: 1.2 1 0;
    }
    .apollo-nav-dropdown__column:nth-child(2) {
        flex: 1 1 0;
    }
    .apollo-nav-dropdown__column--small {
        flex: 0.55 1 0;
    }
    .apollo-nav-dropdown__heading {
        margin: 0 0 0.9rem;
        color: var(--wp--preset--color--primary);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.25;
    }
    .apollo-nav-dropdown__list {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .apollo-nav-dropdown__list li {
        margin: 0;
        padding: 0;
    }
    .apollo-nav-dropdown__list a {
        display: block;
        color: var(--wp--preset--color--contrast);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 400;
        line-height: 1.35;
        text-decoration: none;
        transition: color var(--apollo-transition);
    }
    .apollo-nav-dropdown__list a:hover,
    .apollo-nav-dropdown__list a:focus-visible {
        color: var(--wp--preset--color--primary);
    }
    .apollo-nav-dropdown--services {
        width: min(
            52rem,
            calc(100vw - (var(--wp--preset--spacing--50) * 2))
        );
    }
    .apollo-nav-dropdown__inner--services {
        display: flex;
        align-items: flex-start;
        gap: clamp(1.25rem, 2.5vw, 2.5rem);
        padding: 1.5rem 1.75rem 1.75rem;
    }
    .apollo-nav-dropdown--services .apollo-nav-dropdown__column {
        flex: 1 1 0;
        min-width: 0;
    }
    .apollo-nav-dropdown--services .apollo-nav-dropdown__heading {
        overflow-wrap: anywhere;
    }
    .apollo-nav-dropdown--services
    .apollo-nav-dropdown__heading
    > .apollo-nav-dropdown__category-link {
        display: inline-block;
        color: var(--wp--preset--color--primary);
        font: inherit;
        letter-spacing: inherit;
        text-decoration: none;
    }
    .apollo-nav-dropdown--services
    .apollo-nav-dropdown__heading
    > .apollo-nav-dropdown__category-link:hover {
        color: var(--wp--preset--color--primary-hover);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .apollo-nav-dropdown--services
    .apollo-nav-dropdown__heading
    > .apollo-nav-dropdown__category-link:focus-visible {
        color: var(--wp--preset--color--primary-hover);
        outline: var(--apollo-focus-ring);
        outline-offset: 3px;
    }
    .apollo-nav-dropdown--patient-info {
        width: min(
            15rem,
            calc(100vw - (var(--wp--preset--spacing--50) * 2))
        );
        padding: 1rem 1.25rem;
    }
    .apollo-nav-dropdown--patient-info .apollo-nav-dropdown__inner {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .apollo-nav-dropdown--patient-info .apollo-nav-dropdown__list {
        gap: 0;
    }
    .apollo-nav-dropdown--patient-info .apollo-nav-dropdown__list a {
        padding: 0.6rem 0;
    }
    .site-header--home.is-past-hero .primary-nav__item-wrap > a,
    .site-header:not(.site-header--home) .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--contrast);
        font-weight: 600;
    }
    .site-header--home.is-past-hero .primary-nav__dropdown-toggle,
    .site-header:not(.site-header--home) .primary-nav__dropdown-toggle {
        color: var(--wp--preset--color--contrast);
    }
    .site-header--home.is-past-hero .primary-nav__item-wrap > a:hover,
    .site-header--home.is-past-hero .primary-nav__dropdown-toggle:hover,
    .site-header--home.is-past-hero .primary-nav__dropdown-toggle:focus-visible,
    .site-header--home.is-past-hero .primary-nav__dropdown-toggle[aria-expanded="true"],
    .site-header:not(.site-header--home) .primary-nav__item-wrap > a:hover,
    .site-header:not(.site-header--home) .primary-nav__dropdown-toggle:hover,
    .site-header:not(.site-header--home) .primary-nav__dropdown-toggle:focus-visible,
    .site-header:not(.site-header--home) .primary-nav__dropdown-toggle[aria-expanded="true"] {
        color: var(--wp--preset--color--primary);
    }
    .site-header--home.is-past-hero
    .primary-nav__list > li.current-menu-item .primary-nav__item-wrap > a,
    .site-header--home.is-past-hero
    .primary-nav__list > li.current-menu-ancestor .primary-nav__item-wrap > a,
    .site-header:not(.site-header--home)
    .primary-nav__list > li.current-menu-item .primary-nav__item-wrap > a,
    .site-header:not(.site-header--home)
    .primary-nav__list > li.current-menu-ancestor .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--primary);
    }
    .site-header.site-header--home:not(.is-past-hero) {
        background: linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--wp--preset--color--primary-soft) 32%,
                transparent
            ) 0%,
            color-mix(
                in srgb,
                var(--wp--preset--color--primary) 6%,
                transparent
            ) 50%,
            color-mix(
                in srgb,
                var(--wp--preset--color--primary-soft) 24%,
                transparent
            ) 100%
        );
    }
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > a,
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--contrast) !important;
        font-weight: 600;
    }
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__dropdown-toggle {
        color: var(--wp--preset--color--contrast) !important;
        background: transparent;
    }
    .site-header.site-header--home
    .primary-nav__list > li > a,
    .site-header.site-header--home
    .primary-nav__list > li > .primary-nav__item-wrap > a {
        position: relative;
        text-decoration: none !important;
        background-image: none;
    }
    .site-header.site-header--home
    .primary-nav__list > li > a::after,
    .site-header.site-header--home
    .primary-nav__list > li > .primary-nav__item-wrap > a::after {
        content: "";
        position: absolute;
        top: calc(100% + 5px);
        right: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 2px;
        border: 0;
        border-radius: 999px;
        background: var(--wp--preset--color--primary);
        pointer-events: none;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 240ms ease;
    }
    .site-header.site-header--home
    .primary-nav__list > li > a:is(:hover, :focus-visible)::after,
    .site-header.site-header--home
    .primary-nav__list > li > .primary-nav__item-wrap > a:is(
        :hover,
        :focus-visible
    )::after {
        transform: scaleX(1);
    }
    .site-header.site-header--home
    .primary-nav__list > li:is(
        .current-menu-item,
        .current-menu-ancestor
    ) > a::after,
    .site-header.site-header--home
    .primary-nav__list > li:is(
        .current-menu-item,
        .current-menu-ancestor
    ) > .primary-nav__item-wrap > a::after {
        transform: scaleX(1);
    }
    body.page-template:not(.page-template-template-home)
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > a,
    body.page-template:not(.page-template-template-home)
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > .primary-nav__item-wrap > a {
        color: var(--wp--preset--color--base) !important;
    }
    body.page-template:not(.page-template-template-home)
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__dropdown-toggle {
        color: var(--wp--preset--color--base) !important;
    }
    body.page-template:not(.page-template-template-home)
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > a::after,
    body.page-template:not(.page-template-template-home)
    .site-header.site-header--home:not(.is-past-hero)
    .primary-nav__list > li > .primary-nav__item-wrap > a::after {
        background: var(--wp--preset--color--base);
    }
}


/* ---------------------------------
   Desktop: compact spacing where CTAs remain visible
   --------------------------------- */
@media (min-width: 80rem) and (max-width: 89.99rem) {
    .site-header__inner {
        gap: var(--wp--preset--spacing--40);
    }
    .primary-nav__list {
        gap: 0.75rem;
    }
    .site-header__cta {
        gap: var(--wp--preset--spacing--20);
    }
    .site-header__cta .apollo-button {
        padding-inline: 0.9rem;
    }
}


/* ---------------------------------
   Desktop: smaller screens
   --------------------------------- */
@media (min-width: 62rem) and (max-width: 79.99rem) {
    .site-header .site-header__cta {
        display: none;
    }
    .site-header__cta .apollo-button {
        padding-inline: 0.75rem;
        font-size: var(--wp--preset--font-size--sm);
    }
    .primary-nav__list {
        gap: 1rem;
    }
}


/* =========================================================
   Mobile navigation
   ========================================================= */
@media (max-width: 61.99rem) {
    .site-header .site-header__cta {
        display: none;
    }
    .site-header__inner > .nav-toggle {
        order: 5;
        margin-left: auto;
    }
    .primary-nav__actions {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--20);
        width: 100%;
        margin-top: auto;
        padding-top: var(--wp--preset--spacing--50);
    }
    .primary-nav__actions > .apollo-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: 3.25rem;
        margin: 0;
        padding: 0.75rem 1.1rem;
        border-radius: 999px;
        white-space: normal;
    }
    .primary-nav__actions > .site-header__appointment {
        background: var(--wp--preset--color--primary);
        border-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--on-primary);
    }
    .primary-nav__actions > .site-header__appointment:hover,
    .primary-nav__actions > .site-header__appointment:focus-visible {
        background: var(--wp--preset--color--primary-hover);
        border-color: var(--wp--preset--color--primary-hover);
        color: var(--wp--preset--color--on-primary);
    }
    .primary-nav__actions > .site-header__phone {
        background: var(--wp--preset--color--base);
        border-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--primary);
    }
    .primary-nav__actions > .site-header__phone:hover,
    .primary-nav__actions > .site-header__phone:focus-visible {
        background: var(--wp--preset--color--primary-soft);
        border-color: var(--wp--preset--color--primary);
        color: var(--wp--preset--color--primary);
    }
    .primary-nav__head {
        gap: var(--wp--preset--spacing--40);
    }
    .primary-nav__branding {
        flex: 1 1 auto;
        min-width: 0;
    }
    .primary-nav__branding .site-branding {
        margin: 0;
    }
    .primary-nav__branding .custom-logo-link {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }
    .primary-nav__branding .site-branding__logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 10rem;
        max-height: 3rem;
        object-fit: contain;
    }
    .primary-nav__head > .nav-close {
        flex: 0 0 auto;
    }
    .apollo-nav-dropdown {
        display: none !important;
    }
    .primary-nav__list .menu-item-has-children {
        position: relative;
    }
    .primary-nav__list > .menu-item-has-children > a {
        position: relative;
    }
    .primary-nav__list > .menu-item-has-children > a::after {
        content: none;
        display: none;
    }
    .primary-nav__list .menu-item-has-children > a {
        padding-right: 3rem;
    }
    .primary-nav__list .primary-nav__mobile-toggle {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--apollo-button-radius);
        background: transparent;
        color: var(--wp--preset--color--contrast);
        cursor: pointer;
    }
    .primary-nav__list > li > .primary-nav__mobile-toggle {
        top: 0.25rem;
    }
    .primary-nav__mobile-toggle svg {
        width: 0.875rem;
        height: 0.875rem;
        transition: transform var(--apollo-transition);
    }
    .primary-nav__mobile-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }
    .primary-nav__list .primary-nav__mobile-toggle:hover,
    .primary-nav__list .primary-nav__mobile-toggle:focus-visible,
    .primary-nav__list .primary-nav__mobile-toggle[aria-expanded="true"] {
        color: var(--wp--preset--color--primary);
    }
    .primary-nav__list .menu-item-has-children > .sub-menu {
        display: none;
        flex-direction: column;
        max-height: none;
        margin: 0;
        padding: 0 0 0 0.9rem;
        overflow: visible;
        opacity: 1;
        transition: none;
    }
    .primary-nav__list
    .menu-item-has-children.is-submenu-open > .sub-menu {
        display: flex;
        max-height: none;
        margin: 0 0 0.5rem;
        opacity: 1;
    }
    .primary-nav__list .sub-menu[hidden] {
        display: none !important;
    }
    .primary-nav__list .sub-menu > li {
        min-width: 0;
    }
    .primary-nav__list .sub-menu a {
        line-height: 1.4;
        overflow-wrap: anywhere;
    }
    .primary-nav__list > .menu-item-has-children > .sub-menu a {
        display: block;
        padding: 0.6rem 0.25rem;
        color: var(--wp--preset--color--contrast-muted);
        font-size: var(--wp--preset--font-size--md);
    }
    .primary-nav__list
    .sub-menu
    .menu-item-has-children > a {
        display: block;
        width: 100%;
        min-width: 0;
        padding-right: 3rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .primary-nav__list
    > li > .sub-menu > .menu-item-has-children > a {
        color: var(--wp--preset--color--contrast);
    }
    .primary-nav__list .sub-menu .sub-menu a {
        padding-block: 0.55rem;
        color: var(--wp--preset--color--contrast-muted);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 400;
    }
    .primary-nav__list .sub-menu a:hover,
    .primary-nav__list .sub-menu a:focus-visible {
        color: var(--wp--preset--color--primary);
    }
}


/* ---------------------------------
   Mobile: narrow drawer logo
   --------------------------------- */
@media (max-width: 24.99rem) {
    .primary-nav__branding .site-branding__logo img {
        max-width: 8.5rem;
        max-height: 2.75rem;
    }
}


/* =========================================================
   Navigation: reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .primary-nav__dropdown-toggle,
    .primary-nav__dropdown-toggle svg,
    .primary-nav__mobile-toggle svg,
    .primary-nav__list .menu-item-has-children > .sub-menu {
        transition: none;
    }
}

@media (min-width: 62rem) and (prefers-reduced-motion: reduce) {
    .site-header.site-header--home
    .primary-nav__list > li > a::after,
    .site-header.site-header--home
    .primary-nav__list > li > .primary-nav__item-wrap > a::after {
        transition: none;
    }
}