/* --- GLOBAL RESET: Makes sizing predictable --- */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  /* --- BASE VARIABLES --- */
  --color-bg: #ffffff;
  --color-border: #e0e0e0;
  
  /* --- THEME: ELECTRIC YELLOW --- */
  --color-primary: #FFD200; 
  --color-brand: #FFD200;  /* This one is never overridden */

  --color-primary-dark: #eec100; 
  
  /* 1. STRIPES: Darker cream so alternating steps are visible */
  --color-muted: #ededeb;
  --color-textbox: #fffef6;   
   
  
  /* 2. SHINY: Pale lemon for highlights */
  --color-shiny: #FFD200;   
  
  --color-text: #222220; 
  --color-textlight: #666664;
  
  --gradient-primary: linear-gradient(135deg, #FFD200 0%, #FFB507 100%);
  --shadow-filter: drop-shadow(2px 4px 5px rgb(41, 41, 41));

}

/* --- DARK MODE ADJUSTMENTS --- */
[data-theme="dark"] {
  --color-bg: #1c1c1a;
  --color-text: #eeeeee;
  --color-textlight: #aaaaaa;
  
  --color-primary: #FFD200; 
  --color-primary-dark: #eec100;
  
  --color-muted: #252523;
  --color-textbox: #363004;
  --color-shiny: #FFD200;
  --color-border: #333333;
  
  --gradient-primary: linear-gradient(135deg, #FFE111 0%, #FFB300 100%);

  .recipe-grid {
  /* Scrollbar for the Collections on the home page */
  scrollbar-width: medium;
  scrollbar-color: #333 #000; /* thumb-color track-color */
}
}

/* --- DARK MODE: IMAGE ENHANCEMENTS --- */
/* Adds a  white contour to transparent ingredient images so they pop against the dark background */
[data-theme="dark"] .instruction-tile img,
[data-theme="dark"] .inventory-item img {
  filter: drop-shadow(2px 0 0 white) 
          drop-shadow(-2px 0 0 white) 
          drop-shadow(0 2px 0 white) 
          drop-shadow(0 -2px 0 white);
}

/* 2. THIN CONTOUR (1px): For small icons (Ingredient List & HUD) */
[data-theme="dark"] .ing-list-icon img,
[data-theme="dark"] .hud-token img {
  filter: drop-shadow(1px 0 0 white) 
          drop-shadow(-1px 0 0 white) 
          drop-shadow(0 1px 0 white) 
          drop-shadow(0 -1px 0 white);
}

/* --- DARK MODE: REMOVE WHITE BACKGROUNDS --- */
[data-theme="dark"] .inventory-item img {
  background-color: transparent; 
  border: none; /* Optional: ensures no border remains */
}

/* --- DARK MODE: FORCE HIGH CONTRAST PILLS --- */
/* Forces Badges, Time, Heat, and Action words to remain Black on Bright Yellow */
[data-theme="dark"] .time-display span,
[data-theme="dark"] .tile-badge,
[data-theme="dark"] .instruction-tile.action-tile figcaption {
  background-color: var(--color-primary); /* Bright Yellow */
  color: #000000;                         /* Black Text */
  box-shadow: none;                       /* Optional: Clean flat look */
}

/* --- General & Typography --- */
body {
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg); /* changed from #ffffff */
  color: var(--color-text);
  overflow-x: hidden; /* CRITICAL: Prevents scrollbar from the full-width elements */

  /* --- STICKY FOOTER FIX --- */
  min-height: 100vh;      /* Force body to be at least as tall as the screen */
  display: flex;          /* Turn on Flexbox */
  flex-direction: column; /* Stack children vertically (Header, Main, Footer) */
}

h1 {
  font-family: 'Shrikhand', cursive;
  font-weight: 400; 
  color: var(--color-text);
  margin-bottom: 15px;
  text-align: center;
}

h2 {
  font-family: 'Shrikhand', cursive;
  font-weight: 400; /* Medium */
  color: var(--color-text);
  margin-top: 25px;
  margin-bottom: 10px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.02em; /* Slightly less tight than H1 */
}

