/*
 * Page bundle: the furniture every inner page shares.
 *
 * The source builds each route from the same handful of shapes — an intro
 * block, a white card, a dark panel, a dashed note, a hairline rule — so they
 * live here once and the per-page bundles only add what is genuinely unique.
 *
 * Sizes are fixed steps, not clamps: the source is a Tailwind build whose
 * breakpoints are md (768) and lg (1024), and fluid interpolation between
 * them visibly shrinks mobile typography (starter finding, Phase 1).
 */

/* --- The page under a fixed header -------------------------------------- */

/* Source: every route opens with pt-32. */
.page-top {
	padding-top: 8rem;
}

/*
 * On a phone that 8rem is not the clearance — it is the clearance twice over.
 *
 * `.page-top` opens onto a nested `.section` that adds its own `padding-block`
 * on top, so the two stack: 128px + 96px = 224px before the first eyebrow, on a
 * viewport where the fixed header is only 100px tall. Measured on production at
 * 360, 390 and 430: **124px of pure empty space** under the header on every
 * inner page — a quarter of an 844px phone screen spent on nothing before the
 * visitor reaches a word. It is invisible on a desktop, where 224px is simply
 * the design's air.
 *
 * The fix is to stop the stacking rather than to shave both numbers: the whole
 * clearance moves onto `.page-top`, stated against the header's own published
 * height, and the first section's top padding goes to zero. That also makes
 * every inner page agree — `/sobe/` opens with `.section--flush` (4rem rather
 * than 6rem) and so used to sit 32px higher than its siblings for no reason a
 * visitor could see.
 *
 * Zeroing that padding is safe here because no inner page's first section
 * carries a background: they are all a plain `.section`, so there is no
 * coloured band whose top edge would end up flush against the text.
 *
 * This sits deliberately *before* `.content-area, .page-content` further down.
 * `page.php` and `404.php` carry both classes, and those screens have no nested
 * section to double up with — they need the full `+ 4rem` that rule gives them,
 * and it still wins on source order.
 */
@media (max-width: 767px) {
	.page-top {
		padding-top: calc(var(--ps-header-height) + 3rem);
	}

	.page-top > .section:first-of-type {
		padding-top: 0;
	}
}

/*
 * The inner pages differ from the home page here, and it matters: home puts
 * its gutter on the section (px-6) and caps the inner column at max-w-7xl, so
 * the column is a full 1280px. Every route below puts BOTH on one element
 * ("px-6 py-20 max-w-7xl mx-auto"), so the column is 1232px and its edge sits
 * 104px from the viewport at 1440. Matching that is what keeps section edges
 * lined up with the source.
 */
.page-top .section {
	padding-inline: 0;
}

.page-top .shell {
	padding-inline: 1.5rem;
}

/* Contact is the one route the source widens to 1400px. */
.shell--contact {
	max-width: 1400px;
}

.shell--narrow {
	max-width: 48rem;
	padding-inline: 1.5rem;
}

.shell--medium {
	max-width: 64rem;
	padding-inline: 1.5rem;
}

.section--flush {
	padding-block: 4rem;
}

.section--tight {
	padding-block: 3rem;
}

.section--soft {
	background: var(--wp--preset--color--brand-cream-soft);
	border-block: 1px solid rgba(196, 163, 90, 0.1);
}

.section--warm {
	background: rgba(250, 246, 239, 0.5);
}

.section--darker {
	background: var(--wp--preset--color--brand-wood-deep);
	color: var(--wp--preset--color--brand-cream);
}

/* --- Decorative gold light leaks ---------------------------------------- */

.glow--head {
	top: 0;
	left: 50%;
	width: 18rem;
	height: 18rem;
	transform: translate(-50%, -40%);
	filter: blur(80px);
}

.glow--center {
	top: 50%;
	left: 50%;
	width: 24rem;
	height: 24rem;
	transform: translate(-50%, -50%);
	filter: blur(120px);
}

.glow--left {
	top: 50%;
	left: 2.5rem;
	width: 18rem;
	height: 18rem;
	transform: translateY(-50%);
	filter: blur(100px);
}

/* --- Intro block -------------------------------------------------------- */

.page-intro {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 48rem;
}

