/**
 * Cottage Theme front-end styles.
 *
 * Layout chrome only — header, footer, and shared page furniture. Section
 * styling lives with the blocks that own it, in the Cottage Blocks plugin.
 */

/* --------------------------------------------------------- Document basics */

html {
	/*
	 * iOS inflates body text when a phone is turned to landscape unless the
	 * adjustment is pinned, which silently breaks every line-length decision
	 * made below.
	 */
	-webkit-text-size-adjust: 100%;

	/* The nav is entirely in-page anchors, so they should glide, not jump. */
	scroll-behavior: smooth;

	/*
	 * Every anchor target has to clear the sticky header or it lands underneath
	 * it. site.js measures the real header and updates the variable, because the
	 * header wraps to two rows on narrow phones; the fallback covers the
	 * no-JavaScript case.
	 */
	scroll-padding-top: calc(var(--cottage-header-h, 4.5rem) + 0.75rem);
}

/*
 * Without this, mobile browsers hold every tap for ~300ms in case it turns out
 * to be a double-tap to zoom. Pinch zoom still works; only the delay goes.
 */
:where(a, button, summary, label, input, select, textarea, [role='button']) {
	touch-action: manipulation;
}

/* The default grey flash is a browser default, not a designed state. */
:where(a, button, summary, [role='button']) {
	-webkit-tap-highlight-color: rgba(47, 47, 47, 0.16);
}

/* ------------------------------------------------------------------- Header */

/*
 * The sticky positioning belongs on the template-part wrapper, not the header.
 *
 * A sticky element can only travel inside its containing block, and WordPress
 * wraps a template part in a div that is exactly as tall as its contents. With
 * `position: sticky` on the header itself, that box was 74px tall, so the
 * header hit the bottom of its own container immediately and scrolled away —
 * it looked sticky in the stylesheet and was never sticky on the page. On a
 * phone that meant losing the menu and the booking link the moment the guest
 * scrolled, with no way back short of flicking to the top.
 */
.cottage-header-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.cottage-header {
	/* Positioned so the backdrop pseudo-element below can anchor to it. */
	position: relative;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/*
 * The frosted backdrop lives on a pseudo-element rather than on the header.
 *
 * `backdrop-filter` makes an element a containing block for any `position:
 * fixed` descendant. With the filter on the header itself, the navigation's
 * overlay menu — which is `position: fixed; inset: 0` and expects the viewport
 * — resolved against the 73px-tall header instead, so opening the menu on a
 * phone produced a sliver of panel with the links overflowing out of sight.
 *
 * The pseudo-element has no descendants, so it can carry the filter safely.
 */
.cottage-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(245, 245, 245, 0.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

/*
 * site.js sets this once the page has scrolled, so the header only grows a
 * border when there is content behind it.
 */
.cottage-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 1px 24px -8px rgba(35, 35, 35, 0.20);
}

/*
 * The site title is the "go home" link and was a 22px-tall target. The header
 * already stands taller than 44px, so giving the link the full height costs no
 * layout and makes the most-tapped link on the page reachable.
 */
.cottage-header .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

/*
 * Nav links need the same 44px at tablet widths, where the menu is inline
 * rather than in the overlay and the rows were 34px tall.
 */
.cottage-header .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.cottage-header__actions {
	gap: 1.25rem;
}

.cottage-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	padding-block: 0.25rem;
	border-bottom: 1px solid transparent;
}

/*
 * A pointer can hit a 23px link; a thumb cannot. Inside the overlay menu every
 * row becomes a full 44px target with 8px of separation, which is the minimum
 * both platform guidelines ask for.
 */
.cottage-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
	padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
	padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
}

.cottage-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.5rem;
	font-size: 1.125rem;
}

/*
 * The nav block is set to align right, which is correct beside the logo but
 * wrong once it becomes a full-screen menu: a column of right-aligned links
 * leaves the thumb reaching across the screen and gives the eye no common edge
 * to scan down.
 */
.cottage-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.5rem;
	align-items: flex-start;
	justify-content: flex-start;
}

.cottage-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

/*
 * The open and close controls ship at 24px of icon; the hit area has to be more.
 *
 * `display` is deliberately not set here. Core toggles these buttons between
 * `flex` and `none` on its own 600px query, and setting `display` in this rule
 * pinned the hamburger visible at every width — which left tablets showing the
 * menu button and the full inline nav at the same time, in a 185px-tall header.
 */
.cottage-header .wp-block-navigation__responsive-container-open,
.cottage-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.cottage-header .wp-block-navigation a:hover,
.cottage-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--moss);
	border-bottom-color: currentColor;
}

.cottage-header__cta .wp-block-button__link {
	padding: 0.6rem 1.25rem;
	font-size: 0.9375rem;
}

/*
 * The header CTA is dropped on the smallest screens, where it would crowd the
 * logo and the menu button. The booking bar pinned to the bottom of the
 * viewport takes over from here — see "Mobile booking bar" below — so a guest
 * on a phone is never more than one thumb-reach from booking.
 */
@media (max-width: 782px) {
	.cottage-header__cta {
		display: none;
	}

	.cottage-header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.cottage-header > .wp-block-group {
		gap: 1rem;
	}
}

/*
 * Landscape on a notched phone puts the rounded corner and the camera cutout
 * over the leading edge of the header. Additive to the root padding, so nothing
 * moves on a device without insets.
 */
