/* ============== 
 BOX MODEL RESET ↓
================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== 
 FONTS ↓
======== */

@font-face {
  font-family: "Outfit";
  src: url(assets/fonts/outfit/Outfit-VariableFont_wght.woff2) format("woff2"); /* By declaring the format the browser reads it and in case it isn't supported, the user won't spend data in assets the browser won't be able to use */
  font-weight: 100 900; /* covers all weights (100-900) to save loading time */
  font-style: normal;
  font-display: swap; /* Accessibility: shows fallback font while oufit loads */
}

@font-face {
  font-family: "Young Serif";
  src: url(assets/fonts/young-serif/YoungSerif-Regular.woff2) format("woff2");
  font-weight: 400; /* used for the recipe title */
  font-style: normal;
  font-display: swap;
}

/* Entiendo que es recomendable transformar las fuentes de ttf a woff2 para hacerlas más ligeras y que carguen más rápido */

/* =================
DESIGN TOKEN VAULT ↓
==================== */
:root {
  /* ------
  SPACING ↓
  --------- */

  /* PRIMITIVE SPACING (The what, raw units) */
  --sp-1600: 8rem; /* 128px */
  --sp-600: 3rem; /* 48px */
  --sp-500: 2.5rem; /* 40px */
  --sp-450: 2.25rem; /* 36px */
  --sp-400: 2rem; /* 32px */
  --sp-350: 1.75rem; /* 28px */
  --sp-300: 1.5rem; /* 24px */
  --sp-250: 1.25rem; /* 20px */
  --sp-200: 1rem; /* 16px */
  --sp-150: 0.75rem; /* 12px */
  --sp-100: 0.5rem; /* 8px */

  /* ATTRIBUTION */
  --sp-fs-footer: 0.6875rem; /* 11px */
  --sp-br-footer: 0.25rem; /* 4px */

  /* VIEWPORT BOUNDARIES */
  --sp-wd-min: 23.4375rem; /* 375px Mobile, min-width */
  --sp-wd-max: 46rem; /* 736px Dessktop, max-width */

  /* SEMANTIC SPACING (the why, the purpose) */
  --wd-recipe-card: clamp(var(--sp-wd-min), 90vw, var(--sp-wd-max));

  /* FONT SIZE */
  --fs-title: var(--sp-500); /* 40px */
  --fs-subtitle: var(--sp-350); /* 28px */
  --fs-prep-time: var(--sp-250); /* 20px */
  --fs-paragraph: var(--sp-200); /* 16px */
  --fs-footer: var(--sp-fs-footer); /* 11px */
  --fs-mq-title: var(--sp-450); /* 36px */

  /* PADDING: Internal 'bubble wrap' for our boxes*/
  --pd-recipe-card: var(--sp-500);
  --pd-prep-time: var(--sp-300);
  --pd-ul: var(--sp-300); /* Moves the entire list container */
  --pd-list: var(--sp-200); /* Internal space for every line in the item */
  --pd-instructions: var(--sp-300);
  --pd-th: var(--sp-400);
  --pd-table: var(--sp-150) 0;
  --pd-media-query: 0 var(--sp-400) var(--sp-500);
  --pd-mq-ul: var(--sp-200);

  /* MARGIN: Empty space between separate boxes */
  --mrg-title: var(--sp-500) 0 var(--sp-300);
  --mrg-subtitle: var(--sp-300);
  --mrg-description: var(--sp-400);
  --mrg-prep-time: var(--sp-200);
  --mrg-list-bottom: var(--sp-100);
  --mrg-hr: var(--sp-400) 0;
  --mrg-attribution: var(--sp-150);

  /* TEXT INDENT: Only moves the very first line of text */
  --ti-list: var(--sp-150);

  /* BORDER RADIUS */
  --br-big: var(--sp-300);
  --br-small: var(--sp-150);
  --br-attribution: var(--sp-br-footer);

  /* ------
  SPACING ↑
  --------- */

  --border-hr: 1px solid var(--clr-hr);

  /* ----
  COLOR ↓
  ------- */

  /* PRIMITIVE COLOR */
  --clr-stone-100: hsl(30, 54%, 90%); /* body background */
  --clr-white: rgba(255, 255, 255, 70%); /* card background */
  --clr-rose-50: hsl(330, 100%, 98%); /* prep-time background */
  --clr-stone-900: hsl(24, 5%, 18%); /* titile */
  --clr-stone-600: hsl(30, 10%, 34%); /* paragraph + bulleted points + th */
  --clr-rose-800: hsl(332, 51%, 32%); /* prep-time title + bulleted points */
  --clr-brown-800: hsl(14, 45%, 36%); /* subtitle + ol + td */
  --clr-anchor: hsl(228, 45%, 44%);
  --clr-stone-150: hsl(30, 18%, 87%); /* hr */

  /* SEMANTIC COLOR */
  --clr-card: var(--clr-white);
  --clr-title: var(--clr-stone-900);
  --clr-subtitle: var(--clr-brown-800);
  --clr-prep-time-title: var(--clr-rose-800);
  --clr-prep-time-background: var(--clr-rose-50);
  --clr-paragraph: var(--clr-stone-600);
  --clr-hr: var(--clr-stone-150);
  --clr-links: var(--clr-rose-800);
  --clr-links-active: var(--clr-rose-50);

  /* ----
  COLOR ↑
  ------- */

  /* --------
  TYPOGRAPHY ↓
  ------------ */

  /* FONT FAMILY */
  --ff-titles: "Young Serif", serif;
  --ff-paragraphs: "Outfit", sans-serif;

  /* FONT WEIGHT */
  --fw-paragraph: 400;
  --fw-prep-time: 600;
  --fw-bold: 700;

  /* LINE HEIGHT */
  --lh-100: 1; /* title, subtitle, prep-time, ol lists */
  --lh-150: 1.5; /* paragraphs, ul lists and table data */

  /* --------
  TYPOGRAPHY ↑
  ------------ */
}
/* =================
DESIGN TOKEN VAULT ↑
==================== */

