/* ══════════════════════════════════════════════════════════════════════
   HET OFFERTEBLAD OP PAPIER: EEN BESTAND, TWEE PAGINA'S.

   Wie drukt hiermee af?
     1. offerte.html   de gast print zijn eigen prijsindicatie
     2. portaal.html   de uitbater print de offerte van een aanvraag of
                       van een geboekt feest, om mee te geven of op te bergen

   Waarom een los bestand en geen kopie per pagina: allebei de bladen zeggen
   hetzelfde over hetzelfde geld. Zodra er twee opmaken bestaan gaan ze uit
   elkaar lopen, en dan ligt er op de bar een blad met andere regels dan de
   gast op zijn scherm zag. Dat is precies het soort verschil waar later ruzie
   over ontstaat.

   De BEDRAGEN staan hier niet in en worden hier ook niet berekend: die komen
   regel voor regel uit rekenkern.js. Dit bestand kent alleen de opmaak.

   Op het scherm doet dit bestand niets: elke pagina bepaalt zelf of en hoe hij
   het blad laat zien (offerte.html verbergt het, het portaal toont het in zijn
   eigen donkere stijl). Alles hieronder geldt alleen op papier.
   ══════════════════════════════════════════════════════════════════════ */

/* Bewust GEEN @page hier. Die regel geldt voor een heel document en niet voor
 * een klasse, dus zou hij ook de weekstaat van het portaal op andere marges
 * zetten. Die staat er al en is al nagelopen; een blad dat we niet gevraagd
 * zijn te veranderen hoort niet te schuiven omdat er een tweede blad bijkomt.
 * offerte.html houdt daarom zijn eigen @page, en het portaal laat de marges aan
 * de browser. */
