/*
  Nutrition Magician: main stylesheet

  Conventions (agreed with Robert):
  - Colours are named by role (primary, secondary, accent…), set once as
    variables below. Skins change the variables; nothing else.
  - One job per class, layered in the HTML: class="text-primary text-lg".
  - Vertical spacing uses spacer divs: <div class="spacer-20"></div>.
  - Buttons: a base class for size and shape (btn / btn-sm) plus a look
    class (btn-primary…). No margins on buttons.
  - Cards are single component classes.
  - Sections are in alphabetical order. Media queries go at the bottom.
*/

:root {
  --primary: #2a4344;
  --primary-dark: #192c2d;
  --primary-light: #95a1a2;
  --secondary: #95c11f;
  --secondary-dark: #7aa016;
  --secondary-light: #bbdb94;
  --accent: #ffac1c;
  --accent-dark: #fc6600;
  --accent-light: #fff1d9;

  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-accent: #ffffff;

  --bg: #f8f9fa;
  --surface: #ffffff;
  --text: #2a4344;
  --text-muted: #6b7b7c;
  --border: #e3e7e7;

  --warning: #b26a00;
  --danger: #c62828;

  --font-body: 'EB Garamond', serif;
  --font-ui: 'EB Garamond', serif;
  --font-logo: 'Clicker Script', cursive;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(42, 67, 68, .10), 0 2px 6px rgba(42, 67, 68, .08);
  --shadow-raised: 0 2px 4px rgba(42, 67, 68, .12), 0 6px 12px rgba(42, 67, 68, .12);
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}

a {
  color: var(--primary);
  text-decoration: none;
}

  a:hover {
    color: var(--secondary-dark);
  }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

p {
  margin: 0;
  line-height: 20px;
  letter-spacing: .5px;
}


/* ------------------------------------------------------- ALERTS */

/* Same text formatting as the buttons */

.alert-danger {
  padding: 10px 16px;
  border-radius: 3px;
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.alert-info {
  padding: 10px 16px;
  border-radius: 3px;
  background-color: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.alert-success {
  padding: 10px 16px;
  border-radius: 3px;
  background-color: var(--secondary);
  color: var(--on-secondary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}


/* ------------------------------------------------------- BACKGROUNDS */

.bg-accent {
  background-color: var(--accent);
}

.bg-accent-light {
  background-color: var(--accent-light);
}

.bg-default {
  background-color: var(--bg);
}

.bg-none {
  background: none;
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-secondary-light {
  background-color: var(--secondary-light);
}

.bg-surface {
  background-color: var(--surface);
}


/* ------------------------------------------------------- BACKUP CODES */

.backup-code {
  padding: 10px;
  border: 1px dashed var(--primary-light);
  border-radius: 3px;
  font-size: 20px;
  letter-spacing: 2px;
}


/* ------------------------------------------------------- BANNERS */

.banner-staging {
  padding: 6px 20px;
  background-color: var(--accent);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
}


/* ------------------------------------------------------- BORDERS */

.border {
  border: 1px solid var(--border);
}

.border-bottom-secondary-light {
  border-bottom: 1px solid var(--secondary-light);
}

.border-none {
  border: 0;
}

.border-primary {
  border: 1px solid var(--primary);
}

.border-primary-light {
  border: 1px solid var(--primary-light);
}

.border-secondary {
  border: 1px solid var(--secondary);
}

.border-top-secondary-light {
  border-top: 1px solid var(--secondary-light);
}

.rounded {
  border-radius: var(--radius);
}

.rounded-top {
  border-radius: var(--radius) var(--radius) 0 0;
}

.rounded-bottom {
  border-radius: 0 0 var(--radius) var(--radius);
}


/* ------------------------------------------------------- BUTTONS */

.btn {
  display: inline-block;
  padding: 10px 16px;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
}

.btn-sm {
  display: inline-block;
  padding: 6px 10px;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
}

.btn-accent {
  background-color: var(--accent);
  color: var(--on-accent);
  border-radius: 3px;
  text-decoration: none;
}

  .btn-accent:hover {
    background-color: var(--accent-dark);
    color: var(--on-accent);
  }

.btn-danger {
  background-color: var(--danger);
  color: #ffffff;
  border-radius: 3px;
  text-decoration: none;
}

  .btn-danger:hover {
    background-color: #9e1f1f;
    color: #ffffff;
  }

.btn-outline-primary {
  background-color: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  border-radius: 3px;
  text-decoration: none;
}

  .btn-outline-primary:hover {
    background-color: var(--primary);
    color: var(--on-primary);
  }

.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  border-radius: 3px;
  text-decoration: none;
}

  .btn-primary:hover {
    background-color: var(--primary-dark);
    color: var(--on-primary);
  }

.btn-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
  border-radius: 3px;
  text-decoration: none;
}

  .btn-secondary:hover {
    background-color: var(--secondary-dark);
    color: var(--on-secondary);
  }


/* Looks like text: star ratings and other small in-line buttons */
.button-plain {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;   /* a button would otherwise use the browser's own font ("Log out") */
  font-size: inherit;
  cursor: pointer;
}


/* ------------------------------------------------------- CARDS */

.card {
  display: block;
  overflow: hidden;
  background-color: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease;
}

  a.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-raised);
    color: var(--text);
  }

