/*
 * Woodside Field — front-end + editor polish.
 * Design tokens, colour, type and spacing live in theme.json. This file only
 * covers what theme.json cannot express: the sticky header, navigation states,
 * footer treatment, focus visibility and a few refinements.
 */

:root {
	/* Brand-row height; the header sticks at -this so only the nav row stays
	 * pinned once you scroll (pure-CSS shrink-on-scroll). */
	--wf-brand-row-h: 66px;
	--wf-nav-row-h: 50px;
}

/* Smooth scrolling for anchor/keyboard navigation only — an unconditional
 * :root rule would also animate programmatic scrollTo (lazy-load sweeps,
 * restore-position) and ignore vestibular preferences. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

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

/* Keep focus obvious and on-brand for keyboard users. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---- Header ---------------------------------------------------------- */
/* The sticky must live on WordPress's template-part wrapper: a sticky child
 * can only stick within its parent, and the wrapper is exactly the header's
 * own height — so sticking the inner group does nothing. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--wf-brand-row-h));
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	backdrop-filter: saturate(1.1) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Logged-in admins: pin below the fixed admin bar instead of behind it. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: calc(32px - var(--wf-brand-row-h));
}

@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(46px - var(--wf-brand-row-h));
	}
}

.site-header__brand {
	height: var(--wf-brand-row-h);
	gap: 0.8rem;
}

.site-header__mark {
	display: block;
	width: 46px;
	height: 34px;
	background: url(../images/logo-mark.png) center / contain no-repeat;
}

.site-header__navbar {
	height: var(--wf-nav-row-h);
	gap: 1.6rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 55%, transparent);
}

/* Navigation links: quiet small-caps, warm on interaction, marked when current. */
.site-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding-block: 0.3rem;
	transition: color 0.15s ease;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

.site-header .wp-block-navigation .current-menu-item > a {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--accent);
}

/* Compact the header CTA relative to in-content buttons. */
.site-header__cta .wp-block-button__link {
	padding-block: 0.45rem;
	padding-inline: 1.05rem;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 781px) {
	:root {
		--wf-brand-row-h: 54px;
		--wf-nav-row-h: 46px;
	}

	.site-header__mark {
		width: 38px;
		height: 28px;
	}

	.site-header .wp-block-site-title {
		font-size: 1.15rem;
	}
}

/* Anchor targets (Local Area section nav) must clear the pinned nav row. */
.site-main :where([id]) {
	scroll-margin-top: calc(var(--wf-nav-row-h) + 24px);
}

/* ---- Hero ------------------------------------------------------------ */
/* The hero sits over a photo + scrim, so its content must be light — the
 * theme's global dark heading colour would otherwise win. */
.kgs-hero__inner :where(h1, h2, h3, h4, h5, h6),
.kgs-hero__inner :where(p) {
	color: var(--wp--preset--color--base);
}

.kgs-hero__inner :where(h1, h2, h3, h4, h5, h6) {
	text-shadow: 0 1px 2px rgba(20, 24, 16, 0.28), 0 2px 30px rgba(20, 24, 16, 0.35);
}

/* ---- Main ------------------------------------------------------------ */
.site-main > .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	margin-bottom: 0.75rem;
	color: var(--wp--custom--color--footer-text);
}

.site-footer a {
	color: var(--wp--custom--color--footer-text);
	text-decoration-color: color-mix(in srgb, var(--wp--custom--color--footer-text) 40%, transparent);
	text-underline-offset: 0.15em;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer__rule {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--50);
	border-color: color-mix(in srgb, var(--wp--custom--color--footer-text) 22%, transparent);
}

.site-footer__copy {
	color: color-mix(in srgb, var(--wp--custom--color--footer-text) 75%, transparent);
	margin: 0;
}

/* ---- KGS blocks: on-brand tokens + consumer styling ----------------- */
:root {
	/* The contact-form block reads these tokens (with fallbacks) — set them
	 * to the theme palette so the form is on-brand. */
	--kgs-contact-form-button-bg: var(--wp--preset--color--accent);
	--kgs-contact-form-button-color: var(--wp--preset--color--base);
	--kgs-contact-form-border: rgba(32, 38, 28, 0.22);
	--kgs-focus: var(--wp--preset--color--accent);
}

/* Reviews: dress the block's own card element (it ships a faint default) so the
 * grid reads as proper cards. Style the card, not the outer item, to avoid a
 * card-in-card. */
.kgs-testimonials__card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--soft);
}

/* ---- FAQ / details --------------------------------------------------- */
.site-main .wp-block-details {
	color: var(--wp--preset--color--contrast);
}

.site-main .wp-block-details > summary {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.site-main .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* A quiet plus that turns to a minus — a clearer open/close affordance than
 * the default triangle. */
.site-main .wp-block-details > summary::after {
	content: "+";
	flex: none;
	align-self: center;
	width: 1.5em;
	height: 1.5em;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-radius: 50%;
	transition: transform 0.2s ease, background 0.2s ease;
}

.site-main .wp-block-details[open] > summary::after {
	content: "–";
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.site-main .wp-block-details[open] > summary {
	margin-bottom: 0.5em;
}

/* ---- Booking-plugin placeholder -------------------------------------- */
/* Wraps the [woodside_booking]/[woodside_availability] shortcodes until the
 * booking plugin is installed; then the panel just frames its output. */
.wf-embed-placeholder {
	border: 1.5px dashed color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent);
}

/* ---- KGS link-tiles: on-brand tokens + consumer styling --------------- */
:root {
	--kgs-link-tiles-border: var(--wp--preset--color--line);
	--kgs-link-tiles-radius: var(--wp--custom--radius--md);
	--kgs-link-tiles-shadow: var(--wp--custom--shadow--soft);
	--kgs-link-tiles-text: var(--wp--preset--color--contrast);
	--kgs-link-tiles-arrow: var(--wp--preset--color--secondary);
	--kgs-link-tiles-accent: var(--wp--preset--color--accent);
}

/* Directory tiles read best a touch bolder than body copy. */
.kgs-link-tiles__link {
	font-weight: 600;
	line-height: 1.35;
}

/* Keep clear air between a section heading and its tile grid. */
:where(h1, h2, h3) + .kgs-link-tiles {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ---- Content refinements -------------------------------------------- */
/* Give stand-alone images in flowing content a soft, consistent corner. */
.site-main .wp-block-image img {
	border-radius: var(--wp--custom--radius--lg);
}