/* ==========================================================================
   /learn — shared chrome for the hub and every topic page.
   Uses the site-wide tokens from base.css (--s, --m, --l, --full-width,
   --accent, --secondary, --bg, --text, ...).
   ========================================================================== */

:root {
   --learn-header-height: 4rem;
   --learn-measure: 72ch; /* comfortable reading width for article body */
}

body {
   margin: 0;   /* the sticky header runs edge to edge */
   background: var(--bg);
   color: var(--text);
}

/* --------------------------------------------------------------- header --- */

.learn-header {
   position: sticky;
   top: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--s);
   height: var(--learn-header-height);
   padding: 0 var(--m);
   background: color-mix(in srgb, var(--bg-light) 85%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.learn-breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.4em;
   min-width: 0;
   font-size: 0.95rem;
   color: var(--text-light);
}
.learn-breadcrumb a {
   color: var(--text-light);
   text-decoration: none;
}
.learn-breadcrumb a:hover {
   color: var(--text);
   text-decoration: underline;
}
.learn-breadcrumb-sep {
   opacity: 0.5;
}
.learn-breadcrumb-current {
   color: var(--text);
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 45vw;
}

/* styled like the home page's .open-app-cta: app icon + label, a dashed
   outline that grows outward on hover */
.learn-open-app {
   flex: none;
   display: inline-flex;
   align-items: center;
   gap: 0.5em;
   border-radius: 0.3em;
   color: var(--text);
   font-weight: 700;
   font-size: 1rem;
   text-decoration: none;
   outline: 2px dashed transparent;
   outline-offset: 0;
   transition: outline-color 0.3s ease, outline-offset 0.3s ease;
}
.learn-open-app:hover,
.learn-open-app:focus-visible {
   outline-color: #f34b2e;
   outline-offset: 0.25em;
}
.learn-open-app .app-icon {
   display: block;
   width: 1.5em;
   height: 1.5em;
   border-radius: 0.5em;
}

/* ----------------------------------------------------------------- hero --- */

.learn-hero {
   max-width: var(--full-width);
   margin: 0 auto;
   padding: var(--l) var(--m) var(--m);
   text-align: center;
}
.learn-hero h1 {
   margin: 0;
   font-size: clamp(2rem, 5vw, 3rem);
   line-height: 1.1;
}
.learn-hero h1 strong {
   color: var(--secondary);
}
.learn-hero-text {
   max-width: 60ch;
   margin: var(--s) auto 0;
   font-size: clamp(1.05rem, 2.5vw, 1.3rem);
   line-height: 1.5;
   color: var(--text-light);
}

/* ------------------------------------------------------ topic page body --- */

.learn-page {
   padding-bottom: var(--l);
}
.learn-content {
   width: 100%;
   max-width: var(--learn-measure);
   margin: 0 auto;
   padding: 0 var(--m);
   line-height: 1.65;
   font-size: 1.075rem;
}
.learn-content h2 {
   margin-top: 2em;
   font-size: 1.6rem;
}
.learn-content h3 {
   margin-top: 1.5em;
   font-size: 1.25rem;
}
/* markdown content only — scoped to the article's own images and to class-less
   lists and links (markdown never adds a class), so components inside it (e.g.
   .learn-plant-grid) keep their styling */
.learn-content > img,
.learn-content > p > img {
   display: block;
   margin: 1.5em auto;
   max-width: 100%;
   height: auto;
   border-radius: 12px;
}
.learn-content > ul:not([class]),
.learn-content > ol:not([class]) {
   padding-left: 1.4em;
}
.learn-content a:not([class]) {
   color: var(--secondary);
}