.card-body {
  padding: 16px 18px 18px;
}

/* A card whose footer sits along its bottom edge, however much is in the body, so the
   footers of the cards in a row line up (the stars on recipe cards) */
.card-stack {
  display: flex;
  flex-direction: column;
}

  .card-stack .card-body {
    flex: 1 1 auto;
  }

.card-footer {
  padding: 10px 18px 12px;
  border-top: 1px solid var(--border);
}

/* "Start here" on the dashboard: a plain card (Robert, 14/10/2026: back from light green to
   the white one); a tick, the step, and a button on the one to do next */
/* The list of what else there is, at the end */
.start-more {
  margin: 0;
  padding-left: 22px;
}

  .start-more li {
    padding: 4px 0;
  }

/* The same, as a strip under the nav on every other page: what to do next */
.start-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background-color: var(--secondary-light);
  color: var(--primary);
}

  .start-next a {
    color: var(--primary);
  }

  .start-next .btn-primary {
    color: var(--on-primary);
    white-space: nowrap;
  }

.start-next-text {
  flex: 1 1 320px;
}

.start-step {
  display: flex;
  flex-wrap: wrap;   /* on a phone the "Do this next" button drops under the step */
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.start-tick {
  font-size: 20px;
  line-height: 1.3;
}

.start-text {
  flex: 1 1 220px;
}

.start-step .btn-sm {
  white-space: nowrap;
}

.start-step-done .start-text a {
  color: var(--text-muted);
}

/* Your spending: a bar a week, the longest week full width */
.spend-bar {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  background-color: var(--secondary-light);
  appearance: none;
}

  .spend-bar::-webkit-progress-bar {
    background-color: var(--secondary-light);
    border-radius: 5px;
  }

  .spend-bar::-webkit-progress-value {
    background-color: var(--secondary);
    border-radius: 5px;
  }

  .spend-bar::-moz-progress-bar {
    background-color: var(--secondary);
    border-radius: 5px;
  }

/* A page of reading (the terms, the privacy policy): a comfortable line length, spaced headings */
.page-text {
  max-width: 760px;
}

  .page-text h2 {
    margin: 36px 0 12px;
    font-size: 1.25rem;
    color: var(--secondary);
  }

  .page-text p,
  .page-text li {
    line-height: 1.6;
  }

  .page-text p + p {
    margin-top: 12px;
  }

  .page-text ul {
    padding-left: 22px;
  }

  .page-text li + li {
    margin-top: 8px;
  }

/* A table that scrolls sideways on a narrow screen instead of widening the page */
.table-scroll {
  overflow-x: auto;
}

/* A table cell that keeps to one line (a date, an amount) */
.nowrap {
  white-space: nowrap;
}

/* How it works: a cut-out picture (transparent background) on the step's green panel, rising
   above its top edge (Robert, 16/10/2026); the card lets it show beyond its corner */
.step-card {
  overflow: visible;
}

.step-grid {
  row-gap: 20px;
  overflow-x: clip;   /* the enlarged pictures' see-through edges mustn't widen the page on a phone; they still rise out of the top and bottom */
}

  /* room above each card for its picture rising out of the top: a share of the card's own width
     (the pictures grow with it), so they clear the card above in two columns or one too */
  .step-grid > .card {
    margin-top: 14%;
  }

.step-art {
  position: relative;
  aspect-ratio: 2 / 1;
  background-color: var(--secondary-light);
  border-radius: var(--radius) var(--radius) 0 0;
}

  .step-art-front {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    transform: translate(15%, -10%) scale(1.6);   /* to the right (its shadow ends about 3% short of the frame) and up a little, level with the wider ones */
    transform-origin: 50% 40%;   /* bigger from (about) its middle: out of the panel at the top and the bottom */
    z-index: 1;
  }

  /* a wider cut-out (a tablet): less enlarged, less far right, so its shadow stays in the frame */
  .step-art-front.step-art-wide {
    transform: translateX(12%) scale(1.35);
  }

  /* wider still (a laptop, its shadow to the left): a touch left of centre, so its right edge and its shadow stay in the frame */
  .step-art-front.step-art-laptop {
    transform: translateX(-2%) scale(1.45);
  }

  /* one that comes in from the bottom right corner (an arm holding a phone): pinned to that
     corner, rising a little out of the top (Robert, 16/10/2026) */
  .step-art-front.step-art-corner {
    left: auto;
    right: 0;
    width: 64%;
    transform: none;
  }

  /* one standing up (a tablet on a stand): its base on the panel's bottom edge, right of
     centre, rising out of the top */
  .step-art-front.step-art-stand {
    left: auto;
    right: 2%;
    width: 46%;
    transform: none;
  }

  /* a narrow one further to the right, clear of what's in the middle of the photo (step 6's receipt) */
  .step-art-front.step-art-right {
    transform: translate(27%, -2%) scale(1.35);
  }

  /* a phone at the size of step 6's, so the row's pictures line up top and bottom */
  .step-art-front.step-art-small {
    transform: translate(20%, -2%) scale(1.35);
  }

  /* the card's text starts below the cut-out's base */
  .step-card .card-body {
    padding-top: 30px;
  }

/* How it works: the step's number in a light green circle on the left, half over the picture's
   bottom edge (Robert, 16/10/2026: instead of "STEP 1"); the text follows straight after it */
.step-number {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -38px;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: var(--secondary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
}

  .step-card .step-number {
    margin-top: -52px;
  }

  /* a photo behind the cut-out, filling the panel */
  .step-art-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
  }

/* A recipe a visitor can't open yet (members only): faded, still a card to click */
.card-locked {
  opacity: .5;
}

  .card-locked:hover {
    opacity: .75;
  }

/* A dashboard tile for a page that isn't built yet */
.tile-soon {
  opacity: .55;
}

/* Cards side by side whose rows line up (e.g. the Ingredients and Method
   headings): each card takes 3 rows of the parent grid; row 1 may be empty */
.card-rows {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

  .card-rows > * {
    padding-left: 18px;
    padding-right: 18px;
  }

  .card-rows > :first-child {
    padding-top: 16px;
  }

  .card-rows > :last-child {
    padding-bottom: 18px;
  }

.card-img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform .4s ease;
}

  a.card:hover .card-img {
    transform: scale(1.04);
  }


/* ------------------------------------------------------- CONTAINERS */

.container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* ------------------------------------------------------- DISPLAY */

/* An image on its own line (no gap under it) */
.display-block {
  display: block;
}

/* Keeps its space but isn't seen (lines up icons in a row) */
.invisible {
  visibility: hidden;
}

/* For screen readers only (e.g. the label of a tick box) */
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* An expandable panel: the heading is clickable */
summary {
  cursor: pointer;
}


/* ------------------------------------------------------- DIVIDERS */

.spacer-2 {
  height: 2px;
}

.spacer-10 {
  height: 10px;
}

.spacer-20 {
  height: 20px;
}

.spacer-30 {
  height: 30px;
}

.spacer-40 {
  height: 40px;
}

.spacer-60 {
  height: 60px;
}

.spacer-80 {
  height: 80px;
}

.spacer-100 {
  height: 100px;
}

.spacer-120 {
  height: 120px;
}

.spacer-160 {
  height: 160px;
}

.spacer-200 {
  height: 200px;
}


/* ------------------------------------------------------- FLEX */

.align-center {
  align-items: center;
}

/* Grid items sit at the bottom of their row (e.g. buttons level with the inputs beside them) */
.align-end {
  align-items: end;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Takes the space left in a row */
.flex-grow {
  flex: 1 1 240px;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}


/* ------------------------------------------------------- FOOTER */

.footer {
  padding: 30px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}


/* ------------------------------------------------------- FORMS */

.form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
}

  .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(42, 67, 68, .15);
  }

