/* Utskrift av lunsjmenyen — A4-arket som legges på bordene i restauranten.

   På skjerm er dette en nettside: mørkt banner, navigasjon og rettene som
   hvite kort i et rutenett. På papir skal det være en meny — logo og tittel
   øverst, rettene satt under hverandre i én spalte, allergener og kontakt
   nederst.

   Første forsøk printet nettsiden omtrent som den sto: seks innrammede kort
   på en beige firkant med hvit papirmarg rundt. Det ser ut som en utskrift
   av en nettside, og det er nettopp det et menyark ikke skal se ut som.
   Derfor er rammene borte, rettene satt typografisk med luft mellom seg, og
   husets akvarellbakgrunn lagt under — slik trykte menyer settes.

   Arket lastes med media="print", så det rører ingenting på skjerm. */

@page {
    /* Ingen marg: nettleseren maler bare bakgrunnen innenfor margene i
       @page, så med en marg her ville bakgrunnsbildet fått en hvit ramme
       rundt seg i stedet for å gå helt ut i kanten. Luften rundt teksten
       ligger derfor i innholdet — satsbredden under, og padding på
       .menu-banner for toppen. */
    size: A4;
    margin: 0;
}

/* Bootstrap har et eget utskriftsark, og det setter «body{min-width:992px}»
   og «.container{min-width:992px}». 992px er 262mm — bredere enn et A4 — så
   nettleseren la ut siden i den bredden og krympet hele arket til 68% for å
   få det ned på papiret. Alle mål vi satte i pt og mm kom ut som to
   tredjedeler av seg selv, og det var mye av grunnen til at det forrige
   arket ble så smått og trangt. min-width må nulles før noe annet mål her
   betyr det det står. (Bootstrap setter også «@page{size:a3}»; vår @page
   over kommer sist og vinner.) */
html,
body,
.menu-page {
    min-width: 0 !important;
}

/* ---------- Bakgrunnen ----------
   Husets akvarellark, kant til kant.

   Den ligger i CSS og ikke som et <img> i HTML-en: et bilde i HTML-en ville
   blitt lastet ned av alle som åpner lunsjmenyen på mobil, mens bakgrunnen i
   et media="print"-ark først hentes når noen faktisk skriver ut.

   print-color-adjust er det som gjør at den kommer med i det hele tatt —
   uten den stripper nettleseren bakgrunner ved utskrift, og da hjelper det
   ikke at bildet ligger der. Fargen på html er bildets egen papirtone, så
   arket ser riktig ut også om bildet ikke skulle lastes.

   Laget er fastlåst (position: fixed) og ikke en flate på html eller body.
   En flate måles mot elementet, og elementet er bare så høyt som innholdet
   tilfeldigvis blir — da endte bildet før papiret gjorde det, og det sto
   igjen en blek stripe nederst. Et fastlåst lag måles mot arkflaten, og
   følger med på hvert ark om menyen en gang skulle gå over to sider. */
html {
    background-color: #f3ece0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

html::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Et lyst slør over bildet. Bladene øverst til venstre og den grønne
       flaten nederst legger seg ellers under teksten, og mørk skrift på
       mørkt blad er ikke til å lese. 35% løfter dem akkurat nok til at
       skriften står klar overalt, og akvarellen beholder likevel farge —
       på 55% ble hele arket utvasket. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
        url('../img/meny-bakgrunn.jpg') center / cover no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    z-index: -1;
}