/* A neutral card wrapper any page can drop interactive content into. */
.learn-interactive {
   margin: var(--m) 0;
   padding: var(--m);
   border-radius: 16px;
   background: var(--bg-light);
   border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.learn-interactive > p:first-child {
   margin-top: 0;
}
/* the app's lists divide <food-nutrient> rows with a border; not here */
.learn-interactive food-nutrient {
   border-bottom: none;
}
/* the protein page's body weight, between the question and the cards */
.learn-interactive body-weight-slider {
   margin: var(--s) 0 var(--m);
}
/* <intake-recommendations> (eat-nutrient-widget.js): the sources' per-kg
   recommendations as a wrap of pills; the pressed one is the reference */
.ir-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4em;
   margin: var(--s) 0 0;
   padding: 0;
   list-style: none;
}
.ir-option {
   display: inline-flex;
   align-items: center;
   gap: 0.45em;
   padding: 0.35em 0.75em 0.35em 0.55em;
   border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
   border-radius: 999px;
   background: var(--bg);
   color: inherit;
   font: inherit;
   font-size: 0.85rem;
   line-height: 1.3;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ir-option:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.ir-option[aria-pressed="true"] {
   border-color: var(--text);
   background: var(--text);
   color: var(--bg-light);
}
.ir-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ir-flag { font-size: 1.1em; line-height: 1; }
.ir-name small { margin-left: 0.35em; opacity: 0.6; font-size: 0.85em; }
.ir-value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* "Open … playground", right below the cards */
.learn-playground-link {
   margin: calc(-1 * var(--s)) auto var(--m) auto;
   width: max-content;
}
.learn-interactive-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: var(--s);
   margin-top: var(--s);
}

/* ----------------------------------------------------------- disclaimer --- */

.learn-disclaimer {
   max-width: var(--learn-measure);
   margin: var(--l) auto 0;
   padding: var(--s) var(--m);
}
.learn-disclaimer p {
   margin: 0;
   padding: var(--s) calc(var(--s) * 1.25);
   font-size: 0.9rem;
   line-height: 1.5;
   color: var(--text-light);
   background: color-mix(in srgb, var(--secondary) 8%, transparent);
   border-radius: 12px;
}

.learn-ai-note {
   max-width: var(--learn-measure);
   margin: var(--m) auto 0;
   padding: 0 var(--m);
   font-size: 0.8rem;
   text-align: center;
   color: var(--text-light);
}

/* ---------------------------------------------------------------- footer --- */
/* the shared site footer (static/site-footer.css), set well apart from the page
   content above it by a hairline */
