/* Keep theme-hidden phone item hidden on non-branch pages. */
#block-eggstatic-reservation li.phone-item-hidden-by-theme,
#block-eggstatic-reservation-2 li.phone-item-hidden-by-theme {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body.branchdetails {
	overflow-x: hidden;
}

/* Fix menu overlay flash on page load */
#menuOverlay:not(.active) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#menuOverlay > .close-menu-btn:not(.active-btn) {
	/* Hide the rogue first close button visually to avoid duplication */
	display: none !important;
}

header {
	--branch-header-control-gap: 12px;
	--branch-header-control-size: 20px;
	--branch-header-phone-icon-size: 15px;
	--branch-header-reservation-icon-size: 14px;
	--eggstatic-header-control-color: #F5EFE4;
	--eggstatic-header-logo-filter: brightness(0) saturate(100%) invert(94%) sepia(20%) saturate(160%) hue-rotate(330deg) brightness(102%) contrast(91%);
}

/* Dark header controls on branch/careers/error pages only. */
:is(body.branchespage, body.branchdetails, body.careerpage, body.page-node-type-branch, body.path-403, body.path-404, body.path-system-403, body.path-system-404) header,
.system-error-page header {
	--eggstatic-header-control-color: #221E1F;
	--eggstatic-header-logo-filter: brightness(0) saturate(100%) invert(8%) sepia(10%) saturate(1013%) hue-rotate(314deg) brightness(96%) contrast(87%);
}

/* Stable branch header layout: left controls, centered logo, right controls. */
header .no-padding .no-margin.myRow {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding-inline: clamp(12px, 3vw, 28px) !important;
	box-sizing: border-box !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
	align-items: center !important;
	column-gap: 10px !important;
}

header .header_left {
	min-width: 0 !important;
	width: auto !important;
	justify-self: start !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--branch-header-control-gap) !important;
	color: var(--eggstatic-header-control-color) !important;
	z-index: 2;
}

header .site_logo {
	min-width: 0 !important;
	width: auto !important;
	justify-self: center !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	pointer-events: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 1;
}

header .site_logo #block-eggstatic-sitebranding,
header .site_logo #block-eggstatic-sitebranding img {
	margin-left: 0 !important;
}

header .site_logo #block-eggstatic-sitebranding img {
	max-height: 32px !important;
	width: auto !important;
	display: block !important;
	transform: translateY(2px);
	filter: var(--eggstatic-header-logo-filter);
}


header .header_right {
	min-width: 0 !important;
	width: auto !important;
	justify-self: end !important;
	display: inline-flex !important;
	align-items: center !important;
	color: var(--eggstatic-header-control-color) !important;
	z-index: 2;
}

header .menu-toggle,
header .header_left .menu-toggle,
header button.menu-toggle,
header #menuToggle {
	display: inline-block !important;
	margin: 0 !important;
	transform: translateY(-1px);
	color: var(--eggstatic-header-control-color) !important;
	background-color: currentColor !important;
	border-color: currentColor !important;
}

header #block-eggstatic-languagedropdownswitcher {
	display: block !important;
}

header #block-eggstatic-languagedropdownswitcher select {
	line-height: 1 !important;
	height: 20px !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 8px 0 0 !important;
	width: auto !important;
	min-width: 44px !important;
	max-width: none !important;
	white-space: nowrap !important;
	text-transform: uppercase !important;
	-webkit-appearance: menulist !important;
	appearance: auto !important;
	color: inherit !important;
}

/* Header reservation controls: shared alignment baseline. */
.header_right nav#block-eggstatic-reservation>ul,
.header_right nav#block-eggstatic-reservation-2>ul {
	display: flex !important;
	align-items: center !important;
	gap: var(--branch-header-control-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.header_right nav#block-eggstatic-reservation>ul>li,
.header_right nav#block-eggstatic-reservation-2>ul>li {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme),
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--branch-header-control-size) !important;
	height: var(--branch-header-control-size) !important;
	flex: 0 0 var(--branch-header-control-size) !important;
	background: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	color: inherit !important;
}

