/* ===== Tema: Lussekatter =====
   Julebutikken. Stil: premium og julete – skapt med farge og god luft,
   ikke ornamenter.
     - Bakgrunn: dyp grangrønn (mørkt = eksklusivt)
     - Aksent:   gull/messing (gull = safran)
     - Knapper:  dempet bærrød (den lille julefargen)
     - Tekst:    varm krem

   Denne filen fyller bare inn CSS-variablene med Lussekatter sine verdier.
   All struktur (plassering, størrelser) ligger i style-felles.css. */

:root {
  --bg: #14261c;            /* dyp grangrønn – mørk og rolig */
  --surface: #1d3327;       /* litt lysere grønn til kort og felt */
  --text: #f3e7d0;          /* varm krem til tekst */
  --muted: #c3b89e;         /* dempet, varm tone til mindre viktig tekst */
  --accent: #c9a24a;        /* gull – aksenten (lenker, pris, kurv-tall) */
  --accent-text: #14261c;   /* mørk grønn tekst oppå gullet, for kontrast */
  --border: #2f4a3a;        /* varme, mørke grønne streker */

  /* Elegant og julete: karakterfull serif til overskrifter,
     rolig serif til brødtekst. Lastes fra Google Fonts i HTML-filen,
     med vanlig serif som reserve hvis de ikke laster. */
  --font-body: "EB Garamond", Georgia, serif;
  --font-display: "Fraunces", Georgia, serif;

  --radius: 4px;            /* strammere hjørner – mer klassisk */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ===== Den lille julefargen =====
   En egen variabel for den dempede bærrøde. Den brukes BARE på knapper
   (og er reservert til eventuelle "ny"-merker senere). Ikke bruk den
   ellers – da mister den effekten som et lite, bevisst fargeinnslag. */
:root {
  --berry: #a23e42;         /* dempet bærrød */
}

/* Knappene får bærrød bakgrunn med krem tekst.
   I felles-CSS bruker knappene aksentfargen (gull); her overstyrer vi
   dem så hovedhandlingene (Legg i kurv / Gå til betaling) blir bærrøde.
   Tekstfargen settes til krem for god kontrast mot den røde. */
.button,
.add-button {
  background-color: var(--berry);
  color: var(--text);
}

/* En varm gloning bak heroen gir lun, eksklusiv stemning.
   "radial-gradient" lager en mild gull-lyskrets som toner ut. */
.hero {
  background: radial-gradient(
    circle at 50% 30%,
    rgba(201, 162, 74, 0.16),
    transparent 60%
  );
}

/* Litt ekstra eleganse på de store overskriftene. */
.hero h1,
.section-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Tynn gulllinje under toppmenyen i stedet for grå. */
.site-header {
  border-bottom-color: var(--accent);
}


/* ===== Oppskrift =====
   Stiler til lussekatt-oppskriften på forsiden. Ligger her fordi
   oppskriften foreløpig bare finnes i Lussekatter-butikken. */
.recipe {
  padding-bottom: 80px;
}

/* Kort introtekst, midtstilt over oppskriften. */
.recipe-intro {
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

/* Skaler oppskriften: antallsfelt med pluss/minus-knapper, midtstilt
   over videoen. recipe.js regner om alle ingrediensmengdene når
   tallet i feltet endres. */
.recipe-scale {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.recipe-scale label {
  color: var(--muted);
  font-size: 15px;
}

.scale-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scale-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.scale-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#recipe-scale-input {
  width: 64px;
  padding: 7px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

#recipe-scale-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Plassholder for video. "aspect-ratio: 16 / 9" gir den vanlige
   widescreen-formen. Bytt ut innholdet med en <iframe> når du har video. */
.recipe-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background-color: var(--surface);
  margin-bottom: 40px;
}

/* To spalter: ingredienser til venstre, fremgangsmåte til høyre.
   På smal skjerm (under 600px) legger de seg under hverandre. */
.recipe-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.recipe-layout h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 16px;
}

/* Ingrediensliste uten kulepunkter, men med tynne skillelinjer. */
.recipe-ingredients {
  list-style: none;
}

.recipe-ingredients li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

/* Ingredienser med mengde: tall + enhet (eller enhetsvelger) foran navnet. */
.recipe-ingredients li.ingredient {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ingredient-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 92px;
}

.ingredient-amount {
  font-weight: 600;
  min-width: 2ch;
  text-align: right;
}

.ingredient-prefix {
  color: var(--muted);
  font-size: 13px;
}

.unit-label {
  color: var(--muted);
  font-size: 14px;
}

/* Nedtrekksmeny for å bytte måleenhet, f.eks. fra "ss" til "g". */
.unit-select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.unit-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Nummererte steg. Vi gir lista litt innrykk fordi nullstillingen
   øverst i felles-CSS fjernet plassen tallene vanligvis står på. */
.recipe-steps {
  padding-left: 22px;
}

.recipe-steps li {
  margin-bottom: 14px;
  padding-left: 6px;
}

@media (max-width: 600px) {
  .recipe-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}