/**
 * DeShop — header.css
 *
 * Top bar, header bar (classic, centered, minimal), primary navigation
 * with drop-downs and mega menu, header actions, search panel and the
 * menu drawer. Mobile-first: desktop rules sit in min-width queries.
 *
 * @package DeShop
 */

/* Top bar ------------------------------------------------------------------ */

.topbar {
	background: var(--ds-primary);
	color: var(--ds-on-primary);
	font-size: var(--ds-fs-xs);
	letter-spacing: 0.02em;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-lg);
	min-height: 36px;
	padding-block: 6px;
	text-align: center;
}

.topbar a {
	color: inherit;
}

@media (min-width: 768px) {
	.topbar__inner {
		justify-content: space-between;
		text-align: start;
	}
}

.topbar__menu {
	display: flex;
	gap: var(--ds-space-lg);
}

.topbar__menu a {
	text-decoration: none;
	opacity: 0.85;
}

.topbar__menu a:hover {
	opacity: 1;
}

/* Header shell -------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: var(--ds-z-header);
	background: var(--ds-surface);
	border-bottom: 1px solid var(--ds-border);
	transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.has-sticky-header .site-header {
	position: sticky;
	top: 0;
}

/* Logged-in admin bar offsets. */
.admin-bar.has-sticky-header .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.has-sticky-header .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* WordPress un-fixes the admin bar here, so the header sticks at 0. */
	.admin-bar.has-sticky-header .site-header {
		top: 0;
	}
}

.site-header.is-scrolled {
	box-shadow: var(--ds-shadow-sm);
}

/* Hide on scroll down, show on scroll up (set by navigation.js, mobile only). */
.site-header.is-hidden {
	transform: translateY(-100%);
}

/* Header bar ------------------------------------------------------------------ */

.header-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ds-space-sm);
	min-height: var(--ds-header-h);
	padding-top: var(--ds-safe-top);
}

.header-bar__start {
	display: flex;
	align-items: center;
	gap: var(--ds-space-xs);
	min-width: 0;
}

.header-bar__center {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.header-bar__end {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

/* Classic & minimal on mobile: [menu] [logo ........] [actions] */
.header-bar--classic,
.header-bar--minimal {
	grid-template-columns: minmax(0, 1fr) auto;
}

.header-bar--classic .menu-toggle,
.header-bar--minimal .menu-toggle,
.header-bar--centered .menu-toggle {
	margin-inline-start: -10px; /* Optical alignment with the gutter. */
}

@media (min-width: 768px) {
	.header-bar--classic {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--ds-space-xl);
	}
}

/* Centered: [menu] [.. logo ..] [actions] on all sizes. */
.header-bar--centered .site-branding {
	text-align: center;
}

.header-nav-row {
	border-top: 1px solid var(--ds-border);
}

/* Branding --------------------------------------------------------------------- */

.site-branding {
	min-width: 0;
}

.site-title {
	font-family: var(--ds-font-heading);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.site-title a,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--ds-text);
	text-decoration: none;
}

.custom-logo {
	width: auto;
	max-height: var(--ds-logo-h, 40px);
}

@media (min-width: 1024px) {
	.custom-logo {
		max-height: var(--ds-logo-h-desktop, 52px);
	}
}

/* Header actions ------------------------------------------------------------------ */

.header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-inline-end: -10px;
}

/* Primary navigation (desktop) ------------------------------------------------------ */

.primary-nav__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--ds-space-xs);
}

.primary-nav--center .primary-nav__menu {
	min-height: 52px;
	align-items: center;
}

.primary-nav .menu-item {
	position: relative;
	display: flex;
	align-items: center;
}

.primary-nav__menu > .menu-item > a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--ds-tap);
	padding-inline: var(--ds-space-sm);
	color: var(--ds-text);
	font-size: var(--ds-fs-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
}

/* Thin underline that grows on hover / current page. */
.primary-nav__menu > .menu-item > a::after {
	content: "";
	position: absolute;
	right: var(--ds-space-sm);
	bottom: 8px;
	left: var(--ds-space-sm);
	height: 1px;
	background: var(--ds-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ds-dur) var(--ds-ease);
}

.primary-nav__menu > .menu-item > a:hover::after,
.primary-nav__menu > .current-menu-item > a::after,
.primary-nav__menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.primary-nav__menu > .menu-item-has-children > a {
	padding-inline-end: 0;
}

.primary-nav__menu > .menu-item-has-children > a::after {
	right: 0;
}

/* Sub-menu disclosure button. */
.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: var(--ds-tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ds-text-muted);
}

