/*
Theme Name:   Wind Cries Mary
Theme URI:    https://github.com/taylor-time/cottage-hospitality-web
Description:  Child theme for Wind Cries Mary (Cottage Hospitality, Victoria BC).
              Palette and typography extracted from the live Squarespace site;
              see audit/brand.md in the build repo for provenance of every value.
Author:       NovelLogic
Author URI:   https://novellogic.ca
Template:     generatepress
Version:      0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wcm
*/

/* ---------------------------------------------------------------------------
 * WHY GENERATEPRESS AND NOT KADENCE
 *
 * Both are good, fast, GPL themes. GeneratePress wins here specifically
 * because of what this project is being sold on: portability.
 *
 * Kadence's real value lives in the Kadence Blocks plugin. Build the layouts
 * with it and the proprietary block markup ends up saved inside every page's
 * post_content. Deactivate the plugin and the pages degrade to validation
 * warnings and raw HTML. That is the same lock-in we are pitching against
 * with Squarespace, only cheaper to escape - and we would be handing it to
 * the client ourselves.
 *
 * GeneratePress free ships ~10KB of CSS, no bundled block library, and no
 * proprietary markup. Every pattern in this theme is built from CORE blocks
 * only. The practical consequence is that the parent theme is replaceable:
 * swap GeneratePress for any block theme, or none, and the pages still hold,
 * because nothing about the content depends on the theme that rendered it.
 *
 * We also deliberately do not use GP Premium. The free parent plus this child
 * plus theme.json covers everything the design needs, so the client inherits
 * no licence that can lapse.
 *
 * Reconsider this choice only if the build starts needing a header/footer
 * builder UI for non-technical editors - that is Kadence's genuine advantage.
 * ---------------------------------------------------------------------------
 *
 * DESIGN TOKENS LIVE IN theme.json, NOT HERE.
 *
 * This file is intentionally almost empty. Colour, type, and spacing are all
 * declared in theme.json so they are available to the block editor, exposed
 * as CSS custom properties, and portable to any host. Adding overrides here
 * means the editor preview stops matching the front end.
 *
 * Only put rules here that theme.json genuinely cannot express.
 * ------------------------------------------------------------------------ */

/*
 * The one real exception. Squarespace's menus are flat images, which is why
 * Google cannot read them (see audit/findings.md section 5). Where we render a
 * menu document link we want a clear affordance that it opens a PDF, and
 * theme.json has no way to express a generated-content marker.
 */
