/**
 * KAUFLOND — Header
 *
 * Scope: WoodMart header-builder rows, logo, "Alle Kategorien" element, search
 * bar, account / wishlist / cart controls, mega menu, sticky behaviour.
 *
 * Every rule is scoped to `.whb-header_kauflond` — the class WoodMart itself
 * puts on <header> for the active header configuration. Scoping to WoodMart's
 * own hook (rather than a body class we would have to maintain) means these
 * rules simply stop applying the moment the header is switched back to the
 * retained demo header, with nothing to clean up.
 *
 * All values come from tokens.css. Structure is WoodMart's — this file only
 * changes proportion, density and colour.
 *
 * @package Kauflond
 */

/* =========================================================================
 * 1. HEADER SHELL
 * ====================================================================== */

.whb-header_kauflond {
	background-color: var(--kfl-color-surface);
	border-bottom: var(--kfl-border-width) solid var(--kfl-color-border);
	margin-bottom: 0;
}

/* Row 1 — logo / top nav / account controls. */
.whb-header_kauflond .whb-general-header {
	background-color: var(--kfl-color-surface);
}

/* Row 2 — the shopping row. A subtle tint separates it from row 1 without
 * needing a second border, keeping the header visually short. */
.whb-header_kauflond .whb-header-bottom {
	background-color: var(--kfl-color-surface);
	border-top: var(--kfl-border-width) solid var(--kfl-color-border);
}

/* Both rows share the widened storefront container. */
.whb-header_kauflond .container {
	max-width: var(--kfl-container-max);
	padding-inline: var(--kfl-container-gutter);
}

/* Sticky row 2: keep the search and category trigger reachable, and give it a
 * shadow ONLY while stuck — a permanent shadow would read as decoration. */
.whb-header_kauflond.whb-sticked .whb-header-bottom {
	box-shadow: var(--kfl-shadow-sm);
}

/* =========================================================================
 * 2. LOGO
 *
 * The wordmark is a placeholder SVG. Sizing is capped here rather than in the
 * header config so swapping in the final asset needs no header rebuild —
 * change the image, and these caps keep the row height stable.
 * ====================================================================== */

.whb-header_kauflond .site-logo img {
	display: block;
	max-height: 34px;
	width: auto;
}

.whb-header_kauflond .whb-col-mobile .site-logo img {
	max-height: 26px;
}

/* =========================================================================
 * 3. TOP NAVIGATION (Angebote / Bestseller / Neuheiten)
 *
 * WoodMart's navigation font is Lato 700 uppercase 13px. Uppercase is right
 * for a retail nav, but the default letter-spacing is loose at this size.
 * ====================================================================== */

.whb-header_kauflond .whb-general-header .wd-nav > li > a {
	font-size: var(--kfl-font-size-sm);
	letter-spacing: .04em;
	color: var(--kfl-color-text-primary);
}

.whb-header_kauflond .whb-general-header .wd-nav > li > a:hover,
.whb-header_kauflond .whb-general-header .wd-nav > li.current-menu-item > a {
	color: var(--kfl-color-brand-primary);
}

/* =========================================================================
 * 4. ACCOUNT / WISHLIST / CART
 *
 * Icon + label, compact. Desktop icons stay small — oversized touch-sized
 * icons on desktop are one of the things the brief explicitly rules out.
 * ====================================================================== */

.whb-header_kauflond .whb-col-right .wd-tools-element {
	--wd-tools-icon-base-width: 20px;
}

.whb-header_kauflond .whb-col-right .wd-tools-element > a {
	gap: var(--kfl-space-2);
	padding-inline: var(--kfl-space-3);
	color: var(--kfl-color-text-primary);
}

.whb-header_kauflond .whb-col-right .wd-tools-element > a:hover {
	color: var(--kfl-color-brand-primary);
}

.whb-header_kauflond .whb-col-right .wd-tools-text {
	font-size: var(--kfl-font-size-sm);
	font-weight: var(--kfl-font-weight-medium);
	line-height: var(--kfl-line-height-tight);
	text-transform: none;
	letter-spacing: 0;
}

/* Cart and wishlist counters carry the brand colour — they are the two
 * numbers a returning shopper looks for. */
.whb-header_kauflond .wd-tools-element .wd-tools-count {
	background-color: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
	font-weight: var(--kfl-font-weight-bold);
}

/* =========================================================================
 * 5. "ALLE KATEGORIEN" TRIGGER
 *
 * The category entry point is a solid brand-coloured control — in a German
 * general retailer this and the search bar are the two anchors of the header.
 * ====================================================================== */

.whb-header_kauflond .whb-header-bottom .wd-header-cats {
	margin-inline-end: var(--kfl-space-4);
}

