/* =============================================================
   freyra.ch – Haupt-CSS
   ============================================================= */

/* -------------------------------------------------------------
   1. HEADER-TRANSITION (immer aktiv)
   ------------------------------------------------------------- */
#masthead {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.25s ease;
}

/* Nav-Links und Logo auf Hero-Seiten: Farbe und Filter synchron mit Hintergrund übergehen */
body.freyra-transparent-header #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a,
body.freyra-transparent-header #masthead .secondary-navigation .secondary-menu-container > ul > li.menu-item > a {
	transition: color 0.3s ease;
}
body.freyra-transparent-header #masthead .site-branding a.brand img,
body.freyra-transparent-header #masthead .site-branding a.brand svg {
	transition: filter 0.3s ease;
}

/* -------------------------------------------------------------
   2. TRANSPARENTER HEADER (nur wenn body.freyra-transparent-header
      UND noch NICHT gescrollt, d.h. transparent-header noch aktiv)

   Problem: Kadence setzt #masthead auf position:absolute → Header
   scrollt mit der Seite weg. Außerdem macht Kadence bei jeder
   Scroll-Bewegung (scrollY > 0) die inner Row weiß via .item-is-fixed.

   Lösung: #masthead in der transparenten Phase auf fixed halten und
   Kadence's .item-is-fixed background-Override unterdrücken.
   ------------------------------------------------------------- */

/* Header auf Hero-Seiten immer fixed halten –
   verhindert den Positions-Sprung beim Übergang von unserer transparenten Phase
   zu Kadence's eigenem Sticky-Modus */
body.freyra-transparent-header #masthead {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100;
}

/* Box-Shadow nur im nicht-transparenten Zustand */
body.freyra-transparent-header:not(.header-scrolled) #masthead {
	box-shadow: none !important;
}

/* Kadence's .item-is-fixed macht innere Container weiß – unterdrücken
   (gilt auch während der Einblendphase, damit nur der Masthead-Hintergrund sichtbar ist) */
body.freyra-transparent-header:not(.header-scrolled) #masthead .site-header-row-container-inner,
body.freyra-header-fading #masthead .site-header-row-container-inner {
	background: transparent !important;
}

/* Logo immer in Originalfarbe (kein Weiß-Filter) */

/* --- Site-Titel & Tagline weiß --- */
body.freyra-transparent-header:not(.header-scrolled) #masthead .site-title,
body.freyra-transparent-header:not(.header-scrolled) #masthead .site-title a,
body.freyra-transparent-header:not(.header-scrolled) #masthead .site-description {
	color: #ffffff !important;
}

/* --- Primäre Nav-Links weiß --- */
body.freyra-transparent-header:not(.header-scrolled) #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: #ffffff !important;
}
body.freyra-transparent-header:not(.header-scrolled) #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
body.freyra-transparent-header:not(.header-scrolled) #masthead .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: rgba(255, 255, 255, 0.80) !important;
}

/* --- Secondary Nav-Links weiß --- */
body.freyra-transparent-header:not(.header-scrolled) #masthead .secondary-navigation .secondary-menu-container > ul > li.menu-item > a {
	color: #ffffff !important;
}
body.freyra-transparent-header:not(.header-scrolled) #masthead .secondary-navigation .secondary-menu-container > ul > li.menu-item > a:hover,
body.freyra-transparent-header:not(.header-scrolled) #masthead .secondary-navigation .secondary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: rgba(255, 255, 255, 0.80) !important;
}

/* --- Dropdown-Pfeile weiß --- */
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-navigation .dropdown-arrow,
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-navigation .dropdown-arrow svg,
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-navigation .nav-drop-icon svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* --- Cart, Suche, Hamburger weiß --- */
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-cart-wrap a,
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-cart-wrap svg,
body.freyra-transparent-header:not(.header-scrolled) #masthead .cart-count,
body.freyra-transparent-header:not(.header-scrolled) #masthead .header-search-open-btn svg,
body.freyra-transparent-header:not(.header-scrolled) #masthead .menu-toggle-open,
body.freyra-transparent-header:not(.header-scrolled) #masthead .menu-toggle-open svg {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
	background-color: transparent !important;
}