.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

  .form-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
  }

.form-colour {
  width: 64px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background-color: var(--surface);
  cursor: pointer;
}

.form-error {
  font-size: 15px;
  color: var(--accent-dark);
}

.form-input-hex {
  width: 120px;
  letter-spacing: 1px;
}

.form-input-invalid {
  border-color: var(--accent);
}

.form-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
}

[hidden] {
  display: none !important;
}


/* ------------------------------------------------------- GAPS */

.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.gap-40 {
  gap: 40px;
}


/* ------------------------------------------------------- GRID */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 12 columns, with blocks spanning some of them */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-5 {
  grid-column: span 5;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-7 {
  grid-column: span 7;
}

.col-span-8 {
  grid-column: span 8;
}

.col-span-9 {
  grid-column: span 9;
}

.col-span-10 {
  grid-column: span 10;
}

.col-span-11 {
  grid-column: span 11;
}

/* The whole row */
.col-span-12 {
  grid-column: 1 / -1;
}


/* ------------------------------------------------------- IMAGES */

/* Cropped to fill its box (the box's shape comes from a ratio-… class) */
.img-cover {
  object-fit: cover;
}

/* Shown whole, e.g. a book cover in a fixed-shape box */
.img-contain {
  object-fit: contain;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

.ratio-2-1 {
  aspect-ratio: 2 / 1;
}

/* Book covers (300 × 373) */
.ratio-4-5 {
  aspect-ratio: 4 / 5;
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}


/* ------------------------------------------------------- IMPORT */

/* Check your import: one ingredient line (tick | the website's line, then amount, unit, ingredient, preparation) */
.import-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
}

  .import-line + .import-line {
    border-top: 1px solid var(--border);
  }

.import-line-use {
  padding-top: 2px;
}

.import-line-fields {
  flex: 1 1 auto;
  min-width: 0;
}

/* No ingredient matched: the box asks for one */
.import-line-missing .import-ingredient {
  border-color: var(--accent);
}

.import-unit {
  width: 150px;
}

.import-ingredient {
  flex: 2 1 260px;
}

.import-note {
  flex: 1 1 200px;
}


/* ------------------------------------------------------- LISTS */

.list-none {
  padding-left: 0;
  list-style: none;
}

  .list-none li {
    padding: 4px 0;
  }

/* Ingredient lines, set like a tab stop with a hanging indent:
   "6 Whole:  Beef, Beef short ribs (bone in)…" with the wrapped text lined up */
.list-ingredients {
  display: grid;
  grid-template-columns: fit-content(45%) minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  margin: 0;
  padding-left: 0;
  list-style: none;
  line-height: 22px;
}

  .list-ingredients li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  /* In the recipe editor: a third column for the ↑ ↓ change remove buttons */
  .list-ingredients.list-ingredients-actions {
    grid-template-columns: fit-content(40%) minmax(0, 1fr) auto;
  }

  /* A section heading ("To Serve") across both columns */
  .list-ingredients .list-ingredients-heading {
    display: block;
    padding-top: 10px;
  }

  .list-ingredients .list-ingredients-heading:first-child {
    padding-top: 0;
  }

/* Numbered method steps */
.list-steps {
  margin: 0;
  padding-left: 24px;
}

  .list-steps li {
    padding-left: 12px;
  }

  /* The same space between steps as between ingredient lines */
  .list-steps li + li {
    padding-top: 10px;
  }

  .list-steps li::marker {
    color: var(--secondary-dark);
    font-weight: 600;
  }


/* ------------------------------------------------------- LOGO PREVIEW */

.logo-preview {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background-color: var(--bg);
}


/* ------------------------------------------------------- MARGINS */

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}


