/* ===== Felles grunnstil =====
   Denne filen bestemmer STRUKTUREN: hvordan ting er plassert, avstander,
   størrelser. Den bestemmer IKKE farger og fonter – det gjør tema-filene
   (style-spiceflow.css og style-lussekatter.css).

   Trikset: vi bruker "CSS-variabler" (de som starter med --). En variabel
   er en verdi vi gir et navn, f.eks. --accent for aksentfargen. Tema-filene
   fyller inn variablene med sine egne farger og fonter, mens denne filen
   bare henviser til dem med var(...). Da deler frontene struktur, men ser
   helt forskjellige ut. */


/* ===== Standardverdier =====
   Disse gjelder hvis ingen tema-fil er lastet (f.eks. forsiden index.html).
   Tema-filene overstyrer dem. */
:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --text: #1d1b18;
  --muted: #6f6a62;
  --accent: #c8651b;
  --accent-text: #ffffff;
  --border: #e7e3db;
  --font-body: system-ui, sans-serif;
  --font-display: Georgia, serif;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --max-width: 1100px;
}


/* ===== Nullstilling =====
   Fjerner nettleserens standard marg/innrykk så vi styrer alt selv. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* En innholdsboks som holder tekst og elementer på en behagelig bredde
   og midtstiller dem på store skjermer. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}


/* ===== Toppmeny =====
   Logo til venstre, lenker til høyre. Lik struktur på begge fronter. */
.site-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}

.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
}

.nav-links a:hover {
  color: var(--accent);
}

/* Det lille tallet ved siden av "Handlekurv" */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#cart-count {
  background-color: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}


/* ===== Hero (stort førsteinntrykk øverst på en front) ===== */
.hero {
  padding: 80px 0;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero p {
  color: var(--muted);
  font-size: 19px;
  max-width: 560px;
  margin: 0 auto 28px;
}


/* ===== Knapper ===== */
.button {
  display: inline-block;
  background-color: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  padding: 13px 26px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

.button:hover {
  opacity: 0.9;
}


/* ===== Produktrutenett ===== */
.section-title {
  font-family: var(--font-display);
  font-size: 30px;
  text-align: center;
  margin-bottom: 36px;
}

.products {
  padding-bottom: 80px;
}

/* Rutenettet legger kortene i kolonner som tilpasser seg skjermbredden:
   minst 240px brede, og så mange som får plass på raden. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
}

.product-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background-color: var(--bg);
}

.product-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-name {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 8px;
}

.product-description {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 12px;
}

.product-meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
}

/* Skyver pris og knapp ned til bunnen av kortet, slik at alle kort
   ser like ut selv om beskrivelsene er ulikt lange. */
.product-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-size: 20px;
  font-weight: 700;
}

.add-button {
  background-color: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.add-button:hover {
  opacity: 0.9;
}


/* ===== Handlekurv-siden ===== */
.cart-page {
  padding: 60px 0;
}

.cart-page h1 {
  font-family: var(--font-display);
  font-size: 34px;
  margin-bottom: 8px;
}

#back-to-store {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 30px;
}

#back-to-store:hover {
  color: var(--accent);
}

/* Én rad per vare i kurven. Bilde | info | antall | sum | fjern */
.cart-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.cart-image {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius);
  background-color: var(--bg);
}

.cart-info {
  flex-grow: 1;
}

.cart-name {
  font-size: 17px;
  font-family: var(--font-display);
}

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

.cart-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

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

.qty-number {
  min-width: 24px;
  text-align: center;
}

.cart-line-total {
  min-width: 80px;
  text-align: right;
  font-weight: 700;
}

.remove-button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

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

.cart-empty {
  color: var(--muted);
  padding: 30px 0;
}

/* Linja med totalsum under varene */
.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  font-size: 22px;
  font-family: var(--font-display);
}


/* ===== Kasse-skjema (leveringsinfo) ===== */
.checkout {
  margin-top: 50px;
  border-top: 1px solid var(--border);
  padding-top: 36px;
}

.checkout h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 20px;
}

/* Hvert felt med etikett over inntastingsfeltet */
.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--muted);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  background-color: var(--surface);
  color: var(--text);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.checkout-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
}


/* ===== Bunntekst ===== */
.site-footer {
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  padding: 30px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}