.wcm-menu-doc__link[href$=".pdf"]::after {
	content: " (PDF)";
	font-size: 0.85em;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

/*
 * Respect reduced-motion preferences for the gallery strip's scroll snapping.
 */
@media (prefers-reduced-motion: reduce) {
	.wcm-gallery-strip {
		scroll-behavior: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Menu rows.
 *
 * A menu line is: name .......... price, with the description beneath. The
 * leader dots are a ::before on the price so they are decorative and never
 * reach the accessibility tree - a screen reader hears "whipped Ricotta,
 * honey, olive oil, 12" rather than a mouthful of periods.
 *
 * The dots use --wcm-rule (#8B877F). That colour measures 3.58:1 on white and
 * FAILS WCAG AA for body text, so it is used here for decoration only. All
 * actual menu text is #605A4E (6.84:1) or #000. See audit/brand.md.
 * ------------------------------------------------------------------------ */

:root {
	--wcm-rule: var(--wp--preset--color--secondary, #8B877F);
}

.wcm-menu-item {
	max-width: 40rem;
	margin-inline: auto;
}

.wcm-menu-item__line {
	align-items: baseline;
	gap: 0.5rem;
}

.wcm-menu-item__line > p:first-child {
	flex: 0 1 auto;
	margin: 0;
}

.wcm-menu-item__price {
	flex: 0 0 auto;
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Decorative leader dots between name and price. */
.wcm-menu-item__line > p:first-child::after {
	content: "";
	display: inline-block;
	width: 0;
}

.wcm-menu-item__line {
	position: relative;
}

.wcm-menu-item__line::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.35em;
	border-bottom: 1px dotted var(--wcm-rule);
	opacity: 0.5;
	z-index: 0;
}

.wcm-menu-item__line > p {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base, #fff);
	padding-inline: 0.25rem;
}

.wcm-menu-item__line > p:first-child {
	padding-left: 0;
}

.wcm-menu-item__price {
	padding-right: 0;
}

/* On the surface-coloured bands the leader dots need the matching ground. */
.has-surface-background-color .wcm-menu-item__line > p {
	background: var(--wp--preset--color--surface, #DAD8D2);
}

/* ABV marker inside a cocktail name. Small, muted, but still #605A4E. */
.wcm-abv {
	display: block;
	font-size: 0.86em;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-bottom: 0.1rem;
}

/* ---------------------------------------------------------------------------
 * Footer.
 *
 * Every link here is labelled with where it actually goes. On the sister Rudi
 * site the footer link labelled "Instagram" is a tel: href to the phone number,
 * and the one labelled "Facebook" points at Wind Cries Mary's page - both on
 * all four pages (audit/findings.md section 8). That class of error is the
 * reason the footer reads its URLs from the venue record instead of having them
 * typed in per page.
 * ------------------------------------------------------------------------ */

.site-footer,
.wcm-footer {
	background: var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--base, #fff);
}

.wcm-footer a {
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
	border-bottom: 1px solid var(--wcm-rule);
	padding-bottom: 2px;
}

.wcm-footer a:hover,
.wcm-footer a:focus-visible {
	border-bottom-color: var(--wp--preset--color--base, #fff);
}

/* ---------------------------------------------------------------------------
 * Images: never let a loading image collapse the layout.
 * width/height are set on every img, this just keeps the ratio on resize.
 * ------------------------------------------------------------------------ */

.wp-block-image img,
.wp-block-cover img.wp-block-cover__image-background {
	height: auto;
}

.wp-block-cover img.wp-block-cover__image-background {
	height: 100%;
}

/* A <picture> wrapper must not break the block's own layout rules. */
.wp-block-image picture,
.wp-block-cover picture {
	display: contents;
}

/* ---------------------------------------------------------------------------
 * Footer link touch targets.
 *
 * Lighthouse flagged the stacked footer links as "Touch targets do not have
 * sufficient size or spacing" - they were separated only by a <br>, which left
 * roughly 16px between two tappable areas. WCAG 2.5.8 wants 24x24 CSS pixels
 * minimum, and a thumb is not a mouse pointer.
 * ------------------------------------------------------------------------ */

.wcm-footer p a {
	display: inline-block;
	min-height: 24px;
	line-height: 1.6;
	padding-block: 6px;
}

.wcm-footer p {
	line-height: 2;
}

/* ---------------------------------------------------------------------------
 * Three-up image columns.
 *
 * The photographs have different native aspect ratios, so in a three-column row
 * their captions landed at three different heights. A fixed ratio with
 * object-fit keeps the row level without cropping anything important, and the
 * explicit width/height on each <img> still prevents layout shift.
 * ------------------------------------------------------------------------ */

.wp-block-columns .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wp-block-columns .wp-block-image {
	margin-bottom: 0.75rem;
}

/* Keep the caption/heading under each column on one baseline. */
.wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * True full-bleed sections.
 *
 * GeneratePress constrains .site-content to the container width, so a block
 * marked `alignfull` stopped at the container edge and left a strip of page
 * background either side - close enough to full width to read as a mistake
 * rather than a choice.
 *
 * calc(50% - 50vw) pulls each side out to the viewport edge. 100vw is
 * deliberately NOT used as a width: on Windows and some Linux browsers 100vw
 * includes the scrollbar gutter, which produces a horizontal scrollbar on every
 * page. Setting the margins and letting width stay auto avoids that entirely.
 * ------------------------------------------------------------------------ */

.entry-content > .alignfull,
.site-content .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: auto;
}

/* Inner content of a full-bleed section still respects the reading measure. */
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-cover__inner-container {
	margin-inline: auto;
}

/* Nothing should ever cause sideways scrolling. */
html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * alignwide inside a full-bleed section.
 *
 * GeneratePress styles .alignwide as `max-width: calc(100% + 160px)` with
 * -80px side margins - a trick that widens a block beyond its 1200px container.
 * That is correct in GeneratePress's own layout and wrong inside one of our
 * `alignfull` sections, where the parent is ALREADY viewport-width: the block
 * ends up 1499px wide in a 1440px viewport and the last column is cut off.
 *
 * `overflow-x: clip` further up was hiding this rather than fixing it - the
 * scrollbar disappeared and the content stayed clipped. This is the actual fix:
 * pin alignwide to the theme.json wide size, or the viewport minus a gutter on
 * narrow screens, and centre it.
 * ------------------------------------------------------------------------ */

.entry-content .alignwide,
.alignfull .alignwide,
.wp-block-group .alignwide {
	max-width: min(
		var(--wp--style--global--wide-size, 78rem),
		calc(100vw - 2 * var(--wp--preset--spacing--30, 2rem))
	);
	margin-left: auto;
	margin-right: auto;
}

/* The inner container of a full-bleed group follows the same measure. */
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-cover__inner-container {
	max-width: min(
		var(--wp--style--global--wide-size, 78rem),
		calc(100vw - 2 * var(--wp--preset--spacing--30, 2rem))
	);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Header.
 *
 * Matched to the live site's own header rather than left at the parent theme's
 * defaults: the stacked WiND CRiES MARY wordmark on the left, uppercase
 * letterspaced navigation, and a Reserve button on the right.
 *
 * This is the difference between "their words in a stock theme" and something
 * that reads as their site. The wordmark in particular is the brand - it is the
 * same lockup that heads their printed cocktail menu.
 * ------------------------------------------------------------------------ */

.site-logo img,
.site-header .header-image {
	height: 72px;
	width: auto;
	max-width: none;
}

@media (max-width: 768px) {
	.site-logo img,
	.site-header .header-image {
		height: 54px;
	}
}

/* Uppercase, letterspaced nav, as on the live site. */
.main-navigation .main-nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

/* The Reserve item reads as a button, not a link. */
.main-navigation .main-nav ul li.wcm-nav-reserve > a {
	background: var(--wp--preset--color--primary, #605A4E);
	color: var(--wp--preset--color--base, #fff);
	margin-left: 0.75rem;
	padding-inline: 1.25rem;
}

.main-navigation .main-nav ul li.wcm-nav-reserve > a:hover,
.main-navigation .main-nav ul li.wcm-nav-reserve > a:focus-visible {
	background: var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--base, #fff);
}

/* On mobile the nav collapses into the toggle; keep the button full width. */
@media (max-width: 768px) {
	.main-navigation .main-nav ul li.wcm-nav-reserve > a {
		margin-left: 0;
	}
}

/* Header sits on white with a hairline rule, matching the live site. */
.site-header {
	border-bottom: 1px solid var(--wp--preset--color--surface, #DAD8D2);
}

/* The wordmark now IS the site-title output, so .main-title must stay visible.
 * Only the tagline is suppressed. */
.site-header .site-branding .site-description,
.site-header .site-description {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* A full-bleed hero should meet the header, not float below a white band. */
.entry-content > .alignfull:first-child,
.entry-content > .wp-block-cover.alignfull:first-child {
	margin-top: calc(-1 * var(--wp--preset--spacing--30, 2rem));
}

/* GeneratePress sets `.one-container .site-content { padding: 40px }` at (0,2,0),
 * which outranks a bare `.site-content` rule - the earlier attempt at removing
 * the bottom padding lost that tie. Matching the same selector.
 *
 * The 40px only ever showed as a white strip between the last block and the
 * footer: invisible where the last section is white, obvious where it ends on a
 * full-bleed photograph. Every section carries its own bottom padding already. */
.one-container .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Links inside headings.
 *
 * The Menus column headings were rendering in GeneratePress's default link blue
 * (#1E73BE) rather than the brand palette - visibly off-brand, and at 3.47:1 on
 * the surface colour it only cleared the large-text threshold. theme.json sets
 * elements.link, but the parent theme's anchor colour won inside an h3.
 * ------------------------------------------------------------------------ */

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.wp-block-heading a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.wp-block-heading a:hover,
h1 a:focus-visible, h2 a:focus-visible, h3 a:focus-visible, h4 a:focus-visible,
.wp-block-heading a:focus-visible {
	color: var(--wp--preset--color--contrast, #000);
}

/* ---------------------------------------------------------------------------
 * Current nav item.
 *
 * GeneratePress highlights the active page's nav link in its default blue
 * (#1E73BE), so every page showed one off-brand word in the header. Uses the
 * brand colour and a rule instead, which also reads as "you are here" without
 * relying on colour alone.
 * ------------------------------------------------------------------------ */

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a {
	color: var(--wp--preset--color--primary, #605A4E);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary, #605A4E);
}

/* The reserve button stays a button even when it is the current item. */
.main-navigation .main-nav ul li.wcm-nav-reserve.current-menu-item > a {
	color: var(--wp--preset--color--base, #fff);
	box-shadow: none;
}

/* Skip link and the logo anchor should not inherit the default blue either. */
.site-logo a,
a.skip-link.screen-reader-text {
	color: var(--wp--preset--color--primary, #605A4E);
}

/* Footer widget area runs full width, so the page ends on the dark band rather
 * than on a floating panel with a strip of white beneath it. */
.site-footer .footer-widgets,
.site-footer .footer-widgets-container {
	background: var(--wp--preset--color--contrast, #000);
	padding: 0;
	max-width: none;
}

.site-footer .footer-widgets .inside-footer-widgets {
	max-width: min(var(--wp--style--global--wide-size, 78rem), calc(100vw - 3rem));
	margin-inline: auto;
}

.site-footer .wcm-footer {
	max-width: none;
}

/* The copyright bar is part of the footer, not a white strip beneath it. */
.site-footer .site-info {
	background: var(--wp--preset--color--contrast, #000);
	color: var(--wp--preset--color--base, #fff);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer .site-info .copyright,
.site-footer .site-info a {
	color: var(--wp--preset--color--base, #fff);
	font-size: 0.8rem;
}

.site-footer .inside-site-info {
	padding-block: 1.25rem;
}

/* ===========================================================================
 * HOMEPAGE HERO — editorial masthead
 *
 * Not "headline centred over a full-bleed image". Runs a scale ratio
 * of about 9.7x between the 0.72rem eyebrow and the display cap, because scale
 * contrast is what separates a composition from an arrangement.
 *
 * Uses the venue's own vertical-rule motif (#605A4E, 3px) taken from their Custom
 * CSS, and the lyric the restaurant is named for used as the statement. The
 * wordmark in the header already says who this is, so the hero does not repeat it.
 * ======================================================================== */

.wcm-hero {
	background: var(--wp--preset--color--base, #fff);
	/* Deliberate bleeds are clipped here, not on the document, so nothing can
	 * introduce a horizontal scrollbar. */
	overflow: clip;
}

.wcm-hero__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #605A4E);
	line-height: 1.4;
}

.wcm-hero__rule {
	display: block;
	width: 3px;
	height: 52px;
	background: var(--wp--preset--color--primary, #605A4E);
	margin-bottom: 1.4rem;
}

.wcm-hero__display {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #000);
	letter-spacing: -0.035em;
}

.wcm-hero__sub {
	margin: 0;
	color: var(--wp--preset--color--primary, #605A4E);
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.55;
	max-width: 34ch;
}

.wcm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.4rem;
}

.wcm-hero__note {
	margin: 1.6rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #605A4E);
}

/* ---------------------------------------------------------------------------
 * Type is the subject. One word breaks the measure and runs to the right edge;
 * the photograph is a supporting band underneath.
 * ------------------------------------------------------------------------ */

.wcm-hero--masthead .wcm-hero__inner {
	max-width: min(78rem, calc(100vw - 3rem));
	margin-inline: auto;
	/* Tightened so the eyebrow, all three type lines, the supporting copy, both
	 * CTAs and the head of the photograph all clear a 1440x900 viewport. A
	 * restaurant homepage whose first screen contains no food, room or people
	 * is a composition that has beaten its own purpose. */
	padding: clamp(1.5rem, 3.4vw, 3rem) 0 clamp(1.25rem, 2vw, 1.5rem);
}

.wcm-hero--masthead .wcm-hero__display {
	font-size: clamp(2rem, 6.5vw, 5.5rem);
	line-height: 0.86;
}

.wcm-hero--masthead .wcm-hero__display span {
	display: block;
}

/* The oversized word. Bleeds right on wide screens, pulled back in on small
 * ones so it never clips a letter on a phone. */
/* The word that breaks the grid. Sized in vw so it scales with the viewport
 * and genuinely runs past the right edge instead of merely being large - at
 * 1440 this is ~290px and about 100px wider than the page. The section clips it,
 * so it bleeds without ever creating a scrollbar. */
.wcm-hero--masthead .wcm-hero__display .l2 {
	font-size: clamp(2.8rem, 17.9vw, 16.6rem);
	/* Leading has to clear the descenders of "happiness" or the p-stems cut
	 * straight through "staggering on" and eat a letter. Overlap is a legitimate
	 * device; losing a glyph is a bug. At this size the descender is deep, so
	 * the line box gets full room and the tightness comes from the negative
	 * tracking instead. */
	/* line-height alone does not solve this: at display size Jost's descender ink
	 * overflows its line box, so the p-stems of "happiness" run down through
	 * "staggering on". Explicit bottom clearance is what actually separates
	 * them. Verified by rendering the junction at 2x and looking, not by
	 * nudging a number. */
	line-height: 1.0;
	letter-spacing: -0.055em;
	margin-left: -0.055em;
	margin-block: -0.04em 0.16em;
}

@media (min-width: 900px) {
	.wcm-hero--masthead .wcm-hero__display .l2 {
		white-space: nowrap;
	}
}

/* The remaining lines sit against the giant one rather than centring under it. */
.wcm-hero--masthead .wcm-hero__display .l3,
.wcm-hero--masthead .wcm-hero__display .l4 {
	font-size: 0.82em;
}

.wcm-hero--masthead .wcm-hero__display .l4 {
	padding-left: 0.06em;
}

.wcm-hero--masthead .wcm-hero__rulebar {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.wcm-hero--masthead .wcm-hero__rulebar .wcm-hero__rule {
	height: 3px;
	width: clamp(3rem, 9vw, 8rem);
	margin: 0.7rem 0 0;
	flex: 0 0 auto;
}

.wcm-hero--masthead .wcm-hero__band {
	margin: 0;
	line-height: 0;
}

.wcm-hero--masthead .wcm-hero__band img {
	width: 100%;
	height: clamp(260px, 42vh, 460px);
	object-fit: cover;
	object-position: 50% 55%;
	display: block;
}

/* ===========================================================================
 * COCKTAIL MENU TREATMENT
 *
 * Replaces the borrowed illustrated PNG. The design goal is that this reads as
 * considered as a printed piece while every word stays selectable and
 * indexable - that contrast is the exhibit.
 *
 * Sage and coral are DECORATIVE ONLY. Measured on white: sage 3.64:1, coral
 * 4.21:1, sage-pale 1.27:1 - all below the 4.5:1 needed for body text. They
 * appear here as rules, motifs and markers, never as a text colour. Text on the
 * sage panel is #605A4E at 5.40:1.
 * ======================================================================== */

.wcm-section-mark {
	display: flex;
	justify-content: center;
	color: var(--wp--preset--color--sage, #7E8A73);
	margin: 0 auto 0.55rem;
}

/* At 44px these read as specks rather than as drawing. */
.wcm-section-mark .wcm-motif {
	width: 68px;
	height: 68px;
}

.wcm-section-mark .wcm-motif {
	overflow: visible;
}

/* Section heading sits between two hairlines, motif centred above. */
.wcm-menu-section-head {
	position: relative;
	text-align: center;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

/* Sage panel behind each menu section, edge to edge on the reading measure. */
.wcm-menu-panel {
	background: var(--wp--preset--color--sage-pale, #E2E6DC);
	border-top: 1px solid rgba(126, 138, 115, 0.45);
	border-bottom: 1px solid rgba(126, 138, 115, 0.45);
}

/* The leader dots pick up the panel ground so they read as one surface. */
.wcm-menu-panel .wcm-menu-item__line > p,
.has-sage-pale-background-color .wcm-menu-item__line > p {
	background: var(--wp--preset--color--sage-pale, #E2E6DC);
}

/* Alcohol-free marker: a coral sprig, the one place coral appears.
 * Coral is decorative here - the words "also available alcohol-free" carry the
 * meaning, so nothing is signalled by colour alone. */
.wcm-af-mark {
	display: inline-block;
	vertical-align: -0.15em;
	margin-right: 0.35rem;
	color: var(--wp--preset--color--coral, #C05F4C);
}

.wcm-af-mark svg {
	width: 13px;
	height: 13px;
}

/* A larger motif opening the menu, drawn at low contrast so it sits behind the
 * introduction rather than competing with it. */
.wcm-menu-open {
	display: flex;
	justify-content: center;
	color: var(--wp--preset--color--sage, #7E8A73);
	opacity: 0.85;
	margin-bottom: 0.75rem;
}

.wcm-menu-open svg {
	width: 74px;
	height: 74px;
}

/* Hairline rules in sage rather than the warm grey, on menu pages only. */
.wcm-menu-panel .wp-block-separator,
.wcm-menu-panel hr {
	border-color: var(--wp--preset--color--sage, #7E8A73);
	opacity: 0.5;
}

/* ===========================================================================
 * ENQUIRY FORM
 * Native controls, no framework. Focus rings are left visible and strengthened
 * rather than removed - a booking form is exactly where keyboard users end up.
 * ======================================================================== */

.wcm-form {
	max-width: 34rem;
}

.wcm-form__row {
	margin: 0 0 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.wcm-form__row label {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #605A4E);
}

.wcm-form input[type="text"],
.wcm-form input[type="email"],
.wcm-form input[type="tel"],
.wcm-form input[type="date"],
.wcm-form input[type="number"],
.wcm-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--secondary, #8B877F);
	border-radius: 0;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #000);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 1rem;
	line-height: 1.4;
}

.wcm-form input:focus-visible,
.wcm-form textarea:focus-visible,
.wcm-form button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #605A4E);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary, #605A4E);
}

.wcm-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0 1rem;
}

/* The honeypot. Hidden from people without display:none, which some bots skip. */
.wcm-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wcm-form__actions {
	margin: 1.4rem 0 0;
}

.wcm-form__small {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary, #605A4E);
}

.wcm-form__notice {
	padding: 0.9rem 1rem;
	margin: 0 0 1.5rem;
	border-left: 3px solid var(--wp--preset--color--primary, #605A4E);
	background: var(--wp--preset--color--surface, #DAD8D2);
	color: var(--wp--preset--color--contrast, #000);
	font-size: 0.95rem;
}

.wcm-form__notice--err {
	border-left-color: var(--wp--preset--color--coral, #C05F4C);
}


/* ---------------------------------------------------------------------------
 * Outline buttons.
 *
 * theme.json sets a background on `elements.button`, which applies to every
 * button including the outline variant - so secondary CTAs were rendering as a
 * second solid block and the hero had two equally loud actions. This restores
 * the intended hierarchy: one filled primary, one quiet outline.
 * ------------------------------------------------------------------------ */

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--primary, #605A4E);
	border: 1px solid var(--wp--preset--color--primary, #605A4E);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-element-button:hover {
	background: var(--wp--preset--color--primary, #605A4E);
	color: var(--wp--preset--color--base, #fff);
}

/* ===========================================================================
 * WORDMARK — live text, three optically justified lines
 *
 * Each line is tracked independently so all three fill the same measure.
 * RAiN is four glyphs against LAUGHS and JOSEPH at six, so uniform tracking
 * would leave the top line visibly short. The per-line values are solved from
 * measured glyph widths, not eyeballed - see inc/branding.php.
 * ======================================================================== */

.wcm-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #000);
	line-height: 1.02;
	font-size: 15px;
	padding: 0.5em 0.55em;
	border: 1px solid currentColor;
	text-transform: uppercase;
	white-space: nowrap;
}

.wcm-mark__line {
	display: block;
}

/* The lowercase i is part of the identity and stays lowercase. */
.wcm-mark__i {
	text-transform: lowercase;
}

.site-logo a,
.main-title a {
	text-decoration: none;
	border: 0;
	display: inline-block;
}

.main-title {
	margin: 0;
	line-height: 0;
	font-size: 0;
}

.site-logo a:hover .wcm-mark,
.site-logo a:focus-visible .wcm-mark,
.main-title a:hover .wcm-mark,
.main-title a:focus-visible .wcm-mark {
	color: var(--wp--preset--color--primary, #605A4E);
}

@media (max-width: 768px) {
	.wcm-mark {
		font-size: 12.5px;
	}
}

/* ---------------------------------------------------------------------------
 * One left edge down the page.
 *
 * GeneratePress's .inside-header carries 40px of horizontal padding that the
 * hero does not, so the wordmark sat at 136px while the eyebrow and display
 * type sat at 96px — three elements, two spines, and nothing lining up.
 *
 * Matching the hero's measure exactly: min(78rem, 100vw - 3rem) centred. That
 * resolves to 96px at 1440 and 24px at 390, which is where the hero's own
 * content sits at both widths.
 * ------------------------------------------------------------------------ */

.site-header .inside-header {
	max-width: min(78rem, calc(100vw - 3rem));
	margin-inline: auto;
	padding-left: 0;
	padding-right: 0;
}

/* ===========================================================================
 * MENU CARDS
 *
 * Was three photographs with grey underlined labels on a bone panel — which
 * read as unstyled default links, and the label colour barely separated from
 * the panel behind it.
 *
 * White ground so the photography carries the block. Label in the display face,
 * uppercase and tracked, at #605A4E (6.84:1 on white). A sage index number
 * above it makes three items read as a considered set rather than three
 * unrelated thumbnails.
 *
 * The whole card is clickable: the heading's anchor is stretched over the card
 * with an absolutely positioned ::after. That keeps the markup as core blocks
 * and keeps exactly one link per card in the accessibility tree — wrapping the
 * image in a second anchor would announce every card twice.
 * ======================================================================== */

.wcm-cards .wp-block-columns {
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.wcm-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.wcm-card__media {
	overflow: hidden;
	margin: 0 0 0.9rem;
	background: var(--wp--preset--color--surface, #DAD8D2);
}

.wcm-card__media .wp-block-image,
.wcm-card__media figure {
	margin: 0;
}

.wcm-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The index numbers are TEXT, so they cannot use the decorative sage: #7E8A73
 * measures 3.63:1 on white and Lighthouse correctly failed it. sage-deep
 * (#6B7561, 4.84:1) keeps the sage accent and clears AA with margin to spare.
 * Decorative sage is untouched and still used for the motifs and rules. */
.wcm-card__num {
	margin: 0 0 0.3rem;
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	color: var(--wp--preset--color--sage-deep, #6B7561);
	font-variant-numeric: tabular-nums;
}

.wcm-card__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	line-height: 1.15;
	color: var(--wp--preset--color--primary, #605A4E);
}

.wcm-card__label a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

/* Stretch the single anchor over the whole card. */
.wcm-card__label a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* A rule that draws in under the label, plus a slow image push. Static cards
 * read as a template. */
.wcm-card__label a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.5rem;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--primary, #605A4E);
	transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wcm-card:hover .wcm-card__media img,
.wcm-card:focus-within .wcm-card__media img {
	transform: scale(1.045);
}

.wcm-card:hover .wcm-card__label a::before,
.wcm-card:focus-within .wcm-card__label a::before {
	width: 2.5rem;
}

.wcm-card__label a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #605A4E);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.wcm-card__media img,
	.wcm-card__label a::before {
		transition: none;
	}
	.wcm-card:hover .wcm-card__media img {
		transform: none;
	}
}

/* ===========================================================================
 * FOOTER — one band
 * All three columns lead with the same heading treatment so the Reserve button
 * lands on the same line as the other columns' first line of body text.
 * ======================================================================== */

.wcm-foot__h {
	margin: 0 0 0.55rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 400;
}

.wcm-footer p {
	margin: 0 0 0.35rem;
}

.wcm-foot__cta {
	margin: 0;
}

.wcm-foot__cta .wp-block-button__link {
	padding-block: 0.62rem;
}

.wcm-foot__social {
	margin-top: 0.9rem;
}

/* ===========================================================================
 * ONE CONTINUOUS SURFACE — the grey gutters, fixed at the container
 *
 * The body background was #F7F8F9 grey while the site container was white and
 * capped at 1248px, so a grey column showed down both edges of every page
 * wherever a full-bleed section wasn't covering it. Four pages read as "chopped
 * up" because of that gutter, not because of the sections themselves.
 *
 * Fixed once, at the container: the site container spans the viewport and the
 * body ground matches it. Section wrappers are already alignfull and their
 * inner containers do the width limiting, so nothing else has to change.
 *
 * This is deliberately not a per-section override — that would leave the next
 * section anyone adds showing gutters again.
 * ======================================================================== */

body,
body.wp-singular {
	background-color: var(--wp--preset--color--base, #fff);
}

.site.grid-container,
.site.container {
	max-width: none;
	width: 100%;
	background-color: var(--wp--preset--color--base, #fff);
}

/* The site container no longer indents its contents; sections handle their own
 * inner measure. Without this every section would be inset by 40px and the
 * alignfull pull would overshoot. */
.site-content,
.separate-containers .site-content {
	padding-left: 0;
	padding-right: 0;
	/* GeneratePress puts 40px under .site-content. Every section already carries
	 * its own bottom padding, so this only ever showed as a white strip between
	 * the last block and the footer - invisible where the last section is white,
	 * obvious where it is a full-bleed photograph. Measured at 40px on all seven
	 * pages, with nothing between the two edges. */
	padding-bottom: 0;
}

/* Non-full-bleed content still needs a gutter on small screens. */
.entry-content > *:not(.alignfull):not(.alignwide) {
	padding-inline: clamp(1.5rem, 4vw, 2rem);
}

/* ---------------------------------------------------------------------------
 * Full-bleed content photographs.
 *
 * These were plain images with no alignment, rendering at the intrinsic 1024px
 * of the "large" size with white either side. They now carry alignfull; the
 * height cap stops a 1600x1089 photograph becoming a 980px-tall wall at desktop
 * width and keeps them reading as a band.
 * ------------------------------------------------------------------------ */

.wcm-bleed {
	margin-block: 0;
}

/* Specificity note: `.wp-block-image img { height: auto }` (0,2,1) outranks a
 * bare `.wcm-bleed img` (0,1,1), so the height cap was being ignored and these
 * rendered ~980px tall at desktop width. Matching the block class as well. */
.wp-block-image.alignfull.wcm-bleed img,
figure.wp-block-image.wcm-bleed img {
	display: block;
	width: 100%;
	height: clamp(260px, 46vh, 520px);
	object-fit: cover;
	object-position: 50% 55%;
}


/* The info row's CTA is left-aligned like everything else in it. A centred
 * button was the only non-left-aligned element on the page. */
/* Left-aligned like everything else in the row. margin-top is deliberately NOT
 * zeroed: the sibling paragraphs receive the block gap (10.72px), so removing it
 * here left the button's top edge 11px above the neighbouring first body line. */
.wcm-info-cta {
	justify-content: flex-start;
}