/* --- FIX: Boost Inventory Title size ONLY on Desktop --- */
@media screen and (min-width: 701px) {
  .visual-inventory h2 {
    font-size: 1.5rem; /* Hard-coded size to override the container's relative scaling */
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 15px;
  border-radius: 0px;
}

ul, ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

li {
  margin-bottom: 5px;
}

/* --- Source Link in Header ("Original Recipe") --- */
.source-link {
  font-family: 'Inter', sans-serif;
  font-weight: 400;       
font-style: italic;     
font-size: 1.4rem;      
  color: var(--color-textlight); 
  margin-top: 5px;
}

.source-link a {
  color: var(--color-primary-dark); 
  text-decoration: none;
  font-weight: 400;       /* Ensures the link text stays thin */
}

.source-link a:hover {
  text-decoration: underline;
}

/* --- HOMEPAGE STUFF --- */
.site-intro {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* */
  font-style: italic; /* Italic */
  font-size: 1.2rem; /* Increased slightly for readability at thin weight */
  line-height: 1.4;
  color: var(--color-textlight);
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
/* VALUE PROPOSITION BLOCK */
    .value-prop-container {
      background-color: var(--color-bg);
      padding: 3rem 0;
      text-align: center;
    }

    .vp-lead, .vp-transition {
      font-family: 'Shrikhand', cursive; /* Using your brand font for the "Voice" */
      font-size: 1.4rem;
      color: var(--color-text);
      margin-bottom: 1.5rem;
    }

    .vp-transition {
      margin-top: 2rem;
    }

    /* The "Boring Text" Box */
    .old-way-box {
      max-width: 600px;
      margin: 0 auto;
      background-color: #f0f0f0; /* Dull grey */
      border-left: 6px solid #ccc;
      padding: 1.5rem;
      text-align: left;
    }

    .old-way-box p {
      font-family: 'inter', sans-serif; 
      font-size: 1.1rem;
      color: #555;
      line-height: 1.6;
      margin: 0;
    }

    /* The "New" Image */
    .new-way-image img {
      max-width: 100%; /* Responsive */
      width: 700px;    /* Max width */
      height: auto;
      margin: 0 auto;
      display: block;
      border-left: 6px solid var(--color-primary); /* Subtle brand highlight */
    }

/* BIG LINK BUTTON */
/* BIG LINK BUTTON CONTAINER */
    .cta-button-container {
      display: flex;           /* Aligns items in a row */
      align-items: center;     /* Vertically centers the lines with the button */
      justify-content: center; /* Centers content */
      margin-top: 1rem;
      margin-bottom: 3rem;
    }

    /* THE LINES (Pseudo-elements) */
    .cta-button-container::before,
    .cta-button-container::after {
      content: "";
      flex: 1;                 /* Forces the lines to stretch to the edges */
      height: 1px;             /* Thickness of the line */
      background-color: var(--color-text); /* Matches button border */
      margin: 0 10px;          /* The gap (0 top/bottom, 10px sides) */
    }

    .cta-button {
      display: inline-block;
      background: var(--color-shiny);
      border: 0px solid var(--color-text); /* Same grey as your menu */
      padding: 1rem 2.5rem; /* "Big and Fat" padding */
      
      font-family: 'Inter', sans-serif;
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #222; /* Hard-coded for yellow button */
      text-decoration: none;
      
      transition: all 0.2s ease;
    }

    .cta-button:hover {
      border: 3px solid var(--color-primary); /* The "Active" state of your menu */
      padding: calc(1rem - 2px) calc(2.5rem - 2px); /* Adjust padding so button doesn't jump */
      color: var(--color-text); 
      transform: translateY(-2px);
    }


/* --- Main Layout Containers --- */

/* 1. The Outer Shell (Full Width) */
.container {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent; 

  /* --- STICKY FOOTER FIX --- */
  flex: 1; /* Grows to fill empty space */
}

/* 2. The Inner Constraint (Centering) */
.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px; /* Keeps the side breathing room */
}

.recipe-header {
  position: relative; /* This is the key: it contains the hero image */
  overflow: hidden; /* Prevents the image from spilling out */
  text-align: center;
  margin-bottom: 2rem;
}


.recipe-header h1 {
  font-family: 'Shrikhand', cursive;
font-weight: 400;
font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.meta {
  font-size: 0.9em;
  color: var(--color-textlight);
  margin-bottom: 20px;
}

.recipe-header .meta {
  font-size: 0.9rem;
  color: var(--color-text);
}

/* --- Ingredients List Component --- */
.ingredients-list {
  list-style-type: none;
  padding: 1.5rem; /* Espace à l'intérieur de la boîte grise */
  margin-top: 1rem;
  background-color: transparent; 
  border-radius: 0px;
  border: 2px solid var(--color-primary);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  display: block;
  width: auto; /* On laisse auto pour que les marges fonctionnent */
  margin-left: 0px;  /* NÉCESSAIRE, MÊME si c'est 0px! */
}

@media screen and (min-width: 701px) {
  .ingredients-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
  }
}

/* --- Recipe Step Component --- */
/* --- Step Row (Full Width Background) --- */
.step-container {
width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  
  /* 1. Ensure every step is opaque (so it covers the shadow of the one below it) */
  background-color: var(--color-bg);
  
  /* 2. Create the stacking context */
  position: relative;
  z-index: 1; /* Ensures standard DOM stacking (later items sit on top of earlier ones) */
  
  /* 3. The Shadow: Negative Y value moves it UP */
  /* Format: offset-x | offset-y | blur | spread | color */
  box-shadow: 0 -0px 15px 0px rgba(0, 0, 0, 0.2); 
}

/* The Grey Stripe Logic - Now very simple! */
.step-container:nth-child(even) {
  background-color: var(--color-muted);
    box-shadow: 0 -0px 15px 0px rgba(0, 0, 0, 0.3); 

}

/* --- Step Content (Centered & Flex) --- */
/* This class will go on the NEW inner div */
.step-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}


/* Left Panel */
.ingredients-panel {
 align-self: flex-start; 
 flex: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}


/* --- Hides chevrons when right panel is empty --- *slash
.ingredients-panel.no-chevron::after {
  display: none;
} */

.ingredient-group {
  display: flex;
justify-content: center; /* Horizontally centers the tiles */
  align-items: end;    /* Vertically centers the tiles */  
  padding: 0.2rem;
  border-radius: 8px;
  box-sizing: border-box;   /* Prevents padding from causing overflow */
}

/* Right Panel */
.cooking-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.action-recipient-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem; /* Space between the images */
}

.action-recipient-container img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 0; /* Override the global img margin */
}

                    /* PROBABLY DEAD
                    .cooking-details {
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      gap: 0.75rem;
                    }

                    .cooking-action-shadow {
                      filter: var(--shadow-filter);
                    }
                    */



/* --- Time Display (Right Panel) --- */
.time-display {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers the badge horizontally */
  margin-top: 10px;        /* Spacing from the element above */
  background: none;        /* Removes any old clock icon logic */
}

