/*
Theme Name: HealthSource Chiropractic of Roseland
Template: samaroo-core
Author: Samaroo Solutions
Author URI: https://samaroosolutions.com/
Description: Child theme for HealthSource Chiropractic of Roseland, built on Samaroo Core by Samaroo Solutions.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthsource-roseland
*/

/*
 * HealthSource of Roseland: calm clinic look on the HealthSource brand (red primary, navy secondary,
 * light grey surfaces, Manrope). Colours, fonts, radius and spacing come from theme.json presets only,
 * so the Site Editor stays in control. Mobile first; every rule here is presentation only.
 *
 * Sections: 1 tokens, 2 base and focus, 3 header, 4 navigation, 5 buttons, 6 page header,
 * 7 content (text, links, lists, images, tables), 8 cards and service queries, 9 business info,
 * 10 home sections, 11 closing call to action, 12 footer, 13 mobile action bar, 14 booking page.
 */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	--hs-header-h: var(--wp--custom--header--height, 76px);
	--hs-bar-h: 4.125rem;
	--hs-ring: var(--wp--preset--color--secondary);
	--hs-ease: 160ms ease;
	--hs-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--hs-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* 2. Base and focus ----------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hs-header-h) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

:is(h1, h2, h3, h4) {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* A visible, high-contrast ring everywhere (navy on light, white on dark). */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--hs-ring);
	outline-offset: 3px;
}

.has-secondary-background-color,
.hs-trust,
.hs-footer {
	--hs-ring: var(--wp--preset--color--on-secondary);
}

/* Headings take navy from theme.json; inside a band with its own text colour they follow that colour. */
.has-text-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.hs-trust :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
	color: inherit;
}

/* 3. Header (sticky on the template-part wrapper, which spans the whole page) */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on phones, so the header sticks to the very top. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.hs-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--soft);
}

.hs-header__bar {
	min-height: 3.25rem;
}

.hs-header__brand {
	flex: 0 1 auto;
	min-width: 0;
}

.hs-header .wp-block-site-logo img {
	height: auto;
	max-height: 3.25rem;
	width: auto;
}

/* With an uploaded logo the text wordmark is not needed (the logo link carries the site name). */
.hs-header__brand:has(.wp-block-site-logo) .hs-wordmark {
	display: none;
}

.hs-wordmark {
	border-left: 4px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--secondary);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
	max-width: 9.5em;
	padding-left: 0.6rem;
}

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

.hs-header__actions {
	flex: 0 0 auto;
}

/* Compact header buttons (44px targets); the phone button is hidden on phones (it lives in the bottom bar). */
.hs-header__cta {
	flex-wrap: nowrap;
	gap: 0.5rem;
}

.hs-header__cta .wp-block-button__link.wp-element-button {
	font-size: var(--wp--preset--font-size--small);
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
}

.hs-header__cta > .hs-header__call {
	display: none;
}

/* Under 782px the bottom bar carries Call and Book, so the header keeps only the wordmark and the menu button
   (a header Book button there collided with the wordmark at 375px). */
@media (max-width: 781px) {
	.hs-header__cta > .hs-header__book {
		display: none;
	}

	.hs-header__brand {
		flex: 1 1 auto;
	}

	.hs-wordmark {
		max-width: none;
	}
}

@media (min-width: 420px) {
	.hs-wordmark {
		font-size: 1.0625rem;
		max-width: 11em;
	}
}

@media (min-width: 782px) {
	.hs-header__cta > .hs-header__call {
		display: inline-block;
	}

	.hs-header__cta .wp-block-button__link.wp-element-button {
		font-size: 0.9375rem;
		padding: 0.55rem 1.1rem;
	}
}

@media (min-width: 600px) {
	.hs-wordmark {
		max-width: 14em;
	}
}

@media (min-width: 1100px) and (max-width: 1199px) {
	/* The full menu is inline from 1100px; the wordmark wraps to three short lines until 1200px. */
	.hs-wordmark {
		max-width: 10em;
	}
}

