/*
Theme Name:   Storefront Child – eventolino
Theme URI:    https://eventolino.ch
Description:  Child-Theme von Storefront für den eventolino-Shop. Entfernt Sidebar + «Built with WooCommerce» (siehe functions.php) und überschreibt schlank Primär-/Sekundärfarbe sowie die Eckenradien. Header-/Footer-/Textfarben werden über den Customizer gesetzt.
Author:       CHW-Services GmbH
Author URI:   https://eventolino.ch
Template:     storefront
Version:      1.3.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-child
*/

/* Inter selbst gehostet (keine externe Anfrage). Dateien liegen unter
   storefront-child/fonts/ – Pfade sind relativ zu dieser style.css. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter-latin-400-normal.woff2') format('woff2'),
	     url('fonts/inter-latin-400-normal.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter-latin-500-normal.woff2') format('woff2'),
	     url('fonts/inter-latin-500-normal.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-latin-600-normal.woff2') format('woff2'),
	     url('fonts/inter-latin-600-normal.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter-latin-700-normal.woff2') format('woff2'),
	     url('fonts/inter-latin-700-normal.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/inter-latin-800-normal.woff2') format('woff2'),
	     url('fonts/inter-latin-800-normal.woff') format('woff');
}

/* ============================================================================
   Schlankes Child-CSS. Farben (Header, Footer, Text, Buttons) am besten im
   Customizer setzen – hier wird nur das festgehalten, was der Customizer NICHT
   kann: die Marken-Primär/Sekundärfarbe verbindlich + die Eckenradien.
   Storefront lädt diese Datei automatisch nach dem Eltern-CSS.
   ========================================================================== */

:root {
	--evt-primary: #1e3a8a;        /* Primär – Dunkelblau */
	--evt-primary-dark: #1e3aa8;   /* Primär Hover        */
	--evt-secondary: #0d9488;      /* Sekundär – Türkis   */
	--evt-secondary-dark: #107569; /* Sekundär Hover      */
	--evt-accent: #f59e0b;         /* Akzent – Orange     */
	--evt-navy: #172046;           /* Titel / Logo-Text   */
	--evt-text: #1e293b;           /* Fliesstext (slate)  */
	--evt-muted: #64748b;          /* Footer-Links        */
	--evt-border: #e2e8f0;         /* Linien / Rahmen     */
	--evt-radius: 14px;            /* Karten              */
	--evt-radius-btn: 8px;         /* Buttons & Eingaben  */
}

/* ── Typografie: Inter (wie Landingpage) ─────────────────────────────────────
   WICHTIG: KEIN !important auf font-family! Sonst würde Inter auch auf die
   Font-Awesome-Icons erzwungen → kaputte Symbole. Ohne !important gewinnt Inter
   beim Text (Child-CSS lädt nach dem Eltern-CSS), die Icon-Klassen behalten FA. */
body,
button,
input,
select,
textarea,
.site-title,
.widget,
p,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Sidebar deaktiviert → Inhalt über volle Breite ──────────────────────────
   (Sidebar-Ausgabe wird in functions.php per remove_action entfernt.) */
.content-area,
.woocommerce .content-area,
.woocommerce-page .content-area {
	width: 100%;
	float: none;
	margin: 0;
}
#secondary,
.widget-area {
	display: none;
}

/* ── Primärfarbe: Standard-Buttons, Links, Preise ──────────────────────────
   :not(.menu-toggle) → das Burger-Menü bleibt von der Button-Optik unberührt
   und wird über den Customizer (Header-Textfarbe) eingefärbt. */
button:not(.menu-toggle),
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link {
	background-color: var(--evt-primary) !important;
	border-color: var(--evt-primary) !important;
	color: #fff !important;
}
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.wp-block-button__link:hover {
	background-color: var(--evt-primary-dark) !important;
	border-color: var(--evt-primary-dark) !important;
}

a {
	color: var(--evt-primary);
}
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--evt-primary) !important;
}

