/*
 * TBP canonical Header layer.
 *
 * Blocksy owns desktop and mobile Header navigation.
 */

header#header.ct-header {
	display: block !important;
	position: relative;
	z-index: 999;
	background: #fff;
	border-bottom: 1px solid rgba(44, 34, 29, 0.08);
	box-shadow: 0 4px 18px rgba(44, 34, 29, 0.05);
}

header#header.ct-header .ct-container {
	max-width: var(--tbp-container-max, 1280px);
	padding-inline: var(--tbp-container-padding, 24px);
}

#offcanvas.ct-panel.ct-header {
	display: flex !important;
}

header.tbp-bright-header {
	display: none !important;
}

/* Keep legacy overlay elements out of document flow */
#tbp-mobile-overlay,
#tbp-mobile-nav {
	position: fixed !important;
}

@media (min-width: 769px) {
	header#header.ct-header [data-row="middle"] {
		min-height: 78px;
	}

	header#header.ct-header .site-branding img {
		display: block;
		width: auto;
		max-height: 58px;
	}

	header#header.ct-header .header-menu-1 {
		margin-inline-start: auto;
	}

	header#header.ct-header .header-menu-1 > ul {
		gap: clamp(14px, 1.6vw, 26px);
	}

	header#header.ct-header .ct-menu-link {
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	header#header.ct-header .ct-menu-link:hover,
	header#header.ct-header .current-menu-item > .ct-menu-link {
		color: #6B0F0F;
	}

	header#header.ct-header .ct-header-search {
		width: 44px;
		height: 44px;
		border: 1px solid #E8DDD4;
		border-radius: 8px;
	}

	header#header.ct-header .ct-header-search:hover {
		color: #6B0F0F;
		border-color: #6B0F0F;
	}
}

@media (max-width: 768px) {
	header#header.ct-header [data-row="middle"] {
		min-height: 64px;
	}

	header#header.ct-header [data-device="mobile"] [data-row="middle"] > .ct-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		min-height: 64px;
		height: 64px;
	}

	header#header.ct-header [data-device="mobile"] [data-row="middle"] [data-column] {
		display: flex;
		align-items: center;
		min-height: 64px;
		height: 64px;
	}

	header#header.ct-header [data-device="mobile"] [data-row="middle"] [data-column="end"] {
		justify-content: flex-end;
	}

	header#header.ct-header .site-branding img {
		display: block;
		width: auto;
		max-height: 46px;
	}

	header#header.ct-header .ct-header-trigger {
		width: 44px;
		height: 44px;
		border: 1px solid #E8DDD4;
		border-radius: 8px;
		color: #2C221D;
	}

	header#header.ct-header .ct-header-trigger:hover {
		color: #6B0F0F;
		border-color: #6B0F0F;
	}
}

/* ─── Offcanvas mobile menu — M31.2 ─────────────────────────────────────────
   No media query: the offcanvas is always a mobile-style overlay regardless
   of viewport width. Blocksy's trigger can be clicked at any width.
   CTA footer injected via blocksy:header:offcanvas:mobile:bottom hook.
   ─────────────────────────────────────────────────────────────────────────── */

#offcanvas.ct-panel {
	width: 100vw !important;
	max-width: none !important;
	background: #2C221D !important;
	color: #fff !important;
	box-shadow: -18px 0 42px rgba(44, 34, 29, .38) !important;
}

#offcanvas.ct-panel .ct-panel-inner,
#offcanvas.ct-panel .ct-panel-content[data-device="mobile"] {
	display: flex !important;
	flex-direction: column !important;
}

#offcanvas.ct-panel .ct-panel-content[data-device="desktop"] {
	display: none !important;
}

#offcanvas.ct-panel .ct-panel-inner {
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	background: #2C221D !important;
}

#offcanvas.ct-panel .ct-panel-content[data-device="mobile"] {
	flex: 1 !important;
	width: 100% !important;
	min-height: calc(100dvh - 64px) !important;
	padding: max(16px, env(safe-area-inset-top)) 0 0 !important;
}

