/*
 * Desktop-Kopf (Klasse Mercurino_Desktopkopf) – von Hand gepflegt, eigenständig.
 * Farben: Designwelt v2 (docs/design/startseite.md § 6). Nur Blocksys Desktop-Kopf (ab 1000 px).
 * Selektoren mit body.mrc-kopf[data-header], damit sie die Customizer-Werte (global.css) schlagen.
 */

@media (min-width: 1000px) {

	body.mrc-kopf[data-header] {
		--mrc-forest: #274c4f;
		--mrc-text: #2f4a4c;
		--mrc-sek: #456a6d;
		--mrc-creme: #fbf8f2;
		--mrc-creme-2: #f6f1e8;
		--mrc-linie: rgba(39, 76, 79, 0.12);
		--mrc-koralle: #c4412d;
		--mrc-koralle-deko: #ff725e;
	}

	/* ── Kopfleiste (oben, dunkel) ────────────────────────────────────── */

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] [data-id="menu-tertiary"] > ul > li > a {
		--theme-text-transform: none;
		--theme-link-initial-color: rgba(240, 246, 246, 0.86); /* vorher 0,58 Deckkraft: zu schwach auf Forest */
		--theme-link-hover-color: #ffffff;
		--theme-font-size: 13px;
	}

	/* Social-Icons ohne Ziel (Platzhalter „#“) führen ins Leere */
	body.mrc-kopf .ct-header [data-device="desktop"] .ct-header-socials a[href="#"] {
		display: none;
	}

	/* ── Suche ───────────────────────────────────────────────────────── */

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] [data-id="search-input"] {
		--theme-form-field-height: 48px;
		--theme-form-field-border-radius: 14px;
		--theme-form-field-background-initial-color: var(--mrc-creme);
		--theme-form-field-background-focus-color: #ffffff;
		--theme-form-field-border-initial-color: rgba(39, 76, 79, 0.2);
		--theme-form-field-border-focus-color: var(--mrc-forest);
		--theme-form-text-initial-color: var(--mrc-text);
		--theme-form-text-focus-color: var(--mrc-text);
	}

	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="search-input"] input[type="search"]::placeholder {
		color: #5f7b7d;
		opacity: 1;
	}

	/* Such-Knopf als Forest-Fläche rechts im Feld */
	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="search-input"] .ct-search-form button[type="submit"] {
		--theme-button-text-initial-color: #ffffff;
		--theme-button-text-hover-color: #ffffff;
		/* Blocksy legt den Knopf als Flex-Element neben das Feld (im 2-px-Rahmen) */
		align-self: center;
		width: 40px !important;
		min-width: 40px;
		height: calc(100% - 8px) !important;
		margin: 0 4px 0 0;
		border-radius: 10px;
		background: var(--mrc-forest);
		transition: background-color 0.15s ease;
	}

	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="search-input"] .ct-search-form button[type="submit"]:hover {
		background: var(--mrc-koralle);
	}

	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="search-input"] .ct-search-results {
		border-radius: 16px;
	}

	/* ── Konto, Merkliste, Vergleich, Warenkorb: Icon mit Beschriftung ── */

	body.mrc-kopf .ct-header [data-device="desktop"] :is(.ct-account-item, .ct-header-wishlist, .ct-header-compare, .ct-cart-item) {
		display: inline-flex;
		flex-direction: column-reverse;
		align-items: center;
		gap: 5px;
		min-width: 58px;
		color: var(--mrc-forest);
	}

	body.mrc-kopf .ct-header [data-device="desktop"] :is(.ct-account-item, .ct-header-wishlist, .ct-header-compare) .ct-label {
		display: block !important;
		margin: 0 !important;
		color: var(--mrc-sek);
		text-transform: none;
		letter-spacing: 0;
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
	}

	/* Icons gleich hoch, damit die Beschriftungen auf einer Linie stehen */
	body.mrc-kopf .ct-header [data-device="desktop"] :is(.ct-account-item, .ct-header-wishlist, .ct-header-compare, .ct-cart-item) > :is(svg, .ct-icon-container) {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 22px;
		margin: 0;
	}

	body.mrc-kopf .ct-header [data-device="desktop"] .ct-cart-item::after {
		content: "Warenkorb";
		order: -1; /* in column-reverse: unter dem Icon */
		color: var(--mrc-sek);
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
	}

	body.mrc-kopf .ct-header [data-device="desktop"] :is(.ct-account-item, .ct-header-wishlist, .ct-header-compare, .ct-cart-item):hover :is(.ct-label),
	body.mrc-kopf .ct-header [data-device="desktop"] .ct-cart-item:hover::after {
		color: var(--mrc-koralle);
	}

	/* Zähler-Bubbles in Koralle statt Theme-Standard */
	body.mrc-kopf .ct-header [data-device="desktop"] :is(.ct-dynamic-count-cart, .ct-dynamic-count-wishlist, .ct-dynamic-count-compare) {
		--theme-palette-color-1: var(--mrc-koralle);
		background: var(--mrc-koralle);
		color: #fff;
	}

	/* Menü „Service“ ohne Haus-Icon (das Haus las sich wie „Startseite“) */
	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu"] > ul > li > a .ct-icon-container {
		display: none;
	}

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] [data-id="menu"] > ul > li > a {
		--theme-text-transform: none;
		--theme-font-weight: 650;
		--theme-link-initial-color: var(--mrc-forest);
		--theme-link-hover-color: var(--mrc-koralle);
		--theme-link-active-color: var(--mrc-forest); /* „Service“ verlinkt die Startseite – dort nicht rot als „aktiv“ */
	}

	/* ── Kategorie-Leiste (untere Zeile) ─────────────────────────────── */

	body.mrc-kopf .ct-header [data-device="desktop"] [data-row="bottom"] {
		border-top: 1px solid var(--mrc-linie);
		border-bottom: 1px solid var(--mrc-linie);
	}

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li > a {
		--theme-text-transform: none;
		--theme-font-weight: 650;
		--theme-link-initial-color: var(--mrc-forest);
		--theme-link-hover-color: var(--mrc-koralle);
		position: relative;
	}

	/* Unterstrich in Koralle bei Hover und auf der aktuellen Kategorie */
	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li > a::after {
		content: "";
		position: absolute;
		left: 12%;
		right: 12%;
		bottom: 0;
		height: 3px;
		border-radius: 3px 3px 0 0;
		background: var(--mrc-koralle-deko);
		transform: scaleX(0);
		transition: transform 0.18s ease;
	}

	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor, .current-product_cat-ancestor) > a::after {
		transform: scaleX(1);
	}

	/* Icons der Kategorien in Forest-2, bei Hover Koralle */
	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li > a .ct-icon-container {
		color: var(--mrc-sek);
	}

	body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li:hover > a .ct-icon-container {
		color: var(--mrc-koralle);
	}

	/* ── Aufklappmenüs (Kategorien und „Service“) als helle Karte ────── */

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] :is([data-id="menu"], [data-id="menu-secondary"]) .sub-menu {
		--dropdown-background-color: #ffffff;
		--dropdown-divider: none;
		--dropdown-width: 250px;
		--dropdown-items-spacing: 11px;
		--theme-border-radius: 16px;
		--theme-box-shadow: 0 22px 50px rgba(24, 54, 56, 0.16), 0 2px 6px rgba(24, 54, 56, 0.06);
		padding: 8px;
		border: 1px solid var(--mrc-linie);
	}

	body.mrc-kopf[data-header] .ct-header [data-device="desktop"] :is([data-id="menu"], [data-id="menu-secondary"]) .sub-menu .ct-menu-link {
		--theme-link-initial-color: var(--mrc-text);
		--theme-link-hover-color: var(--mrc-koralle);
		--theme-font-size: 14.5px;
		--theme-font-weight: 600;
		--theme-text-transform: none;
		border-radius: 10px;
		padding-inline: 12px;
		transition: background-color 0.12s ease, color 0.12s ease;
	}

	body.mrc-kopf .ct-header [data-device="desktop"] :is([data-id="menu"], [data-id="menu-secondary"]) .sub-menu li:is(:hover, :focus-within) > .ct-menu-link {
		background: var(--mrc-creme-2);
	}

	/* Untermenü der zweiten Ebene (z. B. Gartenhäuser →) mit etwas Abstand zur ersten Karte */
	body.mrc-kopf .ct-header [data-device="desktop"] :is([data-id="menu"], [data-id="menu-secondary"]) .sub-menu .sub-menu {
		margin-inline-start: 8px;
	}

	@media (prefers-reduced-motion: reduce) {
		body.mrc-kopf .ct-header [data-device="desktop"] [data-id="menu-secondary"] > ul > li > a::after,
		body.mrc-kopf .ct-header [data-device="desktop"] :is([data-id="menu"], [data-id="menu-secondary"]) .sub-menu .ct-menu-link {
			transition: none;
		}
	}
}