/* ==========================================================================
   Base: derived tokens, resets and shared components (brand, chips, buttons).
   Colours/fonts/sizes come from theme.json presets – change them there.
   ========================================================================== */

:root {
	/* Alpha variants of palette colours (theme.json can't express these). */
	--cr-rule-gold: color-mix(in srgb, var(--wp--preset--color--gold) 48%, transparent);
	--cr-rule-gold-strong: color-mix(in srgb, var(--wp--preset--color--gold) 72%, transparent);
	--cr-tint-gold: color-mix(in srgb, var(--wp--preset--color--gold) 16%, transparent);
	--cr-rule: color-mix(in srgb, var(--wp--preset--color--stone) 52%, transparent);
	--cr-rule-soft: color-mix(in srgb, var(--wp--preset--color--stone) 40%, transparent);
	--cr-rule-on-dark: color-mix(in srgb, var(--wp--preset--color--cream) 12%, transparent);

	--cr-radius: var(--wp--custom--radius, 4px);
	--cr-max: var(--wp--style--global--wide-size, 1180px);
	--cr-font-display: var(--wp--preset--font-family--display);
	--cr-font-serif: var(--wp--preset--font-family--serif);
	--cr-font-sans: var(--wp--preset--font-family--sans);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Header, main and footer sit flush – no global block gap between them. */
.wp-site-blocks > * {
	margin-block: 0;
}

.cr-icon {
	width: 15px;
	height: 15px;
	display: block;
	flex: 0 0 auto;
	fill: currentColor;
}

/* --- Brand (logo + wordmark), used in header and footer ------------------ */

.cr-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.cr-logo {
	width: 54px;
	height: 54px;
	object-fit: contain;
	border-radius: var(--cr-radius);
	background: #fff;
	border: 1px solid var(--wp--preset--color--stone);
	padding: 4px;
	flex: 0 0 auto;
}

.cr-wordmark {
	display: block;
	color: var(--wp--preset--color--cream);
	font-family: var(--cr-font-serif);
	font-size: 18px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0.2px;
}

.cr-location {
	display: block;
	margin-top: 3px;
	color: var(--wp--preset--color--gold);
	font-family: var(--cr-font-sans);
	font-size: 12px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

/* --- Chips: outlined gold links on dark backgrounds (nav, socials) -------- */

.cr-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	border: 1px solid var(--cr-rule-gold-strong);
	border-radius: var(--cr-radius);
	padding: 9px 12px;
	font-family: var(--cr-font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.1;
	transition: background-color 0.15s;
}

.cr-chip:hover,
.cr-chip:focus-visible {
	background: var(--cr-tint-gold);
	color: var(--wp--preset--color--cream);
}

/* Light variant, on cream/paper backgrounds. */
.cr-chip--light {
	gap: 8px;
	padding: 9px 11px;
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--cream);
}

.cr-chip--light:hover,
.cr-chip--light:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* --- Buttons -------------------------------------------------------------- */

.cr-button,
.cr-widget-trigger {
	display: inline-block;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--cr-radius);
	padding: 13px 17px;
	font-family: var(--cr-font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.1px;
}

.cr-button:hover,
.cr-button:focus-visible,
.cr-widget-trigger:hover,
.cr-widget-trigger:focus-visible {
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--charcoal);
}

.cr-button--outline {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}

.cr-button--outline:hover,
.cr-button--outline:focus-visible {
	background: var(--cr-tint-gold);
	color: var(--wp--preset--color--ink);
}

/* --- Favourite Table widget ----------------------------------------------
   The vendor overlay is a fixed 700×580 box; make it fit phones. */

.ft_bookingwidget_content {
	width: min(700px, calc(100vw - 16px)) !important;
	height: min(580px, calc(100dvh - 32px)) !important;
}

.ft_bookingwidget_content iframe {
	width: 100%;
	height: calc(100% - 30px);
}

#ft_bookingwidget_close {
	width: min(699px, calc(100vw - 17px)) !important;
}

/* The widget container only hosts the fixed overlay – keep it out of the layout. */
.cr-widget-shell {
	position: absolute;
	margin: 0;
}

/* Small uppercase label (facts bar, footer column titles). */
.cr-label {
	display: block;
	color: var(--wp--preset--color--gold);
	font-family: var(--cr-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

@media (max-width: 560px) {
	.cr-logo {
		width: 48px;
		height: 48px;
	}

	.cr-wordmark {
		font-size: 17px;
	}

	.cr-location {
		font-size: 11px;
	}
}