/* -------------------------------------------------------------
   3. GESCROLLTER / STICKY-ZUSTAND
   JS entfernt transparent-header/mobile-transparent-header →
   Kadence's eigene Sticky-Styles und Customizer-Farben greifen.
   Wir stellen nur sicher, dass das Logo wieder normal angezeigt wird
   und der Sticky-Header einen dezenten Schatten bekommt.
   ------------------------------------------------------------- */


/* Dezenter Schatten wenn Header sticky ist (Kadence setzt header-is-fixed auf body) */
body.header-is-fixed #masthead {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------
   4. HERO-SEKTION
   ------------------------------------------------------------- */
.freyra-hero {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: #1a1a2e;
}

.freyra-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.40) 0%,
		rgba(0, 0, 0, 0.15) 45%,
		rgba(0, 0, 0, 0.45) 100%
	);
	z-index: 1;
}

.freyra-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #ffffff;
	padding: 2rem 1.5rem;
	max-width: 860px;
	width: 100%;
}

.freyra-hero-content h1,
.freyra-hero-content .hero-title {
	font-size: clamp(2.2rem, 6vw, 4.8rem);
	line-height: 1.1;
	color: #ffffff !important;
	margin-bottom: 1.25rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
	font-weight: 700;
}

.freyra-hero-content .hero-subtitle {
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 2.5rem;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.freyra-hero-content .hero-cta {
	display: inline-block;
	padding: 0.9rem 2.5rem;
	background: #ffffff;
	color: #1a1a1a !important;
	text-decoration: none !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
	border: 2px solid transparent;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.freyra-hero-content .hero-cta:hover {
	background: transparent;
	color: #ffffff !important;
	border-color: #ffffff;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------
   5. SEITEN-INHALT UNTERHALB DES HEROES
   ------------------------------------------------------------- */
.freyra-page-content {
	position: relative;
	z-index: 2;
	background: #ffffff;
}

/* -------------------------------------------------------------
   6. SPRACHUMSCHALTER
   ------------------------------------------------------------- */
.freyra-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-left: 1rem;
}

.freyra-lang-link {
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.freyra-lang-link:hover,
.freyra-lang-link.freyra-lang-active {
	opacity: 1;
	text-decoration: none;
}

.freyra-lang-sep {
	opacity: 0.35;
}

/* Im transparenten Zustand: Sprachumschalter weiß */
body.freyra-transparent-header:not(.header-scrolled) .freyra-lang-switcher .freyra-lang-link {
	color: #ffffff;
}

/* -------------------------------------------------------------
   7. MOBILE-DRAWER – Secondary-Nav + Sprachumschalter
   ------------------------------------------------------------- */

/* Container für den sekundären Bereich unterhalb der Hauptnavigation */
.freyra-mobile-secondary-nav {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-top: 0.5rem;
	padding-top: 0.25rem;
}

.freyra-mobile-secondary-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Sekundäre Items im Mobile-Drawer (Mein Konto, Kasse, Warenkorb) */
.freyra-mobile-secondary-item > a {
	display: block;
	padding: 0.75em 1.4em;
	color: var(--global-palette8, #1A202C);
	text-decoration: none;
	font-size: 14px;
	opacity: 0.8;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: opacity 0.2s ease;
}
.freyra-mobile-secondary-item > a:hover {
	opacity: 1;
	color: var(--global-palette-highlight, #9d295d);
}

/* Sprachumschalter im Mobile-Drawer */
.freyra-lang-switcher--mobile {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	margin-left: 0;
	padding: 0.75rem 1.4rem;
	gap: 0.4rem;
	font-size: 0.8rem;
	border-bottom: none;
}

.freyra-lang-switcher--mobile .freyra-lang-link {
	color: var(--global-palette8, #1A202C);
	opacity: 0.55;
}
.freyra-lang-switcher--mobile .freyra-lang-link:hover,
.freyra-lang-switcher--mobile .freyra-lang-link.freyra-lang-active {
	opacity: 1;
}

/* Im transparenten Header: Mobile-Drawer hat immer hellen Hintergrund → kein Weiß-Override */
body.freyra-transparent-header:not(.header-scrolled)
.freyra-lang-switcher--mobile .freyra-lang-link {
	color: var(--global-palette8, #1A202C);
}

/* -------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 768px) {
	.freyra-hero {
		min-height: 35vh;
	}
	.freyra-hero-content {
		padding: 1.5rem 1rem;
	}
}