/* =================
RECIPE CARD DESIGN ↓
==================== */

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr-stone-100);
}

.recipe-card {
  padding: var(--pd-recipe-card);
  width: var(--wd-recipe-card);
  /* Typography (Inherited Properties) 
     These values flow down to all children unless overridden */
  font-family: var(--ff-paragraphs);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-paragraph);
  color: var(--clr-paragraph);
  border-radius: var(--br-big);
  background-color: var(--clr-card);
}

.recipe-card__img {
  display: block;
  width: 100%;
  border-radius: var(--br-small);
}

/* ----------------
   HEADER SECTION ↓
   ---------------- */

.recipe-card__title {
  display: block;
  margin: var(--mrg-title);
  font-family: var(--ff-titles);
  font-size: var(--fs-title);
  font-weight: var(--fw-paragraph); /* override User Agent Stylesheet */
  line-height: var(--lh-100);
  color: var(--clr-title);
}

.recipe-card__description {
  display: block; /* <p> is a block element by default  */
  margin-bottom: var(--mrg-description);
  line-height: var(--lh-150);
}

/* ----------------
   HEADER SECTION ↑
   ---------------- */

/* ---------------------
   PREPARATION SECTION ↓
   --------------------- */

.recipe-card__preparation-stats {
  padding: var(--pd-prep-time);
  margin-bottom: var(--mrg-description);
  border-radius: var(--br-small);
  background-color: var(--clr-prep-time-background);
}

/* Flexbox puts gaps between the li items inside the ul */
.recipe-card__prep-list {
  display: flex;
  flex-direction: column;
  gap: var(--mrg-list-bottom);
}

.recipe-card__preparation-time {
  margin-bottom: var(--mrg-prep-time);
  font-size: var(--fs-prep-time);
  font-weight: var(--fw-prep-time);
  line-height: var(--lh-100);
  color: var(--clr-prep-time-title);
}

.recipe-card__preparation-stats time {
  display: block;
  line-height: var(--lh-150);
  text-indent: var(--ti-list); /* Moves only the start of the time text */
}

.recipe-card__preparation-stats ul {
  padding-left: var(--pd-ul); /* Aligns the bullets under the title */
}

.recipe-card__preparation-stats li::marker {
  color: var(--clr-prep-time-title); /* Makes bullets match the section color */
}

.recipe-card__time-head {
  font-weight: var(--fw-bold);
}

/* ---------------------
   PREPARATION SECTION ↑
   --------------------- */

.recipe-card__subtitle {
  margin-bottom: var(--mrg-subtitle);
  /* Typography (Specific overrides) */
  font-family: var(--ff-titles);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-paragraph);
  color: var(--clr-subtitle);
}

/* ---------------------
   INGREDIENTS SECTION ↓
   --------------------- */

.recipe-card__ingredient-list {
  display: flex;
  flex-direction: column;
  gap: var(--mrg-list-bottom);
  padding-left: var(--pd-ul); /* Aligns the bullets under the title */
  line-height: var(--lh-150);
}

.recipe-card__ingredient-list li {
  padding-left: var(--pd-list); /* Adds space for all lines of the ingredient */
}

.recipe-card__ingredient-list li::marker {
  color: var(--clr-subtitle); /* Makes bullets match the section color */
}

/* ---------------------
   INGREDIENTS SECTION ↑
   --------------------- */

