/* ============================================================
   POLISH PASS (2026-09-29) — loaded last, after wp.css.
   Measured, not eyeballed: scripts/qa-rhythm.mjs walked every section of
   all five pages at 390/768/1024/1440. Content already started on one left
   edge everywhere (186 px desktop, 20 px mobile, 1067 px wide); what drifted
   was the spacing and type *between* same-role elements, and three
   deliberate «staircase» offsets that read as misalignment.
   Nothing here changes the palette, the type family or the copy.
   ============================================================ */

/* 1. Line breaking: no orphans, balanced headings.
   «En hovedkokk med 20 år i / faget», «Sulfitt» alone on a line, etc. */
h1,h2,h3,.h2,.h3,.display,.display-sm,.dish-name{text-wrap:balance}
p,li,.lead,.dish-desc{text-wrap:pretty}
.nw{white-space:nowrap}

/* 2. One heading → lead distance for every section head.
   The mockup set it per section in inline styles: 16 px (forside 4 & 6,
   every CTA band, kart), 24 px (forside 5, heroes, om-oss restauranter) and
   40 px (meny allergener, faq «hjelp»). 24 px — the heroes' value and the
   eyebrow → heading value — everywhere. !important only because the old
   values are inline. */
:is(h1,h2,.h2,.display,.display-sm) + .lead{margin-top:var(--s3) !important}

/* 3. Interior heroes: one top offset, one headline setting.
   Kontakt started 24 px higher than Meny / Om oss / Spørsmål (164 vs 188 px
   desktop, 116 vs 132 mobile), and the four h1s used three line-heights
   (.98 / 1 / 1.02). */
.chero{padding-top:calc(var(--header-h) + var(--s4))}
@media (min-width:980px){ .chero{padding-top:calc(var(--header-h) + var(--s5))} }
:is(.hero-int,.hero-om,.hero-sm,.chero) h1{line-height:1.02;letter-spacing:-.035em}

/* 4. Square the staircases to the grid.
   Forside «Derfor»: the three columns stepped down 40/80 px, so their
   headings sat on three different lines.
   Om oss «Fire ting»: items 03/04 were indented to grid columns 2 and 8
   (x 279 / 832 under 186 / 740) and 02/04 dropped 64/40 px.
   Om oss «Restaurantene»: cards stepped right 24 then 64 px, so no two
   cards shared a left edge. All now sit on the section's own edges. */
@media (min-width:860px){ .benefit:nth-child(2),.benefit:nth-child(3){margin-top:0} }
@media (min-width:880px){
  .craft{grid-template-columns:repeat(2,minmax(0,1fr))}
  .craft-item:nth-child(n){grid-column:auto;margin-top:0}
  .rest:nth-child(2),.rest:nth-child(3){margin-inline-start:0}
}

/* 5. Restaurant names on Om oss: one step below the section heading.
   Each town was set at h2 size (56 px) directly under a 56 px h2, so the
   section had three headings as loud as its title. */
.rest-town{font-size:clamp(30px,4vw,44px);line-height:1.05}

/* 6. FAQ topic chips: first chip on the grid edge (it sat 2 px in; the
   strip's 2 px padding exists so focus rings and the hover lift are not
   clipped by the scroller — kept, and compensated). */
.jump-strip{margin-inline:-2px}

/* 7. Menu category strip: it scrolls past the content's right edge into
   the gutter and a chip was sliced mid-word. Fade the gutter so the cut
   reads as «more this way», not as a rendering error. */
.catnav-scroll{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter)),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - var(--gutter)),transparent);
}

/* 2b. The same heading → lead distance where the lead opens a two-column
   grid (meny «Allergener», faq «Spør oss direkte»): the grid's own top
   margin plus the lead's inline margin made 40 px there. */
:is(h2,.h2) + :is(.allergen-grid,.help-grid){margin-top:var(--s3) !important}
:is(.allergen-grid,.help-grid) > :first-child > .lead:first-child{margin-top:0 !important}