.time-display span {
  /* The Highlight Look (Matching Action Tiles) */
  background-color: var(--color-shiny); 
  color: var(--color-text);            
  
  /* Pill Shape */
  padding: 4px 12px;
  border-radius: 6px;       
  
  /* Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  
  display: inline-block;
  filter: var(--shadow-filter);
}

/* --- HEAT INDICATOR (Standalone) --- */

/* 1. The Container (Structure Only) */
.heat-display {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers the text */
  margin-top: 10px;        /* Spacing from elements above */
}

/* 2. The Text (Style Only) */
.heat-display span {
  /* Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 400; 
  font-size: 1rem; 
  text-transform: uppercase;
  letter-spacing: 0.1em; 
  line-height: 1.2; 
  
  /* Color */
  color: #c40014; /* Dark Red */
  background-color: transparent;
}

/* 3. Dark Mode Support */
[data-theme="dark"] .heat-display span {
  color: #ff6b6b; /* Soft Salmon Red */
}

/* 1. Le style par défaut (appliqué partout) */
.step-textbox {
  background-color: var(--color-textbox);
  border: 1px solid var(--color-primary);
  border-left: 5px solid var(--color-primary);
  color: var(--color-text);            
  border-radius: 0; 
  padding: 1rem;
  margin-top: 1.5rem;
  
/* --- WIDTH FIX --- */
  max-width: 80%;     /* Crucial: Prevents overflow in the small Right Panel or Mobile */  
  
  margin-left: auto;
  margin-right: auto;

  /* Font Settings */
  font-family: 'Inter', sans-serif;
  font-weight: 400; 
  font-style: italic; 
  
  font-size: 1rem;
  line-height: 1.4; 
  text-align: center;
  
  /* Optional: Adds a subtle shadow to enhance the "rich" 3D feel of the gradient   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
*/
}

/* 2. L'exception pour le panneau de gauche 
   (Doit être APRÈS .step-textbox pour fonctionner) */
.leftpanel-note-wrapper {
  flex-basis: 100%;  /* Forces this div to take the full row width */
  margin-bottom: 1rem; /* Spacing before the next row of ingredients */
}

/* 2. LEFT PANEL SPECIFIC WIDTH */
.leftpanel-note-wrapper .step-textbox {
  width: 90%; /* Uses the extra space available in the left panel */
  text-align: left; /* Optional: Left notes often read better left-aligned */
}

/* 3. RIGHT PANEL SPECIFIC WIDTH */
.cooking-panel .step-textbox {
  width: 200px; /* Keep it compact to fit under the heat/time pills */
}

/* --- Instruction Tile Component --- */
.instruction-tile {
  /* Dimensions */
  width: 120px;
  /* flex-basis: 120px;  <-- Tu peux l'enlever si width est défini, c'est plus simple */

  /* Layout interne (pour centrer l'image et le texte) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  /* Apparence */
  margin: 0;
  margin-top: 1rem;
  text-align: center;
  transition: transform 0.2s ease-out;

  /* INDISPENSABLE POUR LE HUD (Overlay) */
  position: relative; 
}

.instruction-tile:hover {
  transform: scale(1.05) translateY(-5px);
  cursor: pointer;
}

.instruction-tile img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 0; /* Changed from default to 0 */
  z-index: 1;       /* Ensures image is behind text */

}

/* 1. STANDARD INGREDIENTS & RECIPIENTS (Now mimics Action style) */
.instruction-tile figcaption {
  font-size: 0.9em;
  color: var(--color-text);
  
  /* POSITIONING FIX */
  margin-top: -0px;  /* Pulls text up to overlap bottom of image */
  position: relative; 
  z-index: 2;         /* Sits ON TOP of image */
  
  /* Readability shadow (optional, helps when text hits image) */
  text-shadow: 0 1px 2px rgba(255,255,255, 0.8); 
  
  background-color: transparent;
  padding: 0;
  
}

/* 1.5 Drop-shadow sur les couteaux et les "Chop" à gauche */

.instruction-tile.action-tile {
filter: var(--shadow-filter);
/* Pulse animation PAUSED 
  animation: pulse-beat 2s ease-in-out infinite;
  will-change: transform;  */
  
}
/* 2. ACTION WORDS ONLY (Highlighted Badge) */
.instruction-tile.action-tile figcaption {
  /* Highlighting */
  background-color: var(--color-shiny); 
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600; 
  color: var(--color-text); 

  
  display: inline-block; 
  text-shadow: none; /* No shadow needed on badges */
  
  /* Optional: Keep -15px if you want actions higher than ingredients, 
     otherwise the global -10px applies. */
  margin-top: 5px; 
}


.tile-quantity {
  font-size: 1rem;
  color: var(--color-textlight);
  margin-top: 0.25rem;
}

.placeholder-image {
  width: 100px;
  height: 100px;
  border: 3px dashed #c11;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(230, 205, 205);
  color: #888;
  margin-bottom: 0.5em; /* Matches figure defaults */
}



/* Le conteneur flotte par-dessus */
.hud-overlay {
  position: absolute;
  top: -22px; /* On le fait dépasser un peu vers le haut */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center; /* Centre les bulles horizontalement */
  flex-wrap: wrap;
  z-index: 10;
  pointer-events: none; /* Important: permet de cliquer au travers */
}

/* Le style des bulles */
.hud-token {
  width: 30px;
  height: 30px;
  background-color: rgb(255, 255, 255);
  border: 1px solid #e1e1e1;
  border-radius: 50%; /* Ça fait un rond */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  /* Astuce : légère marge négative pour qu'elles se chevauchent un peu */
  margin-left: -6px; 
  /* On s'assure qu'ils ne se marchent pas dessus bizarrement */
  position: relative;
  transition: transform 0.2s; /* Petit bonus pour l'animation */
}


/* La première bulle ne doit pas avoir de marge négative */
.hud-token:first-child {
  margin-left: 0;
}

/* L'image à l'intérieur de la bulle */
.hud-token img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Optionnel : Quand on passe la souris, le jeton sort du rang */
.hud-token:hover {
    transform: translateY(-5px);
    z-index: 20;
}


/* --- 3x3 HUD Grid Expansion --- */

.instruction-tile:hover .hud-overlay {
    top: -30px; /* Pulls the grid slightly higher */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates the 3 columns */
    gap: 20px; /* Space between tokens */
    width: auto;
    left: 50%;
    transform: translateX(-50%); /* Centers the 3x3 grid over the tile */
    transition: all 0.2s ease-out;
}