/* WoodMart renders the trigger as <span class="menu-opener"> containing
 * .menu-opener-icon and .menu-open-label. Both inner spans inherit their own
 * colour, so the colour has to be set on them too — setting it on the parent
 * alone leaves dark-grey text on the brand red.
 *
 * The BACKGROUND is deliberately not set here: it comes from WoodMart's
 * primary-color theme option, which we set to the brand red. Painting it in
 * CSS as well would mean two sources of truth for the same colour. */
.whb-header_kauflond .wd-header-cats .menu-opener {
	display: flex;
	align-items: center;
	gap: var(--kfl-space-2);
	height: var(--kfl-search-height);
	padding-inline: var(--kfl-space-4);
	border-radius: var(--kfl-radius-md);
	white-space: nowrap;
}

.whb-header_kauflond .wd-header-cats .menu-opener,
.whb-header_kauflond .wd-header-cats .menu-opener .menu-open-label,
.whb-header_kauflond .wd-header-cats .menu-opener .menu-opener-icon {
	color: var(--kfl-color-brand-on-primary);
	font-size: var(--kfl-font-size-md);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
}

.whb-header_kauflond .wd-header-cats .menu-opener:hover,
.whb-header_kauflond .wd-header-cats .menu-opener:hover .menu-open-label,
.whb-header_kauflond .wd-header-cats .menu-opener:hover .menu-opener-icon {
	color: var(--kfl-color-brand-on-primary);
}

/* The dropdown panel wrapper. */
.whb-header_kauflond .wd-dropdown-cats {
	border-radius: var(--kfl-radius-md);
}

/* The vertical category list itself. */
.whb-header_kauflond .wd-header-cats .wd-nav-vertical {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	box-shadow: var(--kfl-shadow-md);
	background-color: var(--kfl-color-surface);
}

.whb-header_kauflond .wd-header-cats .wd-nav-vertical > li > a {
	padding-block: var(--kfl-space-2);
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-medium);
	text-transform: none;
	letter-spacing: 0;
	color: var(--kfl-color-text-primary);
}

.whb-header_kauflond .wd-header-cats .wd-nav-vertical > li > a:hover {
	background-color: var(--kfl-color-surface-subtle);
	color: var(--kfl-color-brand-primary);
}

/* =========================================================================
 * 6. MEGA MENU PANEL
 *
 * Multi-column category panel. Dense, plain, readable — a catalogue index,
 * not a marketing surface.
 * ====================================================================== */

.whb-header_kauflond .wd-dropdown-menu {
	border-radius: var(--kfl-radius-md);
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	box-shadow: var(--kfl-shadow-lg);
}

/* Second-level items act as column headings. */
.whb-header_kauflond .wd-dropdown-menu .wd-sub-menu > li > a {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-text-primary);
	text-transform: none;
	letter-spacing: 0;
	padding-block: var(--kfl-space-1);
}

/* Third-level items are the actual catalogue links. */
.whb-header_kauflond .wd-dropdown-menu .sub-sub-menu > li > a {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-normal);
	color: var(--kfl-color-text-secondary);
	padding-block: 3px;
}

.whb-header_kauflond .wd-dropdown-menu .wd-sub-menu > li > a:hover,
.whb-header_kauflond .wd-dropdown-menu .sub-sub-menu > li > a:hover {
	color: var(--kfl-color-brand-primary);
	text-decoration: underline;
}

/* =========================================================================
 * 7. SEARCH
 *
 * The strongest element in the header. Capped width so it stays a control
 * rather than stretching edge to edge on a 1440px screen.
 * ====================================================================== */

.whb-header_kauflond .whb-header-bottom .wd-search-form,
.whb-header_kauflond .whb-header-bottom .wd-search-form form {
	width: 100%;
	max-width: var(--kfl-search-max);
	margin-inline: auto;
}

.whb-header_kauflond .wd-search-form .searchform {
	border: 2px solid var(--kfl-color-brand-primary);
	border-radius: var(--kfl-radius-md);
	background-color: var(--kfl-color-surface);
	overflow: hidden;
}

.whb-header_kauflond .wd-search-form .searchform input[type="text"],
.whb-header_kauflond .wd-search-form .searchform input[type="search"] {
	height: var(--kfl-search-height);
	border: none;
	box-shadow: none;
	font-size: var(--kfl-font-size-md);
	color: var(--kfl-color-text-primary);
	background: transparent;
}

.whb-header_kauflond .wd-search-form .searchform input::placeholder {
	color: var(--kfl-color-text-muted);
}

/* Submit button carries the brand colour and fills the field height. */
.whb-header_kauflond .wd-search-form .searchsubmit {
	height: var(--kfl-search-height);
	min-width: 56px;
	border: none;
	border-radius: 0;
	background-color: var(--kfl-color-brand-primary);
	color: var(--kfl-color-brand-on-primary);
}

.whb-header_kauflond .wd-search-form .searchsubmit:hover {
	background-color: var(--kfl-color-brand-primary-hover);
}

