/* ==========================================================
   REUSABLE SITE HEADER
========================================================== */

.site-header,
.site-header * {
	box-sizing: border-box;
}

.site-header {
	position: relative;
	z-index: 1000;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(
		--wp--preset--color--off-white,
		#f2f0ee
	);
	color: var(
		--wp--preset--color--dark-brown,
		#2c1711
	);
}

.site-header a {
	text-decoration: none;
}

.site-header > *,
.site-header__logo-row,
.site-header__main-row,
.site-header__inner,
.site-header__phone,
.site-header__navigation,
.site-header__cta,
.site-header .wp-block-shortcode {
	margin-block: 0;
}

/* ==========================================================
   LOGO ROW
========================================================== */

.site-header__logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 96px;
	margin: 0;
	padding: 12px var(--site-gutter, 24px);
	text-align: center;
}

.site-header__logo-row .wp-block-shortcode {
	width: 100%;
	margin: 0;
	text-align: center;
}

.site-header__logo-row h1 {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin: 0 auto;
	color: inherit;
	text-decoration: none;
}

.site-header__logo-image {
	display: block;
	width: 100%;
	max-width: min(640px, 80vw);
	max-height: 72px;
	margin: 0 auto;
	object-fit: contain;
}

.site-header__text-logo {
	display: inline-block;
	margin: 0;
	color: var(
		--wp--preset--color--dark-brown,
		#2c1711
	);
	font-family: var(
		--wp--preset--font-family--jedira,
		serif
	);
	font-size: clamp(20px, 2.4vw, 32px);
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

/* ==========================================================
   MAIN NAVIGATION ROW
========================================================== */

.site-header__main-row {
	width: 100%;
	margin: 0;
	border-top: 2px solid
		var(--wp--preset--color--coral, #f57260);
	border-bottom: 2px solid
		var(--wp--preset--color--coral, #f57260);
	background-color: var(
		--wp--preset--color--off-white,
		#f2f0ee
	);
}

.site-header__inner {
	display: grid !important;
	grid-template-columns:
		minmax(160px, 1fr)
		auto
		minmax(160px, 1fr);
	align-items: center;
	width: min(
		calc(100% - (var(--site-gutter, 24px) * 2)),
		var(--content-wide, 1440px)
	);
	min-height: 58px;
	margin-inline: auto !important;
	padding: 0;
	gap: clamp(20px, 3vw, 48px);
}

/* ==========================================================
   PHONE AND TOUR AREAS
========================================================== */

.site-header__phone,
.site-header__cta {
	display: flex !important;
	align-items: center;
	min-width: 0;
	margin: 0 !important;
}

.site-header__phone {
	justify-content: flex-start;
	justify-self: start;
}

.site-header__cta {
	justify-content: flex-end;
	justify-self: end;
}

.site-header__phone .wp-block-shortcode,
.site-header__cta .wp-block-shortcode {
	margin: 0;
}

.site-header__phone-link,
.site-header__tour-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(
		--wp--preset--color--coral,
		#f57260
	);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.45px;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.25s ease;
}

.site-header__phone-link {
	white-space: nowrap;
}

.site-header__tour-link {
	white-space: nowrap;
	text-transform: uppercase;
}

.site-header__phone-link:hover,
.site-header__phone-link:focus-visible,
.site-header__tour-link:hover,
.site-header__tour-link:focus-visible {
	color: var(
		--wp--preset--color--teal,
		#00929f
	);
}

/* Accessible keyboard focus */
.site-header__phone-link:focus-visible,
.site-header__tour-link:focus-visible,
.site-header__navigation a:focus-visible,
.site-header__navigation button:focus-visible {
	outline: 2px solid
		var(--wp--preset--color--teal, #00929f);
	outline-offset: 4px;
}

/* ==========================================================
   PHONE ICON
========================================================== */

.site-header__phone-link::before {
	display: block;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	content: "";
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.81a2 2 0 0 1-.45 2.11L8.09 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.81a2 2 0 0 1-.45 2.11L8.09 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* ==========================================================
   TOUR/CALENDAR ICON
========================================================== */

.site-header__tour-link::before {
	display: block;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	content: "";
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* If shortcode already outputs an SVG icon, prevent duplication */
.site-header__phone-link:has(.site-header__icon)::before,
.site-header__tour-link:has(.site-header__icon)::before {
	display: none;
}

.site-header__icon {
	display: block;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: currentColor;
}

.site-header__phone-link span,
.site-header__tour-link span {
	display: inline-block;
}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.site-header__navigation {
	justify-self: center;
	min-width: 0;
	margin: 0;
}

.site-header__navigation
.wp-block-navigation__container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: clamp(24px, 3vw, 48px);
}

.site-header__navigation
.wp-block-navigation-item {
	margin: 0;
}

.site-header__navigation
.wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 18px;
	color: var(
		--wp--preset--color--dark-brown,
		#2c1711
	);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.65px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.site-header__navigation
.wp-block-navigation-item__content::after {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	width: 0;
	height: 1px;
	margin-inline: auto;
	background-color: var(
		--wp--preset--color--teal,
		#f57260
	);
	content: "";
	transition: width 0.25s ease;
}

.site-header__navigation
.wp-block-navigation-item__content:hover {
	color: var(
		--wp--preset--color--teal,
		#00929f
	);
}

.site-header__navigation
.wp-block-navigation-item__content:hover::after,
.site-header__navigation
.current-menu-item
> .wp-block-navigation-item__content::after,
.site-header__navigation
.current-menu-ancestor
> .wp-block-navigation-item__content::after {
	width: 100%;
}

.site-header__navigation
.wp-block-navigation__responsive-container-open {
	color: var(
		--wp--preset--color--dark-brown,
		#2c1711
	);
}
.site-header__logo-link,
.site-header__logo-picture {
	display: block;
}

/* Guaranteed fixed header */
body.home header.site-header {
	position: fixed !important;
	top: 0 !important;
	right: 0;
	left: 0;
	width: 100%;
	z-index: 99999 !important;
}

/* Prevent hero from moving underneath the fixed header */
body.home {
	--header-height: 96px;
}

body.home main {
	padding-top: var(--header-height);
}

body.home.admin-bar header.site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.home {
		--header-height: 134px;
	}

	body.home.admin-bar header.site-header {
		top: 46px !important;
	}
}

@media screen and (max-width: 782px) {
	body.home.admin-bar header.site-header {
		top: 46px !important;
	}
}

/* Desktop logo size */
@media (max-width: 767px) {
	.site-header__logo-image {
		max-width: 430px;
	}
}
/* Desktop logo */
.site-header__desktop-logo {
	display: block;
}

.site-header__mobile-logo {
	display: none;
}


/* Mobile logo */
@media screen and (max-width: 767px) {
	/*
	 * Do not hide the complete branding area.
	 */
	.site-header .site-header__branding {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: auto;
		min-width: 120px;
		min-height: 45px;
	}

	.site-header .site-header__logo-link {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: relative;
		z-index: 20;
		line-height: 0;
	}

	.site-header .site-header__desktop-logo {
		display: none !important;
	}

	.site-header .site-header__mobile-logo {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.site-header .site-header__mobile-logo img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		max-width: 180px !important;
		max-height: 60px !important;
		height: auto !important;
		object-fit: contain;
	}
}
/* Mobile logo size */
@media (max-width: 767px) {
	.site-header__logo-link {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-header__logo-image {
		width: auto;
		max-width: 190px;
		max-height: 60px;
		object-fit: contain;
	}
		.site-header__branding,
	.site-header__logo-link,
	.site-header__logo-image {
		display: none;
	}
}
/* Desktop hamburger remains hidden */
@media (min-width: 1101px) {
	.site-header__navigation
	.wp-block-navigation__responsive-container-open {
		display: none;
	}
}

/* ==========================================================
   TABLET: 1100PX AND BELOW
========================================================== */

@media (max-width: 1100px) {
	.site-header__logo-row {
		min-height: 82px;
		padding: 11px var(--site-gutter, 24px);
	}

	.site-header__logo-image {
		max-width: min(380px, 72vw);
		max-height: 60px;
	}

	.site-header__text-logo {
		font-size: clamp(20px, 3.5vw, 28px);
	}

	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr);
		width: min(
			calc(100% - 40px),
			var(--content-wide, 1440px)
		);
		min-height: 58px;
		gap: 20px;
	}

	.site-header__phone {
		display: none !important;
	}

	.site-header__navigation {
		justify-self: start;
	}

	.site-header__cta {
		justify-self: end;
	}

	/* Force hamburger mode on tablet */
	.site-header__navigation
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		color: var(
			--wp--preset--color--dark-brown,
			#2c1711
		);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-open svg {
		width: 29px;
		height: 29px;
	}

	/* Open mobile/tablet menu */
	.site-header__navigation
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 999999;
		display: flex !important;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 90px 40px 40px;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: var(
			--wp--preset--color--off-white,
			#f2f0ee
		);
		color: var(
			--wp--preset--color--dark-brown,
			#2c1711
		);
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 22px;
		right: 30px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin: 0;
		padding: 0;
		color: var(
			--wp--preset--color--dark-brown,
			#2c1711
		);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-close svg {
		width: 30px;
		height: 30px;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-content {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		padding-top: 10px;
	}

	.site-header__navigation
	.wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: min(100%, 620px);
		margin: 0 auto;
		gap: 0;
	}

	.site-header__navigation
	.wp-block-navigation-item {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(44, 23, 17, 0.18);
	}

	.site-header__navigation
	.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 17px 2px;
		color: var(
			--wp--preset--color--dark-brown,
			#2c1711
		);
		font-size: 21px;
		line-height: 1.3;
		text-align: left;
		white-space: normal;
	}

	.site-header__navigation
	.wp-block-navigation-item__content::after {
		display: none;
	}

	.site-header__navigation
	.current-menu-item
	> .wp-block-navigation-item__content {
		color: var(
			--wp--preset--color--teal,
			#00929f
		);
	}
}

/* ==========================================================
   MOBILE: 600PX AND BELOW
========================================================== */

@media (max-width: 600px) {
	.site-header__logo-row {
		min-height: 70px;
		padding: 9px 20px;
	}

	.site-header__logo-row h1 {
		margin: 0;
		line-height: 1;
	}

	.site-header__logo-image {
		max-width: min(280px, 72vw);
		max-height: 50px;
	}

	.site-header__text-logo {
		font-size: clamp(18px, 6vw, 25px);
		letter-spacing: 2px;
	}

	.site-header__main-row {
		border-width: 1px;
	}

	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr);
		width: calc(100% - 32px);
		min-height: 54px;
		gap: 12px;
	}

	.site-header__navigation {
		justify-self: start;
	}

	.site-header__cta {
		justify-self: end;
		min-width: 0;
	}

	.site-header__tour-link {
		gap: 5px;
		max-width: 150px;
		font-size: 11px;
		letter-spacing: 0.3px;
		line-height: 1.2;
		text-align: right;
		white-space: nowrap;
	}

	.site-header__phone-link::before,
	.site-header__tour-link::before,
	.site-header__icon {
		flex-basis: 13px;
		width: 13px;
		height: 13px;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-open {
		width: 42px;
		height: 42px;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-open svg {
		width: 27px;
		height: 27px;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 80px 24px 32px;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container-close {
		top: 17px;
		right: 19px;
		width: 44px;
		height: 44px;
	}

	.site-header__navigation
	.wp-block-navigation__container {
		width: 100%;
	}

	.site-header__navigation
	.wp-block-navigation-item__content {
		padding: 15px 0;
		font-size: 19px;
	}
}

/* ==========================================================
   SMALL MOBILE: 380PX AND BELOW
========================================================== */

@media (max-width: 380px) {
	.site-header__logo-row {
		min-height: 66px;
		padding-inline: 14px;
	}

	.site-header__logo-image {
		max-width: min(220px, 70vw);
		max-height: 46px;
	}

	.site-header__inner {
		width: calc(100% - 24px);
		gap: 8px;
	}

	.site-header__tour-link {
		max-width: 116px;
		font-size: 10px;
		white-space: normal;
	}

	.site-header__tour-link span {
		display: block;
	}

	.site-header__navigation
	.wp-block-navigation__responsive-container.is-menu-open {
		padding-inline: 20px;
	}
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
	.site-header *,
	.site-header *::before,
	.site-header *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}
/* ==================================================
   MOBILE HEADER LOGO FIX
   ================================================== */
@media screen and (max-width: 767px) {

	/* Logo turquoise row */
	.site-header {
		position: static !important;
	}

	.site-header__main-row {
		position: sticky;
		top: 0;
		z-index: 9999;
		background-color: #f2f0ee;
	}
	.site-header .site-header__logo-row {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 78px !important;
		height: 78px !important;
		margin: 0 !important;
		padding: 10px 20px !important;
		background-color: #00929f;
		overflow: visible !important;
	}

	/* Gutenberg automatically adds this paragraph */
	.site-header .site-header__logo-row > p {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0 !important;
		text-align: center !important;
	}

	.site-header .site-header__logo-link {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		z-index: 10;
	}

	/* Hide desktop logo */
	.site-header .site-header__desktop-logo {
		display: none !important;
	}

	/* Show mobile logo */
	.site-header .site-header__mobile-logo {
		display: block !important;
		width: auto !important;
		height: auto !important;
		margin: 0 auto !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.site-header .site-header__mobile-logo img {
		display: block !important;
		width: auto !important;
		height: 55px !important;
		max-width: 190px !important;
		max-height: 55px !important;
		margin: 0 auto !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		object-fit: contain !important;

		/*
		 * Makes the mobile SVG white.
		 * This fixes a turquoise logo disappearing
		 * against the turquoise header background.
		 filter: brightness(0) invert(1) !important;
		 */
		
	}

	/* Hide the extra BR added by WordPress */
	.site-header .site-header__logo-link > br {
		display: none !important;
	}
}
/* =========================================
   Sticky header
   ========================================= */
.site-header {
	position: sticky !important;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background-color: #f2f0ee;
}

/* WordPress admin bar adjustment */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Keep the mobile menu above the sticky header */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	z-index: 10000;
}

/* Optional subtle shadow */
.site-header {
	box-shadow: 0 2px 12px rgba(44, 23, 17, 0.08);
}