.instruction-tile:hover .hud-token {
    transform: scale(2); /* Double size as requested */
    margin: 0; /* Reset the overlap margin for the grid layout */
    z-index: 30;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Stronger shadow for the "pop" effect */
}

/* Ensure the first-child overlap reset doesn't break the grid */
.instruction-tile:hover .hud-token:first-child {
    margin-left: 0;
}


/* --- Homepage Simple Recipe List --- */

.recipe-list-simple li {
  /* This aligns the text and image */
  display: flex;
  align-items: center;
  gap: 1rem; /* Space between image and text */
  margin-bottom: 1rem;
}

.recipe-list-simple li a {
  font-size: 1.1rem;
  color: var(--color-text);
  text-decoration: none;
}

.recipe-list-simple li a:hover {
  text-decoration: underline;
}

/* This is the new thumbnail styling */
.recipe-list-simple picture {
  /* This is needed for flexbox to work right */
  display: contents;
}

.recipe-list-simple img {
  width: 100px;
  height: 100px;
  object-fit: cover; /* This crops the image nicely */
  border-radius: 0px; /* Matches your site's style */
  flex-shrink: 0; /* Prevents image from shrinking on small screens */
}


.recipe-footer-message {
  font-family: 'Shrikhand', cursive;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-text);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 4rem; /* Extra space at the very bottom of the page */
}





/* --- Homepage Recipe Card Grid (NEW: Horizontal Scroll) --- */

.recipe-grid {
  display: flex; /* Use flexbox to create a single horizontal row */
  overflow-x: auto; /* Allow horizontal scrolling */
  gap: 1.5rem; /* Space between cards */
  margin-bottom: 2rem;
  flex-wrap: nowrap;
  /* These properties create the "swiping" gallery feel */
  scroll-snap-type: x mandatory; /* Makes it snap to the next card */
  -webkit-overflow-scrolling: touch; /* Adds momentum scrolling on iOS */

}


/* This is the card inside the scrolling gallery */
.recipe-card {
  /* 1. Set a fixed width for each card in the row */
  width: 250px; 
  flex-shrink: 0; /* 2. Stop cards from shrinking */
  
  /* 3. Tell the card where to snap */
  scroll-snap-align: start;

  /* --- All your other card styles remain the same --- */
  display: block;
  text-decoration: none;
  background-color: var(--color-bg);
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.recipe-card picture {
  display: block;
}

.recipe-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  margin-bottom: 0;
}

.recipe-card h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-style: normal; /* Resetting the italic you had previously */
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0;
  padding: 0.8rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  border-top: 6px solid var(--color-shiny);
}

/* --- Custom Scrollbar Styling (Desktop) --- */

/* 1. For Chrome, Safari, and Edge */

/* This sets the height of the scrollbar */
.recipe-grid::-webkit-scrollbar {
  height: 20px;
}

/* This is the "track" (the bar it slides on) */
.recipe-grid::-webkit-scrollbar-track {
  background: var(--color-mutedbg); /* A light grey */
  border-radius: 5px;
}

/* This is the "thumb" (the part you drag) */
.recipe-grid::-webkit-scrollbar-thumb {
  background-color: #e5ffff; /* Your theme's pinkish-purple */
  border-radius: 10px;
  /* Creates a nice "padding" effect around the thumb */
  border: 6px solid var(--color-primary);
}

/* 2. For Firefox */
/* You just need to add these two properties 
   to your *existing* .recipe-grid rule */

.recipe-grid {
  /* ... (all your existing display:flex, overflow-x:auto rules) ... */
  
  /* ADD THESE TWO LINES FOR FIREFOX */
  scrollbar-width: medium;
  scrollbar-color: #ccc #fff; /* thumb-color track-color */
}

/*
=====================================================
--- INGREDIENT GROUPING FIDDLES ---
=====================================================
*/

/* --- BASE RULE --- */
/* This is the main rule for all 3-tile groups */
.ingredient-group.group-size-2,
.ingredient-group.group-size-3 {
  /* 1. Force to a new line */
  flex-basis: 100%; 

  /* 2. Center the 3 tiles in their new full-width row */
  justify-content: center; 

  /* 3. Add the visual "connection" */
  border: 0px solid var(--color-shiny);
  border-radius: 0px;
  position: relative;
  isolation: isolate;
  
  /* 4. Add some internal spacing */
  padding-top: 0rem;
  padding-bottom: 0rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  margin-left: auto; 
  margin-right: auto; 
}

/* --- FIDDLE A: Shrink the Action Tile --- */
/* (Add this block to test smaller actions) */

.group-size-2 .action-tile,
.group-size-3 .action-tile {
  width: 100px;
  flex-basis: 100px;
  z-index: 5; /* Ensures it sits on top if it overlaps */
}
.group-size-2 .action-tile img,
.group-size-3 .action-tile img {
  width: 90px;
  height: 90px;
}
.group-size-2 .action-tile figcaption,
.group-size-3 .action-tile figcaption {
  font-size: 0.9rem;
  font-style: italic;
  margin-top: -10px;

  color: var(--color-text);

}

/* --- Add-on: Pink Circle BEHIND Action Tiles 

.ingredient-group.group-size-2::before,
.ingredient-group.group-size-3::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 90px;
  background-color: #d2ffff; 
  border-radius: 50%;

  /* Center the circle behind the tile content 
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Send it to the back *within this tile only* z-index: -1; 
}--- */

/*
=====================================================
--- NEW RECIPE HEADER 50/50 LAYOUT ---
=====================================================
*/

/* This creates the 50/50 split */
.recipe-main-split {
  display: flex;
  align-items: flex-start; /* Aligns top of text with top of image */
  gap: 1.5rem; /* Space between text and image */
  margin-bottom: 2rem; /* Space before "Ingredients" h2 */
}

/* This is the left-hand text column */
.recipe-details {
  flex: 2; /* Takes up 66% of the space */
  min-width: 0; /* Prevents text overflow */
}