@media (min-width: 1280px) {
	.hs-wordmark {
		font-size: 1.125rem;
	}
}

/* 4. Navigation --------------------------------------------------------- */
.hs-nav {
	color: var(--wp--preset--color--secondary);
	font-size: 1rem;
	font-weight: 600;
	gap: 1.25rem;
}

.hs-nav .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	text-decoration: underline 2px transparent;
	text-underline-offset: 0.45em;
	transition: text-decoration-color var(--hs-ease);
}

.hs-nav .wp-block-navigation-item__content:hover,
.hs-nav .wp-block-navigation-item__content:focus-visible,
.hs-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	text-decoration-color: var(--wp--preset--color--primary);
}

.hs-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--secondary);
	min-width: 15rem;
	padding: 0.5rem 0;
}

.hs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
}

.hs-nav .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--secondary);
	justify-content: center;
	padding: 9px;
}

.hs-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
}

/* The desktop menu is right-aligned; the open overlay reads better left-aligned. */
.hs-nav .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) {
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
}

.hs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0.25rem;
	padding-top: 2.5rem;
}

.hs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--large);
}

.hs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding-block: 0.45rem;
}

.hs-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--border);
	border-radius: 0;
	box-shadow: none;
	margin-top: 0.25rem;
	min-width: 0;
	padding: 0 0 0 1rem;
}

.hs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--medium);
}

/* The menu needs about 1100px for every item, the phone and the Book button, so the overlay
 * (menu button) is used up to that width, not only on phones. The menu button sits last, at the right. */
@media (max-width: 1099px) {
	.hs-header__actions > .hs-nav {
		order: 2;
	}
}

@media (min-width: 600px) and (max-width: 1099px) {
	.hs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hs-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* 5. Buttons: primary red, outline navy, 48px targets ------------------- */
.wp-block-button__link.wp-element-button {
	align-items: center;
	border: 2px solid transparent;
	display: inline-flex;
	gap: 0.5rem;
	justify-content: center;
	min-height: 48px;
	transition: background-color var(--hs-ease), border-color var(--hs-ease), color var(--hs-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--secondary);
	padding: 0.8rem 1.5rem;
}

.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

:is(.hs-trust, .has-secondary-background-color) .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	color: var(--wp--preset--color--on-secondary);
}

:is(.hs-trust, .has-secondary-background-color) .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
	background-color: var(--wp--preset--color--on-secondary);
	border-color: var(--wp--preset--color--on-secondary);
	color: var(--wp--preset--color--secondary);
}

.wp-block-buttons.is-layout-flex {
	gap: 0.75rem;
}

/* 6. Page header (breadcrumbs + H1) ------------------------------------ */
.hs-page-header .ssc-breadcrumbs {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.hs-page-header .ssc-breadcrumbs a {
	color: var(--wp--preset--color--secondary);
}

.hs-page-header .wp-block-post-title {
	margin-block: 0;
}

.hs-page-header .wp-block-post-title::after {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	display: block;
	height: 4px;
	margin-top: 1rem;
	width: 3rem;
}

.hs-page-header__lead {
	color: var(--wp--preset--color--contrast);
	line-height: 1.5;
}

/* 7. Content the writers produce ---------------------------------------- */
.wp-block-post-content {
	overflow-wrap: break-word;
}

/* Lead sentence on interior pages. */
.hs-entry:not(.hs-home) > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

/* Heading rhythm: more room above, less below, so each heading belongs to its text. */
.wp-block-post-content > h2 {
	margin-block-start: calc(var(--wp--preset--spacing--50) + 0.5rem);
}

.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Links in body text: navy text with a brand-red underline (passes contrast on white and grey). */
.wp-block-post-content a:where(:not(.wp-element-button)),
.hs-cta a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--secondary);
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness var(--hs-ease);
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.hs-cta a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.hs-trust a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-secondary);
	text-decoration-color: currentColor;
}

