/* ==========================================================================
   Avenues theme — front-end styles (mobile-first)
   Tokens copied 1:1 from the Avenues Global Design System (ds/tokens/*.css).
   Names and values match the avenues-content plugin's :root tokens.
   ========================================================================== */

:root {
	color-scheme: light;

	/* Brand */
	--brand-sun: #FCD841;
	--brand-grey: #555A61;
	--brand-green: #618465;
	--brand-white: #FFFFFF;
	--brand-ember: #F66C5E;
	--brand-black: #000000;

	/* Sun */
	--sun-50: #FEF9E3;
	--sun-100: #FDF1BE;
	--sun-200: #FCE88F;
	--sun-300: #FCE066;
	--sun-400: #FCD841;
	--sun-500: #EFC61F;

	/* Grey */
	--grey-50: #F6F7F8;
	--grey-100: #ECEEF0;
	--grey-300: #B4BBC1;
	--grey-500: #6C737B;
	--grey-600: #555A61;
	--grey-700: #43474D;
	--grey-900: #1C1E21;

	/* Green */
	--green-50: #EEF3EE;
	--green-200: #AEC6B0;
	--green-400: #618465;
	--green-600: #3D5641;

	--price: #B32D1E;
	--text-price: #B32D1E;

	/* Semantic */
	--bg-page: var(--brand-white);
	--text-heading: var(--grey-900);
	--text-body: var(--grey-700);
	--text-muted: var(--grey-600);
	--text-link: var(--green-600);
	--border-default: var(--grey-300);
	/* A focus indicator has to be visible against whatever is behind it. At 45% transparent
	   this measured 1.76:1 and all but vanished on the dark header — keyboard users could not
	   see where they were. Solid green for light surfaces; the header and dark bands override
	   it with Sun below. */
	--focus-ring: var(--brand-green);

	/* Type */
	--font-display: "Josefin Sans", "Century Gothic", Futura, sans-serif;
	--font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fs-display: 3.5rem;
	--fs-h1: 2.5rem;
	--fs-h2: 1.875rem;
	--fs-h3: 1.375rem;
	--fs-h4: 1.125rem;
	/* Body text is 14px everywhere (Ravid, 24 Sep): paragraphs, intros, lists, FAQ answers.
	   Headings, sub-headings and buttons keep their own sizes. */
	--fs-lead: 0.875rem;
	--fs-body: 0.875rem;
	--fs-button: 1rem;
	--fs-sm: 0.875rem;
	--fs-xs: 0.75rem;
	--fs-overline: 0.75rem;
	--lh-heading: 1.15;
	--lh-body: 1.55;
	--ls-display: -0.01em;
	--ls-overline: 0.18em;
	--ls-button: 0.02em;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.25rem;
	--space-8: 3rem;
	--space-9: 4rem;

	/* Radii, shadows, motion */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(28, 30, 33, 0.06);
	--shadow-sm: 0 2px 6px rgba(28, 30, 33, 0.07);
	--shadow-md: 0 8px 24px rgba(28, 30, 33, 0.09);
	--shadow-lg: 0 18px 48px rgba(28, 30, 33, 0.12);
	--shadow-sun: 0 12px 32px rgba(252, 216, 65, 0.35);
	--shadow-green: 0 12px 32px rgba(97, 132, 101, 0.28);
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--dur-slow: 360ms;

	/* Layout */
	--container: 1200px;
	--content: 720px;
	--measure: 65ch;
	/* Vertical rhythm for bands: one section should read as one composition on a
	   1440x900 desktop, so the band padding is deliberately tight. */
	--section-y: 2.25rem;
	--section-y-lg: 3rem;
	--gutter: var(--space-5);
	--header-dark: var(--grey-900);
	--header-darker: color-mix(in srgb, var(--grey-900) 80%, #000);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--text-body);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--text-heading);
	line-height: var(--lh-heading);
	font-weight: var(--fw-semibold);
	margin: 0 0 var(--space-3);
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, var(--fs-h1)); letter-spacing: var(--ls-display); }
h2 { font-size: clamp(1.5rem, 3.4vw, var(--fs-h2)); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--sun-200); color: var(--grey-900); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: var(--space-4); top: -100px; z-index: 1000;
	background: var(--brand-sun); color: var(--grey-900);
	padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