/* ===== Forside (index.html) =====
   Egen seksjon for "velg butikk"-siden. Den bruker standardfargene øverst,
   siden ingen tema-fil er lastet der. */
.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
}

.landing h1 {
  font-family: var(--font-display);
  font-size: 48px;
  margin-bottom: 12px;
}

.landing > p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 44px;
  max-width: 520px;
}

/* To valg-kort side om side (legger seg under hverandre på smal skjerm) */
.store-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 760px;
}

.store-choice {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 30px;
  background-color: var(--surface);
  box-shadow: var(--shadow);
}

.store-choice:hover {
  border-color: var(--accent);
}

.store-choice h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 10px;
}

.store-choice p {
  color: var(--muted);
  font-size: 15px;
}


/* ===== Oppskriftshub (index.html) ===== */

/* Hero med filosofi */
.hub-hero {
  text-align: center;
  padding: 72px 24px 48px;
  max-width: 720px;
  margin: 0 auto;
}
.hub-hero h1 {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.05;
  margin-bottom: 18px;
}
.hub-hero .hub-tagline {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 36px;
}

/* Tre pillers */
.hub-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 8px;
}
.hub-pillar {
  text-align: center;
  padding: 4px 8px;
}
.hub-pillar-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.hub-pillar-text {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 560px) {
  .hub-hero h1 { font-size: 38px; }
  .hub-pillars { grid-template-columns: 1fr; gap: 14px; }
}

/* Verktøylinje: søk + kategorifilter */
.hub-controls {
  max-width: 1080px;
  margin: 40px auto 24px;
  padding: 0 24px;
}
.hub-search {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 0 auto 20px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: inherit;
  box-sizing: border-box;
}
.hub-search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.hub-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hub-cat-btn {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.hub-cat-btn:hover { border-color: var(--accent); }
.hub-cat-btn.active {
  background: var(--accent);
  color: var(--accent-text, #fff);
  border-color: var(--accent);
}

/* Oppskriftsrutenett */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-style: italic;
}

/* Oppskriftskort */
.recipe-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.recipe-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.recipe-card-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
}
.recipe-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Plassholder når foto mangler ennå */
.recipe-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #b8860b 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  text-align: center;
  padding: 12px;
  opacity: .9;
}
.recipe-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.recipe-card-body h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0;
}
.recipe-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.recipe-card-chip {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
}
.recipe-card-levels {
  font-size: 12px;
  color: var(--muted);
}
.recipe-card-body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
/* Kommer snart-kort */
.recipe-card.is-soon {
  cursor: default;
  opacity: .6;
}
.recipe-card.is-soon:hover { transform: none; border-color: var(--border); }
.recipe-card-soon-badge {
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
}


/* ===== Venteliste =====
   Vises bare når butikken er "av" (orderingEnabled = false i config.js).
   Beholderen er skjult som standard; waitlist.js viser den når den trengs. */
#waitlist {
  display: none;
  padding: 40px 0 90px;
}

.waitlist-box {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.waitlist-intro {
  color: var(--muted);
  margin-bottom: 28px;
}

/* Skjemafeltene gjenbruker .form-field fra kassen. Vi venstrejusterer
   feltene og gir knappen full bredde for et ryddig påmeldingsskjema. */
.waitlist-form {
  text-align: left;
}

.waitlist-form .button {
  width: 100%;
  margin-top: 6px;
}

.waitlist-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  text-align: center;
}

.waitlist-success {
  color: var(--accent);
  font-size: 18px;
  margin-top: 10px;
}

/* Honningfelle mot søppelpost – skjult for ekte besøkende. */
.hidden-honeypot {
  display: none;
}


/* ===== Mobil =====
   På smale skjermer stabler vi kurv-radene loddrett så de ikke blir trange. */
@media (max-width: 600px) {
  .cart-row {
    flex-wrap: wrap;
  }
  .hero h1 {
    font-size: 34px;
  }
}


/* Liten, diskré fotokreditering i footeren på oppskriftssider. */
.photo-credit {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.8;
}