/* Bulleted lists: red check marks. Numbered lists: navy step numbers. */
.wp-block-post-content ul.wp-block-list,
.is-style-checks {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-post-content ul.wp-block-list > li,
.is-style-checks > li {
	padding-inline-start: 1.85rem;
	position: relative;
}

.wp-block-post-content :is(ul, ol).wp-block-list > li + li,
.is-style-checks > li + li {
	margin-top: 0.55rem;
}

.wp-block-post-content ul.wp-block-list > li::before,
.is-style-checks > li::before {
	border: solid var(--wp--preset--color--primary);
	border-width: 0 3px 3px 0;
	box-sizing: border-box;
	color: transparent;
	content: "";
	height: 0.8em;
	left: 0.3em;
	position: absolute;
	top: 0.3em;
	transform: rotate(45deg);
	width: 0.45em;
}

.wp-block-post-content ol.wp-block-list {
	counter-reset: hs-step;
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-post-content ol.wp-block-list > li {
	counter-increment: hs-step;
	min-height: 2rem;
	padding-inline-start: 2.75rem;
	position: relative;
}

.wp-block-post-content ol.wp-block-list > li::before {
	align-items: center;
	background-color: var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--on-secondary);
	content: counter(hs-step);
	display: flex;
	font-size: 0.9375rem;
	font-weight: 700;
	height: 1.9rem;
	justify-content: center;
	left: 0;
	line-height: 1;
	position: absolute;
	top: 0;
	width: 1.9rem;
}

/* Images: rounded, full column width, natural ratio. Theme-folder images carry no width/height,
 * so a 3:2 box is reserved until the file loads (no layout shift for 3:2 photos). */
.wp-block-post-content .wp-block-image {
	margin-block: var(--wp--preset--spacing--50);
}

.wp-block-post-content .wp-block-image:first-child {
	margin-block-start: 0;
}

.wp-block-post-content .wp-block-image img {
	aspect-ratio: auto 3 / 2;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--large);
	height: auto;
	width: 100%;
}

.wp-block-post-content .wp-block-image img[width][height] {
	aspect-ratio: auto;
}

.wp-block-image figcaption,
.wp-element-caption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.6rem;
	text-align: center;
}

/* Tables: scroll sideways on phones (parent), clean rules, navy header row. */
.wp-block-post-content .wp-block-table {
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-post-content .wp-block-table table {
	border-collapse: collapse;
	font-size: 0.9375rem;
	width: 100%;
}

.wp-block-post-content .wp-block-table :is(th, td) {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-post-content .wp-block-table thead {
	border-bottom: 0;
}

.wp-block-post-content .wp-block-table thead th {
	background-color: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

.wp-block-post-content .wp-block-table tbody th {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--secondary);
}

.wp-block-post-content .wp-block-table tbody tr:nth-child(even) td {
	background-color: var(--wp--preset--color--surface);
}

/* Mid-page Book + Call buttons get breathing room. */
.wp-block-post-content > .wp-block-buttons {
	margin-block: var(--wp--preset--spacing--50);
}

/* 8. Cards and service queries ------------------------------------------ */
.is-style-card {
	border-radius: var(--wp--custom--radius--medium);
	transition: border-color var(--hs-ease), box-shadow var(--hs-ease), transform var(--hs-ease);
}

.wp-block-post-template .is-style-card {
	display: flex;
	flex-direction: column;
}

.wp-block-post-template .is-style-card:hover,
.wp-block-post-template .is-style-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-post-template .is-style-card:hover {
		transform: translateY(-2px);
	}
}

.is-style-card .wp-block-post-title {
	margin: 0;
}

.is-style-card .wp-block-post-title a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.is-style-card .wp-block-post-title a:hover,
.is-style-card .wp-block-post-title a:focus-visible {
	text-decoration: underline 2px var(--wp--preset--color--primary);
	text-underline-offset: 0.2em;
}

.is-style-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	margin-block-end: 0;
}

.is-style-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.is-style-card .wp-block-read-more,
.wp-block-read-more {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	margin-top: auto;
	padding-top: 0.25rem;
	text-decoration: none;
}

