/* ============================================================
   Protein First Recipes — Global Styles
   Sharp, cheerful, unisex — white / charcoal / teal
   ============================================================ */

/* Fonts are loaded from the page head, not imported here.
   An @import inside a stylesheet is the slowest possible place to request a font: the
   browser has to fetch and parse THIS file before it even discovers the font request, so
   it serialises two round trips before any text can paint. Lighthouse costed this at
   about 773 ms. BaseLayout.astro now preloads the same two families non-blockingly.
   Moved 2026-07-26. */

:root {
  /* --- Sharp + cheerful palette (light only) --- */
  --cream-surface: #ffffff;  /* brightest surface (was --white) */
  --paper:       #ffffff;    /* page bg — pure white */
  --blush:       #e6f7f5;    /* faint teal tint, used sparingly */
  --blush-deep:  #bfe9e3;
  --rose:        #0fb5a6;    /* PRIMARY accent — sharp cheerful teal */
  --rose-ink:    #0c9488;    /* hover / deeper teal */
  --sage:        #f6f7f4;    /* cool light-gray band */
  --butter:      #f6f7f4;    /* cool light-gray band */
  --ink:         #1b1f23;    /* charcoal ink */
  --ink-soft:    #586069;
  --ink-mute:    #8a929c;
  --line:        #e9e9e6;
  --black-btn:   #1b1f23;    /* charcoal button */

  /* --- Token remap: existing component vars cascade to the new system --- */
  --pink: var(--rose);            /* tangerine accent */
  --pink-light: var(--blush);     /* faint orange tint */
  --pink-mid: var(--blush-deep);  /* soft orange border */
  --pink-dark: var(--rose-ink);   /* deep orange for links/hover */
  --cream: var(--paper);          /* page background */
  --white: var(--cream-surface);  /* card / surface */
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-light: var(--ink-mute);
  --border: var(--line);

  /* --- Neutral cool shadows --- */
  --shadow-sm: 0 6px 20px rgba(20,24,28,.08);
  --shadow-md: 0 16px 40px rgba(20,24,28,.12);
  --shadow-lg: 0 28px 64px rgba(20,24,28,.16);

  --radius: 16px;
  --radius-sm: 8px;
  --radius-pill: 100px;
  --container: min(92%, 1240px);

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Mulish', system-ui, sans-serif;

  /* Reading measure and body size (Annette's standard, 2026-08-01): running
     prose renders 65 to 75 real characters a line, at 20px or more, measured on
     the rendered page at 1440px.

     ONE control point. Every prose column on this site points at --measure, so
     the reading column cannot drift the way it did before, when the recipe body
     ran 680px, its lists 620px, the About strip 520px and the sidebar answer
     block 336px, all at three different font sizes.

     The value came from sweeping the real built pages, not from a formula.
     rem, not px, so the column grows with a reader's own default font size.
     Mulish is a fairly wide face, which is why this number is larger than the
     one on a system-sans site. Never express it in `ch`. */
  --fs-body: 1.25rem;                         /* 20px */
  --measure: 41rem;                           /* 656px at a 16px root */
  --measure-lede: calc(var(--measure) * 1.1); /* type larger than body */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Body size sits here, not on `html`. Every badge, chip, button, nav item and
   card on this site sizes itself in rem against the root, so moving the root
   would scale all of that chrome along with the prose. */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* ---- Utility ---- */
.container {
  width: var(--container);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ---- Protein Badge ---- */
.protein-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--rose);
  color: #ffffff;
  border-radius: 50px;
  padding: 6px 12px;
  line-height: 1.1;
  font-family: var(--font-body);
  font-weight: 700;
  min-width: 60px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(15,181,166,0.32);
}

.protein-badge .badge-g {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.protein-badge .badge-label {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.protein-badge.badge-lg {
  padding: 10px 20px;
  min-width: 80px;
}

.protein-badge.badge-lg .badge-g {
  font-size: 1.75rem;
}

.protein-badge.badge-lg .badge-label {
  font-size: 0.65rem;
}

/* ---- Tag chips ---- */
.tag-chip {
  display: inline-block;
  background: var(--blush);
  color: var(--rose-ink);
  border: 1px solid var(--blush-deep);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn-pink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rose);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.btn-pink:hover {
  background: var(--rose-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: #ffffff;
}

/* ---- Answer block ---- */
.answer-block {
  background: var(--pink-light);
  border-left: 4px solid var(--pink);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin: 16px 0;
  /* the measure plus this block's own padding and rule, so the tinted box ends
     where the reading column ends instead of running past it */
  max-width: min(100%, calc(var(--measure) + 44px));
}

.answer-block p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  max-width: min(100%, var(--measure));
}