/* ── Sekundärfarbe: «In den Warenkorb» / Kasse / alt-Buttons ─────────────── */
.button.alt,
.added_to_cart.alt,
.single_add_to_cart_button,
.checkout-button,
.wp-block-button__link.alt {
	background-color: var(--evt-secondary) !important;
	border-color: var(--evt-secondary) !important;
}
.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background-color: var(--evt-secondary-dark) !important;
	border-color: var(--evt-secondary-dark) !important;
}

/* ── Radien ──────────────────────────────────────────────────────────────── */
/* Buttons + Eingabefelder (inkl. Produktsuche) = 8px */
button:not(.menu-toggle),
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.wp-block-button__link,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select,
.input-text,
.search-field,
.select2-container--default .select2-selection--single {
	border-radius: var(--evt-radius-btn) !important;
}

/* Produktkarten = 14px */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	border-radius: var(--evt-radius) !important;
}

/* ── WooCommerce Blocks (Cart/Checkout) ──────────────────────────────────── */
/* Block-Buttons: Markenfarbe + Radius */
.wc-block-components-button {
	background-color: var(--evt-primary) !important;
	border-color: var(--evt-primary) !important;
	color: #fff !important;
	border-radius: var(--evt-radius-btn) !important;
}
.wc-block-components-button:hover {
	background-color: var(--evt-primary-dark) !important;
	border-color: var(--evt-primary-dark) !important;
}
/* «Weiter zur Kasse» in Sekundärfarbe (wie der klassische Checkout-Button) */
.wc-block-cart__submit-button {
	background-color: var(--evt-secondary) !important;
	border-color: var(--evt-secondary) !important;
}
.wc-block-cart__submit-button:hover {
	background-color: var(--evt-secondary-dark) !important;
	border-color: var(--evt-secondary-dark) !important;
}

/* Mengen-Auswahl: Container abgerundet (8px), Input + Stepper bündig clippen.
   Höhere Spezifität, damit die generischen input[number]-/button-Radien (8px)
   im Innern auf 0 zurückgesetzt werden – sonst entstünden Lücken/Kerben. */
.wc-block-components-quantity-selector {
	border-radius: var(--evt-radius-btn) !important;
	overflow: hidden;
}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	border-radius: 0 !important;
}

/* ============================================================================
   Angleichung an die Landingpage: weisser Header + heller Footer.
   (Überschreibt die Header-/Footer-Farben des Customizers – mit !important.)
   ========================================================================== */