.wp-block-read-more::after {
	content: " \2192";
}

.is-style-card .wp-block-read-more:hover,
.is-style-card .wp-block-read-more:focus-visible,
.wp-block-read-more:hover,
.wp-block-read-more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hs-related .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* 9. Business info block ------------------------------------------------ */
address.ssc-business-info {
	box-sizing: border-box;
	font-style: normal;
}

address.ssc-business-info p {
	margin: 0 0 0.85rem;
}

address.ssc-business-info strong {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-post-content address.ssc-business-info {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--medium);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-post-content address.ssc-business-info p:last-child {
	margin-bottom: 0;
}

/* 10. Home sections (hs-hero, hs-card, hs-band, hs-steps, hs-trust) ---- */
.wp-block-post-content > :is(.hs-hero, .hs-band, .hs-steps, .hs-trust) {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--70);
}

/* Hero: light grey wash, big navy H1, checklist and both actions. */
.hs-hero:not(.has-background) {
	background-image: linear-gradient(180deg, var(--wp--preset--color--surface) 0%, var(--wp--preset--color--surface) 70%, var(--wp--preset--color--base) 100%);
}

.wp-block-post-content > .hs-hero {
	padding-block-start: var(--wp--preset--spacing--60);
}

.hs-hero .wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.hs-hero h1 {
	font-size: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
	line-height: 1.08;
	margin-block-end: 0;
}

.hs-hero h1 + p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.hs-hero .is-style-checks {
	font-weight: 600;
}

.hs-hero .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.hs-hero .wp-block-image img {
	box-shadow: var(--wp--preset--shadow--raised);
}

/* New-patient card overlaps the bottom of the hero. */
.wp-block-post-content > .hs-hero:has(+ .hs-card) {
	padding-block-end: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--50));
}

.wp-block-post-content > .hs-hero + .hs-card {
	margin-block-start: calc(var(--wp--preset--spacing--50) * -1);
}

.hs-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	border-top: 5px solid var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--raised);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	position: relative;
	z-index: 1;
}

.hs-card > :first-child {
	margin-block-start: 0;
}

.hs-card > :last-child {
	margin-block-end: 0;
}

.hs-card h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

@media (min-width: 782px) {
	.hs-card {
		padding-inline: var(--wp--preset--spacing--50);
	}
}

/* Bands: one job each, alternating white and light grey. */
.hs-band + .hs-band:not(.has-background) {
	background-color: var(--wp--preset--color--surface);
}

.hs-band + .hs-band + .hs-band:not(.has-background) {
	background-color: var(--wp--preset--color--base);
}

.hs-band + .hs-band + .hs-band + .hs-band:not(.has-background) {
	background-color: var(--wp--preset--color--surface);
}

.hs-band > h2,
.hs-steps h2,
.hs-trust > h2 {
	margin-block-end: 0;
}

.hs-band > h2 + p {
	margin-block-start: var(--wp--preset--spacing--20);
}

.hs-band > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* A band that lists the services: centred intro above a wide card grid. */
.hs-band:has(> .wp-block-query) > :is(h2, p) {
	text-align: center;
}

