/* Always sticky - never switches position type, so there's no handoff for the
   sticky behaviour to break at. margin-block-start:0 overrides WP core's root
   block-gap rule, which otherwise adds 24px above every top-level template-part
   block including this first one (the matching fix for <main>, the next block,
   lives in style.css). Background lives here too, shared by pre-header + nav row. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	margin-block-start: 0;
	background-color: var(--wp--preset--color--charcoal);
	transition: background-color 300ms;
}

/* Side gutters. The header's rows are unpadded full-width groups, so on narrow screens the
   status bar text, logo and hamburger sat right against the screen edges. Matches the
   dropdown list's own 1.25rem padding so the menu text lines up with the logo. */
.pre-header,
.site-nav-row {
	padding-inline: 1.25rem;
}
@media (min-width: 48rem) {
	.pre-header,
	.site-nav-row {
		padding-inline: 2rem;
	}
}

/* Pre-header: opening hours status bar */
.pre-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 0.5rem;
	transition: border-color 300ms;
}
.pre-header,
.pre-header a {
	color: var(--wp--preset--color--primary);
	font-size: 0.75rem;
	text-decoration:none;
	transition: all 0.1s ease-in-out;
}

.pre-header {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	text-decoration:none;
}
.pre-header p {
		color: rgba(255, 255, 255, 0.7);

}
/* Status line while special hours apply today (bank holiday, closure…) - draws the eye. */
.pre-header .opening-status--special {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.pre-header a:hover {
	color: var(--wp--preset--color--gold-light);
	text-decoration: underline;
}


/* Nav row: logo + navigation */
.site-nav-row {
	transition: padding 300ms;
	padding-block: 1rem;
}
@media (min-width: 48rem) {
	.site-nav-row {
		padding-block: 1.25rem;
	}
}

.site-header .site-logo img {
	height: 40px;
	width: auto;
	transition: height 300ms, filter 300ms;
	filter: drop-shadow(0 1px 0 #cca738) drop-shadow(0 -1px 0 #cca738) drop-shadow(1px 0 0 #cca738)
		drop-shadow(-1px 0 0 #cca738);
}
@media (min-width: 48rem) {
	.site-header .site-logo img {
		height: 48px;
	}
}

/* Transparent, taller state - homepage only, before scrolling. Still position:sticky
   throughout; only background/padding/logo change. The negative margin pulls <main>
   (hero) up underneath it - height is measured once in header.js since it varies by
   breakpoint. */
body.home:not(.is-scrolled) .site-header {
	background-color: transparent;
	margin-bottom: calc(-1 * var(--header-overlay-height, 0px));
}
body.home:not(.is-scrolled) .pre-header {
	border-bottom-color: transparent;
}
body.home:not(.is-scrolled) .site-nav-row {
	padding-block: 1.5rem;
}
@media (min-width: 48rem) {
	body.home:not(.is-scrolled) .site-nav-row {
		padding-block: 1rem;
	}
}
body.home:not(.is-scrolled) .site-header .site-logo img {
	height: 56px;
	filter: none;
}
@media (min-width: 48rem) {
	body.home:not(.is-scrolled) .site-header .site-logo img {
		height: 80px;
	}
}

/* Navigation: classic menu (Appearance > Menus / wp_nav_menu()), replacing the old
   Navigation block - see inc/primary-nav.php for why. */
.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.primary-nav__list a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
}
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

/* Submenus: a parent whose own link is a "#" placeholder isn't meant to be clicked
   through - it toggles its children open/closed instead (see header.js, which only
   intercepts links that are literally "#"; a parent with a real URL still navigates
   normally on click). */
.primary-nav__list li {
	position: relative;
}
.primary-nav__list .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.primary-nav__list .menu-item-has-children > a::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-top: -0.3em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 200ms ease, margin-top 200ms ease;
}
.primary-nav__list .menu-item-has-children.is-open > a {
	color: var(--wp--preset--color--primary);
}
.primary-nav__list .menu-item-has-children.is-open > a::after {
	margin-top: 0.15em;
	transform: rotate(-135deg);
}

.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	margin: 0.5rem 0 0;
	padding: 0.4rem 0;
	min-width: 180px;
	list-style: none;
	background-color: var(--wp--preset--color--charcoal);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.menu-item-has-children.is-open > .sub-menu {
	display: block;
}
.sub-menu a {
	display: block;
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.sub-menu {
		position: static;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	/* Children: indented, a line under each one except the last. */
	.sub-menu a {
		padding-left: 1rem;
	}
}

/* Mobile hamburger toggle - hidden on desktop, only shown/used below the breakpoint
   where the nav list itself collapses into a dropdown (see header.js for the toggle
   behaviour). */
.mobile-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
.mobile-nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #fff;
	border-radius: 1px;
	transition: transform 200ms ease, opacity 200ms ease;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 599px) {
	.mobile-nav-toggle {
		display: flex;
	}
	.primary-nav__list {
		display: none;
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		max-height: 80vh;
		overflow-y: auto;
		padding: 1.25rem;
		background-color: var(--wp--preset--color--charcoal);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	.primary-nav__list.is-open {
		display: flex;
	}
	.primary-nav__list li {
		width: 100%;
	}
	.primary-nav__list a {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}
	.primary-nav__list li:last-child a {
		border-bottom: none;
	}
	/* A parent link is inline-flex on desktop (text + chevron), so its underline only ran as
	   wide as the text - a short stub. Full width here, like every other row. */
	.primary-nav__list .menu-item-has-children > a {
		display: flex;
	}
	/* Indent the children (they used to have a left border for this) - written with the
	   list class so it beats ".primary-nav__list a" above. */
	.primary-nav__list .sub-menu a {
		padding-left: 1rem;
	}

	/* Homepage: the header is transparent over the hero until you scroll. Opening the menu
	   fades in the same dark background a normal page has, so the links are readable. The
	   base rule already transitions background-color. */
	body.home.mobile-nav-open:not(.is-scrolled) .site-header {
		background-color: var(--wp--preset--color--charcoal);
	}
	body.home.mobile-nav-open:not(.is-scrolled) .pre-header {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
}