/* ==========================================================================
FILE: amazing-recipes/css/frontend.css
Zeilensuche: STRG + G

REZEPT-STRUKTUR
  1.0 Globale Definitionen

  3.0 Intro
  4.0 Zeit (Vorbereitung / Zubereitung / Gesamt)

  6.0 Grid links
      - 6.1 Portionen (Reset-Button / Beschriftung / Feld)
      - 6.2 Slider
      - 6.3 Switch Metrisch/US
      - 6.4 Makros
      - 6.5 Mikros

  7.0 Grid rechts
      - Zubereitungsschritte
      
  8.0 Responsiveness
      - Mobile
  
========================================================================== */

/* ==========================================================================
   1.0 Globale Definitionen

    DEFINITION BREAKPOINTS
    (auf der gesamten Site umgesetzt)

    4K      : >2000px
    Desktop : >1250px
    Tablet  : 769px–1250px
    Mobile  : <=768px

   ========================================================================= */

:root { 
    --step-indent: 2rem;
 }

/* ==========================================================================
3.0 INTRO
========================================================================== */
.ar-recipe-intro{
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 5vh;
}



/* ==========================================================================
6.0 Content-Grid (Grid 3): Zutatenliste / Zubereitungsschritte

    Content-Grid links 

        - 6.0 Zeit
        - 6.1 Portionen (Reset-Button / Beschriftung / Feld / Slider)
        - 6.2 Switch Metrisch/US
        - 6.3 Zutatenliste
        - 6.3 Makros ?
        - 6.4 Mikros ?
========================================================================== */