/* ===== Oppskrift-bakgrunn (delt) =====
   Et bilde av retten øverst på siden som toner GRADVIS UT til gjennomsiktig
   nedover, slik at sidefargen overtar. Hver oppskriftsside setter variabelen
   --recipe-image på <body>, f.eks.:
       <body style="--recipe-image: url('bilder/paella.jpg')">
   Sider uten variabelen (forsiden, kassen) får ingen bakgrunn – da er
   background-image "none" og ingenting vises.

   Slik virker uttoningen: bildet legges som et fast lag bak innholdet, og en
   "mask" (en gradient fra synlig øverst til gjennomsiktig nedover) bestemmer
   hvor mye av bildet som vises. Nederst er masken gjennomsiktig, så bildet
   forsvinner helt og sidefargen står igjen. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: var(--recipe-image, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 95%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 95%);
  pointer-events: none;
}


/* På oppskriftssider (body.recipe-page) skal bakgrunnsbildet flyte sammenhengende
   helt opp bak toppmenyen. Vi gjør derfor headeren "frostet": halvgjennomsiktig
   hvit med en lett uskarphet bak, så bildet skinner gjennom mens menyteksten
   fortsatt er lett å lese. (Vanlige sider beholder den solide headeren.) */
.recipe-page .site-header {
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* #1 Lesbarhet på hero-teksten: tittel og ingress ligger oppå bildet. En myk
   lys glød (text-shadow) bak teksten holder den lett å lese uansett hva som er
   under, og vi gjør ingressen litt mørkere for bedre kontrast. */
.recipe-page .hero h1,
.recipe-page .hero p {
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.75);
}

.recipe-page .hero p {
  color: var(--text);
}

/* Litt ekstra luft under heroen på oppskriftssider, så teksten ikke sitter
   midt i den hardeste delen av bilde-uttoningen. */
.recipe-page .hero {
  padding-bottom: 110px;
}

/* #2 Ingredienser og fremgangsmåte som "kort": en lys, lett frostet boks løfter
   innholdet vekk fra bakgrunnen og gjør det mer lesbart. Gjelder de to spaltene
   i oppskrift-layouten (ingredienser til venstre, steg til høyre). */
.recipe-page .recipe-layout > div {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}


/* ===== Oppskrift (delt struktur) =====
   Layout for ALLE oppskriftssider (lussekatter, paella, risotto …). Bruker bare
   CSS-variabler, så hver side får sine egne farger fra temaet sitt (eller fra
   standardverdiene øverst her hvis ingen tema-fil er lastet). recipe.js skalerer
   ingrediensene og bytter måleenheter. */
.recipe {
  padding-bottom: 80px;
}

/* Kort introtekst, midtstilt over oppskriften. Mørk tekst (som hero),
   ikke dempet grå. */
