/* The one stylesheet of gommo.app. Every rule lives here: the hosting CSP
   forbids <style> elements and style attributes, so nothing may be inlined. */

/* The app's tokens, one to one; the tint and the shadows are derived from
   them. Dark only: the accent does not reach contrast on a light ground. */
:root {
  color-scheme: dark;
  --ground: #0d1018;
  --surface: #141923;
  --line: #1c222f;
  --accent: #00bbff;
  --accent-tint: rgb(0 187 255 / 16%);
  --text: #fff;
  --muted: rgb(255 255 255 / 54%);
  --carbs: #f44336;
  --fat: #ffeb3b;
  --protein: #4caf50;
}

* {
  box-sizing: border-box;
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
}

a {
  color: var(--accent);
}

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

/* A list styled as something else keeps its semantics through the role. */
[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header,
.site-footer,
main {
  width: min(100% - 2rem, 44rem);
  margin-inline: auto;
}

/* Shell */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

/* A segmented control: the current language is the filled segment. The
   separator in the markup is for readers without styles and stays hidden. */
.lang-switch {
  display: flex;
  padding: 0.125rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  font-size: 0.875rem;
}

.lang-switch span {
  display: none;
}

.lang-switch a {
  padding: 0.125rem 0.625rem;
  border-radius: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--text);
}

.lang-switch a[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--text);
}

main {
  flex: 1;
  padding-block: 1.5rem 3rem;
}

.site-footer {
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer a {
  color: var(--muted);
}

/* Prose, as the legal pages take it */

h1 {
  margin-block: 0 1rem;
  font-size: 2rem;
  line-height: 1.2;
}

h2 {
  margin-block: 2rem 0.5rem;
  font-size: 1.5rem;
  line-height: 1.25;
}

h3 {
  margin-block: 1.5rem 0.5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}

p,
ul,
ol {
  margin-block: 0 1rem;
}

/* Landing page: hero */

.hero {
  padding-block: 0.5rem 2rem;
  text-align: center;
}

.hero h1 {
  margin-block: 0 1rem;
  font-size: clamp(2rem, 5vw + 1rem, 2.75rem);
}

.hero-sub {
  margin-block: 0 2rem;
  font-size: 1.125rem;
}

/* The store position: one sentence until the store entries exist, then the
   badge block. Badge height 48px keeps Apple's 40px minimum with room; the
   padding is the quarter-height clear space both stores require, the gap
   between the badges exceeds it. */

.store-note {
  margin: 0;
  color: var(--muted);
}

.store {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem;
}

.store a {
  display: block;
  line-height: 0;
}

.store img {
  height: 3rem;
  width: auto;
}

/* Landing page: the three steps, each a card with its icon */

.steps {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.steps img {
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--accent-tint);
}

.steps h3 {
  margin: 0;
  align-self: center;
}

.steps p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 1rem;
  }

  /* A subgrid shares the three rows across the columns, so a heading that
     wraps in one column does not push only its own paragraph down. */
  .steps li {
    grid-row: span 3;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
  }

  .steps img {
    grid-row: 1;
    margin-bottom: 0.5rem;
  }

  .steps h3 {
    align-self: end;
  }
}

/* Landing page: the recipe card */

.recipe {
  max-width: 24rem;
  margin-block: 1.5rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
}

.recipe-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  color: var(--muted);
}

.recipe-body {
  padding: 1rem;
}

.recipe h3 {
  margin: 0;
  font-size: 1.25rem;
}

.recipe-meta,
.per-serving-title {
  font-size: 0.875rem;
  color: var(--muted);
}

.recipe-meta {
  margin: 0 0 1rem;
}

.per-serving {
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}

.per-serving-title {
  margin: 0 0 0.5rem;
}

.nutrients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}

.nutrient {
  display: grid;
  grid-template-rows: auto auto 1.5rem;
  align-items: center;
  justify-items: center;
}

.nutrient .value {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nutrient .label {
  font-size: 0.75rem;
  color: var(--muted);
}

/* The macros keep the app's bar in its colour; the calories carry the delta
   chip in that slot instead, so one number is the one the eye follows. */
.nutrient-fat::after,
.nutrient-carbs::after,
.nutrient-protein::after {
  content: "";
  width: 2rem;
  height: 0.25rem;
  border-radius: 0.125rem;
}

.nutrient-fat::after {
  background: var(--fat);
}

.nutrient-carbs::after {
  background: var(--carbs);
}

.nutrient-protein::after {
  background: var(--protein);
}

.delta {
  padding: 0 0.5rem;
  border-radius: 1rem;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5rem;
  white-space: nowrap;
}

/* An ingredient row as the app's tile: name over amount, the calories at
   the right. Only the name may wrap; amount and calories never break. */
.ingredient {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding-block: 0.375rem;
}

.ingredient .emoji {
  grid-area: 1 / 1 / 3 / 2;
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.ingredient .name {
  grid-area: 1 / 2;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ingredient .amount {
  grid-area: 2 / 2;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--muted);
}

.ingredient .kcal {
  grid-area: 1 / 3 / 3 / 4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The cheese swap as a stack: the old row behind and faded, the new row
   lifted over it and pulsing softly for the eye, the swap icon centred on
   their seam. The new row covers only the old row's padding, never its
   text. */
.swap {
  padding-block: 0.5rem;
}

.swap-old {
  padding-bottom: 0.5rem;
  opacity: 0.4;
}

.swap-old .name,
.swap-old .kcal {
  text-decoration: line-through;
}

.swap-new {
  position: relative;
  margin-top: -0.5rem;
  padding: 0.875rem 0.5rem 0.5rem 0.75rem;
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 60%);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.04);
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .swap-new {
    animation: none;
  }
}

.swap-icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--ground);
  transform: translate(-50%, -50%);
}

/* Landing page: closing */

.closing {
  padding-block: 2rem 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.closing h2 {
  margin-top: 0;
}