/* ============================================================
   GOLDSCHMIEDE FLENSBURG — Typografie-Grundgerüst
   Einbinden: Hello-Child-Theme, z. B. als eigene Datei
   per wp_enqueue_style() geladen (nach dem Parent-Theme-Style).
   ============================================================ */


/* ============================================================
   *********** @font-face — eigene Font-Einbindung ***********
   ============================================================ */
/* Bewusst hier selbst deklariert statt über Elementors eigene 
   Font-Verwaltung: Elementor gibt @font-face nur aus, wenn eine 
   Schrift zusätzlich in einem Elementor-eigenen Typografie-Feld 
   ausgewählt wurde. Damit unsere Klassen/Variablen unabhängig davon 
   zuverlässig funktionieren, referenzieren wir die hochgeladenen 
   Dateien hier direkt. */

/* Mulish, normal — Variable Font, deckt Gewichte 200–1000 ab */
@font-face {
  font-family: 'Mulish';
  src: url('/wp-content/fonts/Mulish-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* Mulish, kursiv — Variable Font, deckt Gewichte 200–1000 ab */
@font-face {
  font-family: 'Mulish';
  src: url('/wp-content/fonts/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

/* Annie Use Your Telescope — statische Schrift, nur ein Schnitt (Regular) */
@font-face {
  font-family: 'Annie Use Your Telescope';
  src: url('/wp-content/fonts/AnnieUseYourTelescope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ---------- Schriften ---------- */
  /* Hinweis: für den Live-Betrieb selbst hosten (DSGVO), 
     hier erst mal als Platzhalter mit den Google-Fonts-Namen. */
  --font-body:   'Mulish', sans-serif;
  --font-accent: 'Annie Use Your Telescope', cursive;

  /* ---------- Farben ---------- */
  --color-text:      #282828; /* Standard-Schriftfarbe */
  --color-brand:     #217b8e; /* Petrol — einzige Marken-/Akzentfarbe (Buttons, Akzent-Überschrift etc.) */
  --color-on-brand:  #ffffff; /* Text/Icons AUF der Markenfarbe (z. B. Button-Hover) */

  /* ---------- DIE eine Stellschraube ---------- */
  /* Höher = alles wirkt luftiger/"fluffiger" (mehr Zeilenabstand 
     UND mehr Abstand zwischen den Elementen, da beides daran hängt).
     Niedriger = kompakter, dichter. 
     Start: 1.65 – bei Bedarf einfach diesen einen Wert anfassen. */
  --line-height-base: 1.15;

  /* ---------- Fluide Schriftgrößen ---------- */
  /* clamp(MIN, BEVORZUGT, MAX) — bevorzugt skaliert mit der 
     Fenstergröße (vw), MIN/MAX begrenzen nach unten/oben.
     Obergrenzen bewusst großzügig gewählt (Wunsch: größere 
     Darstellung, besonders Desktop). */
  --fs-h1:             clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
  --fs-h2:             clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  --fs-h3:             clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-p:              clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-small:          clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
  --fs-accent-h2:      clamp(2rem, 1.5rem + 2vw, 3.75rem);
  --fs-product-title:  clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem);

  /* ---------- Fluide Abstände ---------- */
  /* Auch diese skalieren mit der Fenstergröße; die Basiswerte 
     sind zusätzlich an --line-height-base gekoppelt (siehe unten 
     bei den Elementen), damit "fluffiger" wirklich überall greift. */
  --space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --space-md: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  /* Platzhalter, bis die neue Sticky-Nav fertig ist — 
     dann hier den echten Wert (Header-Höhe + etwas Luft) eintragen */
  --sticky-header-height: 80px;
}


/* ============================================================
   *********** Grundfarbe & Basis-Verhalten ***********
   ============================================================ */

body {
  color: var(--color-text);
}

/* Sanftes Scrollen beim Anker-Sprung, aber nicht für Nutzer, 
   die reduzierte Bewegung eingestellt haben */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Gilt für alle Sprungziele (z. B. Überschriften über jedem Loop-Abschnitt),
   damit sie nicht unter dem Sticky-Header verschwinden */
[id] {
  scroll-margin-top: var(--sticky-header-height);
}


/* ============================================================
   *********** Fließtext & Basiselemente ***********
   ============================================================ */

p,
li,
blockquote {
  font-family: var(--font-body);
}

p {
  font-size: var(--fs-p);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-sm);
}

/* Kleinere Variante für Fußnoten, Bildunterschriften, Meta-Angaben.
   Klasse manuell vergeben: <p class="small">…</p> */
p.small {
  font-size: var(--fs-small);
  /* etwas engerer Zeilenabstand als normaler Fließtext,
     bleibt aber an die Basis-Variable gekoppelt */
  line-height: calc(var(--line-height-base) * 0.9);
  margin: 0 0 var(--space-xs);
}

li {
  font-size: var(--fs-p);
  /* Listenpunkte etwas enger als Fließabsätze, 
     wirkt sonst schnell zu ausgefranst */
  line-height: calc(var(--line-height-base) * 0.95);
  margin-bottom: var(--space-xs);
}

blockquote {
  font-size: var(--fs-p);
  font-style: italic;
  line-height: var(--line-height-base);
  margin: var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-brand);
}


/* ============================================================
   *********** Überschriften ***********
   ============================================================ */
/* Überschriften bekommen bewusst einen engeren Zeilenabstand als 
   Fließtext (typografisch üblich), bleiben aber relativ zur 
   selben Basis-Variable — ändert sich --line-height-base, 
   verschieben sich Überschriften und Fließtext im selben Verhältnis. */

/* Hinweis: "body" vorangestellt, nicht nur Stil-Kosmetik — WooCommerce 
   liefert ein eigenes reset.css mit "h1, h2, h3 {...}" (gleiche 
   Spezifität wie ein einfacher Element-Selektor). Bei Ladereihenfolge-
   Pech gewinnt sonst WooCommerce. "body h1" hat höhere Spezifität und 
   gewinnt unabhängig von der Reihenfolge im <head>. */

body h1, body h2, body h3 {
  font-family: var(--font-body);
  font-weight: 800; /* Mulish hat kräftige Schnitte, ruhig nutzen */
  margin: 0 0 var(--space-md);
}

body h1 {
  font-size: var(--fs-h1);
  line-height: calc(var(--line-height-base) * 0.8);
}

body h2 {
  font-size: var(--fs-h2);
  line-height: calc(var(--line-height-base) * 0.85);
}

body h3 {
  font-size: var(--fs-h3);
  line-height: calc(var(--line-height-base) * 0.9);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   *********** Akzent-Überschrift (h2) ***********
   ============================================================ */
/* Klasse manuell auf das Heading-WIDGET setzen (Erweitert > CSS-Klassen: 
   heading-accent) — Elementor hängt die Klasse an den Wrapper-<div>, 
   nicht an das <h2> selbst, daher hier verschachtelt ansprechen. */

.heading-accent .elementor-heading-title {
  font-family: var(--font-accent);
  font-weight: 400; /* Skript-Schriften haben meist nur einen Schnitt */
  font-size: var(--fs-accent-h2);
  color: var(--color-brand);
  /* Skript-/Handschrift-Schriften brauchen i. d. R. etwas MEHR 
     Zeilenhöhe als gewohnt, da Ober-/Unterlängen sich sonst 
     leicht überlappen — daher hier *1.0 statt *0.85 wie oben */
  line-height: var(--line-height-base);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   *********** Produkt-Klassen ***********
   ============================================================ */

.product-card-title {
  font-family: var(--font-body);
  font-size: var(--fs-product-title);
  font-weight: 700;
  line-height: calc(var(--line-height-base) * 0.95);
  margin: var(--space-xs) 0 0; /* Abstand zum Bild, unten übernimmt der Grid-Gap */
}


/* ======================================================================
   *********** Anker-Navigation (Pill-Buttons über den Loops) ***********
   ====================================================================== */

/* Container um die Anker-Links. 
   role + aria-label kommen per Elementor "Benutzerdefinierte Attribute" 
   auf denselben Container — kein zusätzliches HTML-Widget nötig:
   role|navigation
   aria-label|Schmuck-Kategorien */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* Einzelner Anker-Link (z. B. Elementor Button-Widget, ohne eigene Klasse — 
   der Selektor unten trifft automatisch jeden Link innerhalb von .anchor-nav),
   optisch als Pill-Button. Farben jetzt über echte Variablen statt 
   currentColor, damit Text beim Hover sichtbar bleibt (siehe unten). */
.anchor-nav a,
.anchor-nav a:visited {
  font-family: var(--font-body);
  font-size: var(--fs-p);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-brand);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  border: 2px solid var(--color-brand);
  background-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}

.anchor-nav a:hover,
.anchor-nav a:focus-visible,
.anchor-nav a:visited:hover,
.anchor-nav a:visited:focus-visible {
  background-color: var(--color-brand);
  color: var(--color-on-brand);
}

/* ============================================================
   *********** Loop-Abschnitte ***********
   ============================================================ */

/* ".elementor-element" davor kombiniert — Elementor generiert für 
   jedes Element eine eigene Regel wie ".elementor-element.elementor-
   element-xxxxxx { padding: ...; margin: ...; }" (zwei Klassen, hohe 
   Spezifität). Unsere Klasse allein würde dagegen verlieren. */

body .elementor-element.loop-section {
  border-top: 1px solid #ccc;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.elementor-widget-loop-grid .elementor-grid {
  --grid-row-gap: var(--space-lg);
  --grid-column-gap: var(--space-lg);
}

/* ============================================================
   ************************ WOOCommerce ***********************
   ============================================================ */

/* SKU Anpassen */
.product_meta .posted_in,   /* "Kategorie:" */
.product_meta .tagged_as {  /* "Schlagwörter:" */
  display: none;
}

.product_meta .sku_wrapper {
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

/* ************************ Upsell Products *********************** */

/* ============================================================
   *********** Upsell-Widget (native WooCommerce-Struktur) ***********
   ============================================================ */
/* Kein eigenes CSS-Klassen-Feld nötig — die generische ".product"-Klasse 
   (nativ bei WooCommerce-Loops UND bei Elementors eigenem Loop-Grid) 
   deckt Upsells, Themen-Abschnitte und Hauptloop gleichermaßen ab. */

body .product .woocommerce-loop-product__title,
.product-card-title {
  font-family: var(--font-body);
  font-size: var(--fs-product-title);
  font-weight: 700;
  line-height: calc(var(--line-height-base) * 0.95);
  color: var(--color-text); /* überschreibt die geerbte (rote) Link-Farbe */
}

body .product .price {
  font-family: var(--font-body);
  font-size: var(--fs-p);
  color: var(--color-brand);
}

body .product .button,
body .product .elementor-button {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-on-brand);
  background-color: var(--color-brand);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-sm);
  text-align: center;
  transition: background-color .2s ease, opacity .2s ease;
}

body .product .button:hover,
body .product .button:focus-visible,
body .product .elementor-button:hover,
body .product .elementor-button:focus-visible {
  opacity: 0.85;
  color: var(--color-on-brand);
}

/* Das Shortcode-Widget selbst sitzt als Kind in einem Flexbox-
   Container (Elementor) — Flex-Kinder wachsen dort standardmäßig 
   NICHT automatisch auf die volle Breite, sondern schrumpfen auf ihre 
   reine Inhaltsgröße. Das zwingt das Widget explizit zur vollen Breite. */
body .elementor-shortcode {
  flex-grow: 1;
  width: 100%;
}

body .woocommerce ul.products {
  display: grid;
  gap: var(--space-lg);
}

/* Spaltenzahl folgt der Klasse, die WooCommerce/der Shortcode selbst 
   anhand des "columns"-Parameters vergibt — kein fester Wert mehr. */
body .woocommerce ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
body .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
body .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
body .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* WooCommerce fügt hier traditionell ein unsichtbares Clearfix-Element 
   ein (für das alte Float-Layout gedacht). Seit dem Umstieg auf Grid 
   zählt das als eigenes Grid-Item und besetzt die erste Zelle — 
   deshalb hier komplett entfernen. */
body .woocommerce ul.products::before,
body .woocommerce ul.products::after {
  content: none;
  display: none;
}

body .woocommerce ul.products.columns-1 li.product,
body .woocommerce ul.products.columns-2 li.product,
body .woocommerce ul.products.columns-3 li.product,
body .woocommerce ul.products.columns-4 li.product,
body .woocommerce ul.products.columns-5 li.product,
body .woocommerce ul.products.columns-6 li.product {
  float: none;
  width: auto;
  margin: 0;
}

body .product,
body .woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

/* Bilder haben feste width/height-HTML-Attribute (300x300) — ohne 
   diese Regel bleibt das Bild immer bei 300px, egal wie breit die 
   Spalte tatsächlich ist (z. B. bei 3 statt 4 Spalten). */
body .product img,
body .woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  display: block;
}

body .product .elementor-widget-wc-add-to-cart,
body .woocommerce ul.products li.product > .button {
  margin-top: auto;
  align-self: flex-start;
}

/* ============================================================
   *********** Preisfarbe — zentral für alle Kontexte ***********
   ============================================================ */
/* Deckt Upsell-Widget, Produktseiten-Preis und Loop-Vorschau in 
   einem Rutsch ab, da alle drei intern ".price" bzw. den inneren 
   ".woocommerce-Price-amount"-Span nutzen. "body" vorangestellt 
   für ausreichend Spezifität gegen Theme-/Elementor-Widget-Defaults. */

body .price,
body .price .woocommerce-Price-amount,
body .elementor-element .woocommerce-Price-amount {
  color: var(--color-brand);
}


/* ============================================================
   *********** Mega-Menü Hero (Kategorie-Intro) ***********
   ============================================================ */

.mega-menu-hero img {
  width: 65%;
  height: auto;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

.mega-menu-hero-titel {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.mega-menu-hero-text {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--line-height-base);
  color: var(--color-text);
}


/* ============================================================
   *********** Mega-Menü Navigation ***********
   ============================================================ */
/* Elementor Pros Nav-Menu-Widget bringt eigene, feste Klassen mit 
   (e-n-menu-*), die wir direkt ansprechen — kein eigenes CSS-Klassen-
   Feld nötig. */

.e-n-menu-title-text {
  font-family: var(--font-body);
  font-weight: 700;
}

/* "body" davor ist hier kein Stil, sondern Taktik: unsere Selektoren 
   matchen Elementors eigene Ketten 1:1 (gleiche Spezifität) — bei 
   Gleichstand gewinnt aber offenbar Elementors Regel, weil sie in 
   diesem Fall SPÄTER im Dokument steht als unsere Datei. "body" gibt 
   uns einen zusätzlichen Element-Selektor und damit den Tiebreaker, 
   unabhängig von der Ladereihenfolge. */
/* Faktor statt fixer Variable — einfach diese eine Zahl anpassen, 
   um die Menü-Schriftgröße relativ zum normalen Fließtext zu justieren. 
   1.0 = genauso groß wie Fließtext, höher = größer. */
body .elementor-widget-n-menu .e-n-menu-title-text {
  font-size: calc(var(--fs-p) * 1.2);
}

body .elementor-widget-n-menu .e-n-menu-title:not(.e-current):not(:hover) .e-n-menu-title-container .e-n-menu-title-text {
  color: var(--color-text);
}

/* ".e-current" ist Elementors eigene Klasse für den aktuell aktiven 
   Menüpunkt (z. B. wenn man auf einer Anhänger-Seite steht) */
.e-n-menu-item.e-current .e-n-menu-title-text {
  color: var(--color-brand);
}

/* Alle Links innerhalb des Dropdowns (Stile-Spalte, Themen-Spalte) — 
   bewusst breit gefasst, da diese Spalten mit unterschiedlichen 
   Widgets gebaut sein können */
.e-n-menu-content a {
  font-family: var(--font-body);
  font-size: var(--fs-p);
  color: var(--color-text);
  text-decoration: none;
}

.e-n-menu-content a:hover,
.e-n-menu-content a:focus-visible {
  color: var(--color-brand);
}


/* ============================================================
   *********** ENDE Typografie-Grundgerüst ***********
   ============================================================ */

.menu-count {
  font-size: var(--fs-small);
  opacity: 0.6;
}