#offcanvas.ct-panel .ct-panel-content-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 !important;
	min-height: 100% !important;
}

#offcanvas.ct-panel .ct-panel-actions {
	min-height: 64px !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 0 !important;
	padding: 0 24px 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

#offcanvas.ct-panel .ct-toggle-close {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: rgba(255, 255, 255, .55) !important;
	box-shadow: none !important;
	transition: border-color .15s, color .15s, background .15s !important;
}

#offcanvas.ct-panel .ct-toggle-close:hover {
	border-color: #C9A15B !important;
	background: rgba(201, 161, 91, .12) !important;
	color: #C9A15B !important;
}

#offcanvas.ct-panel .mobile-menu,
#offcanvas.ct-panel .mobile-menu ul {
	display: grid !important;
	width: 100% !important;
	min-width: 100% !important;
	max-width: none !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#offcanvas.ct-panel .mobile-menu li {
	margin: 0 !important;
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link {
	position: relative !important;
	display: flex !important;
	min-height: 62px !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 0 24px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: 0 !important;
	color: rgba(255, 255, 255, .9) !important;
	background: transparent !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	transition:
		background-color .15s ease,
		color .15s ease !important;
}

#offcanvas.ct-panel .mobile-menu > li:first-child > .ct-menu-link {
	border-top: 1px solid rgba(255, 255, 255, .10) !important;
}

#offcanvas.ct-panel .mobile-menu > li:last-child > .ct-menu-link {
	border-bottom: none !important;
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link::after {
	display: none !important;
}

#offcanvas.ct-panel .mobile-menu .ct-menu-link:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, .06) !important;
}

#offcanvas.ct-panel .mobile-menu .current-menu-item > .ct-menu-link {
	color: #C9A15B !important;
	background: rgba(201, 161, 91, .10) !important;
	box-shadow: inset 4px 0 0 #C9A15B !important;
}

/* ─── Site brand text (header text element; semantic markup, styles owned here) ── */

.mpk-site-brand {
	display: inline-block;
	color: var(--sam-gold, #C9A15B);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.mpk-site-brand {
		font-size: clamp(20px, 6.5vw, 28px);
	}
}

/* ─── Panel-actions logo — injected via wp_footer JS ───────────────────── */

#offcanvas .ct-panel-actions .tbp-panel-logo {
	display: flex !important;
	align-items: center !important;
	text-decoration: none !important;
	flex-shrink: 0 !important;
}

#offcanvas .ct-panel-actions .tbp-panel-logo img {
	display: block !important;
	height: 36px !important;
	width: auto !important;
}

/* ─── CTA footer — injected via blocksy:header:offcanvas:mobile:bottom ──── */

#offcanvas .tbp-menu-cta {
	margin-top: auto !important;
	padding: 20px 24px max(24px, env(safe-area-inset-bottom)) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	border-top: 1px solid rgba(255, 255, 255, .10) !important;
}

#offcanvas .tbp-menu-cta__call {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 52px !important;
	background: #6B0F0F !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	transition: background .15s ease !important;
}

#offcanvas .tbp-menu-cta__call:hover {
	background: #5a0b0b !important;
	color: #fff !important;
}

#offcanvas .tbp-menu-cta__zalo {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	border: 1px solid rgba(255, 255, 255, .22) !important;
	border-radius: 8px !important;
	color: rgba(255, 255, 255, .9) !important;
	background: rgba(255, 255, 255, .07) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background .15s ease, border-color .15s ease !important;
}

#offcanvas .tbp-menu-cta__zalo:hover {
	background: rgba(255, 255, 255, .12) !important;
	border-color: rgba(255, 255, 255, .38) !important;
}

#offcanvas .tbp-menu-cta__hours {
	text-align: center !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: rgba(255, 255, 255, .38) !important;
	margin: 2px 0 0 !important;
}

@media (max-width: 390px) {
	#offcanvas.ct-panel .mobile-menu .ct-menu-link {
		min-height: 58px !important;
		font-size: 17px !important;
	}
}