.av-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.av-narrow { max-width: calc(var(--content) + 2 * var(--gutter)); }

.av-eyebrow, .eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--fs-overline);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	color: var(--green-600);
	margin-bottom: var(--space-2);
}
.lead { font-size: var(--fs-lead); max-width: var(--measure); }
/* Phones zoom into any form field under 16px, so fields never go below it. */
input, select, textarea { font-size: max(16px, 1em); }

/* ---------- Brand icons (assets/icons, printed by avenues_icon()) ----------
   Monochrome: the icon takes the colour of its band — deep green on white, Sun on the
   green and dark bands. One optical size everywhere — 28px artwork, on a 46px circle when
   a chip is wanted — so a card row never looks ragged. No pastel chips: a plain white or Sun circle only. */
.av-icon { width: 28px; height: 28px; flex: 0 0 auto; display: block; color: var(--green-600); }
.av-icon-chip {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	flex: 0 0 auto; background: var(--brand-sun); color: var(--green-600);
}
.av-icon-chip .av-icon { width: 28px; height: 28px; color: inherit; }
/* On the green and dark bands the icon is Sun; on a Sun chip it stays deep green.
   Never Sun on the yellow FAIR band — that band gets the deep-green default. */
.benefit-bar .av-icon, .trust-bar .av-icon, .site-footer .av-icon, .av-icon-on-dark { color: var(--brand-sun); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	font-family: var(--font-body); font-weight: 600; font-size: var(--fs-button);
	letter-spacing: var(--ls-button); line-height: 1;
	border-radius: var(--radius-pill); padding: 0.72em 1.4em;
	border: 2px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--brand-sun); color: var(--grey-900); box-shadow: var(--shadow-sun); }
.btn-primary:hover { color: var(--grey-900); background: var(--brand-sun); }
.btn-green { background: var(--green-600); color: var(--brand-white); box-shadow: var(--shadow-green); }
.btn-green:hover { color: var(--brand-white); }
.btn-ghost { background: transparent; color: var(--grey-900); border-color: var(--grey-300); }
.btn-ghost:hover { border-color: var(--grey-900); color: var(--grey-900); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Core buttons follow the same pill style (colours come from theme.json). */
.wp-block-button__link { border-radius: var(--radius-pill); font-weight: 600; transition: transform var(--dur-fast) var(--ease-out); }
.wp-block-button__link:hover { transform: translateY(-2px); text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid var(--grey-900); color: var(--grey-900); background: transparent; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--header-dark); }
@media (min-width: 783px) { .admin-bar .site-header { top: 32px; } }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }

/* The utility bar is gone: it cost a whole strip of height for opening hours nobody read, and
   left a gap above the logo. The phone number now sits beside the booking pill on the nav row. */
