/* ============================================================================
	 Grounded Counselling Vancouver — the site's ONE stylesheet
	 ----------------------------------------------------------------------------
	 Loaded by index.php on every page; there are no per-page CSS files.
	 Rules that apply to a single page are scoped with the body class the shell
	 adds: .page-home, .page-book, … ("page-" + the `file` column in pages.csv).

	 CONTENTS
		 1. Design tokens ......... colours + fonts (:root)
		 2. Base .................. reset, body type, link colour, .container
		 3. Header ................ .site-header brand band + wordmark link
		 4. Homepage layout ....... .profile two-column grid + row interleaving
		 5. Sidebar ............... .profile-photo, .profile-name, .info-card
		 6. Info overlay .......... .overlay modal, opened by .text-trigger
		 7. Bio + call to action .. .bio, .button-row, .button
		 8. Testimonials .......... .testimonial hanging quotes
		 9. Specialities .......... .spec-label + .chips
		10. Booking page .......... .booking: form card, calendar, time painter,
															 confirmation, debug email preview
		11. Footer ................ .site-footer brand band
		12. Mobile ................ every max-width: 720px override, all pages

	 REUSABLE PIECES — reach for these before inventing new ones:
		 .container         centered 960px column, side padding on phones
		 .button            solid green pill CTA (works on <a> and <button>)
		 .section-heading   centered 1.5rem serif h2 for a content section
		 .prose             running-text wrapper: spaces .section-heading + paragraphs,
												left-aligns the heading as the page title
		 .page-title        centered 1.75rem serif h1 for non-sidebar pages
		 .info-card         bordered sidebar card holding .card-icon + .card-text
		 .overlay           modal pop-up (markup pattern in includes/sidebar.php)
		 .text-trigger      inline phrase styled like body text that opens an overlay
		 .chips             pill tag list (.chips-primary loud / .chips-secondary quiet)
		 .spec-label        small-caps label on the light page ground
		 .footer-label      the same small-caps voice on the dark footer
		 .field             labelled input/select block for forms
	 ========================================================================== */


/* === 1. Design tokens ====================================================== */

:root {
	--bg: #faf9f6;						/* warm off-white page background */
	--surface: #ffffff;				/* cards and form fields */
	--ink: #2b3530;						/* near-black green for body text */
	--ink-soft: #5a6660;			/* secondary text */
	--accent: #3e6b52;				/* forest green — buttons, selections, icons */
	--accent-dark: #325741;		/* deeper forest green — header/footer bands, hovers */
	--border: #e3e1da;
	--hover-tint: #eceae4;		/* soft warm wash behind hovered icon buttons */

	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* === 2. Base =============================================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
}

/* Links keep one color in every state — no browser default blue/purple
	 for unvisited/visited/active anywhere on the site. :where() keeps this
	 reset at zero specificity so component colors (e.g. .button's white)
	 always win, even against a:visited */
:where(a, a:visited, a:active) {
	color: inherit;
}

/* Shared centered column: sensible desktop width, side padding on phones.
	 Wrap every band's content in one of these (see index.php's shell). */