/* This is the right-hand image column */
.hero-image-container {
  flex: 2; /* Takes up 33% of the space */
}

/* This re-styles the image to fit its new container */
.hero-image-container img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* Forces a 1:1 (square) aspect ratio */
  object-fit: cover;   /* Crops the image to fill the square */
  border-radius: 0px; 
  margin-bottom: 0;
}

/* This ensures all header text is left-aligned (RECIPE PAGES ONLY) */
.recipe-header:has(h2) h1,
.recipe-header:has(h2) .meta,
.recipe-header:has(h2) .source-link,
.recipe-header:has(h2) h2 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* --- STEP NUMBER DISPLAY --- */

/* New Container to ensure alignment matches the content below */
.step-header {
  padding-bottom: 0.5rem; /* Space between number and tiles */
  width: 100%;
}

.step-number {
  /* Removed flex-basis: 100% (no longer needed) */
  
  font-family: 'Shrikhand', cursive;
  font-weight: 400; 
  font-size: 1.5rem;
  color: var(--color-text); 
  
  text-align: left;    /* Your requested alignment */
  line-height: 1;
  
  /* Reset margins since it's now in its own wrapper */
  margin: 0; 
}


/* --- VISUAL INVENTORY (GET READY BLOCK) --- */
.visual-inventory {
  /* 1. Default: Hidden to reduce clutter */
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--color-bg);
  border-radius: 0px;
  font-size: 0.7rem;
}

/* 2. Toggle State: Shown when attribute is present */
[data-inventory="hide"] .visual-inventory {
  display: none;
}

.visual-inventory h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--color-textlight);
  text-align: left; /* Ou center selon tes goûts */
}

.inventory-row {
  display: flex;
  flex-wrap: wrap; /* Change à 'nowrap' si tu veux le scroll horizontal */
  gap: 10px;
  margin-bottom: 1.5rem;
  justify-content: center; /* Centre les images */
}

/* Si tu veux le scroll horizontal sur mobile comme l'accueil : */
@media screen and (max-width: 700px) {
  .inventory-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.inventory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px; /* Un peu plus large pour le texte */
  text-align: center;
}

.inventory-item img {
  /* On garde le style rond ou carré selon ton goût */
  border-radius: 10%; 
  background-color: #fff;
  padding: 0px;
  width: 70px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 3px; /* Petit espace avant le texte */
  margin-left: auto;  /* Centrage */
  margin-right: auto; /* Centrage */
}

.inventory-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem; /* Texte assez petit */
  line-height: 1.1;
  color: var(--color-textlight);
  margin: 0;
}

/* --- The "From Step X" Badge --- */
.tile-badge {
  position: absolute;
  
  /* Centering Logic */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Moves it back by half its own size to hit dead center */
  
  /* Color & Transparency (0.8 = 80% opacity / 20% see-through) */
  background-color: var(--color-shiny);
  opacity: 0.85; 
  color: #222;
  font-weight: 700;
  
  /* Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem; /* Slightly larger since it's the star of the show now */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  /* Box Model */
  padding: 3px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Stronger shadow helps readability over images */
  
  z-index: 15;
  white-space: nowrap;
  pointer-events: none; /* Allows clicking the image underneath if needed */
}

/* --- Special "Shiny" Highlighted Tile (Background Only) --- */

.instruction-tile.shiny_tile {
  /* 1. The Aqua Background applied to the WHOLE card */
  border: 5px solid var(--color-shiny);
  background-color: transparent;
 
  
  /* 2. Add padding so the content doesn't touch the edges */
  padding: 10px 5px;
  
  /* 3. Increase width slightly to accommodate the padding */
  width: 130px; /* Standard is 120px */
  
  /* 4. Keep corners sharp */
  border-radius: 0px; 
}

/* Ensure the image inside doesn't have its own background/padding */
.instruction-tile.shiny_tile img {
  background-color: transparent;
  padding: 0;
  margin-bottom: 5px;
}

/* Ensure the text remains standard (no size/weight increase) */
.instruction-tile.shiny_tile figcaption {
  width: 100%;
  /* No font-size or font-weight overrides here */
}


/* =========================================
   FEATURE TOGGLES
   ========================================= */


/* =========================================
   FEATURE: SOFTER HIGHLIGHTS
   ========================================= */

/* --- 1. LIGHT THEME OVERRIDES --- */
[data-highlight="mellow"] {
  /* The "darker light gray" for borders and text */
  --color-primary: #d5d5d4; 
  
  /* The "Pale Butter" for backgrounds (time display, badges...) */
  --color-shiny: #fff7ae; 

}

/* --- 2. DARK THEME OVERRIDES --- */
[data-theme="dark"][data-highlight="mellow"] {
  /* Same as non-dark mode */
  --color-primary: #fff; 
  
  /* Darker/Muted Gold for backgrounds so text pops */
  --color-shiny: #d5d5d4;   
}

/* --- 3. UI CHANGES SPECIFIC TO MELLOW MODE --- */

/* Force high contrast text on the "Mellow" backgrounds */
[data-highlight="mellow"] .instruction-tile.action-tile figcaption,
[data-highlight="mellow"] .time-display span,
[data-highlight="mellow"] .instruction-tile.shiny_tile figcaption,
[data-highlight="mellow"] .tile-badge {
  color: #222 !important; /* Always dark text on yellow, even in dark mode */
}

/* Add the requested 5px border to shiny tiles */
[data-highlight="mellow"] .instruction-tile.shiny_tile {
  border: 0px solid var(--color-primary);
  background-color: var(--color-shiny);
}



/* =========================================
   HAMBURGER MENU and HEADER 
   ========================================= */

/* --- NEW MAIN HEADER --- */
#main-header {
  background-color: var(--color-brand);
  width: 100%;
  z-index: 500; /* High enough to sit over content, below the side-menu */
  
  /* DESKTOP BEHAVIOR: Always Sticky */
  position: sticky;
  top: 0;
  transition: transform 0.3s ease; /* We will use this later for the mobile animation */
}

