/*---------------------------------------------------------------------------------

 Theme Name:   Divi Child Theme
 Theme URI:    
 Description:  Child Theme
 Author:       
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*
Theme Name: Divi Child
Template: Divi
Version: 1.0
Description: Child Theme für Divi mit lokal gehosteten Google Fonts und Mobile-Fixes
Author: Dein Name
*/

@import url("../Divi/style.css");

/* 🔹 LOKAL GEHOSTETE GOOGLE FONTS 🔹 */

/* Baskervville Regular */
@font-face {
  font-display: swap;
  font-family: 'Baskervville';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/baskervville-v16-latin-regular.woff') format('woff');
}

/* Karla in verschiedenen Schriftstärken (nur WOFF) */
@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200;
  src: url('/wp-content/uploads/fonts/karla-v31-latin-200.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  src: url('/wp-content/uploads/fonts/karla-v31-latin-300.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/uploads/fonts/karla-v31-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  src: url('/wp-content/uploads/fonts/karla-v31-latin-500.woff') format('woff');
}

/* 🔹 STANDARD-SCHRIFT FÜR DIE WEBSITE FESTLEGEN 🔹 */
body {
  font-family: 'Karla', sans-serif;
}

/* 🔹 MOBILE & TABLET SPALTENANPASSUNGEN 🔹 */

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
    .two-col-mob .et_pb_column {
        width: 47.25% !important;
    }
    .two-col-mob .et_pb_column:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
    .two-col-mob .et_pb_column:not(:nth-child(2n)) {
        margin-right: 5.5% !important;
    }
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
    .three-col-mob .et_pb_column {
        width: 29.6667% !important;
    }
    .three-col-mob .et_pb_column:nth-last-child(-n+3) {
        margin-bottom: 0;
    }
    .three-col-mob .et_pb_column:not(:nth-child(3n)) {
        margin-right: 5.5% !important;
    }
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
    .four-col-mob .et_pb_column {
        width: 20.875% !important;
    }
    .four-col-mob .et_pb_column:nth-last-child(-n+4) {
        margin-bottom: 0;
    }
    .four-col-mob .et_pb_column:not(:nth-child(4n)) {
        margin-right: 5.5% !important;
    }
}