.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a,
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--branch-header-control-size) !important;
	height: var(--branch-header-control-size) !important;
	min-width: var(--branch-header-control-size) !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	opacity: 1 !important;
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a::before,
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a::before {
	content: "";
	display: block;
	width: var(--branch-header-phone-icon-size);
	height: var(--branch-header-phone-icon-size);
	background-color: currentColor;
	-webkit-mask: url("./images/phone-eee.svg") no-repeat center / contain;
	mask: url("./images/phone-eee.svg") no-repeat center / contain;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>svg,
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>svg,
.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>i,
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>i,
.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>span,
.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme)>a>span {
	display: none !important;
}

.header_right nav#block-eggstatic-reservation .Reservation,
.header_right nav#block-eggstatic-reservation-2 .Reservation {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	line-height: 1 !important;
	color: inherit !important;
	text-decoration: none !important;
	border-color: currentColor !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.header_right nav#block-eggstatic-reservation .Reservation::before,
.header_right nav#block-eggstatic-reservation-2 .Reservation::before,
.header_right nav#block-eggstatic-reservation .Reservation::after,
.header_right nav#block-eggstatic-reservation-2 .Reservation::after {
	background-color: currentColor !important;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

.header_right nav#block-eggstatic-reservation .Reservation:hover,
.header_right nav#block-eggstatic-reservation .Reservation:focus,
.header_right nav#block-eggstatic-reservation .Reservation:focus-visible,
.header_right nav#block-eggstatic-reservation .Reservation:active,
.header_right nav#block-eggstatic-reservation .Reservation.is-active,
.header_right nav#block-eggstatic-reservation-2 .Reservation:hover,
.header_right nav#block-eggstatic-reservation-2 .Reservation:focus,
.header_right nav#block-eggstatic-reservation-2 .Reservation:focus-visible,
.header_right nav#block-eggstatic-reservation-2 .Reservation:active,
.header_right nav#block-eggstatic-reservation-2 .Reservation.is-active {
	color: inherit !important;
	border-color: currentColor !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Improve Visit Us title contrast against bright hero image areas. */
.branchdetails .mazen-wrapper .views-field-field-page-content-title .field-content {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 6px 18px rgba(0, 0, 0, 0.62) !important;
	-webkit-text-stroke: 0.45px rgba(0, 0, 0, 0.45);
}

@media only screen and (max-width: 1024px) {
	header .no-padding .no-margin.myRow {
		padding-inline: clamp(12px, 3vw, 20px) !important;
	}

	.header_right nav#block-eggstatic-reservation .Reservation,
	.header_right nav#block-eggstatic-reservation-2 .Reservation {
		font-size: 10px !important;
		padding: 8px 12px !important;
		min-height: 32px !important;
	}

	/* Avoid fixed-height clipping and empty areas in hero wrapper. */
	.branchdetails .inner {
		height: auto !important;
		min-height: 0 !important;
	}

	/* Remove extra blank area between hero and Visit Us card. */
	.branchdetails #block-eggstatic-views-block-branches-details-page-title-block-1 .views-row {
		min-height: auto !important;
		height: auto !important;
		padding-top: 64px !important;
		padding-bottom: 18px !important;
		gap: 12px !important;
	}

	.branchdetails #block-eggstatic-views-block-branches-details-page-title-block-1 .views-field-field-reservations-link {
		margin-top: 4px !important;
	}

	.branchdetails #block-eggstatic-views-block-branches-details-block-1 .image-wrapper-inner {
		margin-top: 16px !important;
	}

	.branchdetails .mazen-wrapper {
		padding-top: 110px !important;
		padding-inline: 14px !important;
		gap: 10px !important;
	}

	.branchdetails .mazen-wrapper .views-field-field-page-content-title .field-content {
		font-size: 24px !important;
		line-height: 1.1 !important;
	}
}