.page-intro--center {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

.page-intro .rule {
	flex: none;
}

.page-intro--center .rule {
	margin-inline: auto;
}

.page-title {
	display: flex;
	flex-direction: column;
	/* text-4xl md:text-6xl */
	font-size: 2.25rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.page-title__line.is-accent {
	font-style: italic;
	color: var(--wp--preset--color--brand-gold);
}

.page-title--tight {
	line-height: 1.1;
}

/* Contact opens at display scale: text-6xl md:text-[90px], leading-[0.85]. */
.page-title--display {
	font-size: 3.75rem;
	line-height: 0.85;
	letter-spacing: -0.04em;
	font-style: italic;
	text-align: center;
}

.page-lead {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--brand-stone);
	max-width: 40rem;
}

.page-intro--center .page-lead,
.page-title--display + .rule + .page-lead {
	margin-inline: auto;
}

.page-lead--wood {
	color: rgba(26, 42, 30, 0.8);
}

@media (min-width: 768px) {
	.page-title {
		font-size: 3.75rem;
	}

	.page-title--display {
		font-size: 5.625rem;
	}

	.page-lead {
		font-size: 1.25rem;
	}
}

/* --- Section headings inside a page ------------------------------------- */

.section-heading {
	display: flex;
	flex-direction: column;
	/* text-3xl md:text-4xl */
	font-size: 1.875rem;
	line-height: 1.2;
}

.section-heading .is-accent {
	font-style: italic;
	color: var(--wp--preset--color--brand-gold);
}

.section-heading--xl {
	font-size: 2.25rem;
}

.section-heading.is-accent-plain {
	font-style: italic;
}

.section-index {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.875rem;
	font-style: italic;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--brand-gold);
}

.section-body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--brand-stone);
}

.section-body.is-quote {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
}

.section-body--wide {
	max-width: 42rem;
	font-size: 1.0625rem;
}

.section-body--center {
	margin-inline: auto;
	max-width: 36rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
}

.rule--center {
	margin-inline: auto;
}

.rule--short {
	width: 3rem;
}

@media (min-width: 768px) {
	.section-heading {
		font-size: 2.25rem;
	}

	.section-heading--xl {
		font-size: 3.75rem;
	}
}

/* --- Cards -------------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 2rem;
	border: 1px solid rgba(196, 163, 90, 0.15);
	border-radius: 2rem;
	background: #fff;
	box-shadow: var(--luxury-shadow);
}

.card--cream {
	background: var(--wp--preset--color--brand-cream);
	border-color: rgba(196, 163, 90, 0.25);
}

.card--dashed {
	border-style: dashed;
	border-color: var(--wp--preset--color--brand-gold);
	border-radius: 2.5rem;
	align-items: center;
	text-align: center;
}

.card__eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-gold);
}

.card__title {
	font-size: 1.25rem;
	line-height: 1.25;
}

.card__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--brand-stone);
}

.card .btn {
	align-self: flex-start;
}

.card--dashed .btn {
	align-self: center;
}

@media (min-width: 768px) {
	.card {
		padding: 2.5rem;
	}

	.card__title {
		font-size: 1.5rem;
	}
}

/* --- Dark panel --------------------------------------------------------- */

.panel {
	position: relative;
	overflow: hidden;
	padding: 3rem 1.75rem;
	border-radius: 2.5rem;
}

.panel--dark {
	border: 1px solid rgba(196, 163, 90, 0.2);
	background: var(--wp--preset--color--brand-wood);
	color: var(--wp--preset--color--brand-cream);
	box-shadow: var(--luxury-shadow);
}

.panel > * {
	position: relative;
	z-index: 1;
}

.panel__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.panel__body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.panel__title {
	display: flex;
	flex-direction: column;
	font-size: 1.875rem;
	line-height: 1.2;
}

.panel__title .is-accent {
	font-style: italic;
	color: var(--wp--preset--color--brand-gold);
}

.panel__lead {
	max-width: 36rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(245, 240, 232, 0.8);
}

.panel__note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: rgba(245, 240, 232, 0.6);
	max-width: 40rem;
}

.panel__note-icon svg,
.note__icon svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.25em;
	color: var(--wp--preset--color--brand-gold);
}

.panel__foot {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(196, 163, 90, 0.15);
}

.panel .eyebrow {
	color: var(--wp--preset--color--brand-gold);
}

@media (min-width: 768px) {
	.panel {
		padding: 4rem 3.5rem;
		border-radius: 3.75rem;
	}

	.panel__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.panel__grid {
		grid-template-columns: 7fr 5fr;
		gap: 3rem;
	}
}

/* --- Callout (bordered box inside a dark panel) ------------------------- */

.callout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem;
	text-align: center;
	border: 1px dashed rgba(196, 163, 90, 0.4);
	border-radius: 1.5rem;
	background: rgba(15, 26, 19, 0.5);
}

.callout__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 300;
	color: var(--wp--preset--color--brand-gold-light);
}

.callout__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: rgba(245, 240, 232, 0.5);
}

/* --- Note --------------------------------------------------------------- */

.note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 3rem;
	max-width: 48rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--brand-stone);
}

.note--boxed {
	margin-inline: auto;
	padding: 1.25rem 1.5rem;
	max-width: 36rem;
	border: 1px dashed rgba(196, 163, 90, 0.4);
	border-radius: 1rem;
	background: rgba(250, 246, 239, 0.7);
	text-align: left;
}

.note__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* --- Opening hours card ------------------------------------------------- */

.hours-card {
	padding: 2rem;
	border: 1px solid rgba(196, 163, 90, 0.15);
	border-radius: 2.5rem;
	background: #fff;
	box-shadow: var(--luxury-shadow);
}