@media print {

  /* Alles hieronder is afgestemd op EEN A4.
   *
   * Een offerte die op twee vellen komt is geen offerte maar een pak papier:
   * de gast krijgt het tweede vel niet mee, of het raakt los van het eerste en
   * dan hangt er een totaal zonder opbouw in de lucht.
   *
   * GEMETEN OP 04-09-2026, met puppeteer `page.pdf({format:'A4'})` op een
   * tekstkolom van 178mm (A4 min twee keer 16mm marge), op het volste blad dat
   * dit systeem kan maken: acht regels specificatie, vier afspraken zonder
   * bedrag, decoratie, een lange opmerking en een contactregel met naam,
   * mailadres, telefoon en bedrijf.
   *
   *   voor deze ronde: 299,6mm, dus twee vellen, en op vel twee stond alleen
   *                    de opmerking en de voetnoot
   *   na  deze ronde:  258,9mm op een vel (het blad van de uitbater 244,1mm,
   *                    een kaal blad 116,9mm); de maten hieronder zijn hierop
   *                    gezet. Nagemeten met scratchpad/gast/printproef.js, dat
   *                    de PDF met page.pdf({format:'A4'}) afdrukt en de hoogte
   *                    in millimeters teruggeeft.
   *
   * De winst zit in ruimte, niet in kleinere letters: het lichaam blijft 9,5pt,
   * want dit vel wordt teruggelezen door iemand die er niet bij was. Wat wel
   * kleiner mocht: het logo (90px was een centimeter hoogte te veel), de lucht
   * boven de kopjes, de vulling in de tabel en de kolommen van de feiten.
   *
   * En voor de gevallen die ECHT niet passen (een gast die drie alinea's
   * opmerkingen typt) staan de breekregels hieronder: een kopje breekt nooit
   * los van wat eronder staat, het totaal nooit van de specificatie, en een
   * regel nooit doormidden. Verander deze maten niet zonder opnieuw te meten;
   * het meetscript staat in het rapport. */
  .of-blad {
    font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
    color: #111;
    font-size: 9.5pt;
    line-height: 1.4;
    background: #fff;
  }

  /* ── kop: logo links, adres rechts, streep eronder ──
     De streep was oranje. Op een kleurenprinter is dat een merkstreep, op de
     printer die hier naast de kassa staat is het een grijze veeg, en dit vel
     hoort zwart op wit te zijn. Zwart, en een halve punt dunner. */
  .of-blad__kop {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 2rem;
    border-bottom: 1.5pt solid #111;
    padding-bottom: 5pt; margin-bottom: 8pt;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Het logo is bijna vierkant, dus elke millimeter breedte kost er ook een in
     de hoogte. Op 68px is het nog steeds 18mm hoog, ruim leesbaar, en het
     scheelt ten opzichte van 90px een halve centimeter blad. */
  .of-blad__logo { width: 68px; height: auto; }
  .of-blad__adres { text-align: right; font-size: 8pt; color: #444; line-height: 1.3; }

  .of-blad__titel {
    font-family: var(--font-serif, 'Barlow Condensed', Impact, sans-serif);
    font-size: 20pt; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1; margin-bottom: 2pt;
  }
  .of-blad__sub { font-size: 8.5pt; color: #555; }

  /* ── de belangrijkste zin van het blad, boven de vouw ──
     Dat dit nog geen reservering is stond alleen in de voetnoot. Op een vol
     blad viel die voetnoot op het TWEEDE vel, en dat is precies het vel dat een
     gast niet meekrijgt. De zin staat daarom ook hier, tussen twee strepen,
     waar iemand hem leest voordat hij naar het bedrag kijkt. Geen vlak eromheen:
     twee hairlines kosten geen inkt en springen even hard. */
  .of-blad__melding {
    margin-top: 6pt;
    padding: 4pt 0;
    border-top: 0.5pt solid #111; border-bottom: 0.5pt solid #111;
    font-size: 9pt; font-weight: 700;
    break-inside: avoid; page-break-inside: avoid;
  }

  .of-blad__kopje {
    font-family: var(--font-serif, 'Barlow Condensed', Impact, sans-serif);
    font-size: 11.5pt; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 6.5pt 0 2.5pt;
    border-bottom: 0.5pt solid #999;
    padding-bottom: 2pt;
    /* Een kopje onderaan een vel met zijn inhoud op het volgende leest als een
       fout. Deze twee regels houden ze bij elkaar. */
    break-after: avoid; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* ── de feiten: wanneer, met hoeveel, wie ──
   * Twee paren naast elkaar. Negen regels onder elkaar kostte vijf centimeter
   * en dat is een kwart van het vel aan gegevens die je in een oogopslag wilt
   * kunnen overzien. */
  .of-blad__gegevens {
    display: grid;
    /* Was 17%/33%/17%/33%. Een vaste 17% is te breed voor "Tijd" en te smal
       voor "Aantal personen", en de 33% ernaast liet een contactregel met naam,
       mailadres, telefoon en bedrijf over drie regels vallen. Met max-content
       krijgt het etiket precies wat het nodig heeft en de waarde de rest. */
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 6pt; row-gap: 1pt;
    font-size: 9pt;
    break-inside: avoid; page-break-inside: avoid;
  }
  .of-blad__gegevens dt { color: #666; padding-right: 10pt; }
  .of-blad__gegevens dd { margin: 0; overflow-wrap: anywhere; }
  /* Een lange waarde (in de praktijk de contactregel) krijgt de volle breedte
     in plaats van een kwart. offerteblad.js zet deze klasse; wat "lang" is
     staat daar en niet hier. */
  .of-blad__gegevens dt.of-blad__breed { grid-column: 1; }
  .of-blad__gegevens dd.of-blad__breed { grid-column: 2 / -1; }

  /* ── de opbouw van de prijs, regel voor regel ──
     Een regel mag niet over twee bladen breken: dan staat de uitleg op het
     ene vel en het bedrag op het andere. */
  .of-blad__tabel { width: 100%; border-collapse: collapse; }
  .of-blad__tabel tr { break-inside: avoid; page-break-inside: avoid; }
  .of-blad__tabel td {
    padding: 2pt 0;
    border-bottom: 0.5pt solid #ccc;
    vertical-align: top;
  }
  .of-blad__tabel td:last-child {
    text-align: right; white-space: nowrap; padding-left: 12pt;
    font-variant-numeric: tabular-nums;
  }
  /* De rekensom bij een regel stond op een EIGEN regel onder de naam. Dat is
     op een scherm prettig en op papier duur: acht regels specificatie kostten
     zo acht extra regels, bijna drie centimeter blad, en dat is het verschil
     tussen een vel en twee vellen. Achter de naam, gescheiden door een punt,
     leest het net zo goed en past het in de breedte die er toch al is. Wordt de
     som te lang, dan loopt hij gewoon door naar de volgende regel: dan is het
     precies zo hoog als het was, nooit hoger. */
  .of-blad__tabel small {
    display: inline; color: #666; font-size: 8.5pt; line-height: inherit;
  }
  /* Vaste spaties: gewone spaties in `content` klappen samen tot een, en dan
     plakt de rekensom tegen de naam aan. */
  .of-blad__tabel small::before { content: '\00a0\00a0\00b7\00a0\00a0'; }

  /* Het totaal hoort onder de opbouw waar het uit komt, nooit alleen op een
     volgend vel: dan hangt er een bedrag in de lucht zonder herkomst. */
  .of-blad__totaal {
    display: flex; justify-content: space-between;
    align-items: baseline;
    margin-top: 5pt; padding-top: 4pt;
    border-top: 1.5pt solid #111;
    font-family: var(--font-serif, 'Barlow Condensed', Impact, sans-serif);
    font-size: 15pt; font-weight: 900;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    break-before: avoid; page-break-before: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }
  .of-blad__pp {
    display: flex; justify-content: space-between;
    font-size: 8.5pt; color: #555; margin-top: 2pt;
    font-variant-numeric: tabular-nums;
    break-before: avoid; page-break-before: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* ── wat er nog niet vastligt ──
     Bewust niet als kleine voetnoot weggezet: dit is waar misverstanden
     ontstaan, dus het staat als eigen blok in dezelfde maat als de rest. */
  .of-blad__lijst { margin: 0; padding-left: 1.05rem; }
  .of-blad__lijst li {
    margin-bottom: 1pt; overflow-wrap: anywhere;
    break-inside: avoid; page-break-inside: avoid;
  }
  .of-blad__tekst {
    font-size: 9pt; overflow-wrap: anywhere; white-space: pre-wrap;
    /* Nooit een enkele regel alleen boven of onder een vouw. */
    orphans: 2; widows: 2;
  }

  .of-blad__voet {
    margin-top: 8pt; padding-top: 5pt;
    border-top: 0.5pt solid #999;
    font-size: 8pt; color: #444; line-height: 1.35;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Browsers zetten standaard het adres achter elke link. Op een blad dat je
     aan een gast meegeeft is dat alleen maar rommel. */
  .of-blad a[href]::after { content: none !important; }
  .of-blad a { color: inherit; text-decoration: none; }
}