/* remoulade.dk - glasetiket og pølsevognsskilt: creme, gurkemeje-gul, agurkegrøn. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --creme: #f6efd9;
  --papir: #fbf7ea;
  --gul: #e3a91a;
  --gul-lys: #f3d77e;
  --groen: #3d5a2c;
  --groen-moerk: #283d1c;
  --blaek: #2a2212;
  --blaek-2: #574a30;
  --streg: #d9cba4;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--blaek);
  font: 400 1.0625rem/1.65 var(--serif);
  font-optical-sizing: auto;
}
::selection { background: var(--gul-lys); color: var(--blaek); }
a { color: var(--groen); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--groen-moerk); text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--groen); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--sans); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0; }

.ramme { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.ramme.smal { max-width: 44rem; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spring { position: absolute; left: 1rem; top: -4rem; background: var(--groen); color: var(--papir); padding: .5rem 1rem; border-radius: 6px; z-index: 5; }
.spring:focus { top: 1rem; }

/* Top */
.top { background: var(--papir); border-bottom: 5px solid var(--groen); }
.top-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.ordmaerke .ord { width: auto; height: 24px; overflow: visible; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font: 600 .95rem/1.2 var(--sans); }
.menu a { color: var(--blaek); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--gul); color: var(--blaek); }
.menu a[aria-current="page"] { border-bottom-color: var(--groen); }

/* Forside: hero */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero h1 { font-size: clamp(2.6rem, 9vw, 5.6rem); font-weight: 850; letter-spacing: -0.035em; line-height: .95; max-width: 11ch; }
.ingress { font-size: clamp(1.125rem, 2.2vw, 1.3rem); line-height: 1.55; color: var(--blaek-2); max-width: 38rem; margin-top: 1.25rem; }
.etiket {
  display: flex; flex-wrap: wrap; margin: 2rem 0 0; padding: 0;
  border: 2px solid var(--blaek); border-radius: 999px; width: fit-content; max-width: 100%;
  background: var(--papir);
}
.etiket div { padding: .6rem 1.25rem; border-right: 2px solid var(--blaek); }
.etiket div:last-child { border-right: 0; }
.etiket dt { font: 700 .72rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--groen); }
.etiket dd { margin: .1rem 0 0; font: 600 .98rem/1.3 var(--sans); }

/* Opskrift */
.opskrift { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 7vw, 5rem); }
.ingredienser { background: var(--gul); border-radius: 22px; padding: .6rem; box-shadow: 0 14px 30px -18px rgba(70, 48, 0, .55); align-self: start; }
.ingredienser-ind { border: 2px solid var(--blaek); border-radius: 16px; padding: 1.5rem 1.35rem 1.6rem; }
.ingr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.ingredienser h2 { font-size: 1.75rem; font-weight: 850; }
.ingredienser h3 { font: 700 .8rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .09em; margin: 1.4rem 0 .5rem; }
.ingredienser ul { list-style: none; margin: 0; padding: 0; }
.ingredienser li { padding: .42rem 0; border-bottom: 1.5px dotted rgba(42, 34, 18, .45); }
.ingredienser li:last-child { border-bottom: 0; }
.m { font: 750 1em/1 var(--sans); }
.genvej { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--blaek); font-size: .98rem; }
.skala { display: inline-flex; border: 2px solid var(--blaek); border-radius: 999px; overflow: hidden; }
.skala button {
  appearance: none; border: 0; background: transparent; color: var(--blaek);
  font: 700 .95rem/1 var(--sans); padding: .55rem .9rem; min-width: 2.9rem; min-height: 2.6rem; cursor: pointer;
  transition: background-color .15s ease-out;
}
.skala button + button { border-left: 2px solid var(--blaek); }
.skala button:hover { background: var(--gul-lys); }
.skala button[aria-pressed="true"] { background: var(--blaek); color: var(--gul); }