.hs-band > .wp-block-query {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* A list made only of links (for example the conditions list) becomes a grid of tappable tiles. */
.hs-band ul.wp-block-list:has(> li > a:only-child) {
	display: grid;
	gap: 0.65rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.hs-band ul.wp-block-list:has(> li > a:only-child) > li {
	margin: 0;
	padding: 0;
}

.hs-band ul.wp-block-list:has(> li > a:only-child) > li::before {
	content: none;
}

.hs-band ul.wp-block-list:has(> li > a:only-child) > li > a {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-sizing: border-box;
	color: var(--wp--preset--color--secondary);
	display: flex;
	font-weight: 600;
	gap: 0.75rem;
	height: 100%;
	justify-content: space-between;
	min-height: 48px;
	padding: 0.7rem 1rem;
	text-decoration: none;
	transition: border-color var(--hs-ease), box-shadow var(--hs-ease);
}

.hs-band ul.wp-block-list:has(> li > a:only-child) > li > a::after {
	color: var(--wp--preset--color--primary);
	content: "\2192";
	flex: none;
}

.hs-band ul.wp-block-list:has(> li > a:only-child) > li > a:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Steps: light grey section, numbered list beside a photo. */
.hs-steps:not(.has-background) {
	background-color: var(--wp--preset--color--surface);
}

.hs-steps .wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.hs-steps ol.wp-block-list {
	margin-block: var(--wp--preset--spacing--40);
}

.hs-steps ol.wp-block-list > li + li {
	margin-top: 1rem;
}

/* Trust: the one navy band on the page, with the review figures large. */
.hs-trust:not(.has-background) {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

.hs-trust > h2 {
	text-align: center;
}

.hs-trust > .wp-block-columns {
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.hs-trust .wp-block-column {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-secondary) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--on-secondary) 22%, transparent);
	border-radius: var(--wp--custom--radius--large);
	border-top: 4px solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

.hs-trust .wp-block-column > * {
	margin-block: 0;
}

.hs-trust .wp-block-column > * + * {
	margin-block-start: 0.75rem;
}

.hs-stat {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.hs-stat strong {
	font-weight: inherit;
}

/* 11. Closing call to action (patterns/cta-book.php) -------------------- */
.hs-cta {
	border-top: 1px solid var(--wp--preset--color--border);
}

.hs-cta__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-end: 0;
}

.hs-cta__title::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	display: block;
	height: 4px;
	margin: 0 auto 1.1rem;
	width: 3rem;
}

.hs-cta__text {
	font-size: var(--wp--preset--font-size--large);
}

.hs-cta__buttons {
	margin-top: var(--wp--preset--spacing--40);
}

/* 12. Footer (navy) ----------------------------------------------------- */
.hs-footer {
	line-height: 1.6;
}

.hs-footer .hs-wordmark {
	color: var(--wp--preset--color--on-secondary);
	font-size: var(--wp--preset--font-size--large);
	max-width: 14em;
}

.hs-footer__about > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hs-footer address.ssc-business-info strong,
.hs-footer .hs-footer__heading {
	color: var(--wp--preset--color--accent);
}

.hs-footer .hs-footer__heading {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.hs-footer a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.hs-footer__nav {
	gap: 0.15rem;
	font-weight: 500;
}

.hs-footer__nav .wp-block-navigation-item__content {
	padding-block: 0.4rem;
}

.hs-footer__nav .wp-block-navigation-item__content:hover,
.hs-footer__nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hs-footer__social {
	font-size: 24px;
	gap: 0.25rem;
	margin-left: -10px;
}

.hs-footer__social.is-style-logos-only .wp-social-link a {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 10px;
}

.hs-footer__legal {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-secondary) 25%, transparent);
	color: var(--wp--preset--color--accent);
}

.hs-footer__legal p {
	margin: 0;
}

.hs-footer__legal > * + * {
	margin-block-start: 0.4rem;
}

/* 13. Mobile action bar (parts/mobile-bar.html, under 782px) ------------- */
.hs-mobile-bar {
	display: none;
}