@media only screen and (max-width: 575px) {
	/* On small/mobile screens show Reservation icon only. */
	.header_right nav#block-eggstatic-reservation .Reservation,
	.header_right nav#block-eggstatic-reservation-2 .Reservation {
		font-size: 0 !important;
		line-height: 0 !important;
		color: inherit !important;
		padding: 8px !important;
		width: 38px !important;
		min-width: 38px !important;
		min-height: 32px !important;
		gap: 0 !important;
		background-image: none !important;
		border-color: currentColor !important;
	}

	.header_right nav#block-eggstatic-reservation .Reservation::before,
	.header_right nav#block-eggstatic-reservation-2 .Reservation::before {
		content: "" !important;
		display: block !important;
		width: 16px !important;
		height: 16px !important;
		background-color: currentColor !important;
		-webkit-mask: url("./images/piiil.svg") no-repeat center / contain !important;
		mask: url("./images/piiil.svg") no-repeat center / contain !important;
	}
}

@media only screen and (max-width: 500px) {
	/* Keep phone visible on branch pages while preserving non-branch hidden class. */
	.header_right nav#block-eggstatic-reservation>ul>li:nth-child(1):not(.phone-item-hidden-by-theme),
	.header_right nav#block-eggstatic-reservation-2>ul>li:nth-child(1):not(.phone-item-hidden-by-theme) {
		display: inline-flex !important;
	}

	.header_right nav#block-eggstatic-reservation>ul,
	.header_right nav#block-eggstatic-reservation-2>ul {
		gap: var(--branch-header-control-gap) !important;
	}
}

@media only screen and (max-width: 480px) {
	/* Visit Us card readability at very small widths (320/344/360). */
	.branchdetails #block-eggstatic-views-block-branches-details-block-1 .image-wrapper-inner {
		height: 250px !important;
		border-radius: 16px !important;
	}

	.branchdetails .mazen-wrapper {
		padding-top: 88px !important;
		padding-bottom: 14px !important;
		padding-inline: 12px !important;
	}

	.branchdetails .mazen-wrapper .views-field-field-page-content-title .field-content {
		font-size: 20px !important;
		line-height: 1.1 !important;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.92), 0 8px 22px rgba(0, 0, 0, 0.72) !important;
		-webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.55);
	}

	.branchdetails .mazen-wrapper .btn-get-directions {
		padding: 6px 12px !important;
		font-size: 12px !important;
		line-height: 18px !important;
	}

	.branchdetails .mazen-wrapper .views-field-field-branche-location {
		max-width: 100% !important;
		padding: 6px 10px !important;
	}

	.branchdetails .mazen-wrapper .views-field-field-branche-location .field-content {
		font-size: 12px !important;
		line-height: 18px !important;
	}
}
/* ===================================
   Custom Error Pages (404 / 403)
   =================================== */
.eggstatic-error-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	text-align: center;
	padding: 180px 20px 100px; /* Top padding to account for fixed header */
	background-color: #F5EFE4; /* Website default background */
}

.eggstatic-error-code {
	font-family: inherit;
	font-size: 160px;
	font-weight: 700;
	line-height: 1;
	color: #c86b43; /* Eggstatic Orange */
	margin: 0 0 10px 0;
	text-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.eggstatic-error-title {
	font-family: 'Sharp Grotesk', sans-serif;
	font-size: 38px;
	color: #221e1f;
	margin: 0 0 15px 0;
}

.eggstatic-error-desc {
	font-family: "Suisse Intl Mono", monospace;
	font-size: 16px;
	color: #5e5e5e;
	margin: 0 0 36px 0;
	max-width: 500px;
	line-height: 1.6;
}

.eggstatic-error-btn {
	font-family: 'Sharp Grotesk', sans-serif;
	background-color: #221e1f;
	color: #fff !important;
	padding: 15px 35px;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 30px;
	transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: 1px;
    display: inline-block;
}

.eggstatic-error-btn:hover {
	background-color: #c86b43;
	color: #fff !important;
}

/* Error page responsive */
@media (max-width: 768px) {
    .eggstatic-error-page {
        min-height: 70vh;
        padding: 140px 20px 80px;
    }
    .eggstatic-error-code {
        font-size: 100px;
    }
    .eggstatic-error-title {
        font-size: 26px;
    }
    .eggstatic-error-desc {
        font-size: 14px;
    }
    .eggstatic-error-btn {
        padding: 12px 28px;
    }
}