/* Abstand nach der Zutatenliste */
.content-grid-links {
    margin-bottom: 5vh;
}
    /* ==========================================================================
    6.0 ZEIT
        - Vorbereitung / Zubereitung / Gesamt

    ========================================================================== */

    .ar-recipe-time{
        font-size: 14px;
        margin-top: 0.3rem;
        display: flex;
        gap: 1em;
        align-items: center;
        color: var(--contrast-2);
    }

    .ar-recipe-time-icon img{  
        height:30px;
        width:auto;
        display:flex;
        margin-right: 1rem;
    }

    .ar-recipe-time-values{
        line-height:1.4;
        display:flex;
        flex-direction:column;
        gap:.15rem;
    }

    .ar-time-row{
        display:grid;
        grid-template-columns: auto auto;
        gap:1rem;
    }

    .ar-time-value{
        text-align:right;
    }

    .ar-total-time{
        color:var(--contrast-1)
    }

  /* =========================================
      6.1 Portionen
        - Reset-Button
        - Beschriftung (Portionen:)
        - Zahlenfeld Portionen
        - Slider
  ========================================= */

    .ar-servings-controls{
        display:flex;
        flex-direction:column; 
        width:fit-content;
        gap:.5rem;
        margin-top: 5rem;
    }

    /*-----------------------------------
    Reset Button
        - Beschriftung
        - Zahlenfeld
        - Reset-Button
    -----------------------------------*/

    .ar-servings{
        display:flex;
        align-items:center;
        gap:1em;
    }

    /*-----------------------------------
    Reset Button
    -----------------------------------*/
    #ar-reset-servings{
        height:30px;
        padding:0 14px;
        border:1px solid #d9d9d9;
        border-radius:6px;
        background:transparent;
        white-space:nowrap; /* kein Zeilenumbruch */
        transition:0.18s ease;
        font-size:14px;
        font-weight:400;
        color:var(--contrast-2);
        line-height:1;
        font-family:inherit;
      letter-spacing:0;

    }

    #ar-reset-servings:hover{
        border-color:var(--accent-1);
        color:var(--accent-1);
        background:rgba(0,0,0,0.02);
    }

    /*-----------------------------------
    Beschriftung (Portionen:)
    -----------------------------------*/
    .ar-servings-label{
        font-size:15px;
        white-space:nowrap;   /* kein Zeilenumbruch */
    }

    /*-----------------------------------
    Zahlenfeld Portionen
    -----------------------------------*/
    #ar-servings-input{
        width:80px;
        height:30px;
        border:1px solid #ddd;
        border-radius:7px;
        font-size:14px;
        padding:0 14px;
        flex-shrink:0;   /* bleibt fix */
    }



  /* =========================================
      6.2 Slider
  ========================================= */

        /*-----------------------------------
        Slider Portionen
        -----------------------------------*/
        #ar-servings-slider{
            flex:1;
            min-width:0;
            width:100%;
            margin:0;
            height:16px;
            background:transparent;
            appearance:none;
            -webkit-appearance:none;
        }

        /* Track */
        #ar-servings-slider::-webkit-slider-runnable-track{
            height:2px;
            background:#d9d9d9;
            border-radius:999px;
        }

        /* Thumb */
        #ar-servings-slider::-webkit-slider-thumb{
            -webkit-appearance:none;
            width:12px;
            height:12px;
            border-radius:50%;
            background:#fff;
            border:1px solid #bcbcbc;
            margin-top:-5px;
            cursor:pointer;
        }

        /* Firefox */
        #ar-servings-slider::-moz-range-track{
            height:2px;
            background:#d9d9d9;
            border:none;
            border-radius:999px;
        }

        #ar-servings-slider::-moz-range-thumb{
            width:12px;
            height:12px;
            border-radius:50%;
            background:#fff;
            border:1px solid #bcbcbc;
            cursor:pointer;
        }


  /* =========================================
      6.3 Switch Metrisch/US
        - Switch
        - Kreis im Switch
        - Aktivzustand
        - Slider Portionen
        - Beschriftung
  ========================================= */

    .ar-unit-toggle{
        display: flex;
        justify-content:flex-end; /* rechtsbündig */
        align-items:center; /* Switch und Text vertikal zentriert */
        margin-top: 2em;
    }

    /*-----------------------------------
    Switch
    -----------------------------------*/
    .ar-unit-toggle input[type="checkbox"]{
        appearance:none;
        -webkit-appearance:none;
        width:42px;
        height:22px; /* Kugel 16 + 3 Rand oben/unten = 22px */
        background:#e5e5e5;
        border-radius:999px;
        position:relative;
        cursor:pointer;
        transition:0.22s ease;
        border:none;
        outline:none;
    }

    /*-----------------------------------
    Kreis im Switch
    -----------------------------------*/
    .ar-unit-toggle input[type="checkbox"]::before{
        content:"";
        position:absolute;
        top:50%; /* zentrieren */
        transform:translateY(-50%); /* zentrieren */
        left:3px; /* Rand */
        width: 16px;/* Kugelradius */
        height:16px;
        background:#ffffff;
        border-radius:50%;
        box-shadow:0 1px 4px rgba(0,0,0,0.18);
        transition:0.22s ease;
    }

    /*-----------------------------------
    Aktivzustand
    -----------------------------------*/
    .ar-unit-toggle input[type="checkbox"]:checked{
        background:#bfbfbf;;
    }

    .ar-unit-toggle input[type="checkbox"]:checked::before{
        transform:translate(21px,-50%); /* Breite /2 */
    }

    /*-----------------------------------
    Beschriftung Switch
    -----------------------------------*/
    .ar-unit-label{
        font-family:inherit;
        font-size:14px;
        font-weight:400;
        color:var(--contrast-2);
        line-height:1;
        letter-spacing:0;
        margin-right: 0.5rem;
    }


      /* =========================================
      6.3 ZUTATENLISTE
        - Switch
        - Kreis im Switch
        - Aktivzustand
        - Slider Portionen
        - Beschriftung
      =========================================== */

      /* erste Überschrift oben bündig */
      .ar-ingredient-heading:first-child{
          margin-top: 20px;
      }

      /*-----------------------------------
        Gruppenüberschriften innerhalb
        der Zutatenliste
        Beispiele:
        - Teig
        - Füllung
        - Topping
      -----------------------------------*/
      .ar-ingredient-heading{
          margin:34px 0 6px; /*Absatz 34px Zeilenabstand 6px wie Zutatenzeile */
          color:var(--contrast-1);
      }
      /*-----------------------------------
        Einzelne Zutatenzeile
        links  = Zutatenname
        rechts = Menge
      -----------------------------------*/
      .ar-recipe-ingredients .ingredient{
          display:grid;
          grid-template-columns:minmax(0,1fr) auto;
          gap:10px;
          align-items:start;
          padding:6px 0; /*Zeilenabstand 6px wie Gruppenüberschrift */
          border-bottom:1px solid #f1f1f1;
      }

      /*-----------------------------------
        Zutatenname + Zusatztext
        Hängender Einzug:
        Hafer geflockt – am besten in
            Premiumqualität und glutenfrei
      -----------------------------------*/
      .ar-recipe-ingredients .ingredient .name{
          font-size:14px;
          line-height:1.2;
          padding-left:16px; /*Hängender Einzug bei Zeilenumbruch */
          text-indent:-16px; /*Hängender Einzug bei Zeilenumbruch */
          overflow-wrap:break-word;
      }

      /*-----------------------------------
        Optionaler Zusatztext (.note)
      -----------------------------------*/
      .ar-recipe-ingredients .ingredient .note{
          font-size:12px;

          color:var(--contrast-2);
          font-style:italic;
      }

      /*-----------------------------------
        Mengen - Angaben Metrisch und US
        WICHTIG:
        jetzt wieder rechtsbündig
      -----------------------------------*/
      .ar-recipe-ingredients .ingredient .metric,
      .ar-recipe-ingredients .ingredient .us{
          min-width:58px;
          text-align:right;
          white-space:nowrap;
          font-size:13px;
          line-height:1.3;
          color:#4a4a4a; /*Textfarbe etwas zurückgenommen */
          display:block;
      }

      /*-----------------------------------
        Wenn US Modus aktiv ist
        - Entweder ingreditents us oder metrisch anzeigen
      -----------------------------------*/
      .ar-unit-us .ar-recipe-ingredients .ingredient .metric{
          display:none;
      }
      .ar-unit-us .ar-recipe-ingredients .ingredient .us{
          display:block;
      }

/* ==========================================================================
7.0 Content-Grid rechts 
      - Zubereitungsschritte
========================================================================== */

/*-----------------------------------
      Zubereitung

      <h2> Style in Child-Theme
            Fontgröße 26
    -----------------------------------*/

/*-----------------------------------
      Schritt
        - Nummer
        - Text
    -----------------------------------*/

    /*Abstand zur Überschrift vergrößern */
    .ar-step:first-child{
        padding-top: 1em;
    }

    .ar-step{
        display:flex; /*Stellt Zahl und Text nebeneinander */
        gap:0; /*Abstand zwischen Zahl und Text */
        margin-bottom:22px; /*Abstand zum nächsten Schritt */
    }

    /*-----------------------------------
      Schrittzahl
    -----------------------------------*/
    .ar-step-number{
    width: var(--step-indent); /*Breite = Einrückung des Textes */
    font-family: var(--font-family-heading);
    font-size: 26px; /* Gleich wie Text "Zubereitung" */
    font-weight: 500;
    line-height: 0.7; /*Vertikale Ausrichtung zu Text */
    }


  


/*==========================================================================
  RESPONSIVE
===========================================================================*/


/*-----------------------------------
  Mobile
-----------------------------------*/
@media (max-width:768px){

    /* Schriftgröße von 14px --> 15px*/
    .ar-recipe-ingredients .ingredient .name{
        font-size:15px;
    }

}