.recipe-intro {
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

/* Sammenleggbar intro: teaseren vises alltid, resten gjemmes bak «Les mer».
   Bygges av initRecipeIntro() i site.js. */
.recipe-intro-more[hidden] { display: none; }

/* «Les mer» og «Vis mindre» er inline-knapper som henger etter teksten i
   samme avsnitt. Mørk blå så de skiller seg ut fra brødteksten. */
.recipe-intro-toggle {
  display: inline;
  margin-left: 0.35em;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: #1b3a6b;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.recipe-intro-toggle[hidden] { display: none; }
.recipe-intro-toggle:hover { color: #12284a; }

/* 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(--text);
  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;
}

/* Videoramme. "aspect-ratio: 16 / 9" gir den vanlige widescreen-formen. */
.recipe-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--muted);
  background-color: var(--surface);
  margin-bottom: 40px;
}

.recipe-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 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".
   Gjennomsiktig bakgrunn så den smelter inn i kortets flate (ikke hvit boks).
   Ingen farge-/bakgrunnsendring ved hover/fokus – nedtrekksmenyen vises
   uansett siden den er en vanlig <select>. */
.unit-select {
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.unit-select:focus,
.unit-select:focus-visible {
  outline: none;
}

/* Nummererte steg. Lista får litt innrykk fordi nullstillingen øverst
   fjernet plassen tallene vanligvis står på. */
.recipe-steps {
  padding-left: 22px;
}

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

/* Kjøp-safran-oppfordring nederst på hver oppskrift (driver salget). */
.recipe-cta {
  margin-top: 48px;
  padding: 28px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
}

.recipe-cta p {
  color: var(--muted);
  margin-bottom: 16px;
}

.recipe-cta-link {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 15px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.recipe-cta-link:hover { background: var(--accent); color: var(--accent-text, #fff); }

.recipe-cta-soon {
  display: inline-block;
  padding: 11px 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  color: var(--muted);
  font-size: 15px;
}

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


/* ===== Tilpass oppskriften =====
   Kontroller for kompleksitetsvelger, porsjons-/tilpasningsmodus, samt
   bytte-/fjern-kontroller og balansemeldinger. Brukes på oppskriftssider som
   drives av recipe-adapter.js (paella). */

/* Kompleksitetsvelger: segmenterte knapper. */
.recipe-complexity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

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

.complexity-selector {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.complexity-button {
  border: none;
  background-color: var(--surface);
  color: var(--text);
  padding: 9px 18px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}

.complexity-button:last-child {
  border-right: none;
}

.complexity-button.active {
  background-color: var(--accent);
  color: var(--accent-text);
}

/* Av/på-bryter for tilpasning + tilbakestill. */
.recipe-customize {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.customize-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.reset-recipe {
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  padding: 7px 16px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.reset-recipe:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Balansemeldinger (salt redusert, friskhet-tips). */
.recipe-messages {
  max-width: 640px;
  margin: 0 auto 24px;
}

.recipe-message {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

.recipe-message-strong {
  color: var(--text);
  border-left-width: 4px;
}

/* Ingrediensrad med navn + tilpasningskontroller. Navnet tar resten av plassen
   så kontrollene legger seg pent til høyre / under på smal skjerm. */
.recipe-ingredients li.ingredient {
  flex-wrap: wrap;
}

.ingredient-name {
  flex: 1 1 40%;
}

.ingredient-note {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* Fjernet rad: vi demper bare den overstrøkne teksten (ikke hele raden), slik at
   et eventuelt tips i boksen forblir tydelig. */
.ingredient-removed .ingredient-name,
.ingredient-removed .ingredient-amount,
.ingredient-removed .unit-label {
  text-decoration: line-through;
  color: var(--muted);
}

.ingredient-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
  margin-top: 4px;
}

.ingredient-swap {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ingredient-remove {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ingredient-remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tradisjon-merke ved byttede/valgbare ingredienser (ærlig merking). */
.tradition-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.tradition-traditional {
  background-color: #e3efe1;
  color: #2f6b34;
}

.tradition-regional {
  background-color: #eee9dd;
  color: #7a6230;
}

.tradition-non-traditional {
  background-color: #f3e2d6;
  color: #9a4d22;
}

/* Diskré «endre»-knapp etter redigerbare ingredienser. Grå/utydelig til man
   hover-er; da blir den tydeligere. Tooltip vises via title-attributtet. */
.ingredient-edit-btn {
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.5;
  flex-shrink: 0;
}

.ingredient-edit-btn:hover,
.ingredient-edit-btn.open {
  opacity: 1;
  color: var(--accent);
  border-color: var(--border);
}

/* Egen hover-tooltip (erstatter nettleserens lille title-boble). Større, lesbar
   tekst som tåler å bryte over flere linjer. Brukes på «endre»-knappen og på
   ingrediensnavn (forklaring + hva man kan bytte med). */
.has-tip {
  position: relative;
}

.has-tip:hover::after,
.has-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: 100%;
  transform: translateY(-6px);
  width: max-content;
  max-width: 280px;
  white-space: normal;
  background-color: var(--text);
  color: var(--bg);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
  pointer-events: none;
}

/* Ingrediensnavn med tooltip markeres diskré så man skjønner at det er mer info. */
.ingredient-name.has-tip {
  cursor: help;
  text-decoration: underline dotted var(--border);
  text-underline-offset: 3px;
}

/* Tips som vises i den fjernede ingrediensens egen boks. */
.ingredient-removed-tip {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background-color: var(--surface);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--muted);
  opacity: 1; /* tipset skal være tydelig selv om raden er nedtonet */
}

/* Allergifilter: sammenleggbar boks over ingredienslisten. */
.diet-filter {
  max-width: 480px;
  margin: 0 auto 20px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
}
.diet-filter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.diet-filter-summary::-webkit-details-marker { display: none; }
.diet-filter-summary::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
}
details.diet-filter[open] > .diet-filter-summary::after {
  content: '−';
}
.filter-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}
.diet-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  padding: 2px 20px 14px;
}
.filter-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0;
  accent-color: var(--accent);
}

/* Ingrediens som kolliderer med valgte filtre. */
.ingredient-flagged {
  border-left: 3px solid #c07a00;
  padding-left: 8px;
  margin-left: -11px;
}
.ingredient-flagged .ingredient-name {
  opacity: .7;
}
.ingredient-flag-badge {
  display: inline-block;
  background: #fff6e0;
  border: 1px solid #e0b84a;
  color: #7a4e00;
  border-radius: 4px;
  font-size: 11.5px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Melding i byttepanel når ingen bytter er kompatible med aktive filtre. */
.panel-no-swaps {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 8px;
  font-style: italic;
}

/* Inline-panel under en ingrediens (bytte/fjern). Tar full bredde i raden. */
.ingredient-panel {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-label {
  color: var(--muted);
  font-size: 13px;
}

.panel-remove,
.panel-restore {
  align-self: flex-start;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.panel-remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* «Legg til igjen» skal være tydelig – fylt aksentknapp, ikke grå som «Fjern». */
.panel-restore {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
}

.panel-restore:hover {
  opacity: 0.9;
}

/* «Juster opp de andre?»-valget som vises etter fjerning. */
.compensate-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compensate-buttons {
  display: flex;
  gap: 8px;
}

.compensate-yes,
.compensate-no {
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.compensate-yes.active,
.compensate-no.active {
  background-color: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ===== Lagrede varianter ===== */
.saved-variants-wrap {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: left;
}
.save-variant-btn {
  display: inline-block;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.save-variant-btn:hover { background: var(--accent); color: var(--accent-text, #fff); }

.saved-variants-list {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.saved-variants-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}
.saved-variants-summary::-webkit-details-marker { display: none; }
.saved-variants-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--accent-text, #fff);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.saved-variants-ul {
  list-style: none;
  margin: 0;
  padding: 0 18px 12px;
}
.saved-variant-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
  flex-wrap: wrap;
}
.saved-variant-label { flex: 1; font-weight: 500; min-width: 120px; }
.saved-variant-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.saved-variant-load,
.saved-variant-del {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.saved-variant-load:hover { border-color: var(--accent); color: var(--accent); }
.saved-variant-del:hover  { border-color: #c00; color: #c00; }

/* ===== Notater ===== */
.recipe-notes-wrap {
  max-width: 640px;
  margin: 28px auto 40px;
}
.recipe-notes-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.recipe-notes-input {
  width: 100%;
  min-height: 80px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 14px;
  color: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.recipe-notes-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* ===== Mine varianter (index.html) ===== */
.my-variants-section {
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.my-variants-section h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 14px;
}
.my-variants-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.my-variants-ul li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.my-variants-ul li:first-child { border-top: none; padding-top: 0; }
.my-variants-ul a { color: var(--accent); text-decoration: none; font-weight: 500; }
.my-variants-ul a:hover { text-decoration: underline; }
.my-variant-date { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* ===== Kategori-lenker på forsiden ===== */
.hub-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto 8px;
  padding: 0 24px;
}
.hub-cat-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border, #e2ddd3);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.hub-cat-link:hover { border-color: var(--accent); }

/* ===== Brødsmuler (kategorisider) ===== */
.breadcrumb {
  max-width: 1080px;
  margin: 0 auto 12px;
  font-size: 14px;
  color: var(--muted);
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ===== Relaterte oppskrifter (oppskriftssider) ===== */
.related-section { margin-top: 48px; }
.related-title {
  text-align: center;
  font-family: var(--font-display, serif);
  margin-bottom: 24px;
}
.related-grid { padding-bottom: 24px; }

/* ===== Vanlige spørsmål (FAQ – rendres av recipe-schema.js) ===== */
.recipe-faq { margin-top: 40px; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border, #e5e0d8);
  padding: 14px 0;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; opacity: 0.5; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 10px 0 2px; }

/* ===== Juridiske sider (personvern, om) ===== */
.legal { padding: 8px 0 56px; }
.legal .container { max-width: 760px; }
.legal h2 {
  font-family: var(--font-display, serif);
  font-size: 1.3rem;
  margin: 32px 0 10px;
}
.legal p { margin: 0 0 14px; line-height: 1.65; }
.legal ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.65; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal-updated { color: var(--muted); font-size: 14px; }