.header-content {
  display: flex;
  align-items: center;
  
  /* 1. Force full screen width */
  width: 100%;
  
  /* 2. MATCH WRAPPER MAX-WIDTH */
  max-width: 800px;
  
  /* 3. CENTER THE CONTAINER */
  margin: 0 auto;
  
  /* 4. Add padding so it doesn't touch the absolute edge */
  padding: 0 20px; 
  
  /* 5. Ensure padding doesn't break the 100% width calculation */
  box-sizing: border-box; 
  
  height: 60px;
  gap: 1.5rem;
}

/* --- UPDATED MENU BUTTON --- */
/* We override the previous fixed positioning */
#menu-btn {
  position: static; /* Removes 'fixed' */
  top: auto;
  left: auto;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 5px;
  display: flex;
  align-items: center;
  color: #222;
}

#menu-btn:hover {
  transform: scale(1.1);
  color: #000;
}

/* --- HEADER LOGO --- */
.header-logo {
  font-family: 'Shrikhand', cursive;
  font-weight: 400;
  font-size: 1.8rem;
  color: #222;
  text-decoration: none;
  text-transform: none;
}

/* --- DESKTOP NAVIGATION (Header) --- */
.desktop-nav {
  display: none; /* Hidden by default (Mobile First) */
}

@media screen and (min-width: 701px) {
  .desktop-nav {
    display: flex;
    gap: 2rem;
    
    /* RIGHT ALIGNMENT: Pushes flex items to the right */
    margin-left: auto;
    
    align-items: center;
    height: 100%;
  }

  .desktop-nav a {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* bolder */
    font-size: 1rem;
    color: #222; /* Always dark on the yellow header */
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .desktop-nav a:hover {
    opacity: 0.7;
    text-decoration: none;
  }
}

#side-menu {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: -320px; 
  width: 300px;
  height: 100%;
  background-color: var(--color-bg);
  box-shadow: 4px 0 10px rgba(0,0,0,0.2);
  
  /* CRITICAL CHANGE: Must be higher than the overlay (600) */
  z-index: 601; 
  
  transition: left 0.3s ease-out;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-right: 1px solid var(--color-border);
}

/* 3. The Overlay (Darkens the site when menu is open) */
#side-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 600; 
  opacity: 0;
  pointer-events: none; /* Let clicks pass through when hidden */
  transition: opacity 0.3s;
}

/* 4. OPEN STATE (Triggered by JS) */
body.menu-open #side-menu {
  left: 0;
}
body.menu-open #side-menu-overlay {
  opacity: 1;
  pointer-events: auto; /* Catch clicks to close */
}

/* --- Internal Menu Styling --- */
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.menu-title {
  font-family: 'Shrikhand', cursive;
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-text);
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-textlight);
  cursor: pointer;
  line-height: 1;
}

.menu-item {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  padding: 10px 0;
  transition: color 0.2s;
}

.menu-item:hover {
  color: var(--color-primary);
}

.menu-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* --- Menu Content Styling --- */

.menu-section {
  margin-bottom: 2rem;
}

.menu-label {
  display: block;
  font-family: 'Intel', sans-serif;
  font-size: 0.9rem;
  color: var(--color-textlight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.menu-toggle-group {
  display: flex;
  gap: 10px;
}

/* --- UNIFIED MENU BUTTONS --- */
.menu-toggle-btn {
  /* Layout: Flex allows vertical stacking for subtitles */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1; /* Buttons share available width equally */
  
  /* Base Appearance */
  background: transparent;
  border: 1px solid var(--color-border); /* Inactive: Thin Grey Border */
  border-radius: 4px;
  padding: 6px 5px;
  
  /* Text */
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s;
}

/* Hover State */
@media (hover: hover) {
  .menu-toggle-btn:hover {  /* --- Only allow hover effects on devices with a mouse --- */
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }
}
/* --- ACTIVE STATE (Unified) --- */
/* Used for BOTH "Single Choice" (Radios) and "Toggle" (Checkboxes) */
.menu-toggle-btn.is-active {
  background-color: var(--color-bg); 
  color: var(--color-text);
  border: 3px solid var(--color-primary); /* Active: Thick Brand-Color Border */
  font-weight: 700;
}

/* --- THEME OVERRIDES --- */
/* Mellow Highlight Mode: Active buttons use dark text color for border */
[data-highlight="mellow"] .menu-toggle-btn.is-active {
  border-color: var(--color-text); 
}

/* --- ON-PAGE RECIPE CONTROLS --- */
.recipe-controls {
  display: flex;
  flex-direction: column; /* Stack the two rows vertically */
  gap: 0.3rem;            /* Space between Servings and Units lines */
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}

.control-row {
  display: flex;
  align-items: center;    /* Vertically align label and buttons */
  gap: 1rem;              /* Space between "SERVINGS" and the buttons */
}

.control-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-textlight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  
  /* Fixed width to ensure buttons align vertically across the two rows */
  width: 80px; 
}

.control-buttons {
  display: flex;
  gap: 0.3rem; /* Space between buttons */
}

/* The "Lean" Button Style */
.lean-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-textlight);
  
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

@media (hover: hover) {  /* --- Only allow hover effects on devices with a mouse --- */
  .lean-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
  }
}