html,
body {
    font-size: 10.5pt;
    /* Ingen bredde her — body skal tilpasse seg sideflaten @page definerer.
       max-width og overflow-x står som sikring mot at noe enkeltelement
       skulle stikke ut. */
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Body må være gjennomsiktig, ellers legger den sin egen flate oppå
   bakgrunnen fra html. */
body {
    background: transparent !important;
}

.navbar,
footer,
.meny-kategorier-felt,
.menu-banner-notis,
.menu-cta,
.menu-note {
    display: none !important;
}

/* Åpningstidene står i banneret på skjerm, men hører nederst på arket —
   sammen med adressen og nummeret, der man er vant til å finne dem på en
   meny. Se .print-bunn. */
.apningstider {
    display: none !important;
}

/* ---------- Satsbredde ----------
   155mm er rundt 85 tegn i linja, og blokka midtstiller seg selv uansett
   hvilke marger dialogen ender opp med. Hadde bredden ligget i @page, ville
   spalten flyttet seg med en innstilling vi ikke rår over. Marginen som blir
   igjen på sidene er bred med vilje: det er den en trykt meny har. */

.menu-banner,
.menu-page {
    max-width: 155mm !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Toppen ---------- */

.menu-banner {
    background: transparent !important;
    /* Toppmargen på arket. @page har ingen marg (se øverst), så all luften
       over logoen ligger her. Holdt på 16mm og ikke mer: velger noen
       «Standard» marger i utskriftsdialogen framfor å la @page bestemme,
       skyves alt ned en centimeter, og da må det være rom igjen nederst
       til at arket fortsatt blir én side. */
    padding: 16mm 0 0 !important;
}

/* Logoen finnes bare for utskrift — på skjerm står den i navbaren. */
.print-logo {
    display: block;
    width: 32mm;
    margin: 0 auto 4.5mm;
}

.menu-banner h1 {
    color: #322c25 !important;
    font-size: 22pt;
    margin: 0;
}

/* Aksentstreken under tittelen går igjen på nettstedet, og er det eneste
   skillet toppen trenger. Full strek over rettene i tillegg ble to streker
   like etter hverandre. */
.menu-banner h1::after {
    display: block;
    width: 13mm;
    height: 0.75pt;
    margin: 3mm auto 0;
}

.menu-banner p {
    color: #6b6157 !important;
    font-size: 9.5pt;
    line-height: 1.45;
    max-width: 150mm;
    margin: 3mm auto 0;
}

/* ---------- Rettene ---------- */

.menu-page {
    padding: 0 !important;
    margin-top: 6mm !important;
    margin-bottom: 0 !important;
}

.menu-section {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.menu-section + .menu-section {
    margin-top: 7mm !important;
}

/* Lunsjmenyen har bare én seksjon, og seksjonstittelen er skjult der. Deles
   menyen i flere — smørbrød, rundstykker, varme retter — er det disse
   titlene som bærer arket, slik «BYENS HØYESTE SMØRBRØD» gjorde på den gamle
   menyen: liten, sperret og med en strek under. Streken er mørkere enn den
   under rettnavnene, så nivåene ikke blandes. */
.section-title {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 9.5pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left !important;
    color: #8a6e52;
    margin: 0 0 3.5mm !important;
    padding-bottom: 1.5mm;
    border-bottom: 0.75pt solid #a68a6e;
}

.section-title::after {
    display: none;
}

.section-lead {
    text-align: left;
    max-width: none;
    font-size: 9pt;
    line-height: 1.45;
    margin: -1.5mm 0 4mm;
}

/* Undergruppe inne i en rett — «Varmmat», «Desserter». */
.dish-gruppe {
    font-size: 9.5pt;
    margin: 2.5mm 0 1mm;
}

/* Én spalte. Menyen har seks retter, og de står bedre under hverandre i full
   satsbredde enn i to smale spalter — der brakk de lengste ingredienslinjene
   («Roastbiff: hjemmelaget roastbiff, potetsalat …») over tre linjer. */
.dish-grid {
    display: block !important;
    margin: 0 !important;
}

/* Ingen kort på papir. Ramme, hvit flate og aksentstrek på toppen er grep
   som skiller kort fra hverandre på en skjerm. På et menyark gjør luften
   mellom rettene den jobben, og streken under rettnavnet resten. */
.dish {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    /* En rett skal ikke brekke over et sidebytte. */
    break-inside: avoid;
    page-break-inside: avoid;
}

.dish + .dish {
    margin-top: 4.2mm;
}

.dish-head {
    border-bottom: 0.5pt solid #ddd2c2;
    padding-bottom: 1.3mm;
    gap: 0 6mm;
}

.dish-name {
    font-size: 11.5pt;
    /* Lange rettnavn skal brekke framfor å presse prisen ut av linja. */
    overflow-wrap: break-word;
}

.dish-price {
    font-size: 10pt;
}

.dish-desc {
    font-size: 9.5pt;
    line-height: 1.45;
    margin-top: 1.8mm;
}

.dish-list {
    font-size: 9.5pt;
    line-height: 1.45;
    margin-top: 1.8mm;
    /* Lister med korte punkter settes i spalter på skjerm. I én spalte på
       155mm blir de smale nok som de er. */
    columns: auto !important;
}

.dish-list li {
    padding-left: 4.5mm;
    margin-bottom: 0.5mm;
}

/* Den firkantede kula er et skjermgrep. På papir er en tynn tankestrek i
   husets brune roligere, og ligner mer på hvordan en meny er satt. Mørkere
   enn aksentfargen ellers: strekene står over bladene øverst til venstre,
   og i husets lyse brune forsvant de rett og slett inn i dem. */
.dish-list li::before {
    content: "\2013";
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: #7a6145;
}

.dish-uthevet {
    font-size: 9pt;
    line-height: 1.4;
    margin-top: 2.2mm;
    padding-left: 3mm;
    border-left-width: 1pt;
}

.dish-meta,
.dish-allergen {
    font-size: 7.5pt;
    margin-top: 1.2mm;
}

/* ---------- Allergenlista ---------- */

.allergen-legend {
    background: none !important;
    border: none !important;
    border-top: 0.5pt solid #ddd2c2 !important;
    max-width: none;
    margin: 5mm 0 0;
    padding: 3mm 0 0;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Liten og sperret, venstrestilt over lista. Den som leser menyen leter
   ikke etter denne overskriften — den skal bare finnes når et tall skal
   slås opp. */
.allergen-legend h2 {
    font-family: 'Reem Kufi', sans-serif;
    font-size: 8pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: #8a6e52;
    margin: 0 0 2.5mm;
}

.allergen-legend ol {
    font-size: 7pt;
    line-height: 1.3;
    color: #6b6157;
    columns: 3;
    column-gap: 8mm;
    padding-left: 4mm;
}

.allergen-legend li {
    margin-bottom: 0.4mm;
}

/* ---------- Bunnlinja ----------
   Åpningstider, adresse og nummer. Finnes bare på papir — på skjerm står
   det samme i footeren. */

.print-bunn {
    display: block;
    border-top: 0.5pt solid #ddd2c2;
    margin-top: 4mm;
    padding-top: 2mm;
    text-align: center;
    font-family: 'Reem Kufi', sans-serif;
    font-size: 8.5pt;
    letter-spacing: 0.03em;
    color: #6b6157;
}

.print-bunn span + span::before {
    content: "\00b7";
    margin: 0 2.5mm;
    color: #a68a6e;
}