/* ------------------------------------------------------- MESSAGES */

/* A row of message cards that scrolls sideways (New, Replied, Dealt with) */
.msg-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px 14px;
  margin: 0 -4px;
}

  .msg-row > .msg-card {
    flex: 0 0 280px;
    max-width: 85vw;
    scroll-snap-align: start;
  }

.msg-card-unread {
  border-left: 4px solid var(--secondary);
}

.msg-badge {
  padding: 2px 8px;
  border-radius: 10px;
  background-color: var(--secondary);
  color: var(--on-secondary);
  font-size: .8rem;
  white-space: nowrap;
}

.msg-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One message in a conversation: yours to the right, theirs to the left */
.msg {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

  .msg-theirs {
    background-color: var(--surface);
  }

  .msg-mine {
    margin-left: auto;
    background-color: var(--accent-light);
  }


/* ------------------------------------------------------- COLLAPSE */

/* The arrow on a button that opens a folded-away part (data-collapse-toggle): it turns over when open */
.collapse-arrow {
  transition: transform 0.15s ease;
}

.collapse-open .collapse-arrow {
  transform: rotate(180deg);
}


/* ------------------------------------------------------- NAVBAR */

/* Sits inside .container, on the page background, like the legacy members' bar */
.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

/* The links: a row; on phones and tablets they fold away behind the Menu button (see MEDIA QUERIES) */
.navbar-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.navbar-toggle {
  display: none;
}

.navbar-brand {
  display: block;
}

.navbar-button {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--primary);
  cursor: pointer;
}

  .navbar-button:hover {
    color: var(--secondary);
  }