.submenu-toggle .ds-icon {
	transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.submenu-toggle[aria-expanded="true"] .ds-icon {
	transform: rotate(180deg);
}

/* Drop-down. */
.primary-nav .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 10;
	min-width: 240px;
	margin: 0;
	padding: var(--ds-space-xs);
	border-radius: var(--ds-radius-md);
	background: var(--ds-surface);
	box-shadow: var(--ds-shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--ds-dur-fast) var(--ds-ease),
		transform var(--ds-dur-fast) var(--ds-ease),
		visibility var(--ds-dur-fast);
}

.primary-nav .sub-menu .sub-menu {
	top: calc(var(--ds-space-xs) * -1);
	inset-inline-start: 100%;
}

.primary-nav .menu-item.is-open > .sub-menu,
.primary-nav .menu-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (hover: hover) {
	.primary-nav .menu-item:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.primary-nav .sub-menu a {
	display: block;
	flex: 1;
	padding: 0.625rem var(--ds-space-sm);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-text);
	font-size: var(--ds-fs-sm);
	text-decoration: none;
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu .current-menu-item > a {
	background: var(--ds-muted);
	color: var(--ds-primary);
}

.primary-nav .sub-menu .submenu-toggle .ds-icon {
	transform: rotate(-90deg);
}

[dir="rtl"] .primary-nav .sub-menu .submenu-toggle .ds-icon {
	transform: rotate(90deg);
}

/* Mega menu: add the CSS class "mega-menu" to a top-level item. ------------------------ */

.has-mega .primary-nav__menu > .mega-menu {
	position: static;
}

.has-mega .primary-nav__menu > .mega-menu > .sub-menu {
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--ds-space-lg);
	width: min(var(--ds-container), 100vw - var(--ds-gutter) * 2);
	margin-inline: auto;
	padding: var(--ds-space-xl);
	border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
}

.has-mega .mega-menu > .sub-menu > .menu-item {
	flex-direction: column;
	align-items: stretch;
}

/* Column headings (only for items that have their own links below). */
.has-mega .mega-menu > .sub-menu > .menu-item-has-children > a {
	padding: 0 0 var(--ds-space-xs);
	margin-bottom: var(--ds-space-xs);
	border-bottom: 1px solid var(--ds-border);
	border-radius: 0;
	background: none;
	font-family: var(--ds-font-heading);
	font-size: var(--ds-fs-lg);
	font-weight: 600;
}

.has-mega .mega-menu > .sub-menu > .menu-item > .submenu-toggle {
	display: none;
}

/* Third level always visible inside the mega panel. */
.has-mega .mega-menu .sub-menu .sub-menu {
	position: static;
	min-width: 0;
	padding: 0;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transform: none;
}

.has-mega .mega-menu .sub-menu .sub-menu a {
	padding-inline: 0;
	color: var(--ds-text-muted);
}

.has-mega .mega-menu .sub-menu .sub-menu a:hover {
	background: none;
	color: var(--ds-primary);
}

/* Search panel -------------------------------------------------------------------------- */

.search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	border-bottom: 1px solid var(--ds-border);
	background: var(--ds-surface);
	box-shadow: var(--ds-shadow-md);
	animation: ds-panel-in var(--ds-dur) var(--ds-ease);
}

.search-panel__inner {
	display: flex;
	align-items: center;
	gap: var(--ds-space-sm);
	padding-block: var(--ds-space-md);
}

.search-panel form {
	flex: 1;
	max-width: none;
}

@keyframes ds-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* Menu drawer ------------------------------------------------------------------------------ */

.drawer-nav .menu-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--ds-border);
}

.drawer-nav .menu-item > a {
	flex: 1;
	display: flex;
	align-items: center;
	min-height: 52px;
	color: var(--ds-text);
	font-size: var(--ds-fs-md);
	font-weight: 500;
	text-decoration: none;
}

.drawer-nav .current-menu-item > a {
	color: var(--ds-primary);
}

.drawer-nav .submenu-toggle {
	width: var(--ds-tap);
	margin-inline-end: -10px;
}

.drawer-nav .sub-menu {
	flex-basis: 100%;
	margin: 0 0 var(--ds-space-sm);
	padding-inline-start: var(--ds-space-md);
	list-style: none;
}

.drawer-nav .sub-menu:not(.is-open) {
	display: none;
}

.drawer-nav .sub-menu .menu-item {
	border-bottom: 0;
}

.drawer-nav .sub-menu a {
	min-height: var(--ds-tap);
	color: var(--ds-text-muted);
	font-size: var(--ds-fs-sm);
	font-weight: 400;
}

.drawer-foot {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-sm);
}

.drawer-foot__link {
	display: flex;
	align-items: center;
	gap: var(--ds-space-sm);
	min-height: var(--ds-tap);
	color: var(--ds-text);
	font-weight: 500;
	text-decoration: none;
}

/* Social links (shared by drawer and footer). */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 0 0 -10px;
	padding: 0;
	list-style: none;
}

[dir="rtl"] .social-links {
	margin: 0 -10px 0 0;
}