@media (max-width: 781px) {
	.hs-mobile-bar {
		border-top: 1px solid var(--wp--preset--color--border);
		bottom: 0;
		box-shadow: 0 -6px 18px color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent);
		display: block;
		left: 0;
		padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
		position: fixed;
		right: 0;
		z-index: 40;
	}

	.hs-mobile-bar__buttons.wp-block-buttons {
		flex-wrap: nowrap;
		gap: 0.5rem;
		margin: 0;
	}

	.hs-mobile-bar__buttons > .wp-block-button {
		flex: 1 1 0;
		margin: 0;
		min-width: 0;
	}

	.hs-mobile-bar .wp-block-button__link.wp-element-button {
		font-size: 0.9375rem;
		gap: 0.4rem;
		height: 48px;
		min-height: 48px;
		overflow: hidden;
		padding: 0 0.5rem;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.hs-mobile-bar .wp-block-button__link.wp-element-button::before {
		background-color: currentColor;
		content: "";
		flex: none;
		height: 1.125rem;
		-webkit-mask: var(--hs-icon-phone) center / contain no-repeat;
		mask: var(--hs-icon-phone) center / contain no-repeat;
		width: 1.125rem;
	}

	.hs-mobile-bar__book .wp-block-button__link.wp-element-button::before {
		-webkit-mask-image: var(--hs-icon-calendar);
		mask-image: var(--hs-icon-calendar);
	}

	/* Content, the footer and focused elements are never hidden behind the bar. */
	body {
		padding-bottom: calc(var(--hs-bar-h) + env(safe-area-inset-bottom));
	}

	html {
		scroll-padding-bottom: calc(var(--hs-bar-h) + env(safe-area-inset-bottom) + 0.5rem);
	}
}

@media print {
	.hs-mobile-bar,
	.wp-site-blocks > header.wp-block-template-part {
		display: none;
		position: static;
	}
}

/* 14. Booking page ------------------------------------------------------ */
/* The booking widget (samaroo/booking) reads the preset variables (--wp--preset--color--primary,
 * --wp--preset--color--secondary, --wp--preset--color--surface, --wp--preset--color--border,
 * --wp--preset--font-family--body and --wp--custom--radius--*), so it follows this palette with no
 * extra CSS. On the booking page the closing band and the bottom bar would only repeat it. */
.wp-block-samaroo-booking {
	scroll-margin-top: calc(var(--hs-header-h) + 1rem);
}

body:has(.wp-block-samaroo-booking) :is(.hs-cta, .hs-mobile-bar) {
	display: none;
}