@supports (padding: max(0px)) {
	.cottage-header,
	.cottage-footer {
		padding-left: env(safe-area-inset-left, 0px);
		padding-right: env(safe-area-inset-right, 0px);
	}
}

/* --------------------------------------------------------------------- Main */

.cottage-main {
	/* Anchor the sticky footer without collapsing short pages. */
	flex: 1 0 auto;
}

.cottage-breadcrumbs {
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--stone);
}

.cottage-breadcrumbs a {
	color: var(--wp--preset--color--stone);
}

.cottage-attraction-page .wp-block-post-title {
	margin-top: 0.5rem;
	text-wrap: balance;
}

.cottage-attraction-page .wp-block-post-content {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.cottage-attraction-page__cta {
	text-align: center;
}

/* ------------------------------------------------------------------- Footer */

.cottage-footer a {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	border-bottom: 1px solid rgba(245, 245, 245, 0.28);
}

.cottage-footer a:hover,
.cottage-footer a:focus-visible {
	border-bottom-color: var(--wp--preset--color--paper);
}

.cottage-footer .wp-block-site-title a {
	border-bottom: 0;
}

.cottage-footer__tagline {
	max-width: 26rem;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	opacity: 0.78;
}

.cottage-footer__heading {
	margin-bottom: 1rem;
	opacity: 0.65;
}

.cottage-footer__contact {
	font-size: 0.9375rem;
	line-height: 1.7;
	opacity: 0.78;
}

/*
 * The footer link list is the densest cluster of tap targets on the site. Each
 * row gets a full 44px of height so the six links do not have to be aimed at.
 */
.cottage-footer__nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 0;
	opacity: 0.88;
}

.cottage-footer__nav a:hover {
	opacity: 1;
}

.cottage-footer__social {
	margin-top: 1.5rem;
}

/* Core ships the social icons at 36px; a thumb needs the extra padding. */
.cottage-footer__social .wp-block-social-link a {
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
}

.cottage-footer__rule {
	margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	opacity: 0.24;
}

.cottage-footer__legal {
	opacity: 0.7;
}

.cottage-footer__legal p {
	margin: 0;
}

/*
 * "Privacy · Terms · Sitemap" reads as one line but is three separate targets
 * sitting flush against each other. Inline-block plus vertical padding pulls
 * them apart without changing how the line looks.
 */
.cottage-footer__legal a {
	display: inline-block;
	min-height: 44px;
	padding-block: 0.75rem;
}

/* Same 44px for the "go home" link in the footer as in the header. */
.cottage-footer .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The footer sits on a dark ground, so outline colour has to change with it. */
.cottage-footer a:focus-visible,
.cottage-footer button:focus-visible {
	outline: 3px solid var(--wp--preset--color--sand);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------- Mobile booking bar */

/*
 * On a phone the header CTA is gone and the hero button has scrolled away long
 * before a guest has finished reading, which leaves the whole middle of the
 * page with no way to book. This pins the price and one button to the bottom of
 * the viewport — within thumb reach — for phones only.
 *
 * It is plain server-rendered markup: it works with JavaScript disabled, and
 * site.js only adds the refinement of hiding it while a booking section is
 * already on screen, so a guest never sees the same CTA twice.
 */
.cottage-book-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
	padding-left: max(1rem, env(safe-area-inset-left, 0px));
	padding-right: max(1rem, env(safe-area-inset-right, 0px));
	background: rgba(245, 245, 245, 0.94);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 -1px 24px -8px rgba(35, 35, 35, 0.26);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 767px) {
	.cottage-book-bar {
		display: flex;
	}

	/*
	 * A fixed bar hides whatever it sits on top of. The footer needs to be able
	 * to scroll clear of it, so the body reserves the height back.
	 */
	.cottage-has-book-bar {
		padding-bottom: 4.75rem;
	}
}

/*
 * `has-modal-open` is set by WordPress while the overlay menu is up;
 * `cottage-modal-open` is set by the booking form while its confirmation
 * dialog is up. In both cases a modal owns the screen, and a fixed "Book"
 * button sitting over it is a second call to action competing with the one the
 * guest is already looking at — worse still after a booking, where it invites
 * them to send the same request twice.
 */
.has-modal-open .cottage-book-bar,
.cottage-modal-open .cottage-book-bar {
	display: none;
}

/* Set by site.js once a booking section scrolls into view. */
.cottage-book-bar.is-hidden {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

.cottage-book-bar__info {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.3;
}

.cottage-book-bar__price {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.cottage-book-bar__meta {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
	/* One line only: the bar must never grow tall enough to eat the page. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cottage-book-bar__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--clay);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.cottage-book-bar__cta:hover,
.cottage-book-bar__cta:focus-visible {
	background: var(--wp--preset--color--moss);
	color: #fff;
}

/* --------------------------------------------------------------- Skip link */

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: 12px;
	box-shadow: 0 2px 4px rgba(35, 35, 35, 0.06), 0 24px 48px -16px rgba(35, 35, 35, 0.26);
	text-decoration: none;
}

/* ------------------------------------------------------------ Global polish */

img {
	max-width: 100%;
	height: auto;
}

/*
 * Long words and URLs must not force a horizontal scrollbar on a narrow phone.
 */
body {
	overflow-wrap: break-word;
}

::selection {
	background: var(--wp--preset--color--clay);
	color: #fff;
}

/* Give every focusable element a visible ring, not just links and buttons. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--lake);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.cottage-header,
	.cottage-book-bar {
		transition: none;
	}
}