/* =====================================================
   RECIPES PAGE
   Goes with recipes.html

   How the page is put together:
   - the yellow paper background (whole page)
   - the bread title picture
   - an intro box on cream paper
   - one cream paper box per recipe, stacked under it
   ===================================================== */


/* ---------- COLOURS + SIZES (change them all here) ---------- */
:root {
  --paper: #f7f1e2;     /* cream paper (same as the other pages) */
  --ink: #1e1e1e;       /* main text colour */
  --faded: #6b5c45;     /* small labels ("serves 12 - 14") */
  --jaggery: #8a4a17;   /* recipe names + the "ingredients / instructions" labels */

  /* HOW WIDE THE BOXES ARE. 58vw = 58% of the screen width.
     bigger number = wider boxes */
  --box-width: 58vw;

  /* GAP BETWEEN THE TITLE AND THE FIRST BOX.
     in clamp(smallest, ideal, biggest) the middle number is the one to change */
  --title-gap: clamp(32px, 6vh, 64px);

  /* gap between one box and the next */
  --box-gap: clamp(24px, 4vw, 44px);
}


/* ---------- PAGE BASICS ---------- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  font: bolder 8pt tahoma;
  letter-spacing: 2px;
}

* { box-sizing: border-box; }

/* CONTENT AREA — the whole page. no navbar here, the way back is the
   back-to-room button (css/back-to-room.css) */
.content-area {
  min-height: 100vh;
  padding-top: 8vh; /* lives on the container, not the image, so there's
                        no child margin left to collapse */
  padding-bottom: 10vh;   /* breathing room under the last box */
  background: #efcf75;
  background-image: url("../images/patternsbg/yellowpaperie.webp");
  background-size: 40% auto;
  background-repeat: repeat;
  text-align: justify;
}

/* the bread title */
.breacipies {
  display: block;
  margin: 0 auto;
  width: min(38vw, 480px);
  max-width: 70vw;
  height: auto;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
}


/* ---------- PAPER TEXTURE (on every cream box, same as the tarot page) ---------- */
.paper {
  background-color: var(--paper);                                     /* shows while the image loads */
  background-image: url("../images/papertextures/paper-cream-web.jpg");
  background-size: 1500px auto;                                       /* smaller number = finer grain */
  background-repeat: repeat;
}

/* start each box at a different spot on the paper so they don't all look the same */
.recipe               { background-position: 300px 200px; }
.recipe:nth-of-type(2n) { background-position: 700px 450px; }


/* ---------- THE BOXES (intro + recipes) ----------
   both kinds are the same width and sit in the middle of the page.
   "margin: ... auto" is what centres them. */
.intro,
.recipe {
  width: var(--box-width);
  margin: var(--box-gap) auto 0;        /* gap above, centred, nothing below */
  padding: clamp(18px, 3vw, 38px);
  box-shadow: 4px 5px 8px rgba(0, 0, 0, 0.22);   /* soft shadow so the paper lifts off the yellow */

  /* the words inside. the page's own font (tiny tahoma) is too small to read
     a whole recipe in, so the boxes use the same typewriter font as the tarot page */
  font: 14px/1.7 "Courier New", Courier, monospace;
  letter-spacing: 0;
  text-align: left;     /* change to justify if i want straight edges on both sides */
}

/* the first box sits further down, away from the title */
.intro { margin-top: var(--title-gap); }

/* paragraphs: gap between them, but no extra gap at the very top/bottom of a box */
.intro p,
.recipe p {
  margin: 0 0 1em;
}

.intro p:last-child,
.recipe p:last-child {
  margin-bottom: 0;
}


/* ---------- A RECIPE BOX ---------- */
.recipe {
  display: flow-root;   /* makes the box wrap around the photo instead of letting it poke out the bottom */
}

/* recipe name ("Unni Appam") */
.recipe-name {
  font-family: 'Jacquard 12', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--jaggery);
  margin: 0 0 6px;
}

/* "Serves 12 - 14" */
.recipe .recipe-serves {
  margin: 0 0 1.4em;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--faded);
}

/* the photo: on the right, words wrap around it.
   looks like a print stuck onto the page (white border + a tiny tilt) */
.recipe-photo {
  float: right;
  width: 44%;                    /* how much of the box the photo takes */
  height: auto;
  margin: 4px 0 16px 26px;       /* top | right | bottom | left (left + bottom = gap to the words) */
  border: 4px solid #fffdf6;     /* the white edge of the print. bigger number = thicker */
  box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.3);
  transform: rotate(1.5deg);     /* the tilt. 0deg = straight */
}

/* "Ingredients:" and "Instructions:" */
.recipe-label {
  margin: 1.8em 0 0.6em;
  font: bold 13px "Courier New", Courier, monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jaggery);
}

/* the dotted line across the box, above "Instructions:" (and anything after it).
   clear: both = starts below the photo instead of squeezing in beside it */
.recipe-label ~ .recipe-label {
  clear: both;
  padding-top: 1.4em;
  border-top: 2px dotted var(--ink);
}

.ingredients {
  margin: 0;
  padding-left: 1.3em;      /* room for the bullets */
  list-style: square;
  overflow: hidden;         /* keeps the bullets from sliding under the photo */
}

.ingredients li { margin-bottom: 4px; }


/* ---------- NARROW SCREENS + PHONES ----------
   the boxes get wider (58% of a phone is way too thin to read in)
   and the photo stops floating and goes full width */
@media (max-width: 900px) {
  :root { --box-width: 80vw; }
}

@media (max-width: 700px) {
  :root { --box-width: 92vw; }

  .content-area {
    padding-top: 5vh;
  }

  .breacipies {
    width: min(60vw, 320px);
  }

  .recipe-photo {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 18px;
    transform: none;
  }
}