.site-footer {
   margin-top: var(--m);
   border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* ------------------------------------------------------------------ hub --- */

.learn-hub {
   max-width: var(--full-width);
   margin: 0 auto;
   padding: 0 var(--m) var(--l);
}
.learn-section {
   margin-top: var(--l);
   scroll-margin-top: calc(var(--learn-header-height) + var(--s));
}
.learn-section-head h2 {
   margin: 0;
   font-size: 1.8rem;
}

.learn-section-empty {
   margin-top: var(--s);
   color: var(--text-light);
   font-style: italic;
}

.learn-links {
   list-style: none;
   margin: var(--m) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: var(--s);
}
.learn-link a {
   display: flex;
   flex-direction: column;
   gap: 0.3em;
   height: 100%;
   padding: var(--s);
   border-radius: 14px;
   background: var(--bg-light);
   border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
   color: var(--text);
   text-decoration: none;
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.learn-link a:hover {
   transform: translateY(-2px);
   border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
   box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 12%, transparent);
}
/* a link with a representative food (food groups): image inline before the title */
.learn-link a:has(.learn-link-pic) {
   flex-direction: row;
   align-items: center;
   gap: 0.6em;
}
.learn-link-pic {
   flex: none;
   width: 2.25rem;
   height: 2.25rem;
   object-fit: contain;
}
.learn-link-title {
   font-weight: 700;
   font-size: 1.1rem;
}

/* ------------------------------------------------------ rainbow buttons --- */
/* Eat the Rainbow on the hub: glassy tiles — portrait rounded rectangles side by
   side, landscape buttons stacked on phones — each tinted in its colour
   (data-rainbow sets --nb-color, app/nutrient-breakdown.css), in rainbow order. */

.learn-rainbow-buttons {
   list-style: none;
   margin: var(--m) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(8, 1fr);   /* one row of eight… */
   gap: var(--s);
}
@media (max-width: 900px) {
   .learn-rainbow-buttons { grid-template-columns: repeat(4, 1fr); }   /* …or two even rows */
}
.learn-rainbow-button {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   aspect-ratio: 3 / 4;
   box-sizing: border-box;
   padding: 0.9em 0.6em;
   border: 0.5px solid color-mix(in srgb, var(--bg) 70%, transparent);
   border-radius: 1.25rem;
   text-align: center;
   /* the colour tint, slightly lighter towards the top (--bg-light keeps that
      true in dark mode too) */
   background:
      linear-gradient(to bottom, color-mix(in srgb, var(--bg-light) 45%, transparent), transparent),
      color-mix(in srgb, var(--nb-color, var(--secondary)) 40%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: var(--text);
   font-weight: 700;
   line-height: 1.2;
   text-decoration: none;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.learn-rainbow-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 2px 8px color-mix(in srgb, var(--nb-color, var(--secondary)) 15%, transparent);
}

/* ------------------------------------------------------- nutrient cards --- */
/* The hub's Nutrients section, grouped by class: each nutrient is a badge —
   shape (templates/learn/_nutrient_card.html) and colour per class — with its
   1–3 letters, and the name underneath. */

.learn-group-title {
   margin: var(--m) 0 0;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-light);
}
.learn-nutrient-grid {
   list-style: none;
   margin: var(--s) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
   gap: var(--s);
}
.learn-nutrient-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.4em;
   height: 100%;
   box-sizing: border-box;
   padding: var(--s) 0.5em;
   border-radius: 14px;
   color: var(--text);
   text-align: center;
   text-decoration: none;
   transition: background-color 0.15s ease, transform 0.15s ease;
}
.learn-nutrient-card:hover {
   background: var(--bg-light);
   transform: translateY(-2px);
}
.learn-nutrient-badge {
   display: block;
   width: 4.5rem;
   height: 4.5rem;
}
/* the matching stroke rounds the hexagon's and diamond's corners */
.learn-nutrient-badge .shape {
   fill: var(--badge);
   stroke: var(--badge);
   stroke-width: 8;
   stroke-linejoin: round;
}
.learn-nutrient-badge text {
   fill: var(--badge-ink);
   font-family: inherit;
   font-weight: 800;
}
/* a nutrient article's hero: its badge, large, above the title */
.learn-hero .learn-nutrient-badge {
   width: 7rem;
   height: 7rem;
   margin: 0 auto var(--s);
}
.learn-nutrient-name {
   font-size: 0.85rem;
   font-weight: 600;
   line-height: 1.25;
}
.learn-nutrient-badge[data-group="macronutrients"] { --badge: #ffca3a; --badge-ink: #3d2c00; }
.learn-nutrient-badge[data-group="minerals"]       { --badge: #1982c4; --badge-ink: #ffffff; }
.learn-nutrient-badge[data-group="trace-minerals"] { --badge: #6a4c93; --badge-ink: #ffffff; }
.learn-nutrient-badge[data-group="vitamins"]       { --badge: #8ac926; --badge-ink: #1f3300; }
.learn-nutrient-badge[data-group="other"]          { --badge: #ff595e; --badge-ink: #ffffff; }

/* ---------------------------------------------------------- amino acids --- */
/* the protein page's 20 amino acids (templates/learn/_amino_acids.html):
   hexagon badges coloured by class — essential, semi-essential, non-essential */
.learn-amino { margin: var(--m) 0; }
.learn-amino [data-class="essential"]      { --amino: #ff595e; --amino-ink: #ffffff; }
.learn-amino [data-class="semi-essential"] { --amino: #ffca3a; --amino-ink: #3d2c00; }
.learn-amino [data-class="non-essential"]  { --amino: #8ac926; --amino-ink: #1f3300; }
.learn-amino-legend {
   display: flex;
   flex-direction: column;
   gap: 0.3em;
   margin: 0 0 var(--m);
   padding: 0;
   list-style: none;
   font-size: 0.9rem;
}
.learn-amino-legend li { display: flex; align-items: baseline; gap: 0.5em; }
.learn-amino-legend i {
   flex: none;
   width: 0.8em;
   height: 0.8em;
   border-radius: 0.2em;
   background: var(--amino);
   transform: translateY(0.05em);
}
.learn-amino-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
   gap: var(--s);
   margin: 0;
   padding: 0;
   list-style: none;
}
.learn-amino-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.35em;
   text-align: center;
}
.learn-amino-badge { display: block; width: 3.5rem; height: 3.5rem; }
/* the matching stroke rounds the hexagon's corners */
.learn-amino-badge .shape {
   fill: var(--amino);
   stroke: var(--amino);
   stroke-width: 8;
   stroke-linejoin: round;
}
.learn-amino-badge text { fill: var(--amino-ink); font-family: inherit; font-weight: 800; }
.learn-amino-name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}

/* --------------------------------------------------------------- plants --- */
/* /learn/plants overview, plant pages and the hub's Plants section. The image
   circle (.nb-food-pic) and rainbow tints come from app/nutrient-breakdown.css. */

.learn-plant-categories {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.4em;
   max-width: 60rem;
   margin: 0 auto;
}
.learn-plant-categories a {
   padding: 0.35em 0.9em;
   border-radius: 9999px;
   background: var(--bg-light);
   border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
   color: var(--text);
   font-size: 0.9rem;
   text-decoration: none;
}
.learn-plant-categories a:hover {
   border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
}

.learn-plant-grid {
   list-style: none;
   margin: var(--s) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
   gap: var(--s);
}
.learn-plant-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5em;
   height: 100%;
   padding: var(--s) 0.5em;
   border-radius: 14px;
   color: var(--text);
   text-align: center;
   text-decoration: none;
   transition: background-color 0.15s ease, transform 0.15s ease;
}
.learn-plant-card:hover {
   background: var(--bg-light);
   transform: translateY(-2px);
}
.learn-plant-card .nb-food-pic {
   width: 5.5rem;
}
.learn-plant-card-name {
   font-weight: 600;
   font-size: 0.95rem;
   line-height: 1.25;
}
.learn-plant-all {
   margin: var(--s) 0 0;
   font-weight: 600;
}
.learn-plant-all a {
   color: var(--secondary);
}

/* a single plant page: the food header replaces the plain hero title */
.learn-plant .learn-hero .nb-food-name {
   font-size: clamp(2rem, 5vw, 3rem);
}
.learn-plant .learn-content > h2:first-child {
   margin-top: 0;
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 640px) {
   .learn-header { padding: 0 var(--s); }
   .learn-hero { padding: var(--m) var(--s) var(--s); }
   .learn-content,
   .learn-disclaimer { padding-left: var(--s); padding-right: var(--s); }
   .learn-hub { padding: 0 var(--s) var(--l); }
   /* stacked landscape buttons */
   .learn-rainbow-buttons { grid-template-columns: 1fr; gap: 0.6em; }
   .learn-rainbow-button { aspect-ratio: auto; align-items: center; min-height: 3.25rem; padding: 0.7em 1em; border-radius: 1rem; }
   .learn-nutrient-grid { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: calc(var(--s) / 2); }
   .learn-nutrient-badge { width: 3.5rem; height: 3.5rem; }
   .learn-nutrient-name { font-size: 0.75rem; }
   /* the hub's Plants preview: cards at half size */
   .learn-plants-preview .learn-plant-grid { grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr)); gap: calc(var(--s) / 2); }
   .learn-plants-preview .learn-plant-card { gap: 0.25em; padding: 0.5em 0.25em; border-radius: 10px; }
   .learn-plants-preview .learn-plant-card .nb-food-pic { width: 2.75rem; }
   .learn-plants-preview .learn-plant-card-name { font-size: 0.7rem; }
   .learn-open-app { font-size: 0.9rem; }
}