.container {
	max-width: 960px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* The page's content area between header and footer (element, not a class) */
main {
	padding: 56px 0 80px;
}

/* === 3. Header ============================================================= */

/* Same solid brand band as the footer, so the page opens and closes on the
	 full-depth accent; the wordmark sits in white serif at the heading scale */
.site-header {
	background-color: var(--accent-dark);
}

/* Logo and wordmark sit on one flex row; the band's height comes from the
	 h1's own padding (below), so the logo can run taller than the title
	 without growing the header — it just centers in the space the text sets */
.site-header .container {
	display: flex;
	align-items: center;
}

/* The tree links home like the wordmark; hidden from assistive tech since
	 the adjacent text link is the same destination. The gap to the wordmark
	 is this margin, not a flex gap on the row */
.site-logo {
	display: block;
	flex-shrink: 0;
	margin-right: 12.6px;
}

/* The artwork is cropped nearly to the ink (≈2px of blank canvas per edge),
	 so the fractional height and margins place the visible tree exactly where
	 the previous padded artwork sat relative to the band and wordmark */
.site-logo img {
	display: block;
	height: 37.6px;
	width: auto;
	margin: -2px 0 3.4px 2.7px;
}

.site-header h1 {
	/* serif line-height leaves extra optical space above the caps, so the
		 padding is set heavier below to balance the title in the band */
	padding: 19px 0 25px;
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* The wordmark is marked up twice: plain text for desktop, and an SVG twin
	 (aria-hidden — the text span keeps the accessible name) whose textLength
	 stretch is only wanted on phones. Desktop never shows the SVG. */
.wordmark-svg {
	display: none;
}

/* The wordmark links home, dimming slightly on hover to read as clickable */
.site-header h1 a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-header h1 a:hover,
.site-header h1 a:focus-visible {
	color: rgba(244, 242, 236, 0.8);
}

/* …except on the homepage, where it points at the page you're already on,
	 so hovering gives no false affordance */
.page-home .site-header h1 a:hover,
.page-home .site-header h1 a:focus-visible {
	color: #ffffff;
}

/* === 4. Homepage layout ==================================================== */

/* The two-column shell around sidebar pages: .profile-sidebar (photo, name,
	 info cards — includes/sidebar.php) on the left, .profile-main (the page's
	 own content) on the right. index.php wraps any pages.csv row with
	 includes_sidebar = yes in this grid. */
.profile {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	align-items: start;
}

/* On desktop, flatten both columns into the shared grid so the photo and the
	 bio share the first row, and the name and the Testimonials heading share
	 the second — their tops align. But if the bio block runs taller than the
	 photo, that shared row would push the name down away from the photo, so a
	 script (in pages/home.php) adds .stacked to fall back to two independent
	 columns instead. Homepage only (.page-home): its content is what the row
	 placements below are written for. Other sidebar pages keep two plain
	 columns. */
@media (min-width: 721px) {
	.page-home .profile {
		row-gap: 0; /* vertical rhythm comes from the elements' own margins */
	}

	.page-home .profile-sidebar,
	.page-home .profile-main {
		display: contents;
	}

	.profile-photo {
		grid-column: 1;
		grid-row: 1;
	}

	/* homepage main column part 1: intro paragraph + the two CTA buttons */
	#bio-and-buttons {
		grid-column: 2;
		grid-row: 1;
	}

	.profile-name {
		grid-column: 1;
		grid-row: 2;
	}

	.info-card {
		grid-column: 1;
	}

	#testimonials {
		grid-column: 2;
		/* span the name + four info cards so long testimonial content
			 doesn't push the cards down */
		grid-row: 2 / span 5;
		margin-top: 16px; /* same offset as .profile-name below the photo */
	}

	#specialities {
		grid-column: 2;
		grid-row: 7;
	}

	/* Fallback when aligning would push the name down: each column flows
		 on its own, and the grid props above go inert. */
	.profile.stacked .profile-sidebar,
	.profile.stacked .profile-main {
		display: block;
	}

	.profile.stacked #testimonials {
		margin-top: 48px; /* section break below the buttons, echoing the column gap */
	}
}

/* === 5. Sidebar: photo, name, info cards =================================== */

.profile-photo {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: 10px;
	background-color: var(--border); /* graceful placeholder until photo.jpg exists */
}

/* "Tom Ash, RTC" under the photo; .section-heading matches these metrics */
.profile-name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 16px;
	line-height: 1.3;
}

/* the <abbr> holding "RTC" — hover explains it via the title attribute */
.registration {
	text-decoration: none;
	cursor: help;
}

/* Small bordered fact card: a .card-icon (Font Awesome) beside .card-text
	 (plain lines; needs no rule of its own — the flex gap does the work) */
.info-card {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px 18px;
	margin-top: 16px;
	color: var(--ink-soft);
	font-size: 0.9375rem;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.card-icon i {
	display: block;
	font-size: 14px;
	line-height: 1;
	/* offset the card-text's half-leading so the icon top meets the glyph tops */
	margin-top: 5px;
}

/* each Font Awesome glyph has a different ascent, so nudge each icon
	 individually until its painted top sits on the card-text cap line */
.card-icon .fa-graduation-cap { transform: translateY(1.3px); }
.card-icon .fa-money-bill-1 { transform: translateY(0.45px); }
.card-icon .fa-map-pin { transform: translateY(2.2px); }
.card-icon .fa-award { transform: translateY(2.35px); }

/* A clickable phrase inside card text: looks like the surrounding words,
	 underlines on hover, opens the info overlay it aria-controls */
.text-trigger {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline transparent;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.text-trigger:hover,
.text-trigger:focus-visible {
	color: var(--accent);
	text-decoration-color: currentColor;
}

/* === 6. Info overlay ======================================================= */

/* Modal pop-up: .overlay wraps .overlay-backdrop + .overlay-box, toggled with
	 .is-open. Markup pattern and opening script live in includes/sidebar.php. */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 24px;
	/* closed state: invisible and click-through; visibility flips after the
		 children's 0.25s fade-out so the close animation can play */
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.25s;
}

.overlay.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.overlay-backdrop {
	position: absolute;
	inset: 0;
	/* dim with the page's own ink colour so the tint stays warm, not grey */
	background-color: rgba(43, 53, 48, 0.4);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* the white card that carries the overlay's content */
.overlay-box {
	position: relative;
	max-width: 420px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 36px 36px 32px;
	box-shadow:
		0 1px 2px rgba(43, 53, 48, 0.06),
		0 12px 40px rgba(43, 53, 48, 0.18);
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.overlay.is-open .overlay-backdrop {
	opacity: 1;
}

.overlay.is-open .overlay-box {
	opacity: 1;
	transform: none;
}

/* round ×-button in the box's top-right corner */
.overlay-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--ink-soft);
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.overlay-close:hover,
.overlay-close:focus-visible {
	background-color: var(--hover-tint);
	color: var(--ink);
}

.overlay-text {
	margin: 0;
	padding-right: 12px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	font-family: var(--font-body);
}

.overlay-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.overlay-text a:hover,
.overlay-text a:focus-visible {
	color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
	.overlay-backdrop,
	.overlay-box,
	.text-trigger {
		transition: none;
	}
}

/* === 7. Bio and call to action ============================================= */

/* the homepage intro paragraph, a step larger than default body text */
.bio {
	font-size: 1.125rem;
	color: var(--ink);
}

/* Centered serif h2 opening a content section (Testimonials, Specialities).
	 Matches .profile-name's metrics so on the homepage grid the first one's
	 text top aligns with the name beside it. */
.section-heading {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* Running text on plain content pages (e.g. /type-of-therapy). The global
	 reset zeroes all margins, so prose rhythm is set here: clear air under the
	 heading, then a steady two-thirds-of-a-line gap between paragraphs —
	 enough to separate thoughts without breaking the column into floating
	 blocks. The heading sits flush left as the page's title, ranged with the
	 text it introduces (the centered .section-heading default is for section
	 breaks mid-page, like the homepage's Testimonials). */
.prose .section-heading {
	margin-bottom: 24px;
	text-align: left;
}

.prose p + p {
	margin-top: 18px;
}

/* row of .button CTAs, centered, wrapping on narrow screens */
.button-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 36px;
}

/* THE site-wide call-to-action button: solid green pill, works on <a> and
	 <button>. Darkens on hover. (.submit-btn below adapts it for forms.) */
.button {
	display: inline-block;
	padding: 13px 26px;
	background-color: var(--accent);
	color: #ffffff;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	text-align: center;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.button:hover,
.button:focus-visible {
	background-color: var(--accent-dark);
}

/* === 8. Testimonials ======================================================= */

/* Unboxed editorial quotes: italic serif with a large quotation mark hanging
	 in the left margin, so the client voices read as speech, not UI */
.testimonial {
	position: relative;
	margin-top: 32px;
	padding-left: 48px;
}

.testimonial::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: 3px; /* puts the glyph's ink top level with the first line's cap top */
	font-family: var(--font-display);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--accent);
}

.testimonial p {
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink);
}

/* short centered hairline separating one quote from the next */
.quote-divider {
	width: 56px;
	height: 1px;
	background-color: var(--border);
	margin: 36px auto 0;
}

/* === 9. Specialities ======================================================= */

/* Vertical rhythm: 72px section break above the heading (a beat larger than
	 the ~68px between the two testimonial quotes, so this reads as a new
	 section), 32px between subsection groups (echoing the heading-to-quote
	 gap above), and a tight 12px binding each label to its chips. */
#specialities {
	margin-top: 72px;
}

/* small-caps subsection label on the light page ground
	 (same voice as .footer-label, which is its dark-ground twin) */
.spec-label {
	margin-top: 32px;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-soft);
	text-align: center;
}

/* pill tag list (a <ul>); combine with .chips-primary or .chips-secondary */
.chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
}

.chips li {
	font-family: var(--font-body);
	line-height: 1.35;
	border-radius: 999px;
}

/* Two weights: the particular specialties get a soft accent tint and heavier
	 type; the additional ones stay quiet on the card surface colour */
.chips-primary li {
	padding: 9px 20px;
	background-color: rgba(62, 107, 82, 0.09);
	border: 1px solid rgba(62, 107, 82, 0.22);
	color: var(--accent-dark);
	font-weight: 600;
	font-size: 1rem;
}

.chips-secondary li {
	padding: 7px 16px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	color: var(--ink-soft);
	font-size: 0.875rem;
}

/* quiet scope note closing the specialties section */
.spec-note {
	margin-top: 20px;
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--ink-soft);
	text-align: center;
}

/* === 10. Booking page ====================================================== */
/* Everything below to section 11 styles pages/book.php: the request form
	 (#booking-section) and the confirmation view (#success-section). */

/* narrow centered column framing both booking states */
.booking {
	max-width: 720px;
	margin: 0 auto;
}

/* centered serif h1 for pages without the sidebar (a size up from
	 .section-heading, which is for sections within a page) */
.page-title {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* the one-sentence standfirst under .page-title */
.page-intro {
	margin: 12px auto 0;
	max-width: 32em;
	text-align: center;
	color: var(--ink-soft);
	font-size: 1.0625rem;
}

/* --- Form card: white surface holding all the fields --- */

.booking-form {
	margin-top: 36px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 36px;
	box-shadow: 0 1px 2px rgba(43, 53, 48, 0.04);
}

/* two .field blocks sharing one line (collapses to one column on phones) */
.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* .field = label + input/select block; stacked fields sit 20px apart */
.field + .field,
.field-row + .field {
	margin-top: 20px;
}

/* fields sharing a row get their spacing from the row's own gap */
.field-row .field + .field {
	margin-top: 0;
}

.field label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 7px;
}

.field input,
.field select {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 11px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(62, 107, 82, 0.15);
}

/* selects drop the native chrome and get an inline-SVG chevron instead */
.field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a6660' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor: pointer;
}

/* green helper line under a field (e.g. "Times will be shown in…") */
.field-note {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--accent);
}

/* --- Availability fieldset: calendar beside the time painter --- */

.availability {
	border: none;
	padding: 0;
	margin: 32px 0 0;
}

.availability legend {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	padding: 0;
}

/* explanatory sentence under the legend */
.legend-note {
	margin-top: 6px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

/* calendar on the left, painter timeline on the right */
.availability-grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	align-items: start;
	margin-top: 18px;
}

/* --- Calendar (month grid rendered by the script in pages/book.php) --- */

.calendar {
	font-family: var(--font-body);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px 14px 10px;
	background-color: var(--bg);
}

/* month title flanked by the two .cal-nav arrows */
.cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2px;
}

.cal-title {
	font-size: 0.9375rem;
	font-weight: 600;
}

/* round previous/next-month arrow button */
.cal-nav {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--ink-soft);
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cal-nav:hover:not(:disabled),
.cal-nav:focus-visible:not(:disabled) {
	background-color: var(--hover-tint);
	color: var(--ink);
}

.cal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* 7-column grid of .cal-dow headers then .cal-day buttons */
.cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-top: 8px;
}

/* day-of-week initial atop each column */
.cal-dow {
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	padding: 4px 0 6px;
}

/* one selectable day; state classes: .is-today (outline), .is-selected */
.cal-day {
	aspect-ratio: 1;
	background: none;
	border: none;
	border-radius: 50%;
	font-family: inherit;
	font-size: 0.8125rem;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cal-day:hover:not(:disabled):not(.is-selected),
.cal-day:focus-visible:not(:disabled):not(.is-selected) {
	background-color: var(--hover-tint);
}

.cal-day:disabled {
	color: #c8c6bf;
	cursor: default;
}

.cal-day.is-today {
	box-shadow: inset 0 0 0 1px var(--accent);
}

.cal-day.is-selected {
	background-color: var(--accent);
	color: #ffffff;
	font-weight: 600;
}

/* Second-day fieldset, revealed once a time is painted on the first day */
.availability.second-day {
	margin-top: 44px;
}

.availability.second-day.is-revealed {
	animation: second-day-reveal 0.45s ease both;
}

@keyframes second-day-reveal {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Time painter: the drag-to-paint day timeline --- */

/* day + timezone caption above the timeline */
.painter-head {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
}

.painter-head small {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--ink-soft);
}

/* Vertical day timeline: hour labels in a left gutter, one column of
	 15-minute slots — solid lines on the hour, dotted at quarter hours. */
.timeline {
	position: relative;
	margin-top: 16px;
	padding-left: 72px;
	font-family: var(--font-body);
}

/* the bordered column the .slot elements stack inside */
.tl-track {
	display: flex;
	flex-direction: column;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

/* hour label in the gutter, absolutely placed by the script */
.tl-label {
	position: absolute;
	left: 0;
	width: 58px;
	text-align: right;
	transform: translateY(-50%);
	font-size: 0.75rem;
	color: var(--ink-soft);
	line-height: 1;
	pointer-events: none;
}

/* one 15-minute slot; .is-selected = painted green */
.slot {
	height: 15px;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.slot + .slot {
	border-top: 1px dotted var(--border);
}

.slot.at-hour {
	border-top-style: solid;
	border-top-color: #cfccc2;
}

.slot:hover:not(.is-selected) {
	background-color: rgba(62, 107, 82, 0.12);
}

.slot.is-selected {
	background-color: var(--accent);
}

.slot.is-selected + .slot.is-selected {
	border-top-color: rgba(255, 255, 255, 0.35);
}

.slot.is-selected:hover {
	background-color: var(--accent-dark);
}

/* Dashed placeholder shown until a province and day are chosen */
.painter-hint {
	border: 1px dashed var(--border);
	border-radius: 10px;
	padding: 48px 24px;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.painter-hint i {
	display: block;
	font-size: 20px;
	color: var(--accent);
	margin-bottom: 10px;
	opacity: 0.7;
}

/* "Painted: 2:00 – 3:30" line under the timeline */
.painter-summary {
	margin-top: 14px;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.painter-summary strong {
	color: var(--accent);
	font-weight: 600;
}

/* --- Submit row --- */

/* validation/server-error banner above the submit button */
.form-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding: 14px 18px;
	background-color: rgba(164, 68, 46, 0.06);
	border: 1px solid rgba(164, 68, 46, 0.28);
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #a4442e;
}

.form-error[hidden] {
	display: none;
}

.form-error i {
	flex-shrink: 0;
	margin-top: 3px;
	font-size: 1rem;
}

/* adapts .button for form submits: block-level, centered, capped width */
.submit-btn {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 28px auto 0;
	border: none;
	cursor: pointer;
	font-family: var(--font-body);
}

/* --- Confirmation: the "Request received" view after a send --- */

.submission {
	text-align: center;
}

/* big green check above the confirmation heading */
.submission .success-icon i {
	font-size: 40px;
	color: var(--accent);
}

.submission h1 {
	margin-top: 16px;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
}

/* "Thanks, NAME — I'll email you at…" sentence */
.success-text {
	margin-top: 12px;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

.success-text strong {
	color: var(--ink);
	font-weight: 600;
}

/* card recapping the chosen day(s); holds .success-day blocks + .success-tz */
.success-summary {
	max-width: 420px;
	margin: 32px auto 0;
	padding: 24px 28px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	font-family: var(--font-body);
	text-align: left;
}

/* one day's recap: <span> label, <strong> date, <em> time-range pills */
.success-day + .success-day {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dotted var(--border);
}

.success-day span {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.success-day strong {
	display: block;
	margin-top: 4px;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
}

.success-day em {
	display: inline-block;
	margin: 8px 6px 0 0;
	padding: 4px 12px;
	background-color: rgba(62, 107, 82, 0.1);
	border-radius: 999px;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--accent-dark);
}

.success-tz {
	margin: 16px 0 0;
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

/* Debug preview of the notification email (shown only while the server's
	 debug_show_email_on_response_page flag is true) */
.debug-email {
	margin-top: 24px;
	padding: 16px 18px;
	background-color: #fdf6e8;
	border: 1px dashed #d9c48f;
	border-radius: 8px;
	font-size: 0.8125rem;
}

.debug-email-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a6d2f;
}

.debug-email-subject {
	margin: 10px 0 0;
	font-weight: 600;
	color: var(--ink);
}

.debug-email pre {
	margin: 10px 0 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* === 11. Footer ============================================================ */

/* The brand accent at full depth closes the page as a solid band; type flips
	 to warm cream. Three columns: contact + ACCT badge, address, map. */
.site-footer {
	background-color: var(--accent-dark);
	padding: 52px 0;
	/* Default type for any plain footer text (e.g. "Online across Canada"):
		 matches .footer-address so new copy needs no extra class. */
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(244, 242, 236, 0.88);
}

.site-footer p {
	margin: 14px 0 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr 300px;
	gap: 48px;
	align-items: start;
}

/* small-caps column labels, same voice as .spec-label but on dark ground */
.footer-label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(244, 242, 236, 0.6);
	margin-bottom: 14px;
}

/* cream underlined link (email, phone) that brightens on hover */
.footer-link {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(244, 242, 236, 0.88);
	text-decoration: underline;
	text-decoration-color: rgba(244, 242, 236, 0.32);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
	color: #ffffff;
	text-decoration-color: currentColor;
}

/* the <address> block */
.footer-address {
	margin: 12px 0 0; /* echoes the 14px rhythm above "And online across Canada", slightly tighter to keep the address paired with its intro line */
	font-style: normal;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(244, 242, 236, 0.88);
}

/* ACCT "Excellence in Counselling" badge image under the contact links */
.footer-badge {
	display: block;
	width: 180px;
	height: auto;
	margin-top: 22px;
}

/* rounded frame around the Google Maps iframe */
.footer-map {
	border-radius: 10px; /* same radius as the profile photo and cards */
	overflow: hidden;
	border: 1px solid rgba(244, 242, 236, 0.18);
	position: relative;
	height: 200px;
}

/* Google's embed only supports whole zoom levels (z=13 is 50% out), so the
   iframe is oversized and scaled down to zoom the map out ~12%. */
.footer-map iframe {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 114.5%;
	height: 114.5%;
	transform: translate(-50%, -50%) scale(0.88);
	border: 0;
}

/* === 12. Mobile ============================================================ */
/* All small-screen (≤720px) overrides for every page live here, in the same
	 order as the sections above. */

@media (max-width: 720px) {

	/* --- Shell --- */

	main {
		padding: 32px 0 56px;
	}

	.site-header h1 {
		font-size: 1.58rem;
		padding: 10px 0 16px;
		margin-right: 0;
		/* The SVG wordmark needs the h1 to claim the rest of the flex row,
			 so 100% width means "from the tree to the container edge" */
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Swap the plain wordmark for its SVG twin, which stretches to end
		 flush with the content edge below. The text span stays in the tree
		 (clipped, not display:none) so the link keeps its accessible name. */
	.site-header .wordmark-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.site-header .wordmark-svg {
		display: block;
		width: 100%;
		/* Tall enough for the g's descender below the 1em baseline */
		height: 1.32em;
	}

	/* Glyph metrics inherit from the h1 (family, size, weight, spacing);
		 currentColor keeps the link's white and its hover dim working */
	.site-header .wordmark-svg text {
		fill: currentColor;
	}

	.site-header h1 a {
		display: block;
	}

	.site-logo {
		margin-right: 10px;
	}

	.site-logo img {
		height: 31px;
		margin-left: 0px;
		margin-top: -1px;
	}

	/* --- Homepage: single column, reordered --- */

	.profile {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Phone flow: photo + name, then the at-a-glance info cards, then the
		 main column (bio → buttons → testimonials → specialties). The grid's
		 32px gap is the default beat; negative margins tighten within groups. */
	.profile-sidebar {
		display: contents;
	}

	.profile-photo {
		/* full column width so its right edge lines up with the info cards
			 (photo.jpg is 320px wide, so it upscales a touch on wider phones) */
		order: 1;
	}

	/* caption-tight under the photo, same 16px as desktop */
	.profile-name {
		order: 2;
		margin-top: -16px;
	}

	.info-card {
		order: 3;
		margin-top: 0;
	}

	/* the first card sits a touch closer, grouping the cards under the name */
	.profile-name + .info-card {
		margin-top: -8px;
	}

	/* the grid gap already separates the cards; pull them a little closer */
	.info-card + .info-card {
		margin-top: -16px;
	}

	/* a fuller break where the quick facts end and Tom's own voice begins */
	.profile-main {
		order: 4;
	}

	.bio {
		font-size: 1.0625rem;
	}

	.button-row {
		/* On phones the buttons stack and share one width — the widest
			 one's — so the pair reads as a tidy block, full-width like
			 the info cards. */
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 12px;
		margin-top: 28px;
	}

	/* full section break after the buttons (desktop gets this from the grid
		 rows; on phones the heading would otherwise sit flush below them) */
	#testimonials {
		margin-top: 56px;
	}

	/* narrower phones need the quote's hanging margin trimmed */
	.testimonial {
		padding-left: 38px;
	}

	.testimonial::before {
		font-size: 2.75rem;
		top: 4px;
	}

	/* Slightly compressed rhythm on phones: 56 / 28 / 10 */
	#specialities {
		margin-top: 56px;
	}

	.spec-label {
		margin-top: 28px;
	}

	.chips {
		gap: 8px;
		margin-top: 10px;
	}

	/* Additional specialties read in a different sequence on phones:
		 Depression, Burnout, Grief, Relationships, Neurodivergence, Life
		 transitions. Flex `order` reshuffles without touching the markup. */
	.chips-secondary li:nth-child(1) { order: 1; } /* Depression */
	.chips-secondary li:nth-child(2) { order: 4; } /* Relationships and interpersonal issues */
	.chips-secondary li:nth-child(3) { order: 3; } /* Grief */
	.chips-secondary li:nth-child(4) { order: 2; } /* Burnout */
	.chips-secondary li:nth-child(5) { order: 6; } /* Life transitions */
	.chips-secondary li:nth-child(6) { order: 5; } /* Neurodivergence and autism */

	/* --- Booking page: single column form --- */

	.booking-form {
		padding: 24px 20px;
	}

	.field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.field-row .field + .field {
		margin-top: 20px;
	}

	.availability-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.calendar {
		max-width: 340px;
	}

	/* --- Footer: single column --- */

	.site-footer {
		padding: 40px 0 44px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.footer-badge {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-map {
		height: 220px;
	}
}