/* Carlo Tours — Site Frame.
   Sticky header bar, navigation, and the mobile dropdown panel. */

/* ---------------------------------------------------------------
   Anchor offset.
   The header is sticky, so a jump to #section would otherwise land
   the section's top edge underneath it. scroll-padding-top on the
   scroll container fixes both native hash jumps and scrollIntoView().
   The admin bar exists only for logged-in users, hence the :has()
   variants (they replace core's own 32px / 46px).
   --------------------------------------------------------------- */
html {
	scroll-padding-top: var(--wp--custom--header-height);
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--wp--custom--header-height) + 32px);
}

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--wp--custom--header-height) + 46px);
	}
}

/* ---------------------------------------------------------------
   Sticky header.
   The sticky element has to be the template-part WRAPPER, not the bar
   inside it. A sticky box can only travel within its parent's box, and
   core renders that wrapper exactly one header tall, so making
   .carlo-header itself sticky lets it scroll away after ~77px.
   --------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Above 782px the admin bar is fixed, so sit below it. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	/* Below 782px the admin bar scrolls away with the page. */
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* ---------------------------------------------------------------
   Header bar
   --------------------------------------------------------------- */
.carlo-header {
	background-color: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
}

.carlo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--header-height);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	padding-block: 0;
}

/* Brand wordmark */
.carlo-header__brand .wp-block-site-title {
	margin: 0;
}

.carlo-header__brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.3s var(--wp--custom--ease);
}

.carlo-header__brand .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

.carlo-header__right {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------------
   Navigation — desktop
   --------------------------------------------------------------- */
.carlo-nav .wp-block-navigation__container {
	gap: clamp(1.25rem, 2.4vw, 2.25rem);
	align-items: center;
}

.carlo-header .carlo-nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	/* keep two-word labels such as "Day Trips" on one line */
	white-space: nowrap;
	transition: color 0.3s var(--wp--custom--ease);
}

.carlo-header .carlo-nav a:hover {
	color: var(--wp--preset--color--accent);
}

/* The CTA menu item exists only for the mobile panel. */
.carlo-header .carlo-nav__cta {
	display: none;
}

/* Bar CTA (core/button) */
.carlo-header .carlo-header__cta {
	margin: 0;
}

/* ---------------------------------------------------------------
   Tablet — compact the bar
   --------------------------------------------------------------- */
@media (max-width: 782px) {
	.carlo-header .carlo-header__cta .wp-block-button__link {
		padding: 0.8125rem 1.25rem;
		font-size: var(--wp--preset--font-size--xs);
	}
}

/* ---------------------------------------------------------------
   Mobile — dropdown panel under the sticky bar
   (core collapses the nav at 599px and below)
   --------------------------------------------------------------- */
@media (max-width: 599px) {

	/* The bar CTA gives way to the CTA item inside the panel. */
	.carlo-header .carlo-header__cta {
		display: none;
	}

	/* Core has three positioned wrappers that would hijack the anchoring. */
	.carlo-nav.wp-block-navigation,
	.carlo-nav .wp-block-navigation__responsive-dialog,
	.carlo-nav .wp-block-navigation__responsive-close {
		position: static;
	}

	.carlo-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 100% 0 auto 0;
		display: block;
		/* overflow must stay visible: the close X sits above the panel edge */
		overflow: visible;
		padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter) var(--wp--preset--spacing--50);
		background-color: var(--wp--preset--color--base);
		border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
		animation: carlo-panel-in 0.28s var(--wp--custom--ease) both;
	}

	@keyframes carlo-panel-in {
		from {
			opacity: 0;
			transform: translateY(-0.5rem);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.carlo-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		max-height: calc(100vh - var(--wp--custom--header-height) - 4rem);
		overflow-y: auto;
	}

	.carlo-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.carlo-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--line);
	}

	.carlo-header .carlo-nav .is-menu-open .wp-block-navigation-item a {
		display: block;
		/* 44px tap target */
		padding: 0.875rem 0;
		font-size: var(--wp--preset--font-size--md);
	}

	/* CTA pill inside the panel */
	.carlo-header .carlo-nav .is-menu-open .carlo-nav__cta {
		display: block;
		border-bottom: 0;
		margin-top: var(--wp--preset--spacing--30);
	}

	.carlo-header .carlo-nav .is-menu-open .carlo-nav__cta a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 1rem 1.5rem;
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		border: var(--wp--custom--rule) solid var(--wp--preset--color--accent);
		border-radius: var(--wp--custom--radius);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 500;
	}

	/* Hide the hamburger while the panel is open; the X takes its place. */
	.carlo-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	.carlo-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
		position: absolute;
		right: var(--wp--custom--gutter);
		top: calc(var(--wp--custom--header-height) / -2);
		transform: translateY(-50%);
		padding: 10px;
		margin: -10px;
		color: var(--wp--preset--color--contrast);
	}
}

/* ---------------------------------------------------------------
   Footer.
   Near-black, so the page closes on the same note the reviews band
   opened. The background and text colour are block attributes (preset
   slugs) rather than CSS, so the owner still gets real colour controls
   in the Site Editor -- everything below is layout and link styling.
   --------------------------------------------------------------- */
.carlo-footer {
	margin-top: 0;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--contrast);
}

.carlo-footer__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

/* --- The three columns --- */
.carlo-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
}

.carlo-footer .wp-block-site-title {
	margin: 0;
}

.carlo-footer .wp-block-site-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.carlo-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent-soft);
}

.carlo-footer__tagline {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 32ch;
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-body);
	color: var(--wp--preset--color--muted);
}

.carlo-footer__label {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking-wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* The footer reuses the single site menu, stacked and always expanded. */
.carlo-footer .carlo-footer__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.625rem;
}

.carlo-footer .carlo-footer__nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.3s var(--wp--custom--ease);
}

.carlo-footer .carlo-footer__nav a:hover {
	color: var(--wp--preset--color--accent-soft);
}

.carlo-footer__line {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--base);
}

.carlo-footer__line:last-child {
	margin-bottom: 0;
}

.carlo-footer__line a {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--wp--custom--rule) solid var(--wp--preset--color--muted);
}

.carlo-footer__line a:hover {
	color: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--accent-soft);
}

/* --- Bottom rule --- */
.carlo-footer__base {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--muted);
}

.carlo-footer__fineprint {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Keyboard focus has to stay visible against near-black. */
.carlo-footer :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (min-width: 700px) {
	.carlo-footer__cols {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 5vw, 4rem);
	}
}