/* =============================================================================
   Darplay Tweaks - header and menu (includes/header.php, assets/js/header.js)
   Restyles the theme's navigation block; WordPress still opens/closes the
   menu (focus, Escape, aria). Below 600px the menu is an overlay - here a
   panel sliding in from the right. Colours: approximate brand values.
   ============================================================================= */

:root {
	--darplay-hdr-teal: #2f5259;
	--darplay-hdr-green: #5c8a6a;
	--darplay-hdr-green-dark: #4d7759;
	--darplay-hdr-mint: #e2edde;
	--darplay-hdr-line: #ececec;
	--darplay-hdr-muted: #6b6b6b;
}

/* --- Sticky header ------------------------------------------------------- */
/* The theme fixes the page wrapper at one screen height and lets content
   overflow it; a sticky element can only stick within its parent, so the
   wrapper must grow with the content. */
.wp-site-blocks {
	height: auto !important;
	min-height: 100vh;
}

.wp-site-blocks > header.wp-block-template-part {
	/* Full width (the theme pads .wp-site-blocks on both sides), so the
	   white background and bottom line reach the screen edges. */
	margin-left: calc(-1 * var(--wp--custom--spacing--outer, 0px));
	margin-right: calc(-1 * var(--wp--custom--spacing--outer, 0px));
	padding-left: var(--wp--custom--spacing--outer, 0px);
	padding-right: var(--wp--custom--spacing--outer, 0px);
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--darplay-hdr-line);
	transition: box-shadow 0.2s ease;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.wp-site-blocks > header.wp-block-template-part.darplay-header-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* --- Round 40px buttons: menu and cart ------------------------------------ */
header .wp-block-navigation__responsive-container-open,
header .wc-block-mini-cart__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #dedede;
	border-radius: 50%;
	background: #fff;
	color: #222;
}

header .wp-block-navigation__responsive-container-open:hover,
header .wc-block-mini-cart__button:hover {
	border-color: var(--darplay-hdr-green);
	background: #f6f9f7;
}

header .wp-block-navigation__responsive-container-open svg,
header .wc-block-mini-cart__button svg {
	width: 22px;
	height: 22px;
}

/* Cart count: a neat teal badge on the button's corner. */
header .wc-block-mini-cart__badge {
	position: absolute;
	top: -5px;
	right: -5px;
	left: auto;
	transform: none;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: var(--darplay-hdr-teal) !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
}

/* Panel extras exist only inside the open phone menu. */
.darplay-panel-extra {
	display: none;
}

/* =========================================================================
   Phones (< 600px): slide-in panel
   ========================================================================= */