@media (max-width: 781px) {
	body:has(.wp-block-samaroo-booking) {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* 15. Blog: posts, blog index and archives ------------------------------ */
/* templates/single.html, home.html and archive.html. Category labels use navy (red on the grey
 * header would fall under 4.5:1). */

/* Blog index (samaroo/posts-page-header) and archive titles get the page-title bar. */
.hs-page-header .ssc-posts-page-header > h1,
.hs-page-header .wp-block-query-title {
	margin-block: 0;
}

.hs-page-header .ssc-posts-page-header > h1::after,
.hs-page-header .wp-block-query-title::after {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	display: block;
	height: 4px;
	margin-top: 1rem;
	width: 3rem;
}

/* The Posts page's own content, shown under the blog H1 (Yoast analyses it). Page 2 onwards shows
 * only the title, so the cards are not pushed below a repeated intro. */
.ssc-posts-page-header__intro {
	margin-top: var(--wp--preset--spacing--40);
	overflow-wrap: break-word;
}

body.paged .ssc-posts-page-header__intro {
	display: none;
}

.ssc-posts-page-header__intro > p:first-child {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.ssc-posts-page-header__intro > h2 {
	margin-block-start: calc(var(--wp--preset--spacing--50) + 0.5rem);
}

.ssc-posts-page-header__intro > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.ssc-posts-page-header__intro a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--secondary);
	text-decoration-color: var(--wp--preset--color--secondary);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.ssc-posts-page-header__intro a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.ssc-posts-page-header__intro ul.wp-block-list {
	list-style: none;
	padding-inline-start: 0;
}

.ssc-posts-page-header__intro ul.wp-block-list > li {
	padding-inline-start: 1.85rem;
	position: relative;
}

.ssc-posts-page-header__intro ul.wp-block-list > li + li {
	margin-top: 0.55rem;
}

.ssc-posts-page-header__intro ul.wp-block-list > li::before {
	border: solid var(--wp--preset--color--secondary);
	border-width: 0 3px 3px 0;
	box-sizing: border-box;
	content: "";
	height: 0.8em;
	left: 0.3em;
	position: absolute;
	top: 0.3em;
	transform: rotate(45deg);
	width: 0.45em;
}

.ssc-posts-page-header__intro .wp-block-image {
	margin-block: var(--wp--preset--spacing--50);
}

.ssc-posts-page-header__intro .wp-block-image img {
	aspect-ratio: auto 3 / 2;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--large);
	height: auto;
	width: 100%;
}

.ssc-posts-page-header__intro .wp-block-image img[width][height] {
	aspect-ratio: auto;
}

/* Archive intro (the category description). */
.hs-page-header .wp-block-term-description {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	margin-top: var(--wp--preset--spacing--30);
}

.hs-page-header .wp-block-term-description p {
	margin: 0;
}

/* Category labels (post header and cards). */
.hs-post-cats {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.hs-post-cats a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.hs-post-cats a:hover,
.hs-post-cats a:focus-visible {
	text-decoration: underline 2px var(--wp--preset--color--primary);
	text-underline-offset: 0.25em;
}

.hs-post-cats .wp-block-post-terms__separator {
	color: var(--wp--preset--color--muted);
}

/* Post header: byline and date on one line; one paragraph holds the byline text. */
.hs-post-meta {
	align-items: center;
	margin-top: var(--wp--preset--spacing--30);
}

.hs-post-meta > * {
	margin: 0;
}

.hs-byline {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.hs-post-meta > .wp-block-post-date {
	border-left: 1px solid var(--wp--preset--color--border);
	padding-left: var(--wp--preset--spacing--20);
}

/* On phones the byline and date stack, so the divider goes. */
@media (max-width: 599px) {
	.hs-post-meta > .wp-block-post-date {
		border-left: 0;
		padding-left: 0;
	}
}

/* Featured image under the header, in the text column. The wrapper disappears without an image. */
.hs-post-hero:not(:has(img)) {
	display: none;
}

.hs-post-hero .wp-block-post-featured-image {
	margin: 0;
}

.hs-post-hero .wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--large);
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Post cards (blog index, archives, related articles). */
.hs-post-card .wp-block-post-featured-image {
	margin: 0;
}

.hs-post-card .wp-block-post-featured-image img {
	background-color: var(--wp--preset--color--surface);
	height: auto;
	object-fit: cover;
	width: 100%;
}

.hs-post-card .wp-block-post-featured-image a:focus-visible {
	outline-offset: -3px;
}

.hs-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.hs-post-card .wp-block-post-title {
	line-height: 1.3;
}

.hs-post-card__title.wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}

.hs-post-card .wp-block-post-excerpt {
	font-size: 0.9375rem;
}

.hs-post-card .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* Blog index and archives: the newest card spans the row (WordPress lists 10 posts per page,
 * so 1 wide card + 9 fill three full rows). Image beside the text from 782px. */
.hs-post-list .wp-block-post-template > .wp-block-post:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .hs-post-card {
		flex-direction: row;
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .wp-block-post-featured-image {
		flex: 0 0 58%;
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .wp-block-post-featured-image img {
		height: 100%;
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .hs-post-card__body {
		justify-content: center;
		padding: var(--wp--preset--spacing--50) !important;
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .hs-post-card__title.wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--medium);
	}

	.hs-post-list .wp-block-post-template > .wp-block-post:first-child .wp-block-post-date {
		margin-top: 0;
	}
}

/* Related articles only show when there is at least one. */
.hs-related:not(:has(.wp-block-post)) {
	display: none;
}

/* Pagination: 44px targets, current page in navy. */
.hs-pagination.wp-block-query-pagination {
	font-weight: 600;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--60);
}

.hs-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.hs-pagination :is(a, .page-numbers) {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--secondary);
	display: inline-flex;
	justify-content: center;
	margin: 0;
	min-height: 44px;
	min-width: 44px;
	padding: 0 0.85rem;
	text-decoration: none;
}

.hs-pagination .page-numbers.dots {
	border-color: transparent;
}

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

.hs-pagination a:hover,
.hs-pagination a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}