.navbar-link {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--primary);
}

  .navbar-link:hover {
    color: var(--secondary);
  }

.navbar-logo {
  display: block;
  width: 180px;
  height: auto;
}


/* ------------------------------------------------------- PADDINGS */

.padding-10 {
  padding: 10px;
}

.padding-20 {
  padding: 20px;
}

.padding-40 {
  padding: 40px;
}


/* ------------------------------------------------------- PLAN */

/* The meal plan: a week across, meal times down (scrolls sideways on phones) */
.plan-scroll {
  overflow-x: auto;
}

.plan {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 6px;
  font-family: var(--font-ui);
}

  .plan th {
    padding: 6px;
    font-weight: 500;
    text-align: center;
  }

  .plan .plan-meal {
    width: 120px;
    text-align: left;
    vertical-align: top;
  }

/* A saved plan longer than a week: each day keeps its width, and it scrolls */
.plan-wide {
  width: auto;
}

  .plan-wide th,
  .plan-wide td {
    width: 130px;
    min-width: 130px;
  }

.plan-slot {
  padding: 6px;
  vertical-align: top;
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}

.plan-today {
  background-color: var(--secondary-light);
}

/* Days that have gone: shown, but nothing can be planned on them */
.plan-past {
  background-color: var(--bg);
  color: var(--text-muted);
}

.plan-entry {
  overflow: hidden;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  font-size: 15px;
}

  .plan-entry-body {
    padding: 6px;
    line-height: 18px;
  }

/* Move / Copy / change / remove, along the bottom of a meal */
.plan-entry-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.plan-handle {
  color: var(--primary);
  cursor: grab;
  user-select: none;
}

  .plan-handle:hover {
    color: var(--secondary-dark);
  }

/* The Meal planner bar above recipe cards: stays at the top while scrolling,
   so a recipe card can be dragged up to it */