.hours-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.hours-card__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(196, 163, 90, 0.25);
	border-radius: 999px;
	background: rgba(196, 163, 90, 0.1);
	color: var(--wp--preset--color--brand-gold);
}

.hours-card__mark svg {
	width: 1.25rem;
	height: 1.25rem;
}

.hours-card__title {
	font-size: 1.25rem;
	line-height: 1.2;
}

/* The footer renderer is light-on-dark; this variant repaints it for paper. */
.hours--full .hours__row {
	padding-bottom: 0.75rem;
	border-bottom-color: rgba(196, 163, 90, 0.1);
}

.hours--full .hours__days {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 1;
	color: var(--wp--preset--color--brand-wood);
}

.hours--full .hours__value {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wp--preset--color--brand-wood);
}

.hours--full .hours__value.is-closed {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand-gold);
}

.hours--full .hours__note {
	font-size: 0.6875rem;
	opacity: 1;
	color: rgba(90, 90, 90, 0.7);
}

.hours-card__notes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2rem;
}

.hours-card__notes p {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--wp--preset--color--brand-stone);
}

.hours-card__note-icon svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.2em;
	color: var(--wp--preset--color--brand-gold);
}

@media (min-width: 768px) {
	.hours-card {
		padding: 3rem;
		border-radius: 2.5rem;
	}

	.hours-card__title {
		font-size: 1.5rem;
	}
}

/* --- Tick lists --------------------------------------------------------- */

.tick-list--compact li,
.tick-list--light li {
	align-items: flex-start;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.7;
	text-transform: none;
	color: var(--wp--preset--color--brand-stone);
}

.tick-list--compact {
	gap: 0.75rem;
}

.tick-list--light li {
	font-size: 0.875rem;
	color: rgba(245, 240, 232, 0.7);
}

.tick-list__icon svg {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.3em;
	color: var(--wp--preset--color--brand-gold);
}

.tick-list--light .tick-list__icon svg {
	width: 1rem;
	height: 1rem;
}

/* --- Buttons, links, chips ---------------------------------------------- */

.btn__icon svg {
	width: 1rem;
	height: 1rem;
}

.btn--wood .btn__icon,
.btn--gold .btn__icon {
	display: inline-flex;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 3rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(15, 26, 19, 0.6);
	transition: color 0.3s;
}

.back-link:hover {
	color: var(--wp--preset--color--brand-gold);
}

.back-link__icon svg {
	width: 1rem;
	height: 1rem;
	transition: transform 0.3s;
}

.back-link:hover .back-link__icon svg {
	transform: translateX(-0.25rem);
}

.eyebrow--wide {
	letter-spacing: 0.6em;
	font-size: 0.5625rem;
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	list-style: none;
	padding: 0;
}

.chip {
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(196, 163, 90, 0.2);
	border-radius: 999px;
	background: rgba(45, 74, 47, 0.3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-gold);
}

.social-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	color: rgba(245, 240, 232, 0.7);
	transition: color 0.3s, border-color 0.3s;
}

.social-tile svg {
	width: 1.25rem;
	height: 1.25rem;
}

.social-tile:hover {
	color: var(--wp--preset--color--brand-gold);
	border-color: var(--wp--preset--color--brand-gold);
}

/* --- Editor prose inside a page or room --------------------------------- */

.entry__content > * + * {
	margin-top: 1.25rem;
}

.entry__content p {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	line-height: 1.8;
	color: rgba(90, 90, 90, 0.85);
}

.entry__content a {
	color: var(--wp--preset--color--brand-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The source keeps the FAQ column at max-w-4xl, narrower than the grid above. */
.shell--narrow-wide {
	max-width: 56rem;
	padding-inline: 1.5rem;
}

/*
 * Fallback screens (a plain page, a post, search, 404, and the Woo wrapper).
 * They are not part of the bespoke design, but they must still clear the fixed
 * header and read in the site's voice rather than the browser's.
 *
 * Clearing it is their own job, not .page-top's, and that is the part worth
 * writing down. On a designed route .page-top's 8rem is *not* the clearance: it
 * opens onto a nested .section that adds its own padding on top, and that is
 * where the ~120px of air under the header actually comes from. These screens
 * put the heading straight into .page-top with no section around it, so 8rem
 * alone would leave nine pixels — and the Woo wrapper has no .page-top at all.
 * Naming the header's own height and opening 4rem below it is the only version
 * that holds for every one of them.
 *
 * This deliberately lands after .page-top so it wins on the elements that carry
 * both classes. Nothing else may set padding-top here; a padding-block shorthand
 * on this group is what silently cropped the legal pages' H1 behind the header.
 */
.content-area,
.page-content {
	padding-top: calc(var(--ps-header-height) + 4rem);
	padding-bottom: 6rem;
}

.content-area .entry__title,
.page-content .section-title,
.archive-header__title {
	margin-bottom: 1.5rem;
	font-size: 2.25rem;
	line-height: 1.15;
}

.entry--teaser + .entry--teaser {
	margin-top: 3rem;
}