/* ==========================================================================
   Hey Nature – Mega-Menüs "Ratgeber" und "Shop"
   (template-parts/mega-menu/*.php, gerendert in Woodmarts .wd-dropdown-menu)

   Maße und Typografie 1:1 aus dem Shopify-Store gemessen (Theme Dawn, component-mega-menu.css):
   weißer Kasten direkt unter dem Header, Innenabstand 30px, unten 1px Linie + weicher Schatten,
   Inhalt so breit wie der Seiteninhalt (Woodmart-Container).
   Ratgeber: Spalten 20 % / 60 % / 20 %, Titel Lato 18px/700 #494949, Links 14px/18px,
             Karten 2:1 mit 10px Radius, Abstand 20px.
   Shop:     linke Liste 20 %, 4 Spalten mit 20px Abstand; jeder Punkt 40px hoch,
             Bild 40 × 40px, Text Lato 14px/700 #3a3a3a, Abstand 15px.
   Selektoren mit ".hn-mega"-Präfix, damit Elementor-Kit-Regeln nicht durchschlagen.
   ========================================================================== */

.wd-dropdown-menu.hn-mega-dropdown {
	--wd-dropdown-padding: 30px;
	--wd-dropdown-shadow: 0 4px 5px rgba(18, 18, 18, 0.05);
	border: 0;
	border-top: 1px solid rgba(111, 184, 167, 0.08); /* Linie unter dem Header bleibt sichtbar */
	border-bottom: 1px solid rgba(111, 184, 167, 0.1);
	border-radius: 0;
	background-color: #fff;
	padding-top: 29px !important; /* 1px Linie + 29px = Inhalt beginnt wie im Store 30px unter dem Header */
	/* Volle Breite ohne Woodmarts JS-Berechnung: Bezugspunkt ist die Header-Zeile (siehe unten),
	   dadurch sitzt das Dropdown immer exakt über die Fensterbreite – auch während der Header
	   beim Scrollen kleiner wird. Woodmart schreibt zwar weiterhin ein "left" in den Inline-Style,
	   die Regeln hier haben durch "!important" aber Vorrang. */
	top: 100% !important;
	right: 0 !important;
	left: 0 !important;
	width: auto !important;
}

/* Bezugspunkt für das Dropdown ist die ganze Header-Zeile statt des Menüpunkts.
   Sonst müsste der seitliche Versatz – wie bei Woodmart – per JavaScript nachgerechnet werden,
   was beim Umschalten auf den kompakten Header schiefgeht (das Dropdown sitzt dann verschoben). */
.whb-hn_header .whb-general-header { position: relative; }
.whb-hn_header .wd-nav-main > li.hn-has-mega,
.whb-hn_header .wd-nav-main > li:has(> .hn-mega-dropdown) { position: static; }

/* Breite exakt wie der übrige Seiteninhalt (Woodmart-Container 1222px / 15px Innenabstand).
   Der Store nutzt 1320px/50px, der Seiteninhalt hier aber nicht – mit den Store-Werten standen
   Logo und Footer 14px weiter links als der Inhalt dazwischen. */
.wd-dropdown-menu.hn-mega-dropdown > .container {
	max-width: var(--wd-container-w, 1222px);
	padding-right: 15px;
	padding-left: 15px;
}

.hn-mega {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	color: #494949;
	font-family: "HN Lato", Lato, sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
}