/* ── Header: weiss, wie die Landingpage ──────────────────────────────────── */
.site-header {
	background-color: #fff !important;
	border-bottom: 1px solid var(--evt-border);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

/* ── Kompakter Header: beide Reihen niedriger ────────────────────────────────
   Storefront macht den Kopf hoch durch: Header-Padding (1.618em / 2.617em),
   1.41575em Margen unter Branding/Suche, .875em Menülink-Padding und v.a. den
   Warenkorb-Link mit 1.618em Padding. Hier alles knapp gesetzt. */
.site-header {
	padding-top: .6em !important;
	padding-bottom: .6em !important;
}
/* Reihe 1: keine Zusatz-Margen → die Höhe gibt allein das Logo vor. */
.site-header > .col-full .site-branding,
.site-header > .col-full .site-search,
.site-header > .col-full .custom-logo-link {
	margin-bottom: 0 !important;
}
/* Logo bestimmt die Höhe der oberen Reihe (kompakt halten). */
.site-header .custom-logo {
	max-height: 44px;
	width: auto;
}
/* Logo + Suche auf Desktop vertikal mittig in einer Zeile (statt top-aligned
   Floats). Unter 768px bleibt Storefronts gestapeltes Layout unangetastet. */
@media (min-width: 768px) {
	.site-header > .col-full {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
/* Reihe 2 (Menüleiste): Menülinks + Warenkorb-Link kürzer → niedrigere Leiste. */
.site-header .main-navigation ul li a {
	padding-top: .45em;
	padding-bottom: .45em;
}
.site-header-cart .cart-contents {
	padding-top: .45em !important;
	padding-bottom: .45em !important;
}
.site-header-cart {
	margin-bottom: 0 !important;
}
.site-header .site-title a,
.site-header .site-branding a,
.site-header .site-title,
.site-header .beta {
	color: var(--evt-navy) !important;
}
/* Hauptnavigation – Slate-Links, Hover Brand mit hellem Pill (wie Landing) */
.site-header .main-navigation ul li a {
	color: var(--evt-text) !important;
	font-weight: 500;
	/* Storefront gibt den Links 0 horizontalen Innenabstand (padding:.875em 0).
	   Ohne Seiten-Padding klebt das Auswahl-/Hover-Pill direkt am Text und die
	   abgerundeten Ecken (6px) wirken abgeschnitten. Seiten-Padding gibt dem
	   Hintergrund Luft, damit der Radius sauber sichtbar ist. */
	padding-left: .75em;
	padding-right: .75em;
	border-radius: 6px;
	transition: color .15s ease, background-color .15s ease;
}
/* Kleiner Abstand zwischen den Menüpunkten, damit sich die Auswahl-/Hover-Pills
   benachbarter Einträge nicht berühren (kein durchgehender Farbblock ohne
   Zwischenraum). Nur die obersten Menüebenen – Untermenü-Karten bleiben kompakt.
   Horizontal (Desktop): 3px je Seite → 6px Lücke; vertikal (Mobile): 2px. */
.site-header .main-navigation .primary-navigation > ul > li,
.site-header .main-navigation > .menu > ul > li {
	margin: 2px 3px;
}
.site-header .main-navigation ul li a:hover,
.site-header .main-navigation ul li a:focus,
.site-header .main-navigation ul li.current-menu-item > a,
.site-header .main-navigation ul li.current_page_item > a {
	color: var(--evt-primary) !important;
	background-color: #f1f5f9;
}
/* Klick-Fokus: Storefront definiert keinen Fokusstil für Menü-Links, also
   zeichnet der Browser seinen rechteckigen Standard-Fokusrahmen – der wirkt am
   abgerundeten Pill abgeschnitten. Beim Klicken entfernen wir ihn; die Auswahl
   zeigt das Pill (Hintergrund oben). Für TASTATUR-Navigation bleibt ein
   sauberer, nicht abgeschnittener Ring via :focus-visible erhalten (a11y). */
.site-header .main-navigation ul li a:focus {
	outline: none;
}
.site-header .main-navigation ul li a:focus-visible {
	outline: 2px solid var(--evt-primary);
	outline-offset: 2px;
}
/* Untermenüs als weisse Karte statt dunkel */
.site-header .main-navigation ul ul {
	background-color: #fff !important;
	border: 1px solid var(--evt-border);
	border-radius: var(--evt-radius-btn);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.site-header .main-navigation ul ul li a {
	color: var(--evt-text) !important;
}
/* Warenkorb-Link + Zähler */
.site-header-cart .cart-contents {
	color: var(--evt-navy) !important;
}
.site-header-cart .cart-contents:hover {
	color: var(--evt-primary) !important;
}
/* «2 Artikel» / Warenkorb-Zähler: schlichter schwarzer Text, kein Pill, kein Radius */
.site-header-cart .count,
.cart-contents .count {
	background-color: transparent !important;
	color: #000 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

/* Warenkorb-Dropdown (Mini-Cart) grösser + als weisse Karte ─────────────────
   Breiter, rechtsbündig. Die Karte wird als Flex-Spalte aufgebaut und auf die
   Fensterhöhe begrenzt: NUR die Produktliste scrollt, «Zwischensumme» und die
   Buttons bleiben unten fixiert und damit immer sichtbar.

   WICHTIG zur Sichtbarkeit: Storefront blendet das Dropdown NICHT per
   display:none aus, sondern parkt es per `left:-999em` ausserhalb des Bildes
   (display bleibt block) und holt es bei Hover/Fokus mit
   `.site-header-cart.focus .widget_shopping_cart { left:0 }` zurück.
   Deshalb dürfen `display`, `left`/`right` hier im Grundzustand NICHT
   überschrieben werden – sonst klebt das Dropdown dauerhaft offen.
   Layout (display:flex) + Rechtsbündigkeit stehen darum unten im .focus-Block. */
.site-header-cart .widget_shopping_cart {
	width: 380px !important;
	/* Nie breiter als das Fenster minus kleiner Rand → kann rechts nicht
	   abgeschnitten werden, wenn der Bildschirm schmaler als 380px ist. */
	max-width: calc(100vw - 1.5rem) !important;
	max-height: 80vh !important;
	flex-direction: column !important;   /* greift erst, wenn .focus display:flex setzt */
	box-sizing: border-box !important;
	background-color: #fff !important;
	border: 1px solid var(--evt-border) !important;
	border-radius: var(--evt-radius) !important;
	box-shadow: 0 12px 32px rgba(15, 23, 42, .14) !important;
	padding: 1.25em !important;
}
/* Nur im geöffneten Zustand: als Flex-Spalte anzeigen + rechtsbündig holen.
   Das Aus-/Einblenden (left:-999em ↔ left:0) bleibt bei Storefront.
   WICHTIG: Storefront öffnet das Dropdown per :hover UND .focus
   (.site-header-cart:hover|.focus .widget_shopping_cart{left:0}). Beide Fälle
   müssen hier überschrieben werden – sonst gewinnt beim reinen Maus-Hover das
   elterliche left:0 und das Menü erscheint linksbündig. */
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart {
	display: flex !important;
	left: auto !important;
	right: 0 !important;
}
/* Innerer Container füllt die Karte und gibt die Höhe an die Liste weiter. */
.site-header-cart .widget_shopping_cart .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 0;          /* erlaubt dem Kind (Liste) zu schrumpfen statt zu überlaufen */
	overflow: hidden;
	flex: 1 1 auto;
}
/* Produktliste = der einzige scrollende Bereich. max-height:none ersetzt die
   alte feste 360px-Grenze; die Fensterhöhe (80vh) regelt jetzt die Höhe. */
.site-header-cart .widget_shopping_cart .cart_list {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow-y: auto;
	margin-bottom: .75em;
}
/* Zwischensumme + Buttons: nie schrumpfen → immer sichtbar. */
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total,
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
}
.site-header-cart .widget_shopping_cart .total .amount,
.site-header-cart .widget_shopping_cart .amount {
	color: var(--evt-primary) !important;
}

/* ── Burger lesbar auf weissem Header (dunkle Striche + Text) ─────────────── */
.menu-toggle {
	border-radius: var(--evt-radius-btn) !important;   /* 8px wie die übrigen Buttons */
}
/* Kein Fokus-/Auswahlrahmen beim Antippen/Klicken des Menü-Buttons (Storefront
   setzt button:focus{outline:2px solid …}). Für die Tastatur bleibt ein
   sauberer Ring via :focus-visible (a11y). */
.menu-toggle:focus {
	outline: none !important;
}
.menu-toggle:focus-visible {
	outline: 2px solid var(--evt-primary) !important;
	outline-offset: 2px;
}
.menu-toggle,
.menu-toggle span {
	color: var(--evt-text) !important;
}
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span::before,
.menu-toggle span::after {
	background-color: var(--evt-text) !important;
}

/* ── Footer: hell/weiss wie die Landingpage ──────────────────────────────── */
.site-footer {
	background-color: #fff !important;
	color: var(--evt-muted) !important;
	border-top: 1px solid var(--evt-border);
}

/* ── Kompakter Footer: Storefront-Polster oben/unten stark kürzen ────────────
   Storefront: .site-footer{padding:1.618em 0 3.706em}, .footer-widgets
   {padding-top:4.235em}, .site-info{padding:2.617em 0}. Das ergibt sehr viel
   Leerraum. Hier knapper – die grosse Boden-Polsterung bleibt nur auf Mobile
   (≤768px) erhalten, wo die fixierte Handheld-Leiste Platz braucht. */
.site-footer {
	padding-top: 1em !important;     /* nur kleiner Abstand zur Trennlinie oben */
	padding-bottom: 1.6em !important;
}
/* Kein zusätzliches Polster über den Footer-Spalten (war 4.235em) → der
   Abstand nach oben kommt allein aus dem kleinen .site-footer padding-top. */
.site-footer .footer-widgets {
	padding-top: 0 !important;
}
/* Storefront gibt JEDEM Widget margin-bottom:3.706em (~59px). Im Footer ist das
   der grosse Leerraum unter jeder Spalte → hier auf einen kleinen Abstand
   reduzieren (greift auch, wenn mehrere Widgets in einer Spalte stehen). */
.site-footer .widget {
	margin-bottom: 1.5em !important;
}
.site-footer .site-info {
	padding-top: 1.25em !important;
	padding-bottom: 0 !important;
}
/* Mobile: Die Handheld-Leiste (Konto/Suche/Warenkorb) ist position:fixed am
   unteren Fensterrand (Höhe = 4.235em) und läge sonst auf der Copyright-Zeile.
   NUR EINE Polster-Quelle verwenden – Leistenhöhe + kleiner Abstand –, sonst
   stapeln sich zwei Abstände zu doppeltem Leerraum. .site-info bleibt hier
   ohne eigenes Boden-Polster. */
@media (max-width: 768px) {
	.site-footer {
		padding-bottom: 5em !important;   /* 4.235em Leiste + ~0.75em Luft */
	}
}
.site-footer a {
	color: var(--evt-muted) !important;
	text-decoration: none !important;   /* keine Unterstreichung */
}
.site-footer a:hover {
	color: var(--evt-primary) !important;
	text-decoration: none !important;
}
/* Footer-Widget-Titel: Navy, gleiche Schriftgrösse wie die Links,
   keine Trennlinie zwischen Titel und Links */
.site-footer .widget-title,
.site-footer .gamma,
.site-footer h1, .site-footer h2, .site-footer h3 {
	color: var(--evt-navy) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: .75em !important;
}
/* kein Einzug / Abstand vor den Footer-Links */
.site-footer .widget_nav_menu ul,
.site-footer .menu {
	margin: 0 !important;
	padding-left: 0 !important;
}
.site-footer .widget_nav_menu ul li,
.site-footer .menu li {
	padding-left: 0 !important;
	margin-left: 0 !important;
	text-indent: 0 !important;
}
.site-info {
	color: #94a3b8 !important;
	border-top: 0;          /* keine zweite Linie – .footer-widgets hat bereits eine */
	margin-top: 0;          /* kein doppelter Abstand mehr */
	padding-top: 1.5em;     /* nur ein moderater Abstand */
}

/* ── Footer-Menüs: die vorangestellten Font-Awesome-Icons entfernen ──────── */
.site-footer .widget_nav_menu ul li::before,
.site-footer .widget_links ul li::before {
	content: none !important;
	display: none !important;
}

/* ── Breadcrumb: kein Abstand danach ─────────────────────────────────────── */
.storefront-breadcrumb {
	margin-bottom: 0 !important;
}

/* ── Mobile Footer-Bar (Konto / Suche / Warenkorb) ───────────────────────────
   Weisse Leiste, Icons/Labels in der Primärfarbe (Brand), Aktiv/Hover in Orange,
   Warenkorb-Zähler als oranges Bubble. */
.storefront-handheld-footer-bar {
	background-color: #fff !important;
	border-top: 1px solid var(--evt-border) !important;
	box-shadow: 0 -2px 10px rgba(15, 23, 42, .08);
}
.storefront-handheld-footer-bar ul li {
	border-color: var(--evt-border) !important;
}
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li > a::before {
	color: var(--evt-primary) !important;
}
.storefront-handheld-footer-bar ul li.active > a,
.storefront-handheld-footer-bar ul li.active > a::before,
.storefront-handheld-footer-bar ul li > a:hover,
.storefront-handheld-footer-bar ul li > a:hover::before {
	color: var(--evt-secondary) !important;
}
/* Warenkorb-Zähler als oranges Bubble (eigene Klasse, nicht der Header-Zähler) */
.storefront-handheld-footer-bar .footer-cart-contents .count {
	background-color: var(--evt-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
}
/* aufklappendes Suchfeld in der Leiste */
.storefront-handheld-footer-bar .site-search {
	background-color: #fff !important;
	border-top: 1px solid var(--evt-border) !important;
}