.nav-phone { display: none; color: #E3E5E8; font-weight: 500; font-size: 0.875rem; white-space: nowrap; align-items: center; gap: 7px; flex-shrink: 0; }
.nav-phone svg { width: 15px; height: 15px; color: var(--brand-sun); }
.nav-phone:hover { color: #fff; text-decoration: none; }
/* Below 1000px the number does not fit beside the logo, but a clinic phone number should never
   be a full page-scroll away: the header keeps a tap-to-call icon and the menu carries the
   number in full. */
@media (max-width: 1149px) {
	.nav-phone { display: inline-flex; margin-left: 4px; margin-right: 2px; padding: 6px; }
	.nav-phone svg { width: 19px; height: 19px; }
	.nav-phone span, .nav-phone { font-size: 0; gap: 0; }
	.nav-phone svg { font-size: 1rem; }
}
/* 1000-1149px is the tight spot: the full desktop menu is showing but there is no hamburger to
   fall back to, so nothing may be dropped or clipped. The menu tightens and the booking pill
   loses a little padding; the phone is already icon-only here. */
@media (min-width: 1000px) and (max-width: 1149px) {
	.primary-nav { margin-inline: var(--space-3) auto; }
	.primary-nav a { font-size: 0.8125rem; }
	.primary-nav .menu { gap: 10px; }
	.nav-cta { margin-left: 8px; font-size: 0.8125rem; padding: 0.6em 1em; }
}
/* The tightest point of all: the full menu, a booking pill and a logo in 1000px. The logo
   gives up a few pixels here rather than any menu item being squeezed off the row. */
@media (min-width: 1000px) and (max-width: 1080px) {
	.brand img, .custom-logo-link img { height: 28px; max-height: 28px; }
	.primary-nav .menu { gap: 9px; }
	.primary-nav a { font-size: 0.78125rem; }
}
@media (max-width: 999px) { .nav-phone { margin-left: auto; } }
.mobile-nav-phone { display: flex; font-size: 0.9375rem; align-items: center; justify-content: center; gap: 9px; margin-top: var(--space-3); color: #E3E5E8; font-weight: 600; font-size: 1rem; }
.mobile-nav-phone svg { width: 18px; height: 18px; min-width: 18px; max-width: 18px; flex: 0 0 18px; color: var(--brand-sun); }
.mobile-nav-phone:hover { color: #fff; text-decoration: none; }

.nav-row { display: flex; align-items: center; gap: var(--space-4); min-height: 66px; }
.brand, .custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img, .custom-logo-link img { height: 28px; width: auto; max-height: 28px; }
@media (min-width: 1000px) { .brand img, .custom-logo-link img { height: 34px; max-height: 34px; } }

.primary-nav { display: none; }
.primary-nav .menu { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 24px); list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: #E3E5E8; font-weight: 500; position: relative; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--brand-sun); transition: width var(--dur-base) var(--ease-out); }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: #fff; text-decoration: none; }
.primary-nav a:hover::after, .primary-nav .current-menu-item > a::after { width: 100%; }
.nav-cta { display: none; font-size: 0.875rem; padding: 0.65em 1.25em; white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1000px) {
	/* The menu sits between the logo and the booking pill and never touches it: the nav
	   gets auto margins, the pill a hard minimum gap of its own. */
	.primary-nav { display: block; margin-inline: var(--space-5) auto; min-width: 0; flex: 0 1 auto; }
	.nav-phone, .nav-cta, .brand, .custom-logo-link { flex: 0 0 auto; }
	.nav-cta { display: inline-flex; margin-left: var(--space-4); }
}
/* The written-out number needs about 1120px before it stops colliding with the last menu
   item — measured, it overlapped "Booking" by 90px at 1000px and 30px at 1060px. Below that
   the tap-to-call icon takes its place, so the number is still one tap away at every width. */
@media (min-width: 1150px) {
	.nav-phone { display: inline-flex; margin-left: clamp(16px, 2vw, 34px); font-size: 0.875rem; }
	.nav-phone svg { width: 15px; height: 15px; }
	.nav-phone span, .nav-phone { font-size: 0.875rem; gap: 7px; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
	.primary-nav a { font-size: 0.8125rem; }
	.primary-nav .menu { gap: 12px; }
	.nav-cta { margin-left: 12px; }
}

.hamburger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 10px 8px; }
.hamburger > span[aria-hidden] { display: block; width: 26px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform var(--dur-base), opacity var(--dur-base); }
.hamburger[aria-expanded="true"] > span[aria-hidden]:nth-of-type(2) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] > span[aria-hidden]:nth-of-type(3) { opacity: 0; }
.hamburger[aria-expanded="true"] > span[aria-hidden]:nth-of-type(4) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1000px) { .hamburger { display: none; } }

.mobile-nav {
	position: fixed; inset: 0 0 0 auto; z-index: 200;
	width: min(86vw, 360px);
	background: var(--header-dark); box-shadow: var(--shadow-lg);
	padding: var(--space-5); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	display: flex; flex-direction: column; gap: var(--space-2);
	overflow-y: auto;
	transform: translateX(100%); visibility: hidden;
	transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
.mobile-nav .menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav .menu a { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: #E3E5E8; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mobile-nav .menu a:hover { color: var(--brand-sun); text-decoration: none; }
.mobile-nav .btn { margin-top: var(--space-5); }
.mobile-nav-close { align-self: flex-end; background: none; border: 0; cursor: pointer; padding: 6px; color: #fff; }
.mobile-nav-close svg { width: 26px; height: 26px; }
.scrim { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity var(--dur-base); }
.scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1000px) { .mobile-nav, .scrim { display: none; } }
body.nav-open { overflow: hidden; }

/* ---------- Sections / bands (match the plugin's .block utilities) ---------- */
.block { padding-block: var(--section-y); }
@media (min-width: 900px) { .block { padding-block: var(--section-y-lg); } }
.block.tint { background: var(--grey-50); }
/* No pastel washes: "soft" is a neutral grey tint, never a sun/green tint. */
.block.soft { background: var(--grey-50); }
.block.brand-sun { background: var(--brand-sun); }
.block.brand-sun .av-eyebrow, .block.brand-sun .eyebrow { color: var(--green-600); }
.block.brand-green { background: var(--green-600); color: var(--brand-white); }
.block.brand-green h1, .block.brand-green h2, .block.brand-green h3 { color: var(--brand-white); }
.block.brand-green .av-eyebrow, .block.brand-green .eyebrow { color: var(--brand-sun); }
.block.brand-green a:not(.btn) { color: var(--brand-sun); }
.section-head { max-width: var(--measure); margin-bottom: var(--space-5); }

/* ---------- Swipe rows (scroll-snap, no JS) ---------- */
.av-swipe:not(.wp-block-columns) {
	display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--space-4);
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch;
}
.av-swipe:not(.wp-block-columns) > * { scroll-snap-align: start; }
@media (min-width: 768px) {
	.av-swipe:not(.wp-block-columns) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow-x: visible; scroll-snap-type: none; gap: var(--space-4); }
}
/* Core Columns block with the av-swipe class: horizontal swipe below the columns breakpoint. */
@media (max-width: 781px) {
	body .wp-block-columns.av-swipe {
		flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain; gap: var(--space-4); padding-bottom: var(--space-2);
		-webkit-overflow-scrolling: touch;
	}
	body .wp-block-columns.av-swipe > .wp-block-column { flex: 0 0 80% !important; scroll-snap-align: start; }
}

/* ---------- Page content (block editor output) ---------- */
.site-main { display: block; }
.page-header { padding-block: var(--space-6) var(--space-4); }
.entry-content { padding-inline: var(--gutter); padding-bottom: var(--space-8); }
.entry-content > * { max-width: var(--content); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--container); }
.entry-content > .alignfull { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
.entry-content > .alignfull:last-child { margin-bottom: calc(-1 * var(--space-8)); }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content blockquote { margin-inline: 0; padding-left: var(--space-5); border-left: 4px solid var(--brand-sun); font-size: var(--fs-lead); }
.entry-content figure { margin-block: var(--space-5); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: var(--space-3); border-bottom: 1px solid var(--grey-100); text-align: left; }

/* Pattern helpers */
.av-band { padding: var(--section-y) var(--gutter); }
@media (min-width: 900px) { .av-band { padding-block: var(--section-y-lg); } }
.entry-content > .av-band + .av-band { margin-top: 0; }
.av-step-num { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; color: var(--green-400); margin-bottom: var(--space-2); }
.av-card { border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-xs); border: 1px solid var(--grey-100); }
.av-arrow-link a { font-weight: 600; color: var(--green-600); }
.av-arrow-link a::after { content: " →"; }
.av-split .wp-block-media-text__media img { border-radius: var(--radius-lg); }
.wp-block-details { border-bottom: 1px solid var(--grey-300); padding-block: var(--space-4); }
.wp-block-details summary { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--grey-900); cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: var(--space-3); }