.hn-mega .hn-mega__title {
	margin: 0;
	color: #494949;
	font-family: "HN Lato", Lato, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

/* Ratgeber ------------------------------------------------------------------ */
.hn-mega--ratgeber .hn-mega__intro { width: 20%; }
.hn-mega--ratgeber .hn-mega__topics { width: 60%; padding: 0 50px; }
.hn-mega--ratgeber .hn-mega__faq { width: 20%; }

.hn-mega .hn-mega__text { margin: 26px 0 10px; color: #494949; font-size: 14px; font-weight: 400; line-height: 18px; }

.hn-mega .hn-mega__avatars { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hn-mega .hn-mega__avatar,
.hn-mega .hn-mega__avatars img { display: block; width: 28px; height: 28px; max-width: 28px; border-radius: 50%; object-fit: cover; }

.hn-mega .hn-mega__topics .hn-mega__title { margin-bottom: 26px; }

.hn-mega .hn-mega__cards { display: flex; flex-wrap: wrap; gap: 20px; }
.hn-mega .hn-mega__card { width: calc(33.33% - 20px * 2 / 3); }

.hn-mega .hn-mega__card-media {
	position: relative;
	display: block;
	overflow: hidden;
	padding-bottom: 50%;
	border-radius: 10px;
	background: #475a54;
}
.hn-mega .hn-mega__card-media img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 10px;
	object-fit: cover;
}

/* Titel über dem Bild (im Store ist er Teil der Bilddatei) */
.hn-mega .hn-mega__card-media--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(71, 90, 84, 0.97) 0%, rgba(71, 90, 84, 0.9) 38%, rgba(71, 90, 84, 0.1) 100%);
}
.hn-mega .hn-mega__card-title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 8% 0 8%;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(18px, 1.75vw, 24px);
	font-style: italic;
	font-weight: 700;
	line-height: 1.2;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: anywhere;
}

.hn-mega .hn-mega__links { margin: 25px 0 0; padding: 0; list-style: none; }
.hn-mega .hn-mega__links li { margin: 0 0 15px; padding: 0; font-size: 14px; line-height: 18px; }
.hn-mega .hn-mega__links a,
.hn-mega .hn-mega__links span { color: #494949; font-size: 14px; font-weight: 400; line-height: 18px; text-decoration: none; }
.hn-mega .hn-mega__links a:hover { color: #465952; }

/* Wichtige FAQs: Titel und Links sind im Store gleich groß (14px/700), jede Zeile 28,8px hoch */
.hn-mega .hn-mega__title--small { margin-bottom: 15px; padding: 6px 0 4.8px; color: #3a3a3a; font-size: 14px; line-height: 18px; }
.hn-mega .hn-mega__links--bold { margin-top: 0; }
.hn-mega .hn-mega__links--bold li { margin-bottom: 0; padding: 6px 0 4.8px; line-height: 18px; }
.hn-mega .hn-mega__links--bold a,
.hn-mega .hn-mega__links--bold span { display: block; color: #3a3a3a; font-weight: 700; line-height: 18px; }

/* Shop ---------------------------------------------------------------------- */
.hn-mega--shop .hn-shop__intro { width: 20%; margin: 0; padding: 0 20px 0 0; list-style: none; }
.hn-mega--shop .hn-shop__intro > li { display: flex; flex-wrap: wrap; align-items: center; min-height: 40px; margin: 0 0 15px; padding: 0; line-height: 0; }
.hn-mega--shop .hn-shop__intro > li:last-child { margin-bottom: 0; }
.hn-mega--shop .hn-shop__intro > li.hn-shop__text { color: #494949; font-size: 14px; font-weight: 400; line-height: 18px; }

.hn-mega--shop .hn-shop__cols { display: flex; flex-wrap: wrap; gap: 20px; width: 80%; }
.hn-mega--shop .hn-shop__cols--full { width: 100%; }
.hn-mega--shop .hn-shop__col { width: calc(25% - 15px); }

.hn-mega--shop .hn-shop__list { margin: 0; padding: 0; list-style: none; }
.hn-mega--shop .hn-shop__list > li { display: block; margin: 0 0 15px; padding: 0; line-height: 0; }

/* ein Punkt: Bild 40 × 40px + Text, mindestens 40px hoch */
.hn-mega--shop .hn-shop__item {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 40px;
	padding: 0;
	color: #3a3a3a;
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	text-decoration: none;
}
.hn-mega--shop .hn-shop__item > span { color: #3a3a3a; font-size: 14px; font-weight: 700; line-height: 18px; transition: color 0.2s ease; }
.hn-mega--shop a.hn-shop__item:hover > span { color: #465952; }
.hn-mega--shop .hn-shop__item img { display: block; flex: 0 0 40px; width: 40px; height: 40px; max-width: 40px; object-fit: contain; }

/* Schmalere Desktops -------------------------------------------------------- */
@media (max-width: 1200px) {
	.hn-mega--ratgeber .hn-mega__topics { padding: 0 30px; }
	.hn-mega--shop .hn-shop__item { gap: 12px; }
}