.fremgang > h2 { font-size: 1.75rem; font-weight: 850; margin-bottom: 1.25rem; }
.trin { list-style: none; counter-reset: trin; margin: 0; padding: 0; }
.trin li { counter-increment: trin; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.1rem 0; border-top: 1.5px solid var(--streg); }
.trin li::before { content: counter(trin); grid-row: span 2; font: 800 2.4rem/1 var(--serif); color: var(--groen); }
.trin h3 { font-size: 1.15rem; font-weight: 750; margin-bottom: .3rem; }
.trin p { max-width: 36rem; }
.redning { margin-top: 1.25rem; background: var(--papir); border: 1.5px solid var(--streg); border-radius: 14px; padding: 1.1rem 1.25rem; }
.redning h3 { font-size: 1.05rem; font-weight: 750; margin-bottom: .3rem; color: var(--groen-moerk); }

.gul-forklaring { background: var(--groen); color: var(--papir); padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.gul-forklaring h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 850; margin-bottom: 1rem; color: var(--gul-lys); }
.gul-forklaring p { font-size: 1.1rem; }

.videre { display: grid; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.videre a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 2px solid var(--blaek); color: var(--blaek); text-decoration: none;
  font: 800 clamp(1.3rem, 3.4vw, 2rem)/1.15 var(--sans); letter-spacing: -0.02em;
}
.videre a:first-child { border-top: 2px solid var(--blaek); }
.videre .pil { color: var(--groen); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.videre a:hover { color: var(--groen-moerk); }
.videre a:hover .pil { transform: translateX(6px); }

/* Tekstsider */
.tekstside { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.tekstside h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); font-weight: 850; letter-spacing: -0.03em; line-height: 1; }
.tekstside > .ramme > h2, .tekstside .tip h2 { font-size: 1.5rem; font-weight: 800; margin: 2.75rem 0 .75rem; }
.tekstside .ramme > p + p { margin-top: 1rem; }
.tekstside .ramme > h2 + p { margin-top: 0; }

.menukort { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 3px double var(--blaek); }
.menukort li { padding: 1.4rem 0; border-bottom: 1.5px dashed var(--blaek-2); }
.menukort h2 { font-size: 1.45rem; font-weight: 800; margin-bottom: .45rem; }
.menukort h2::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--gul); border: 2px solid var(--blaek); margin-right: .5em; vertical-align: .05em; }

.tip { margin-top: 2.5rem; background: var(--gul); border-radius: 18px; padding: 1.4rem 1.4rem 1.5rem; }
.tekstside .tip h2 { margin-top: 0; margin-bottom: .4rem; font-size: 1.3rem; }
.tip a { color: var(--blaek); }

.holdbar { display: grid; gap: 1rem; margin-top: 2.5rem; }
.holdbar-raekke { background: var(--papir); border: 2px solid var(--blaek); border-radius: 18px; padding: 1.35rem 1.35rem 1.45rem; }
.holdbar-raekke h2 { font-size: 1.25rem; font-weight: 800; }
.holdbar-raekke .svar { display: inline-block; margin: .6rem 0 .8rem; padding: .3rem .8rem; border-radius: 999px; background: var(--gul); font: 700 .98rem/1.3 var(--sans); }
.punkter { margin: 0; padding-left: 1.25rem; }
.punkter li { margin: .5rem 0; padding-left: .25rem; }
.punkter li::marker { color: var(--groen); font-weight: 700; }

.variant { padding: 1.6rem 0; border-bottom: 1.5px solid var(--streg); }
.variant:first-of-type { margin-top: 1.5rem; }
.variant h2 { font-size: 1.45rem; font-weight: 800; margin-bottom: .5rem; }

.knap { display: inline-block; margin-top: 1.5rem; background: var(--groen); color: var(--papir); padding: .8rem 1.3rem; border-radius: 999px; font: 700 1rem/1 var(--sans); text-decoration: none; }
.knap:hover { background: var(--groen-moerk); color: var(--papir); }

/* Bund */
.bund { background: var(--blaek); color: var(--creme); padding: 1.6rem 0; font: 600 .95rem/1.3 var(--sans); }
.bund-ind { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.bund a { color: var(--gul-lys); }

@media (min-width: 52rem) {
  .opskrift { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 3.5rem; }
  .ingredienser { position: sticky; top: 1.5rem; }
  .holdbar-raekke { display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .menu { gap: .25rem .9rem; font-size: .9rem; }
  .trin li { grid-template-columns: 2.25rem 1fr; column-gap: .75rem; }
  .etiket { border-radius: 18px; flex-direction: column; width: 100%; }
  .etiket div { border-right: 0; border-bottom: 2px solid var(--blaek); }
  .etiket div:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }