/* =====================================================================
   Body Relief Day Spa — custom styles (H-Code child theme)
   ---------------------------------------------------------------------
   Palette drawn from the spa's botanical leaf logo (sage/eucalyptus),
   deliberately avoiding the generic "spa cream + terracotta" default.

   01. Design tokens
   02. Service cards (descriptive pages: Massage, Skin Care, Specialty)
   03. Card pricing treatment
   04. Price-list pages (Hands & Feet, Waxing)
   05. Responsive images & media
   06. Navbar layout + mobile friendliness

   Page targeting:
     .brds-layout-cards  Massage Therapy   -> cards
     .brds-layout-cards  Skin Care         -> cards
     .brds-layout-cards  Specialty         -> cards
     .brds-layout-list  Hands & Feet      -> price list
     .brds-layout-list  Waxing            -> price list
   ===================================================================== */

/* 01. DESIGN TOKENS ================================================== */
:root {
	--brds-sage:  #7c8c6a; /* eucalyptus green, from the logo leaf */
	--brds-deep:  #3f4a38; /* deep forest, for headings           */
	--brds-cream: #fcfdfb; /* near-white card surface, faint sage warmth (light & airy) */
	--brds-line:  #eef1ea; /* very soft botanical border (lightened)              */
	--brds-sageline: #dde3d5; /* soft sage hairline (lightened from #cdd6bf)     */
	--brds-ink:   #55554e; /* body text, slightly warm & a touch lighter          */
	--brds-price: #46523c; /* price color — softer than near-black                */
	--brds-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* 01a. STILL TITLE BAR (no fade-in) ================================ */
/* The theme fades the title and breadcrumb/tagline in with a fadeInUp
   animation on load. For a brochure header this motion is unnecessary and
   caused the title to render faint mid-animation. Disable the animation
   inside the title bar so the title + tagline appear instantly and solid.
   Scoped to .page-title-section so animations elsewhere are unaffected. */
.page-title-section .animated,
.page-title-section .fadeInUp,
.page-title-section .wow {
	animation: none !important;
	-webkit-animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* 01b. CENTERED CONTENT LAYOUT ===================================== */
/* The theme uses a two-column layout (.col-md-8 content + .col-md-3
   sidebar) but the sidebar is empty on every service page, leaving the
   content flush-left with dead space on the right. Since there is no
   sidebar content to keep, promote the content column to a centered,
   max-width block so the hero and cards share equal left/right margins. */

.brds-layout-cards .col2-layout .col-md-8,
.brds-layout-list .col2-layout .col-md-8,
.brds-layout-list .col2-layout .col-md-8 {
	width: 100%;
	max-width: 1100px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Hide the empty sidebar so it doesn't reserve horizontal space. */
.brds-layout-cards .col2-layout .sidebar,
.brds-layout-list .col2-layout .sidebar,
.brds-layout-list .col2-layout .sidebar {
	display: none;
}

/* Tighten the gap between the title bar and the hero/content. The theme's
   .parent-section has 50px of top padding; trim it so the hero sits closer
   to the top bar with less dead space. */
.brds-layout-cards .parent-section,
.brds-layout-list .parent-section,
.brds-layout-list .parent-section {
	padding-top: 18px;
}

/* 01c. TAGLINE IN PLACE OF THE BREADCRUMB ========================== */
/* The site is small enough that breadcrumbs add little. On the service
   pages we hide the breadcrumb entirely and show a short tagline in its
   place — an elegant subtitle that balances the big page title. The
   tagline text is injected per page via ::after (keyed by body page id).
   Sentence case, Cormorant italic, sage — deliberately not all-caps. */

/* Hide the breadcrumb list on the service pages. */
.brds-layout-cards .breadcrumb ul,
.brds-layout-list .breadcrumb ul,
.brds-layout-list .breadcrumb ul {
	display: none;
}

/* Shared tagline styling. */
.brds-layout-cards .breadcrumb::after,
.brds-layout-list .breadcrumb::after,
.brds-layout-list .breadcrumb::after {
	display: block;
	font-family: var(--brds-display);
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--brds-sage);
	text-align: right;
}

/* Per-page tagline copy. Keyed by page id because the copy is specific to
   each page (the layout class can't distinguish pages that share a layout). */
.page-id-14 .breadcrumb::after { content: "Helping hands for relaxation and pain relief"; }
.page-id-16 .breadcrumb::after { content: "Reveal your natural radiance"; }
.page-id-28 .breadcrumb::after { content: "Signature treatments for total renewal"; }
.page-id-36 .breadcrumb::after { content: "Polished and pampered, fingertips to toes"; }
.page-id-32 .breadcrumb::after { content: "Smooth, confident, effortlessly you"; }

/* Keep the tagline on one line. The theme's grid caps the breadcrumb
   column at col-lg-4 (~33%), which is too narrow for the longer taglines,
   forcing a wrap. On desktop, let the breadcrumb column shrink-to-fit and
   float right so the tagline always fits on a single line. */
@media (min-width: 992px) {
	.brds-layout-cards .page-title-section .breadcrumb,
	.brds-layout-list .page-title-section .breadcrumb,
	.brds-layout-list .page-title-section .breadcrumb {
		width: auto;
		max-width: 58%;
		float: right;
	}
	.brds-layout-cards .breadcrumb::after,
	.brds-layout-list .breadcrumb::after,
	.brds-layout-list .breadcrumb::after {
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	/* The theme adds xs-display-none to the breadcrumb (hidden on phones).
	   Force the container visible on service pages so the tagline still
	   shows; the breadcrumb <ul> inside stays hidden by the rule above. */
	.brds-layout-cards .breadcrumb.xs-display-none,
	.brds-layout-list .breadcrumb.xs-display-none,
	.brds-layout-list .breadcrumb.xs-display-none {
		display: block;
	}
	.brds-layout-cards .breadcrumb::after,
	.brds-layout-list .breadcrumb::after,
	.brds-layout-list .breadcrumb::after {
		font-size: 17px;
		text-align: left;
		margin-top: 6px;
	}
}

/* 02. SERVICE CARDS ================================================= */
/* Services are plain <p> blocks: <p><strong>Name</strong> desc <em>price</em></p>
   On the descriptive pages we lay the content column out as a responsive
   card grid and style each service paragraph as a card. */

.brds-layout-cards .entry-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	/* Roomy gap for an airy, open feel — cards float on the page. */
	gap: 32px;
	align-items: stretch;
}

/* Non-service blocks (hero image, intro line, CTA link) span the full row. */
.brds-layout-cards .entry-content > *:not(p),
.brds-layout-cards .entry-content > p:not(:has(strong)),
.brds-layout-cards .entry-content > *:not(p),
.brds-layout-cards .entry-content > p:not(:has(strong)),
.brds-layout-cards .entry-content > *:not(p),
.brds-layout-cards .entry-content > p:not(:has(strong)) {
	grid-column: 1 / -1;
}

/* A service card: a <p> that contains a <strong> (the service name).
   Light & airy — near-white surface, generous padding, rounded corners, a
   soft light shadow, and a subtle sage left accent. Gentle hover-lift. */
.brds-layout-cards .entry-content > p:has(strong) {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 38px 34px 32px;
	background: var(--brds-cream);
	border: 1px solid var(--brds-line);
	border-left: 3px solid var(--brds-sageline);
	border-radius: 10px;
	box-shadow: 0 6px 22px rgba(63, 74, 56, 0.05);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;
	line-height: 1.7;
	color: var(--brds-ink);
	font-size: 15px;
}

.brds-layout-cards .entry-content > p:has(strong):hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(63, 74, 56, 0.09);
	border-left-color: var(--brds-sage);
}

/* Service name — the display font that makes headers pop. Only the first
   direct-child <strong> is the heading (a <strong> inside <em> is a note). */
.brds-layout-cards .entry-content > p:has(strong) > strong {
	display: block;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--brds-line);
	font-family: var(--brds-display);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--brds-deep);
}

/* Defensive: hide any stray <br> left inside a service name. */
.brds-layout-cards .entry-content > p:has(strong) > strong br,
.brds-layout-cards .entry-content > p:has(strong) > strong br {
	display: none;
}

/* 03. CARD PRICING TREATMENT ======================================= */
/* Price lives in a trailing <em>, e.g. "30 min $45 · 60 min $70".
   Lift it into a clear price bar pinned to the bottom of the card. */
.brds-layout-cards .entry-content > p:has(strong) > em {
	display: block;
	margin-top: auto;      /* push price to the card bottom */
	padding-top: 18px;
	border-top: 1px dashed var(--brds-line);
	font-family: var(--brds-display);
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.01em;
	color: var(--brds-price);
}

/* An <em><strong>…</strong></em> is an optional add-on note, not a price
   or a heading. Render it quietly as a footnote. */
.brds-layout-cards .entry-content > p:has(strong) > em > strong,
.brds-layout-cards .entry-content > p:has(strong) > em > strong {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--brds-sage);
	border: 0;
	padding: 0;
}

/* An add-on <em> (one that contains a <strong>) is a note, not the price
   bar: drop the divider so notes don't mimic prices. */
.brds-layout-cards .entry-content > p:has(strong) > em:has(strong),
.brds-layout-cards .entry-content > p:has(strong) > em:has(strong) {
	margin-top: 12px;
	padding-top: 0;
	border-top: 0;
	font-family: "Open Sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	color: var(--brds-ink);
}

/* 04. PRICE-LIST PAGES (EXPANDABLE) ================================ */
/* Hands & Feet and Waxing are menus built from native <details> elements:
     <details>
       <summary><strong>Name</strong> <em>note</em> $price</summary>
       <p>description…</p>
     </details>
   service-list.js rewrites each service paragraph into a menu row:
     <div class="brds-row">
       <div class="brds-row__head">
         <span class="brds-row__name">Name</span>
         <span class="brds-row__lead"></span>
         <span class="brds-row__price">$price</span>
       </div>
       <p class="brds-row__desc">description…</p>
     </div>
   Name and price sit on one line joined by a dotted leader; the description
   is always visible below — a printed treatment-menu, easy to scan. */

/* The list is bounded top and bottom by a soft sage rule, like a printed
   menu — light and open, not heavy. Capped to a narrower, centered width so
   the price sits closer to the name instead of stranded across a wide row. */
.brds-layout-list .entry-content {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid var(--brds-sageline);
	border-bottom: 1px solid var(--brds-sageline);
}

.brds-layout-list .entry-content .brds-row {
	padding: 28px 4px;   /* more air between rows */
	border-bottom: 1px solid var(--brds-line);
}

.brds-layout-list .entry-content .brds-row:last-child {
	border-bottom: 0;
}

/* Name · dotted leader · price on one baseline. */
.brds-layout-list .entry-content .brds-row__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.brds-layout-list .entry-content .brds-row__name {
	font-family: var(--brds-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--brds-deep);
	white-space: nowrap;
}

/* The dotted leader fills the space between name and price — soft & light. */
.brds-layout-list .entry-content .brds-row__lead {
	flex: 1 1 auto;
	border-bottom: 1px dotted var(--brds-sageline);
	transform: translateY(-5px);
	min-width: 24px;
}

.brds-layout-list .entry-content .brds-row__price {
	font-family: var(--brds-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.01em;
	color: var(--brds-price);
	white-space: nowrap;
}

/* An add-on note inside the price (e.g. "includes scrub… — $65") reads
   quietly in the sage tone rather than the bold price color. */
.brds-layout-list .entry-content .brds-row__price > strong {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: var(--brds-sage);
}

/* Description, always visible on the line below. */
.brds-layout-list .entry-content .brds-row__desc {
	margin: 7px 0 0;
	font-family: "Open Sans", sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--brds-ink);
	max-width: 78ch;
}

/* Standalone intro/footer paragraphs (no bold name) stay normal. Before the
   JS runs they're plain <p>; after, they're left untouched (not rows). */
.brds-layout-list .entry-content > p {
	font-size: 14px;
	color: var(--brds-ink);
	line-height: 1.7;
}

/* The footer note is a lone <em>; give it breathing room. */
.brds-layout-list .entry-content > p > em:only-child {
	display: block;
	margin-top: 18px;
	font-style: italic;
	font-weight: 400;
	font-size: 13px;
	color: var(--brds-sage);
	line-height: 1.7;
}

/* 4a. LEAF SECTION DIVIDER ========================================= */
/* The one botanical signature: a leaf flanked by hairline rules, used to
   separate sections. Injected on service pages via ::before on the content
   is avoided (can't hold an SVG cleanly); instead offered as a .brds-leafrule
   utility the theme can place, and shown by default above the service list/
   cards' footer note. Kept restrained — one bold placement, not per row. */
.brds-leafrule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 34px 0;
	color: var(--brds-sage);
}
.brds-leafrule::before,
.brds-leafrule::after {
	content: "";
	height: 1px;
	width: min(120px, 22%);
	background: var(--brds-sageline);
}

/* 4b. HERO CANVAS ================================================== */
/* The featured image is wrapped (via the post_thumbnail_html filter) as a
   hero: the spa photo is the canvas, a gradient scrim keeps text legible,
   and the slogan + CTA sit over it as a brochure-style headline. */

.brds-hero {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	/* No isolation/z-index here: a stacking context on the hero let the
	   mobile menu overlay fall behind it. The scrim/inner still layer
	   correctly via their own z-index within this relative container. */
}

/* Let the photo fill the canvas and crop gracefully at any aspect ratio. */
.brds-hero img.wp-post-image,
.brds-hero img {
	display: block;
	width: 100%;
	height: clamp(340px, 46vw, 560px);
	object-fit: cover;
	object-position: center 35%;
	margin: 0;
}

/* Gradient scrim: a vertical wash plus a left-side wash so the overlaid
   text stays legible regardless of what's behind it in the photo. */
.brds-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			to top,
			rgba(47, 56, 42, 0.78) 0%,
			rgba(47, 56, 42, 0.45) 40%,
			rgba(47, 56, 42, 0.12) 70%,
			rgba(47, 56, 42, 0.00) 100%
		),
		linear-gradient(
			to right,
			rgba(47, 56, 42, 0.45) 0%,
			rgba(47, 56, 42, 0.12) 45%,
			rgba(47, 56, 42, 0.00) 70%
		);
}

/* Overlaid content, pinned to the lower-left like a poster caption. */
.brds-hero__inner {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	max-width: 40rem;
	padding: 40px 44px 42px;
	color: #fff;
}

.brds-hero__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.brds-hero__slogan {
	margin: 0;
	font-family: var(--brds-display);
	font-weight: 600;
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.16;
	letter-spacing: 0.01em;
	color: #fff;
	text-shadow: 0 1px 18px rgba(31, 37, 27, 0.35);
}

.brds-hero__cta {
	display: inline-block;
	margin-top: 26px;
	padding: 13px 30px;
	background: var(--brds-cream);
	color: var(--brds-deep);
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.brds-hero__cta:hover,
.brds-hero__cta:focus {
	background: var(--brds-sage);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.brds-hero__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.brds-hero img.wp-post-image,
	.brds-hero img {
		height: clamp(300px, 62vw, 420px);
	}
	.brds-hero__inner {
		padding: 26px 22px 28px;
		max-width: 100%;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.brds-hero__cta {
		transition: none;
	}
}

/* 05. RESPONSIVE IMAGES & MEDIA ==================================== */
img,
.entry-content img,
.wpb_single_image img,
.vc_single_image-wrapper img {
	max-width: 100%;
	height: auto;
}

iframe,
video,
embed,
object {
	max-width: 100%;
}

html,
body {
	overflow-x: hidden;
}

/* Small screens: single-column cards, tighter price rows. */
@media (max-width: 767px) {
	.brds-layout-cards .entry-content,
	.brds-layout-cards .entry-content {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.brds-layout-cards .entry-content > p:has(strong),
	.brds-layout-cards .entry-content > p:has(strong) {
		padding: 24px 20px 22px;
	}
	.brds-layout-cards .entry-content > p:has(strong) > strong,
	.brds-layout-cards .entry-content > p:has(strong) > strong {
		font-size: 24px;
	}
	.brds-layout-list .entry-content > p:has(strong) > strong,
	.brds-layout-list .entry-content > p:has(strong) > strong {
		font-size: 19px;
	}
}

/* 06. NAVBAR LAYOUT + MOBILE ======================================= */
.header-nav .navbar-nav > li > a,
.navbar-nav > li > a {
	letter-spacing: 0.04em;
}

/* "Book an Appointment" as the primary action. Target both the menu-item
   id and the href (belt-and-suspenders: the id is stable while the menu
   isn't rebuilt; the href selector still catches it if the id changes).
   Style it as a sage button so it reads as the main CTA and matches the
   hero button / card accents. */
@media (min-width: 992px) {
	.navbar-nav .menu-item-77 > a,
	.navbar-nav li > a[href*="book-an-appointment"] {
		background: var(--brds-sage);
		color: #fff !important;
		padding: 9px 22px !important;
		border-radius: 4px;
		transition: background 0.2s ease, transform 0.2s ease;
	}
	.navbar-nav .menu-item-77 > a:hover,
	.navbar-nav .menu-item-77 > a:focus,
	.navbar-nav li > a[href*="book-an-appointment"]:hover,
	.navbar-nav li > a[href*="book-an-appointment"]:focus {
		background: var(--brds-deep);
		color: #fff !important;
		transform: translateY(-1px);
	}
	/* Suppress the theme's active-item underline on the button. */
	.navbar-nav .menu-item-77 > a::after,
	.navbar-nav li > a[href*="book-an-appointment"]::after {
		display: none !important;
	}
	.navbar-nav .menu-item-77 > a:focus-visible,
	.navbar-nav li > a[href*="book-an-appointment"]:focus-visible {
		outline: 2px solid var(--brds-deep);
		outline-offset: 2px;
	}
}

@media (max-width: 991px) {
	/* Comfortable tap targets and clear separation on the collapsed menu. */
	.navbar-nav > li > a {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		border-bottom: 1px solid var(--brds-line);
	}
	.navbar-toggle,
	.menu-hamburger,
	.hamburger {
		padding: 12px !important;
	}
	.navbar-header,
	.header-nav {
		max-width: 100%;
	}
	/* On the stacked mobile menu, give the Book item a sage accent so it
	   still stands out without floating as an odd pill. */
	.navbar-nav .menu-item-77 > a,
	.navbar-nav li > a[href*="book-an-appointment"] {
		color: var(--brds-sage) !important;
		font-weight: 600;
	}

	/* Keep the open dropdown menu above the hero and page content, with an
	   opaque background so nothing shows through. Fixes the flicker where
	   the menu briefly appeared then dropped behind the hero image. */
	.navbar-collapse {
		position: relative;
		z-index: 1050;
		background: #000;
	}
	/* The theme caps the open menu at max-height:275px with overflow scroll,
	   which cut off the last item ("Book an Appointment"). Let it grow to fit
	   all items (up to most of the viewport) so nothing is cropped. */
	.navbar-collapse.in,
	.navbar-collapse.collapsing {
		max-height: 85vh;
		overflow-y: auto;
	}
	/* The hamburger toggle must stay ABOVE the open menu so it is tappable
	   to re-close it (the menu was covering it). Pin it to the top-right of
	   the fixed navbar with the highest z-index in the header. */
	.navbar-header {
		position: relative;
		z-index: 1070;
	}
	.navbar-toggle {
		position: relative;
		z-index: 1080;
	}
	.navbar-fixed-top {
		z-index: 1060;
	}

	/* Turn the hamburger into an X while the menu is open. The theme marks
	   the open menu with .navbar-collapse.in; use :has() to reach the
	   toggle's icon bars from the navbar that contains the open menu.
	   Smooth-rotate the three bars: top -> "\", bottom -> "/", middle fades. */
	.navbar-toggle .icon-bar {
		transition: transform 0.25s ease, opacity 0.2s ease;
		transform-origin: center;
	}
	.navbar:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(2) {
		transform: translateY(6px) rotate(45deg);
	}
	.navbar:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(3) {
		opacity: 0;
	}
	.navbar:has(.navbar-collapse.in) .navbar-toggle .icon-bar:nth-child(4) {
		transform: translateY(-6px) rotate(-45deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.navbar-toggle .icon-bar {
			transition: none;
		}
	}
}

/* 07. SITE-WIDE "VISIT US" FOOTER ================================== */
/* A brochure-style footer block injected on every page (via the child
   theme's wp_footer hook): address + click-to-call/email + gift certs,
   the weekly hours, an About link column, and an embedded map. Sits above
   the theme's own footer. Sage design system, three columns on desktop,
   stacked on mobile. */

.brds-visit {
	background: var(--brds-deep);
	color: #eef0ea;
	padding: 48px 20px 52px;
	font-family: "Open Sans", sans-serif;
}

.brds-visit__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.brds-visit__title {
	font-family: var(--brds-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 28px;
	text-align: center;
}

.brds-visit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 36px;
	align-items: start;
}

.brds-visit__subhead {
	font-family: "Open Sans", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brds-sage);
	margin: 0 0 14px;
}

.brds-visit__address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: #eef0ea;
	margin: 0 0 14px;
}

.brds-visit__contact {
	font-size: 15px;
	line-height: 1.9;
	margin: 0 0 18px;
}

.brds-visit__contact a,
.brds-visit__links a {
	color: #eef0ea;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.brds-visit__phone {
	font-family: var(--brds-display);
	font-weight: 600;
	font-size: 22px !important;
	letter-spacing: 0.01em;
}

.brds-visit__contact a:hover,
.brds-visit__contact a:focus,
.brds-visit__links a:hover,
.brds-visit__links a:focus {
	color: #fff;
	border-color: var(--brds-sage);
}

/* Gift-certificate callout: an outlined sage button. */
.brds-visit__gift {
	display: inline-block;
	margin-top: 4px;
	padding: 10px 22px;
	border: 1px solid var(--brds-sage);
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.brds-visit__gift:hover,
.brds-visit__gift:focus {
	background: var(--brds-sage);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none;
}

/* Hours rows: days left, time right. */
.brds-visit__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brds-visit__hours-days {
	color: #eef0ea;
}

.brds-visit__hours-time {
	color: #c9d2bd;
	white-space: nowrap;
}

/* About link column. */
.brds-visit__links {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.brds-visit__links li {
	margin: 0 0 8px;
	font-size: 14px;
}

/* Map. */
.brds-visit__map {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 6px;
	filter: grayscale(0.15);
}

.brds-visit__directions {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--brds-sage);
	text-decoration: none;
	transition: color 0.2s ease;
}

.brds-visit__directions:hover,
.brds-visit__directions:focus {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 900px) {
	.brds-visit__grid {
		grid-template-columns: 1fr 1fr;
	}
	.brds-visit__col--map {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.brds-visit__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.brds-visit__title {
		font-size: 26px;
	}
}

/* 08. STICKY MOBILE "BOOK NOW" BAR ================================= */
/* A persistent booking CTA fixed to the bottom of the viewport on phones
   only. Desktop already has the sage Book button in the nav, so this is
   hidden ≥992px. Body gets bottom padding on mobile so the bar never
   permanently covers page content or the footer's last row. */

.brds-book-bar {
	display: none; /* shown only on mobile, below */
}

@media (max-width: 991px) {
	.brds-book-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040; /* below the open mobile menu (1050), above content */
		padding: 15px 16px;
		background: var(--brds-sage);
		color: #fff;
		font-family: "Open Sans", sans-serif;
		font-weight: 600;
		font-size: 15px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		box-shadow: 0 -3px 14px rgba(31, 37, 27, 0.22);
		transition: background 0.2s ease;
	}
	.brds-book-bar:hover,
	.brds-book-bar:focus {
		background: var(--brds-deep);
		color: #fff;
		text-decoration: none;
	}
	.brds-book-bar__label::before {
		content: "\1F4C5"; /* calendar emoji */
		margin-right: 8px;
	}

	/* Reserve space so the fixed bar never hides the last of the page/footer. */
	body {
		padding-bottom: 56px;
	}

	/* When the mobile menu is open, drop the bar so it doesn't sit over the
	   menu's booking item or fight the overlay. */
	body:has(.navbar-collapse.in) .brds-book-bar {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.brds-book-bar {
			transition: none;
		}
	}
}

/* 09. reCAPTCHA v3 BADGE ========================================== */
/* Contact Form 7 v3 reCAPTCHA loads a floating badge bottom-right on every
   page. Google permits hiding it PROVIDED the required attribution text is
   shown near the form instead (added under the CF7 form — see notes). Hide
   the badge and lift it above the sticky mobile book bar if ever shown. */

.grecaptcha-badge {
	visibility: hidden;
}

/* Attribution line to place near/under the contact form (paste the markup
   from the deploy notes into the CF7 form). */
.brds-recaptcha-note {
	margin-top: 14px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--brds-ink);
	opacity: 0.75;
}

.brds-recaptcha-note a {
	color: var(--brds-sage);
	text-decoration: underline;
}

/* 10. TRIM H-CODE SINGLE-POST CHROME =============================== */
/* Related posts, the category link, AND the next/previous-post navigation
   are all turned off server-side in functions.php (brds_strip_hcode_post_chrome
   sets hcode_enable_related_posts / hcode_single_enable_category /
   hcode_enable_navigation to 0). No CSS is used to hide them.

   IMPORTANT: do NOT hide `.next-prev-post-wrapper` in CSS — despite the name,
   H-Code applies that class to the WHOLE post <section> (see standard-post.php),
   so hiding it blanks the entire post body. That mistake previously hid the
   Our Staff / Our Policies content. The nav itself is option-gated above. */