/* Category selector inside the search field. */
.whb-header_kauflond .wd-search-form .wd-search-cat {
	border-inline-end: var(--kfl-border-width) solid var(--kfl-color-border);
	background-color: var(--kfl-color-surface-subtle);
}

.whb-header_kauflond .wd-search-form .wd-search-cat select {
	height: var(--kfl-search-height);
	border: none;
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
	background: transparent;
}

/* Category selector label. WoodMart uppercases it, which overflows the
 * selector at German word lengths — and German nouns are capitalised anyway,
 * so uppercase buys nothing here. */
.whb-header_kauflond .wd-search-cat .wd-search-cat-btn,
.whb-header_kauflond .wd-search-cat .wd-search-cat-btn span {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--kfl-font-size-sm);
	color: var(--kfl-color-text-secondary);
	white-space: nowrap;
}

/* Focus: thicken nothing, just deepen the border so the layout never shifts. */
.whb-header_kauflond .wd-search-form .searchform:focus-within {
	border-color: var(--kfl-color-brand-primary-active);
}

/* --- AJAX results dropdown ------------------------------------------- */

.whb-header_kauflond .wd-search-results,
.whb-header_kauflond .autocomplete-suggestions {
	border: var(--kfl-border-width) solid var(--kfl-color-border);
	border-radius: var(--kfl-radius-md);
	box-shadow: var(--kfl-shadow-lg);
	background-color: var(--kfl-color-surface);
}

.whb-header_kauflond .wd-search-results .wd-product .wd-entities-title,
.whb-header_kauflond .autocomplete-suggestion .wd-entities-title {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-medium);
	line-height: var(--kfl-line-height-snug);
	color: var(--kfl-color-text-primary);
}

.whb-header_kauflond .wd-search-results .price,
.whb-header_kauflond .autocomplete-suggestion .price {
	font-size: var(--kfl-font-size-base);
	font-weight: var(--kfl-font-weight-bold);
	color: var(--kfl-color-price);
}

.whb-header_kauflond .wd-search-results del,
.whb-header_kauflond .autocomplete-suggestion del {
	color: var(--kfl-color-price-old);
	font-weight: var(--kfl-font-weight-normal);
}

.whb-header_kauflond .wd-search-results ins,
.whb-header_kauflond .autocomplete-suggestion ins {
	color: var(--kfl-color-price-sale);
	text-decoration: none;
}

/* Popular requests / search history chips. */
.whb-header_kauflond .wd-search-info-title {
	font-size: var(--kfl-font-size-xs);
	font-weight: var(--kfl-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--kfl-color-text-muted);
}

/* =========================================================================
 * 8. MOBILE HEADER
 *
 * Row 1: burger | logo | wishlist + cart.  Row 2: full-width search.
 * Nothing from the desktop right-hand column is carried over — account stays
 * reachable through the burger menu, as the brief requires.
 * ====================================================================== */

@media (max-width: 1024px) {

	.whb-header_kauflond .whb-header-bottom .wd-search-form,
	.whb-header_kauflond .whb-header-bottom .wd-search-form form {
		max-width: none;
	}

	.whb-header_kauflond .wd-search-form .searchform input[type="text"],
	.whb-header_kauflond .wd-search-form .searchform input[type="search"],
	.whb-header_kauflond .wd-search-form .searchsubmit {
		height: var(--kfl-search-height-mobile);
	}

	.whb-header_kauflond .wd-search-form .searchsubmit {
		min-width: 48px;
	}

	/* Mobile icons are touch targets, so they may be larger than desktop. */
	.whb-header_kauflond .whb-col-mobile .wd-tools-element {
		--wd-tools-icon-base-width: 22px;
	}

	.whb-header_kauflond .whb-col-mobile .wd-tools-element > a {
		padding-inline: var(--kfl-space-2);
	}

	/* Row 2 needs the full width on mobile — no container gutter doubling. */
	.whb-header_kauflond .whb-header-bottom .container {
		padding-inline: var(--kfl-space-3);
	}
}

/* Below 480px the header must stay short: two rows at 56 + 52 is already
 * ~108px of a 780px viewport. */
@media (max-width: 480px) {

	.whb-header_kauflond .whb-col-mobile .site-logo img {
		max-height: 22px;
	}

	.whb-header_kauflond .whb-col-mobile .wd-tools-element > a {
		padding-inline: var(--kfl-space-1);
	}
}

/* =========================================================================
 * 9. OVERFLOW GUARD
 *
 * A two-row header with a wide search field and a long category list is the
 * most likely place for horizontal overflow to appear. This is a safety net,
 * not a layout mechanism.
 * ====================================================================== */

.whb-header_kauflond,
.whb-header_kauflond .container,
.whb-header_kauflond .whb-row {
	max-width: 100%;
}

.whb-header_kauflond .wd-search-form {
	min-width: 0;
}