/* Active State */
.lean-btn.is-active {
  background-color: var(--color-shiny); 
  border-color: var(--color-primary-dark);
  color: #222;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* reused classes: .menu-label, .menu-toggle-group, .menu-toggle-btn work automatically */


/* Example CSS */
.theme-toggle svg {
  /* You can resize it easily here */
  width: 20px; 
  height: 20px;
  
  /* Smooth transition for hover effects */
  transition: transform 0.2s ease;
}

.theme-toggle:hover svg {
  /* Simple playful interaction */
  transform: rotate(15deg);
}

/* --- VISUAL INGREDIENTS LIST --- */

/* 1. Default State: ICONS VISIBLE */
.ingredients-list li {
  display: flex;
  align-items: center; 
  min-height: 40px;     /* Force height to match the icon */
  margin-bottom: 10px;  
  line-height: 1.3;
}

/* 2. The Icon Wrapper: VISIBLE by default */
.ing-list-icon {
  display: block;        
  width: 40px;          
  height: 40px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* 3. Hide icon when attribute is 'hide' */
[data-ing-icons="hide"] .ing-list-icon {
  display: none;
}

/* 4. Compact Text Mode when hidden */
[data-ing-icons="hide"] .ingredients-list li {
  min-height: auto;
  margin-bottom: 5px;
}

.ing-list-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

/* Show icon when attribute is present */
[data-ing-icons="show"] .ing-list-icon {
  display: block;
}

/* --- ABOUT PAGE / GENERIC TEXT --- */

.text-content {
  max-width: 700px; /* Optimal reading width */
  margin: 0 auto;
  padding: 2rem 20px;
}

.intro-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.divider-small {
  border: 0;
  border-top: 2px solid var(--color-primary);
  width: 50px;
  margin: 3rem auto;
}

/* Legend Grid for the About Page */
.legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin: 2rem 0;
}

.legend-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  background: var(--color-muted);
  padding: 1.5rem;
  border-radius: 8px; /* Optional rounded corners for these cards */
}

.legend-item h3 {
  margin-top: 0;
  font-size: 1.1rem;
  font-family: 'Shrikhand', cursive;
  color: var(--color-primary-dark);
}

.legend-demo {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
}

.legend-item p {
  font-size: 0.9rem;
  color: var(--color-textlight);
  line-height: 1.4;
}

/* Beta Notice Box */
.beta-notice {
  background-color: var(--color-textbox);
  border-left: 5px solid var(--color-primary);
  padding: 1.5rem;
  margin-top: 3rem;
  text-align: center;
}

.beta-notice h3 {
  margin-top: 0;
  color: var(--color-text);
}

/* --- SITE FOOTER --- */
.site-footer {
  background-color: #252523; /* Dark Grey for contrast */
  border-top: 1px solid var(--color-border);
  padding: 3rem 0;
  margin-top: auto; 
  font-family: 'Inter', sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  color: #ddd;
}

/* 1. The Brand Name */
.footer-logo {
  font-family: 'Shrikhand', cursive;
  font-size: 1.2rem;
  color: var(--color-primary); 
  display: block;
  margin-bottom: 0.5rem;
}

/* 2. Generic Paragraphs (Copyright, etc.) */
.footer-brand p {
  color: var(--color-textlight);
  font-size: 0.9rem;
  margin: 0;
}

/* 3. The Slogan - FIXED SELECTOR */
/* We use .footer-brand .footer-slogan to beat the generic rule above */
.footer-brand .footer-slogan {
  color: var(--color-brand);          /* Pure White */
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;        
  font-style: none;
  
  /* These will now work! */
  margin-top: 0px;         
  margin-bottom: 15px;
  
  opacity: 0.9;            
}