hr {
  margin: var(--mrg-hr);
  border: 0; /* override User Agent Stylesheet */
  border-top: var(--border-hr); /* Applies our clean, flat design line */
  color: var(--clr-hr);
}

/* ----------------------
   INSTRUCTIONS SECTION ↓
   ---------------------- */

.recipe-card__instruction-list {
  display: flex;
  flex-direction: column;
  gap: var(
    --mrg-list-bottom
  ); /* Flexbox gap ensures total control over child spacing, eliminating redundant margins on the final list item */
  padding-left: var(--pd-instructions);
  line-height: var(--lh-150);
}

.recipe-card__instruction-list li::marker {
  font-weight: var(--fw-bold);
  color: var(--clr-subtitle);
}

.recipe-card__instruction-list li {
  padding-left: var(--pd-list);
}

.recipe-card__instruction-step {
  font-weight: var(--fw-bold);
}

/* ----------------------
   INSTRUCTIONS SECTION ↑
   ---------------------- */

/* -------------------
   NUTRITION SECTION ↓
   ------------------- */

.recipe-card__table {
  border-collapse: collapse; /* remove gaps between cells */
  width: 100%; /* Occupy 100% of the parent container's width */
  margin-top: var(--mrg-subtitle);
  text-align: left;
}

.recipe-card__table th,
.recipe-card__table td {
  padding: var(--pd-table);
  border-bottom: var(--border-hr);
  font-weight: var(--fw-paragraph);
  line-height: var(--lh-150);
}

.recipe-card__table tr:last-child th,
.recipe-card__table tr:last-child td {
  border-bottom: none;
  padding-bottom: 0;
}

.recipe-card__table th {
  padding-left: var(--pd-th);
}

.recipe-card__table td {
  width: 50%; /* Box Model: Splitting the table into two equal 50% halves establishes a fixed central axis. This ensures that all labels and values remain perfectly aligned vertically, preventing layout shifts regardless of text length. */
  font-weight: var(--fw-bold);
  color: var(--clr-subtitle);
}

/* Accessibility Utility: The "Invisibility Cloak" 
   This hides elements from the eyes but keeps them for Screen Readers */
.recipe-card__caption-sr-only {
  /* Takes the box off the shelf so it doesn't take up any space in the layout */
  position: absolute;

  /* Shrinks the box down to the size of a tiny grain of sand */
  width: 1px;
  height: 1px;

  /* Removes all the internal "bubble wrap" (padding) and the box itself (border) */
  border: 0;
  padding: 0;

  /* Pushes that tiny grain outside the visible area just to be safe */
  margin: -1px;
  /* Acts like "scissors" to cut off any content that tries to stick out of the tiny box */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);

  /* Forces the text to stay in one line so it doesn't try to make the box taller */
  white-space: nowrap;
}

/* -------------------
   NUTRITION SECTION ↑
   ------------------- */

/* ----------------
   FOOTER SECTION ↓
   ---------------- */

.attribution {
  margin-top: var(--mrg-attribution);
  font-family: var(--ff-paragraphs);
  font-size: var(--fs-footer);
  text-align: center;
  color: var(--clr-paragraph);
}
.attribution a {
  font-family: var(--ff-titles);
  font-weight: var(--fw-bold);
  color: var(--clr-links);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.attribution a:hover,
.attribution a:focus-visible {
  color: var(--clr-links-active);
  border-radius: var(--br-attribution);
  background-color: var(--clr-links);
}

/* ----------------
   FOOTER SECTION ↑
   ---------------- */

/* -----------------------------
   MEDIA QUERY (Mobile Sensor) ↓
   Protocol: Screens <= 375px (Figma Spec).
   Purpose: Implements Full-Bleed layout for the image while protecting text readability with an inner wrapper.
   ----------------------------- */

@media screen and (max-width: 375px) {
  /* CARD + HERO */

  /* Viewport Context: Removes the outer 'bubble wrap' */
  body {
    padding: 0;
  }

  .recipe-card__media-query-text {
    padding: var(--pd-media-query);
  }

  /* Box Model & Visuals: Achieving Full-Bleed integration */
  .recipe-card {
    padding: 0;
    border-radius: 0;
  }

  /* Image integrates with the device edges */
  .recipe-card__img {
    width: 100%;
    border-radius: 0;
  }

  /* TITLE */
  .recipe-card__title {
    font-size: var(--fs-mq-title); /* 36px - Figma Mobile Spec */
    line-height: var(--lh-100);
  }

  /* PREP TIME */
  .recipe-card__preparation-stats time {
    padding-left: var(--pd-mq-ul);
    text-indent: 0; /* Resets desktop indent for cleaner mobile layout */
  }
}

/* -------------
   MEDIA QUERY ↑
   ------------- */

/* =================
RECIPE CARD DESIGN ↑
==================== */