@media (max-width: 599px) {
	/* Cart button to the left of the menu button, with a gap. */
	header .wc-block-mini-cart {
		order: -1;
		margin-right: 8px;
	}

	header .wp-block-navigation__responsive-container.is-menu-open {
		left: auto !important;
		right: 0 !important;
		width: min(88vw, 380px);
		padding: 0 !important;
		background: #fff !important;
		color: #222 !important;
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
		animation: darplay-panel-in 0.22s ease-out both !important;
	}

	@keyframes darplay-panel-in {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}

	header .is-menu-open .wp-block-navigation__responsive-close,
	header .is-menu-open .wp-block-navigation__responsive-dialog {
		height: 100%;
	}

	header .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* Top row: logo left, close right. */
	header .is-menu-open .darplay-panel-extra.darplay-panel-head {
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 64px 0 16px;
		border-bottom: 1px solid var(--darplay-hdr-line);
	}

	header .is-menu-open .darplay-panel-head img {
		width: 140px;
		height: auto;
	}

	header .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 10px !important;
		right: 12px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid #dedede;
		border-radius: 50%;
		background: #fff;
	}

	header .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 20px;
		height: 20px;
	}

	header .is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex: 1;
		flex-direction: column;
		align-items: stretch !important;
		padding: 0 !important;
		overflow-y: auto;
	}

	header .is-menu-open .darplay-panel-extra {
		display: block;
	}

	/* "Към магазина" button. */
	header .is-menu-open .darplay-panel-shop {
		display: block;
		margin: 16px;
		padding: 13px 16px;
		border-radius: 8px;
		background: var(--darplay-hdr-green);
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		text-decoration: none;
	}

	header .is-menu-open .darplay-panel-shop:hover {
		background: var(--darplay-hdr-green-dark);
	}

	/* Menu rows: left-aligned, same size, dividers. */
	header .is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
	}

	header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		display: block !important;
		width: 100%;
		border-top: 1px solid var(--darplay-hdr-line);
		text-align: left;
	}

	header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-of-type {
		border-bottom: 1px solid var(--darplay-hdr-line);
	}

	header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		padding: 14px 56px 14px 16px !important;
		font-size: 17px !important;
		color: #222 !important;
		text-decoration: none;
	}

	/* "Магазин" and "In English" become the button and the BG | EN switch. */
	header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.darplay-nav-shop,
	header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.darplay-nav-en {
		display: none !important;
	}

	/* "За Дарплей": folded until its arrow is tapped. */
	header .is-menu-open .wp-block-navigation__submenu-icon {
		display: none !important;
	}

	header .is-menu-open .has-child > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	header .is-menu-open .has-child.darplay-sub-open > .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column;
		align-items: stretch !important;
		padding: 0 0 8px !important;
		gap: 0 !important;
	}

	header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: block !important; /* the menu is set to "align right"; not in the panel */
		width: 100%;
		text-align: left;
	}

	header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 9px 16px 9px 32px !important;
		font-size: 15px !important;
		color: #555 !important;
		text-align: left;
	}

	header .is-menu-open .darplay-sub-toggle {
		position: absolute;
		top: 6px;
		right: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #444;
		cursor: pointer;
	}

	header .is-menu-open .darplay-sub-toggle:hover {
		background: #f2f7f7;
	}

	header .is-menu-open .darplay-sub-toggle svg {
		transition: transform 0.2s ease;
	}

	header .is-menu-open .darplay-sub-open > .darplay-sub-toggle svg {
		transform: rotate(180deg);
	}

	/* BG | EN */
	header .is-menu-open .darplay-panel-extra.darplay-panel-lang {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 14px 16px;
		font-size: 14px;
		color: var(--darplay-hdr-muted);
	}

	header .is-menu-open .darplay-panel-lang span.is-current,
	header .is-menu-open .darplay-panel-lang a {
		padding: 3px 10px;
		border-radius: 6px;
		font-weight: 600;
		text-decoration: none;
	}

	header .is-menu-open .darplay-panel-lang span.is-current {
		background: var(--darplay-hdr-mint);
		color: var(--darplay-hdr-teal);
	}

	header .is-menu-open .darplay-panel-lang a {
		color: #444;
		border: 1px solid #dedede;
	}

	/* Reassurance strip, at the bottom of the panel. */
	header .is-menu-open .darplay-panel-trust {
		margin: auto 0 0;
		padding: 14px 16px 18px;
		list-style: none;
		background: #f6f8f7;
		border-top: 1px solid var(--darplay-hdr-line);
	}

	header .is-menu-open .darplay-panel-trust li {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 5px 0;
		font-size: 14px;
		color: #444;
	}

	header .is-menu-open .darplay-panel-trust svg {
		flex: none;
		width: 18px;
		height: 18px;
		color: var(--darplay-hdr-green);
	}

	header .is-menu-open .darplay-panel-trust a {
		color: #444;
	}

	/* Dimmed page behind the panel (tap closes the menu). It lives inside the
	   sticky header (its own stacking layer), just under the menu panel. */
	.darplay-menu-backdrop {
		position: fixed;
		inset: 0;
		z-index: 99999; /* just under WordPress's open menu (100000) */
		display: none;
		background: rgba(0, 0, 0, 0.4);
	}

	html.darplay-menu-active .darplay-menu-backdrop {
		display: block;
	}
}

/* =========================================================================
   Desktop (600px+): "Магазин" emphasised, softer dropdown
   ========================================================================= */
@media (min-width: 600px) {
	/* Space between the last menu item and the round cart button. */
	header .wc-block-mini-cart {
		margin-left: 16px;
	}

	header .wp-block-navigation .darplay-nav-shop > .wp-block-navigation-item__content {
		padding: 7px 16px !important;
		border-radius: 999px;
		background: var(--darplay-hdr-green);
		color: #fff !important;
		font-weight: 600;
	}

	header .wp-block-navigation .darplay-nav-shop > .wp-block-navigation-item__content:hover {
		background: var(--darplay-hdr-green-dark);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container {
		min-width: 220px !important;
		padding: 6px 0 !important;
		border: 1px solid var(--darplay-hdr-line) !important;
		border-radius: 10px;
		background: #fff !important;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 9px 16px !important;
	}

	header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: #f2f7f7;
	}

	.darplay-sub-toggle {
		display: none !important;
	}
}

/* Tablets (600-900px): slightly tighter menu so it stays on one line next
   to the logo and the cart button. */
@media (min-width: 600px) and (max-width: 900px) {
	header .wp-block-navigation__container {
		gap: 14px !important;
	}

	header .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 15px;
	}

	header .wc-block-mini-cart {
		margin-left: 12px;
	}
}