.copyright {
  color: #aaaaaa;          
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: #ddd;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}

.footer-links a:hover {
  color: var(--color-primary); 
  text-decoration: underline;
}

/* Mobile Tweak */
@media screen and (max-width: 700px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* --- HERO STATEMENT BLOCK --- */
/* 1. Main Container: Handles the height and clips the edges */
.hero-statement {
  position: relative;
  width: 100%;
  min-height: 60vh; /* Ensures it's always tall enough */
  overflow: hidden; /* Chops off the extra 120% width so no scrollbar appears */
  
  /* Vertically center the text */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. The Grid: Sits behind the text */
.hero-bg-grid {
  /* Positioning */
  position: absolute;
  top: -10%; 
  left: -5%; /* Center the 110% width */
  width: 110%; 
  
  /* Flexbox Magic */
  background-color: #fff;
  display: flex;
  flex-wrap: wrap; /* Allows items to flow onto new lines */
  justify-content: center; /* Centers the whole cloud of icons */
  gap: 5rem; /* Spacing between items */
  
  /* Visuals */
  opacity: 1;
  pointer-events: none;
  
  /* Parallax Note: The script will grab this entire block and move it */
  will-change: transform; 
}

/* 3. The Items */
.hero-item img {
  display: block;
  width: 60px; /* Adjust your preferred ingredient size */
  height: auto;
}

/* 4. The Text: Sits on top */
.hero-content {
  position: relative;
  z-index: 1;
  background-color: white;
  /* 2/3rds width */
  width: 50%; 
  
  /* Centers text inside the box */
  text-align: center; 
  font-family: 'intel' sans-serif;
  
  /* Optional: Cap width on ultra-wide screens to keep readability */
  max-width: 1000px; 
}


.highlight-text {
  font-family: 'Inter', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;

  color: #222;
  background-color: transparent;
  
  /* NEW: Gradient creates the partial stroke */
  /* Top 25% is transparent. Bottom xx% is Yellow. 
  background-image: linear-gradient(180deg, transparent 15%, #fff 15%);
  
  /* Keep box-decoration-break so it works on multiple lines 
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;   */
  
  /* Padding: 0 top/bottom (controlled by gradient), 0.6rem on sides */
  padding: 0 0.6rem;
}

@media screen and (max-width: 700px) {
  .highlight-text {
    font-size: 2rem;
  }
}

/* =========================================
   PHASE 3: FILTER & SEARCH
   ========================================= */

/* --- NEW COMPACT FILTER BAR --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on very small screens */
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  position: relative;
  z-index: 100; /* Ensure dropdowns float over content */
}

/* The Container for each Filter Group (Dropdown Parent) */
.filter-dropdown-container {
  position: relative;
  display: inline-block;
}

/* The Trigger Button (e.g., "Effort ▾") */
.filter-dropdown-trigger {
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.filter-dropdown-trigger:hover {
  border-color: var(--color-primary);
  background-color: var(--color-textbox);
}

.filter-dropdown-trigger.has-active-filters {
  background-color: var(--color-shiny);
  border-color: var(--color-primary);
  font-weight: 600;
  color: #222;
}

/* The Dropdown Menu (Hidden by default) */
.filter-dropdown-menu {
  display: none; /* Hidden */
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 5px;
  background-color: var(--color-bg);
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px;
  z-index: 101;
}

/* Show menu when active class is added via JS */
.filter-dropdown-container.is-open .filter-dropdown-menu {
  display: block;
}

/* Columns inside dropdown (Optional for Meal Type) */
.filter-dropdown-menu.wide-menu {
  min-width: 300px;
  column-count: 2; /* 2 Columns for long lists */
  column-gap: 1rem;
}

/* The Actual Filter Checkbox/Button Items */
.filter-option {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: background 0.1s;
  /* Prevent column break inside item */
  break-inside: avoid; 
  page-break-inside: avoid;
}

.filter-option:hover {
  background-color: var(--color-muted);
}

.filter-option input[type="checkbox"] {
  margin-right: 10px;
  accent-color: var(--color-primary); /* Uses your brand color */
  width: 16px;
  height: 16px;
}

/* "Clear All" link */
#clear-filters-link {
  align-self: center;
  margin-left: auto; /* Push to right */
  font-size: 0.9rem;
  color: var(--color-textlight);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 10px;
}

#clear-filters-link:hover {
  color: var(--color-primary-dark);
}

/* Hide helper for filtered items */
.recipe-card.is-hidden { 
  display: none !important; 
}

/* Filterable Grid Wrapper */
.filterable-grid {
  flex-wrap: wrap; 
  overflow-x: visible; 
  justify-content: center; 
  gap: 20px;
}

@media screen and (min-width: 701px) {
    .filterable-grid {
        justify-content: flex-start;
    }
}


/* --- Mobile Responsive Rules --- */
@media screen and (max-width: 700px) {
/* --- 1. GENERAL LAYOUT --- */
  body { margin: 0; }
  .container { padding: 0px; }

/* Make text readable on mobile */
  .recipe-header h1 { font-size: 1.6rem; }
  .recipe-header h2 { font-size: 1.4rem; }
  .source-link { font-size: 1.1rem; }
  .step-textbox { width: 90%; }

  /* --- 2. HEADER & FOOTER --- */
  .header-hidden { transform: translateY(-100%); }
  
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

/* --- 3. RECIPE CARDS (The Fix) --- */
  .recipe-grid {
    /* Stop horizontal scrolling */
    overflow-x: visible;
    
    /* Force cards to stack vertically */
    flex-wrap: wrap; 
    
    /* Center them */
    justify-content: space-between;
    gap: 10px;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
  }

  /* --- LIMIT TO 8 ITEMS --- */
  /* This hides the 9th card and every card after it */
  .home-feed .recipe-grid .recipe-card:nth-child(n+9) {
    display: none;
  }

  .recipe-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .recipe-card {
    /* Optional: Ensure they don't look weirdly narrow */
    width: calc(50% - 5px); 
    margin-bottom: 15px;
}
    /* Optional: Tweak text size so it doesn't wrap awkwardly on small cards */
/* --- STRONGER SELECTOR (.recipe-grid added) --- */
  .recipe-grid .recipe-card h3 {
    font-size: 0.9rem; /* Slightly smaller to really see the change */
    padding: 0.5rem;   /* Tighter padding */
    line-height: 1.1;  /* Tighter lines for 2-column wrapping */
  }
  
  /* Optional: Reduce image height slightly to maintain proportions */
  .recipe-card img {
    height: 110px;
  
  }

  /* --- 4. BUTTON FIX --- */
  .cta-button-container {
    gap: 0; /* Remove gap */
    margin-bottom: 2rem;
  }

  /* HIDE the lines on mobile so the button fits */
  .cta-button-container::before,
  .cta-button-container::after {
    display: none; 
  }

  .cta-button {
    font-size: 1.2rem;
    width: auto; 
  }

/* --- 5. RECIPE STEPS (Existing Logic) --- */
  .step-container {
    flex-direction: column;
    gap: 1rem; 
  }
  .step-content {
    flex-direction: column;
    align-items: stretch;
  }

  
  .ingredients-panel {
    justify-content: center; 
    /* THE FIX: Force it to take full width so justify-content: center can work */
    width: 100%; 
    align-self: center; /* Overrides the desktop 'flex-start' */
  }
  /* --- THE FIX: Reset margins so groups can be centered --- */
  .ingredient-group.group-size-2,
  .ingredient-group.group-size-3 {
    margin-left: auto;
    margin-right: auto;
  }
  .ingredients-panel::after,
  .ingredients-panel::before {
    display: none; /* Hide Chevron */
  } 
  .cooking-panel {
    background-color: transparent; 
    padding: 1rem;
    border-radius: 0px;
 }

.recipe-details {
    flex: 1; /* This makes it 1:1 with the image's flex: 1 */
  }
/*
  .ingredient-group.group-size-1 {
  margin-left: auto;
  margin-right: auto;
}   */

  /* Ajustement HUD pour mobile */
  .hud-overlay {
    top: -18px; /* Ta correction spécifique */
  }


/* --- RECIPE HEADER: Stacked & Aligned --- */
  .recipe-main-split {
    display: flex;
    flex-direction: column-reverse; /* Puts image on top visually */
    gap: 1.5rem;
  }

  .hero-image-container {
    width: 100%; /* Fills the container safely */
    margin: 0;   /* No negative margin hacks */
  }

  /* Optional: Ensures the image inside fills that space */
  .hero-image-container img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensures it looks good even if aspect ratio changes */
  }

  .recipe-details {
    width: 100%;
  }