.planner-drawer {
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: var(--radius);
  background-color: var(--surface);
  box-shadow: var(--shadow-raised);
}

  .planner-drawer-bar {
    padding: 12px 18px;
    border-radius: var(--radius);
    background-color: var(--secondary-light);
    color: var(--primary);
    font-family: var(--font-ui);
    font-weight: 500;
  }

  /* "People for recipes dropped in [2]" under the bar */
  .planner-people {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 0;
  }

  /* Fits in the window under the bar and the People box, so its bottom edge
     (where dragging scrolls it) can be reached */
  .planner-drawer-body {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    padding: 12px 18px 18px;
  }

/* A recipe card being dragged, or the bar waiting for it */
.planner-drawer-ready .planner-drawer-bar {
  outline: 2px dashed var(--secondary-dark);
}

/* The + in each slot */
.plan-add {
  display: block;
  padding: 4px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
}

  .plan-add:hover {
    border-color: var(--secondary);
    color: var(--secondary-dark);
  }

/* The + opens a little panel: the day and meal, how many people */
.plan-add-panel summary {
  list-style: none;
}

  .plan-add-panel summary::-webkit-details-marker {
    display: none;
  }

.plan-add-form {
  padding: 8px 4px 4px;
}

/* A slot a recipe is being dragged over */
.plan-drop {
  outline: 2px dashed var(--secondary-dark);
}

/* Picked up by a tap (phones and tablets can't drag): what's picked up, where it can go,
   and the bar along the bottom that says so */
.plan-picked {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
}

.plan-picking .plan-slot:not(.plan-past) {
  outline: 2px dashed var(--secondary-dark);
  outline-offset: -2px;
  cursor: pointer;
}

.plan-pick-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.plan-pick-bar .btn-sm {
  background: var(--surface);
  color: var(--primary);
  flex-shrink: 0;
}


/* ------------------------------------------------------- QR CODES */

.qr-code {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ffffff;
}


/* ------------------------------------------------------- SHOPPING */

/* A shopping list: each aisle opens and closes (an aisle closes itself
   once everything in it is bought) */
.shop-aisle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background-color: var(--secondary-light);
  color: var(--primary);
  font-family: var(--font-ui);
  font-weight: 500;
}

.shop-items {
  margin: 0;
  padding: 6px 18px 10px;
}

  .shop-items .shop-item {
    padding: 8px 0;
  }

  .shop-items .shop-item + .shop-item {
    border-top: 1px solid var(--border);
  }

/* Photo, tick, what to buy; price, shop and buttons at the end (below on phones) */
.shop-item-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.shop-item-text {
  flex: 1 1 240px;
  min-width: 0;
}

/* The line under "From your kitchen: check you have these" */
.shop-kitchen-note {
  padding: 14px 24px 0;
}

.shop-item-extras {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shop-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
}

.shop-thumb-none {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text-muted);
}

.shop-tick input {
  width: 22px;
  height: 22px;
}

.shop-price {
  width: 80px;
}

.shop-shop {
  width: 170px;
}

/* Bought: crossed through and faded */
.shop-item-bought .shop-item-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.shop-item-bought .shop-thumb {
  opacity: .5;
}


/* ------------------------------------------------------- STAGES */

/* The numbered stages of adding a recipe: Recipe → Ingredients → …
   Done and current stages on the left, the ones still to do on the right */
.stages-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.stages {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
}

  .stage,
  .stage a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text);
  }

.stage-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background-color: var(--surface);
  font-size: 15px;
  font-weight: 600;
}

  .stage-done .stage-number {
    background-color: var(--secondary-light);
  }

  .stage-current .stage-number {
    background-color: var(--primary);
    color: var(--on-primary);
  }

  .stage a:hover .stage-number {
    background-color: var(--secondary-light);
  }

.stage-label {
  font-size: 15px;
}


/* ------------------------------------------------------- STYLEGUIDE */

.swatch {
  height: 70px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}


/* ------------------------------------------------------- TABLES */

.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 16px;
}

  .table th,
  .table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }


/* ------------------------------------------------------- TAGS */