/* ---------- Blog ---------- */
.post-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: #fff; border: 1px solid var(--grey-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card-link { display: block; color: inherit; }
.post-card-link:hover { text-decoration: none; }
.post-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.post-card-body { padding: var(--space-4); }
.post-card-date { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.post-card-title { font-size: 1.125rem; margin-bottom: var(--space-2); }
.post-card-excerpt { font-size: var(--fs-sm); margin: 0; }
.single-header { padding-top: var(--space-6); }
.single-meta { color: var(--text-muted); font-size: var(--fs-sm); }
.single-media img { width: 100%; border-radius: var(--radius-lg); }
.post-nav { padding-bottom: var(--space-8); }
.post-nav .nav-links { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .post-nav .nav-links { grid-template-columns: 1fr 1fr; } .post-nav .nav-next { text-align: right; } }
.post-nav-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.pagination .nav-links { display: flex; gap: var(--space-2); margin-top: var(--space-6); }
.pagination .page-numbers { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--grey-300); }
.pagination .current { background: var(--brand-sun); border-color: var(--brand-sun); color: var(--grey-900); }

/* Search form (404) */
.search-form { display: flex; gap: var(--space-2); margin-top: var(--space-6); max-width: 480px; }
.search-form label { flex: 1; }
.search-field { width: 100%; padding: 0.8em 1em; border: 1px solid var(--grey-300); border-radius: var(--radius-pill); font: inherit; }
.search-submit { padding: 0.8em 1.4em; border: 0; border-radius: var(--radius-pill); background: var(--grey-900); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- Footer ---------- */
.site-footer { background: var(--grey-900); color: var(--grey-300); padding-block: var(--space-7) var(--space-5); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand p { font-size: var(--fs-sm); max-width: 34ch; margin-top: var(--space-3); }
.footer-h { font-family: var(--font-display); color: #fff; font-weight: 600; margin-bottom: var(--space-3); letter-spacing: .02em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-col a, .footer-col li { color: var(--grey-300); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--brand-sun); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--fs-xs); color: var(--grey-500); }
.footer-bottom a { color: var(--grey-500); }

/* ---------- Mobile booking bar ---------- */
.av-bookbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	padding: var(--space-3) var(--gutter); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--grey-900) 92%, transparent);
	backdrop-filter: blur(6px);
}
.av-bookbar .btn { width: 100%; }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
body.no-bookbar { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 1000px) {
	.av-bookbar { display: none; }
	body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- Menus: second level (dropdowns) ---------------------------------------------
   Desktop: sub-menus open on hover and on keyboard focus (:focus-within), no JS needed.
   Phone drawer: sub-items are listed indented under their parent. Footer: parents act as
   column headings with their children underneath. */
.primary-nav .menu > li { position: relative; }
.primary-nav .menu-item-has-children > a { padding-right: 16px; }
.primary-nav .menu-item-has-children > a::before { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; }
.primary-nav .sub-menu { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 240px; list-style: none; margin: 0; padding: var(--space-3) 0; background: var(--grey-900, #1C1E21); border-radius: var(--radius-md, 16px); box-shadow: var(--shadow-lg, 0 18px 48px rgba(28,30,33,.12)); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); z-index: 60; }
.primary-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.primary-nav .menu > li:hover > .sub-menu,
/* Merely tabbing to a disclosure button must not open its dropdown: that would show a
   menu while aria-expanded is still false. Those items open from .is-open (nav.js). */
.primary-nav .menu > li:not(.menu-item-disclosure):focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.primary-nav .menu > li.menu-item-disclosure:focus-within > .sub-menu:focus-within { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.primary-nav .sub-menu a { display: block; padding: 10px 20px; white-space: nowrap; }
.primary-nav .sub-menu a::after { display: none; }
.primary-nav .sub-menu a:hover, .primary-nav .sub-menu .current-menu-item > a { color: var(--brand-sun); }
.mobile-nav .sub-menu { list-style: none; margin: 0 0 var(--space-2); padding: 0 0 0 var(--space-4); }
.mobile-nav .sub-menu a { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: #C8CCD1; padding: 10px 0; border-bottom: 0; }
.site-footer .sub-menu { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.site-footer .menu-item-has-children > a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .primary-nav .sub-menu { transition: none; } }


/* ---- Single post: "Read more from Avenues" + closing call-to-action -------------- */
.more-posts { padding-block: var(--space-5) var(--space-7); }
.more-posts-title { font-size: var(--fs-xl, 1.5rem); margin: 0 0 var(--space-4); }
.more-posts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.more-posts-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border, #ECEEF0); }
.more-posts-link { font-family: var(--font-display); font-weight: 600; color: var(--text, #1C1E21); }
.more-posts-read { font-size: var(--fs-sm); white-space: nowrap; }
.post-cta { background: var(--brand-sun); padding-block: var(--section-y-lg); text-align: center; }
.post-cta h2 { margin: 0 0 var(--space-3); }
.post-cta p { max-width: 56ch; margin: 0 auto var(--space-5); }

/* Long unbroken strings (pasted URLs, reference links) must wrap instead of widening the
   page on phones. */
.entry-content, .entry-content a, .entry-content sub, .entry-content sup { overflow-wrap: anywhere; }


/* ---- Review fixes: contrast, tap targets, keyboard-scrollable rows ------------------
   Measured on staging: the mid-green eyebrow was 3.9–4.1:1 on light backgrounds (AA needs
   4.5), the price red 3.2:1 on the Sun band, and the footer legal line 3.5:1. */
:root { --price-text: #B32D1E; }
.av-eyebrow, .eyebrow { color: var(--green-600); }
.block.brand-sun .av-eyebrow, .block.brand-sun .eyebrow { color: var(--green-600); }
.site-footer { color: #C8CCD1; }
.site-footer .footer-legal, .site-footer small { color: #C8CCD1; }
.primary-nav .menu a, .site-footer .menu a { display: inline-flex; align-items: center; min-height: 24px; }
.mobile-nav .menu a, .primary-nav .sub-menu a { min-height: 44px; display: flex; align-items: center; }
/* Card rows scroll with the keyboard once focusable (JS adds tabindex/role). */
.av-swipe:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 4px; border-radius: var(--radius-md, 16px); }


/* ==========================================================================
   Rescale pass — desktop density, brand colour at full strength
   Client feedback: "things feel VERY big for no reason… sections don't fit within
   the screen"; "DO NOT USE PASTEL COLORS". So: one section = one composition on a
   1440x900 desktop, white page background, bold brand bands, no pastel washes.
   ========================================================================== */

/* The nav row is logo | menu | booking pill | (hamburger on phones). */
.hamburger { margin-left: auto; }
@media (min-width: 1000px) { .hamburger { margin-left: 0; } }

/* Page background is pure white; grey-50 is the only tint. */
body { background: #FFFFFF; }

/* Measure: long-form text never runs the full 1200px container. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3 { max-width: min(100%, var(--content)); }

/* Dropdowns sit tighter under the shorter nav row. */
.primary-nav .sub-menu { top: calc(100% + 10px); }
.primary-nav .sub-menu::before { top: -10px; height: 10px; }
.primary-nav .sub-menu a { padding: 8px 20px; font-size: 0.9375rem; }

/* Mobile booking bar: the body offset must match the (now shorter) bar. The bar measures
   68px, so 64px left it sitting on top of the footer's legal line — 78px clears it. */
.av-bookbar .btn { padding: 0.75em 1.4em; }
body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1000px) { body { padding-bottom: 0; } }


/* Footer: the link list is two columns on anything wider than a phone, so the footer
   costs ~190px instead of ~350px on every page.
   The contact list is excluded: splitting four lines across two columns pushed the phone
   number and opening hours into a narrow column of their own, away from the address and
   email they belong with. Contact details stay in one column. */
@media (min-width: 560px) {
	.site-footer .footer-col ul:not(.footer-contact),
	.site-footer .footer-col .menu { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
	.site-footer .footer-contact { grid-template-columns: 1fr; }
}
@media (min-width: 700px) {
	.footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
}

/* AA: the footer legal line was 3.5:1 in grey-500 on grey-900; grey-300 gives 8.6:1. */
.footer-bottom, .footer-bottom a { color: var(--grey-300); }
.footer-bottom a:hover { color: var(--brand-sun); }


/* ==========================================================================
   Footer social, floating WhatsApp, and the "Services" dropdown toggle
   ========================================================================== */

/* ---------- Footer: social icons ---------- */
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.footer-social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	color: var(--grey-900); background: var(--brand-sun);
	transition: background var(--dur-base, .2s) var(--ease-out, ease), color var(--dur-base, .2s) var(--ease-out, ease);
}
.footer-social-link .av-social-icon { width: 18px; height: 18px; display: block; }
.footer-social-link:hover, .footer-social-link:focus-visible { background: var(--brand-ember); color: #fff; text-decoration: none; }

/* ---------- Footer: legal line ---------- */
.footer-legal-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Floating WhatsApp button ---------- */
.av-whatsapp {
	position: fixed; right: var(--gutter, 16px);
	/* Sits clear of the mobile booking bar (64px + safe area). */
	bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
	z-index: 85;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--green-600); color: var(--brand-sun);
	box-shadow: 0 6px 20px rgba(28, 30, 33, .28);
	transition: background var(--dur-base, .2s) var(--ease-out, ease), transform var(--dur-base, .2s) var(--ease-out, ease), opacity var(--dur-base, .2s) var(--ease-out, ease);
}
.av-whatsapp svg { width: 28px; height: 28px; display: block; }
.av-whatsapp:hover, .av-whatsapp:focus-visible { background: var(--brand-green); transform: translateY(-2px); text-decoration: none; }
@media (min-width: 1000px) {
	/* No booking bar on desktop, so the button can sit at the bottom of the viewport. */
	.av-whatsapp { bottom: 24px; right: 24px; width: 56px; height: 56px; }
}
.no-bookbar .av-whatsapp { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
@media (prefers-reduced-motion: reduce) { .av-whatsapp { transition: none; } .av-whatsapp:hover { transform: none; } }

/* The consent banner is bottom-LEFT and its "Manage consent" tab is pinned bottom-right
   by Complianz; move the tab left too so the bottom-right corner belongs to WhatsApp. */
#cmplz-manage-consent .cmplz-manage-consent { right: auto !important; left: 40px !important; }

/* The WhatsApp button steps aside rather than covering anything: while the consent banner
   is open (full width on a phone), and once the footer's legal line has scrolled under it.
   nav.js adds both classes. visibility (not display) keeps the box measurable, and takes
   the link out of the tab order and the accessibility tree while it is hidden. */
body.av-consent-open .av-whatsapp,
body.av-footer-reached .av-whatsapp { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Primary nav: dropdown parent that is not a link ---------- */
.primary-nav .menu-item-disclosure > button {
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; margin: 0; padding: 0 16px 0 0;
	font: inherit; font-size: 0.9375rem; line-height: 1.2; font-weight: 500;
	color: #E3E5E8; white-space: nowrap; cursor: pointer; position: relative;
	display: inline-flex; align-items: center; min-height: 24px;
}
.primary-nav .menu-item-disclosure > button::after {
	content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
	background: var(--brand-sun); transition: width var(--dur-base) var(--ease-out);
}
.primary-nav .menu-item-disclosure > button:hover,
.primary-nav .menu-item-disclosure > button[aria-expanded="true"] { color: #fff; }
.primary-nav .menu-item-disclosure > button:hover::after,
.primary-nav .menu-item-disclosure > button[aria-expanded="true"]::after { width: calc(100% - 16px); }
/* The chevron: the generic rule targets `> a`, so repeat it for the button. */
.primary-nav .menu-item-disclosure > button::before {
	content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px;
	margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); opacity: .7;
}
/* Opened with the keyboard or a click, not just hover. */
.primary-nav .menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1000px) { .primary-nav .menu-item-disclosure > button { font-size: 0.875rem; } }

/* Mobile drawer: the children are always visible, so the parent is a plain label. */
.mobile-nav .menu-group-label {
	display: block; font-family: var(--font-display); font-weight: 600;
	color: #fff; padding: 10px 0; min-height: 44px; line-height: 24px;
}

/* theme.json's global styles print `body{padding:0}` inline, after this file, so the
   earlier `body { padding-bottom: … }` rules never actually applied and the fixed mobile
   booking bar has been sitting on top of the footer's legal line. One extra element in
   the selector wins the cascade back. */
html body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1000px) { html body { padding-bottom: 0; } }

/* A 320px phone (an iPhone SE, and what WCAG reflow asks for) could not reach the menu: the
   nav row was 354px wide, so the hamburger sat off the side of the screen with the page
   scrolling sideways. Below 360px the logo gives up the space. */
@media (max-width: 359px) {
	.nav-row { gap: 8px; min-height: 60px; }
	.brand img, .custom-logo-link img { height: 24px; max-height: 24px; }
	.nav-phone { padding: 6px; margin-right: 0; }
	.hamburger { padding: 8px 4px; }
	.hamburger > span[aria-hidden] { width: 22px; }
}

/* On dark surfaces the green ring disappears, so use Sun there. */
.site-header :focus-visible,
.mobile-nav :focus-visible,
.site-footer :focus-visible,
.band-deep :focus-visible,
.av-tpl .brand-green :focus-visible { outline-color: var(--brand-sun); }

/* Homepage success figure: a real ring rather than a picture of one.
   It sits on the deep green band, so the arc is Sun and the track is a light wash of white.
   Drawn on a pseudo-element because masking the box to cut the hole would erase anything
   inside it. */
.results-ring { position: relative; width: clamp(150px, 20vw, 210px); aspect-ratio: 1; margin: 0 0 var(--space-4); }
.results-ring::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(var(--brand-sun) calc(var(--pct) * 1%), var(--brand-green, #618465) 0);
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 22px), #000 calc(100% - 22px));
	mask: radial-gradient(farthest-side, #0000 calc(100% - 22px), #000 calc(100% - 22px));
}
@media (max-width: 600px) {
	.results-ring::before {
		-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 17px), #000 calc(100% - 17px));
		mask: radial-gradient(farthest-side, #0000 calc(100% - 17px), #000 calc(100% - 17px));
	}
}

/* On a page shorter than the window (the 404, a short legal page on a tall screen) the canvas
   below the footer took the body's white, leaving a white strip under a dark footer. Paint the
   canvas the footer's colour instead; the body keeps its own white background, so nothing
   above the footer changes. The header is dark too, so overscroll at the top matches as well. */
html { background: var(--grey-900, #1F2023); }

/* ---------- Header that measures itself (see nav.js: fitHeader) ----------
   The breakpoints above assume text shrinks with the page. It doesn't always: zoom a browser
   out and Chrome's minimum font size keeps the menu text large while everything else shrinks,
   so the phone number ran over "Booking" at widths no breakpoint anticipated. nav.js checks
   what actually fits and steps down: first the phone number becomes its icon, then the menu
   moves into the drawer. Without JavaScript the breakpoints still apply as before. */
.site-header.nav-tight .nav-phone { font-size: 0; gap: 0; padding: 6px; }
.site-header.nav-tight .nav-phone svg { width: 19px; height: 19px; }
@media (min-width: 1000px) {
	.site-header.nav-collapsed .primary-nav { display: none; }
	.site-header.nav-collapsed .nav-phone { margin-left: auto; }
	.site-header.nav-collapsed .hamburger { display: inline-flex; margin-left: 12px; }
	.site-header.nav-collapsed .mobile-nav { display: flex; }
	.site-header.nav-collapsed .scrim { display: block; }
}

/* Drawer: booking and the phone number sit at the top, above the menu. */
.mobile-nav-actions { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mobile-nav .mobile-nav-actions .btn { margin-top: 0; justify-content: center; }
.mobile-nav-actions .mobile-nav-phone { margin-top: 0; padding: var(--space-2) 0; }