/* Tablet Anpassungen */
@media all and (min-width: 768px) and (max-width: 980px) {
    .one-col-tab .et_pb_column {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .two-col-tab .et_pb_column {
        width: 47.25% !important;
    }
    .three-col-tab .et_pb_column {
        width: 29.6667% !important;
    }
    .four-col-tab .et_pb_column {
        width: 20.875% !important;
    }
}

/* 🔹 FLEXBOX FÜR MOBILE ANZEIGE 🔹 */
@media all and (max-width: 980px) {
    .custom_row {
        display: flex;
        flex-wrap: wrap;
    }
    .first-on-mobile { order: 1; }
    .second-on-mobile { order: 2; }
    .third-on-mobile { order: 3; }
    .fourth-on-mobile { order: 4; }
}

/* 🔹 ANPASSUNGEN WP TASTY RECIPE 🔹 1. Hintergrund & Rahmen für das Rezept-Feld🔹 */

.tasty-recipes {
  background: #faf7f3; /* Weicher Creme-Ton */
  border: 2px solid #f4a261; /* Warme Orange-Töne */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* 🔹 ANPASSUNGEN WP TASTY RECIPE 🔹 2. Rezepttitel größer & eleganter machen*/

.tasty-recipes-title {
  font-family: 'Baskervville', serif;
  font-size: 28px;
  color: #333;
  text-align: center;
  text-transform: uppercase;
}

/* 🔹 ANPASSUNGEN WP TASTY RECIPE 🔹 3. Call-to-Action Buttons stylen*/
.tasty-recipes-buttons a {
  background: #061c2e !important; /* Dunkelblauer Hintergrund */
  color: #faf7f3 !important; /* Helle Schriftfarbe */
  font-family: 'Karla', sans-serif !important; /* Karla als Schriftart */
  font-weight: 300 !important; /* Karla Light */
  padding: 12px 24px !important; /* Etwas mehr Platz für schöneres Design */
  border-radius: 999px !important; /* Maximale Rundung für pillenförmige Buttons */
  text-transform: uppercase;
  transition: 0.3s ease-in-out;
  display: inline-block; /* Falls es sich nicht korrekt darstellt */
  text-align: center;
}

/* 🔹 Hover-Effekt: Hintergrund wird hell, Schrift dunkel */
.tasty-recipes-buttons a:hover {
  background: #f1dcd0 !important; /* Heller Hintergrund */
  color: #061c2e !important; /* Dunkelblaue Schrift */
  transform: scale(1.05);
}

/* Entfernt Kursivschrift aus allen Elementen in WP Tasty Recipe */
.tasty-recipes em,
.tasty-recipes i,
.tasty-recipes-label {
  font-style: normal !important;
}

/* Falls WP Tasty bestimmte Labels trotzdem kursiv macht */
.tasty-recipes-label em,
.tasty-recipes-label i {
  font-style: normal !important;
}

/* 🔹 Versteckt nur das Zutaten-Kopieren-Icon*/
.tasty-recipes-entry-content .tasty-recipes-copy-button {
  display: none !important;
}

/* 🔹 Standard-Schriftart für alles außer dem Titel */
.tasty-recipes {
  font-family: 'Karla', sans-serif !important;
  font-weight: 300 !important; /* Karla Light */
  color: #061C2E !important; /* Dunkelblau */
}

/* 🔹 Rezepttitel bleibt in Baskervville */
.tasty-recipes-title {
  font-family: 'Baskervville', serif !important;
  font-size: 28px !important;
  color: #333 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* 🔹 Ingredients- & Instructions-Überschriften in Baskerville & größer */
.tasty-recipes-instructions-header,
.tasty-recipes-ingredients-header {
  font-family: 'Baskervville', serif !important; /* Ändert die Schriftart */
  font-size: 2em !important; /* Macht es dreimal so groß */
  font-weight: 400 !important; /* Standardgewicht von Baskerville */
  color: #061C2E !important; /* Dunkelblau für Konsistenz */
  text-align: left !important; /* Zentriert die Überschrift */
  margin-bottom: 1px !important; /* Etwas Abstand nach unten */
}


/* 🔹 Labels "UNITS" & "SCALE" in Karla Light & dunkelblau */
.tasty-recipes-convert-label,
.tasty-recipes-scale-label {
  font-family: 'Karla', sans-serif !important;
  font-weight: 300 !important; /* Karla Light */
  color: #061C2E !important; /* Dunkelblau */
}

/* 🔹 Einheitliche Größe für alle Buttons (Units & Scale) */
.tasty-recipes-convert-button,
.tasty-recipes-scale-button,
.tasty-recipes-convert-button-active,
.tasty-recipes-scale-button-active {
  width: 30px !important;  /* Einheitliche Breite */
  height: 30px !important; /* Einheitliche Höhe (quadratisch) */
  font-size: 0.5em !important; /* Einheitliche Schriftgröße */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important; /* Leicht abgerundete Ecken */
}

/* 🔹 Aktiver Unit- & Scale-Button (z. B. "M", "US", "1x", "2x", "3x") */
.tasty-recipes-convert-button.tasty-recipes-convert-button-active,
.tasty-recipes-scale-button.tasty-recipes-scale-button-active {
  background: #061C2E !important; /* Dunkelblauer Hintergrund */
  color: #FAF7F3 !important; /* Helle Schriftfarbe */
  font-family: 'Karla', sans-serif !important; /* Karla Light */
  font-weight: 300 !important; /* Karla Light */
  border: none !important; /* Keine Umrandung */
}

/* 🔹 Standard Unit- & Scale-Buttons (nicht aktiv) */
.tasty-recipes-convert-button,
.tasty-recipes-scale-button {
  background: #F1DCD0 !important; /* Hintergrund in hellem Beige */
  color: #061C2E !important; /* Dunkelblaue Schriftfarbe */
  font-family: 'Karla', sans-serif !important; /* Karla Light */
  font-weight: 300 !important; /* Karla Light */
  border: none !important; /* Keine Umrandung */
}



/* 🔹 Units & Scale Container auf gleiche Höhe & zentriert */
.tasty-recipes-units-scale-wrapper {
  display: flex !important;
  justify-content: center !important; /* Zentriert die Gruppen */
  align-items: center !important; /* Gleiche Höhe */
  gap: 20px !important; /* Abstand zwischen Units & Scale */
  flex-wrap: nowrap !important; /* Verhindert Zeilenumbruch */
}

/* 🔹 Container für die Buttons selbst */
.tasty-recipes-convert-container,
.tasty-recipes-scale-container {
  display: flex !important;
  flex-direction: row !important; /* Buttons nebeneinander */
  gap: 8px !important; /* Abstand zwischen den Buttons */
  align-items: center !important; /* Gleiche Höhe */
  flex-wrap: nowrap !important; /* Verhindert Umbruch */
}

.tasty-recipes-convert-container {
  min-width: 80px !important; /* Breite anpassen für genügend Platz */
}

.tasty-recipes-scale-container {
  min-width: 120px !important; /* Breite anpassen für genügend Platz */
}

/* 🔹 Entfernt den Cook Mode Helper & zugehörige Elemente */
.tasty-recipes-cook-mode__helper,
.tasty-recipes-cook-mode__switch-slider,
.tasty-recipes-cook-mode__label {
  display: none !important;
}