.tag {
  display: inline-block;
  color: var(--primary);
  font-family: var(--font-ui);
}


/* ------------------------------------------------------- TEXT ALIGNMENT */

.text-center {
  text-align: center;
}

.text-justified {
  text-align: justify;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}


/* ------------------------------------------------------- TEXT COLOURS */

.text-accent {
  color: var(--accent);
}

.text-danger {
  color: var(--danger);
}

.text-muted {
  color: var(--text-muted);
}

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.text-white {
  color: #ffffff;
}


/* ------------------------------------------------------- TEXT SIZES */

.text-sm {
  font-size: 15px;
}

.text-regular {
  font-size: 16px;
}

.text-md {
  font-size: 18px;
}

.text-lg {
  font-size: 20px;
}

.text-xl {
  font-size: 25px;
}

.text-xxl {
  font-size: 42px;
}


/* ------------------------------------------------------- TEXT STYLES */

.font-body {
  font-family: var(--font-body);
}

.font-bold {
  font-weight: 600;
}

.font-logo {
  font-family: var(--font-logo);
}

.font-medium {
  font-weight: 500;
}

.font-ui {
  font-family: var(--font-ui);
}

.letter-spacing-wide {
  letter-spacing: 6px;
}

.text-uppercase {
  text-transform: uppercase;
}

/* Long web addresses wrap instead of widening the page */
.wrap-anywhere {
  overflow-wrap: anywhere;
}


/* ------------------------------------------------------- UNITS */

/* Admin, Units: one unit's fields in a row (wrapping on small screens) */
.unit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}

.unit-item {
  padding: 14px 0;
}

  .unit-item + .unit-item {
    border-top: 1px solid var(--border);
  }

.unit-field-name {
  flex: 1 1 200px;
}


/* ------------------------------------------------------- WEIGHTS */

/* Admin, Weights: "1 Whole of Tomato, Red Cherry Tomato  [20] [g]  Save" */
.weight-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

  .weight-row + .weight-row {
    border-top: 1px solid var(--border);
  }

.weight-row-name {
  flex: 1 1 280px;
  min-width: 0;
}

/* The recipes using it: a column that scrolls when there are many (garlic: 300+) */
.weight-row-recipes {
  overflow-y: auto;
  max-height: 240px;
  margin: 6px 0 0;
}

.weight-row-how {
  width: 170px;
}

/* "Suggestions: [Use 140 g] 1 Large of Lemon, Unwaxed Lemon (Fresh)" on a line of its own under the row */
.weight-row-hints {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}


/* ------------------------------------------------------- WIDTHS */

.max-width-440 {
  max-width: 440px;
}

.max-width-600 {
  max-width: 600px;
}

.max-width-760 {
  max-width: 760px;
}

.width-80 {
  width: 80px;
}

/* A short search box beside a heading (the chef search on Books) */
.width-240 {
  width: 240px;
  max-width: 100%;
}

.width-full {
  width: 100%;
}


/* ------------------------------------------------------- MEDIA QUERIES */

@media print {
  /* Printing backup codes: just the codes */
  .navbar,
  .banner-staging,
  .footer,
  .btn,
  .no-print {
    display: none !important;
  }
}


@media only screen and (max-width: 900px) {
  /* The nav folds away: a Menu button, and the links in a column under it when it's open.
     (.navbar-collapsible is added by forms.js, so without scripts the links stay on show) */
  .navbar-collapsible .navbar-toggle {
    display: inline-block;
  }

  .navbar-collapsible .navbar-menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0 6px;
    border-top: 1px solid var(--border);
  }

  .navbar-collapsible.navbar-open .navbar-menu {
    display: flex;
  }

  /* Tablet: 3 and 4 columns become 2, 6 become 3 */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  /* Phone: everything is one column */
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5,
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    grid-column: auto;
  }

  .grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .grid-12 {
    grid-template-columns: minmax(0, 1fr);
  }

  .navbar-logo {
    width: 140px;
  }

  /* Totals (Your spending): two by two rather than one long column */
  .grid-4.stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}