/*
  The bulletin on the paper.

  The colours and the fonts come from the identity of the parish
  (../visual-identity/DESIGN.md, the light variant for the print):
  midnight blue #1D3557 for the text, gold #c49a0a and crimson #C0303A for
  the accents. The page is A5, because the parish folds an A4 sheet.
*/

:root {
    --ink: #1D3557;
    --gold: #c49a0a;
    --crimson: #C0303A;
    --line: #d8dee7;
    --muted: #5c718c;
}

/*
  The bulletin without colour, for the printer of the parish.

  Colour on a laser printer of a parish office costs several times more per
  sheet than black, and the parish prints the bulletin every week. The look
  therefore has a second set of colours: the same typesetting, in greys that
  hold their difference on paper. The accents (gold, crimson) become dark
  grey, so that a heading still stands out from the text.

  The mark of the parish changes as well: the drawn one from the identity
  (znacka-skica.svg) is made of lines, thus it prints in black and keeps its
  shape, while the coloured mark would turn into a grey blot.
*/
body.cernobile {
    /* Text i nadpisy černě, ne tmavě šedě. Šedá je na kopírce farní
       kanceláře rastr, ne barva: tisknou se z ní body s mezerami mezi nimi,
       takže písmo vypadá špinavě a při druhé kopii bledne. Černá je jedna
       plocha toneru a vydrží i kopii z kopie.

       Rozdíl mezi nadpisem a textem tady tedy nedělá barva, ale řez
       a velikost — tak, jak to dělal nedělník ve Wordu. */
    --ink: #000;
    --gold: #000;
    --crimson: #000;
    --line: #9a9a9a;

    /* Vysvětlivky a patička zůstávají potlačené, jen tmavší než v barevné
       sazbě: mají se číst až po tom hlavním, ne splynout s ním. */
    --muted: #3a3a3a;
}

/* A photograph in a block goes grey as well; the printer would do it anyway
   and this way the editor sees it beforehand. */
body.cernobile img { filter: grayscale(1) contrast(1.05); }

/* The drawn mark carries no square of colour around it, thus it needs a
   little more room to weigh the same in the header as the coloured one. */
body.cernobile .hlava img { width: 42px; height: 42px; margin: -4px -2px; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/*
  Montserrat v tisku stojí v polotučném řezu, ne v základním.

  Nedělník se dřív sázel Calibri a Aptosem, které mají svislý tah 89 tisícin
  em; Montserrat 400 jich má 74, a protože Ordo sází o dva body menší, tah na
  papíře vyšel 260 µm proti 376 µm — o třetinu tenčí. Na kopírce farní
  kanceláře je z toho písmo, které vybledne dřív, než dojde do posledních
  lavic. Řez 500 má tah 100 tisícin em, tedy 353 µm při deseti bodech: zpátky
  tam, kde nedělník býval.
*/
body {
    background: #e9edf2;
    color: var(--ink);
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 10pt;
    font-weight: 500;
    line-height: 1.5;
    padding: 16px;
}

/* The buttons are only for the screen. The paper does not need them. */
.ovladani { display: flex; gap: 10px; align-items: center; max-width: 148mm;
            margin: 0 auto 12px; }

.ovladani a { color: var(--ink); font-size: 9pt; }
.ovladani button { font: inherit; font-size: 9pt; padding: 5px 12px; cursor: pointer;
                   border: 1px solid var(--ink); border-radius: 5px;
                   background: var(--ink); color: #fff; }

/* V rámu náhledu tisku má ovládání okno Orda, ne stránka sama. */
.v-ramu .ovladani { display: none; }

/* The box on the screen has the same content width as the printed page:
   148mm of A5 minus the margin of 10mm on each side. The lines then break in
   the same places on the screen and on the paper, and the measurement of the
   space (see the script below) means something. */
.list { width: 148mm; min-height: 210mm; margin: 0 auto; background: #fff;
        padding: 10mm; box-shadow: 0 2px 14px rgba(29, 53, 87, .16); }

/* Pořad se tiskne na A4, ne na A5 jako nedělník: visí ve vitríně a na dveřích
   kostela, kde se čte z dálky, a týden dvou farností se na půl listu nevejde.
   Patička patří na patu listu, ne za poslední bohoslužbu — datum vydání se
   hledá dole. */
.porad-list { width: 210mm; min-height: 297mm; display: flex; flex-direction: column;
              page: porad; }
.porad-list .pata { margin-top: auto; }

/* Znak stojí vedle nadpisu a středem na jeho středu; jména farností jsou pod
   nadpisem a začínají tam, kde on — každé na svém řádku. */
.porad-list .hlava { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
.porad-list .hlava img { grid-row: 1; grid-column: 1; align-self: center; }
.porad-list .hlava h1 { grid-row: 1; grid-column: 2; }
/* Cinzel nese pod účařím hodně vzduchu, takže mezi nadpisem a jmény farností
   zůstávala díra. Posun je proto záporný a v em, aby držel i při jiné
   velikosti nadpisu. */
.porad-list .nadrádek { grid-column: 2; display: grid; gap: 1px; margin-top: -0.75em; }
@page porad { size: A4; margin: 12mm; }

.hlava { display: flex; align-items: center; gap: 10px;
         border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 10px; }
.hlava img { border-radius: 4px; }
.nadrádek { font-size: 7.5pt; letter-spacing: 3px; text-transform: uppercase;
            color: var(--gold); }
/* Velikost si počítá Ordo z délky nadpisu (Text/HeadLineFit.cs) a píše ji
   do stránky; tahle stojí pro případ, že by v nadpisu nic nestálo. */
.hlava h1 { font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 15pt;
            line-height: 1.2; white-space: nowrap; }

.blok { margin-bottom: 9px; break-inside: avoid; }

/* Odkaz v textu nedělníku. Na papíře se na něj klepnout nedá, takže za ním
   stojí adresa — jinak by čtenář viděl podtržené slovo a nevěděl kam. Pošta
   a telefon adresu nesou už v textu, ty se neopakují. */
.blok a { color: var(--ink); text-decoration: underline;
          text-decoration-color: var(--gold); text-underline-offset: 2px; }
.blok a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 8pt; color: var(--muted); text-decoration: none;
  word-break: break-all;
}

/* Na obrazovce je odkaz živý a adresu za sebou nepotřebuje. */
@media screen {
  .blok a[href^="http"]::after { content: none; }
  .blok a { color: var(--ink); }
}
.blok h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 700;
           font-size: 11.5pt; color: var(--crimson); margin-bottom: 4px; }
.blok p { text-wrap: pretty; white-space: pre-wrap; }
.blok ul { list-style: none; }
.blok ul li { padding-left: 12px; position: relative; margin-bottom: 3px; }
.blok ul li::before { content: "•"; position: absolute; left: 0; color: var(--gold);
                      font-weight: 700; }

/* Malá tabulka týdne v nedělníku: sedm sloupců, v každém časy a kostel. */
.tyden table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Tabulka časů je to, kvůli čemu si nedělník bere domů většina lidí, a
   čtou ji i ti, kdo na písmo vidí nejhůř. Dřív měla ve Wordu tolik co
   ostatní text; sedm a půl bodu z ní dělalo poznámku pod čarou. */
.tyden th {
  font-size: 9pt; font-weight: 700; text-align: center; padding: 2px 1px;
  border-bottom: 1px solid var(--line); text-transform: capitalize;
}
.tyden td {
  font-size: 9pt; text-align: center; vertical-align: top; padding: 3px 1px;
  border-bottom: 1px solid var(--line);
}
.tyden .mse { display: block; white-space: nowrap; }
.tyden .mse b { color: var(--gold); font-weight: 700; }
.tyden .nic { color: var(--muted); }
.tyden p.vysvetlivky {
  font-size: 8.5pt; color: var(--muted); margin-top: 5px; text-wrap: pretty;

  /* Bez tohohle by se do tisku dostalo odsazení ze zdroje šablony:
     .blok p má white-space: pre-wrap kvůli textům od redaktora. */
  white-space: normal;
}

.porad table { width: 100%; border-collapse: collapse; }

/* Den a co se ten den slaví — na jednom řádku, jméno oslavy vpravo. */
.porad tr.den th { text-align: left; padding: 5px 0 2px; border-top: 1px solid var(--line);
                   font-weight: 600; }

/* První den stojí hned pod čarou záhlaví; druhá čára by tam byla dvakrát. */
.porad tbody tr.den:first-child th { border-top: none; padding-top: 0; }
.porad tr.den .datum { text-transform: capitalize; }
.porad tr.den .liturgie { float: right; font-weight: 400; color: var(--muted);
                          text-align: right; }

/* Bohoslužby: úzký čas, jméno kostela, a co zbude patří úmyslu. */
.porad td { vertical-align: top; padding: 1px 0; }
.porad .cas { width: 13mm; font-weight: 700; color: var(--gold); white-space: nowrap; }
.porad .misto { width: 42mm; padding-right: 4mm; }
.porad .umysl { color: var(--ink); }
.porad .umysl i { font-style: normal; font-weight: 600; }
.porad .umysl i + * { margin-left: 3px; }
.porad .nic { color: var(--muted); }
.porad p.vysvetlivky { font-size: 8.5pt; color: var(--muted); margin-top: 5px;
                       white-space: normal; }

.pata { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 6px;
        font-size: 8.5pt; color: var(--muted); text-align: center; }
.pata .radek { display: block; }
.pata.vpravo { text-align: right; }

@media print {
    @page { size: A5; margin: 10mm; }
    body { background: #fff; padding: 0; }
    .ovladani { display: none; }
    .list { width: auto; min-height: 0; box-shadow: none; padding: 0; }

    /* A4 bez okrajů, aby patička dosedla na spodek papíru. */
    .porad-list { width: auto; min-height: 273mm; }

    /* The marks of the pages belong to the screen. */
    .zlom { display: none; }
}

/* The links to the older issues, under the page. Only for the screen. */
.starsi { width: 148mm; margin: 12px auto 0; display: flex; gap: 10px; flex-wrap: wrap;
          font-size: 9pt; color: var(--muted); }
.starsi a { color: var(--ink); }

@media print {
    .starsi { display: none; }
}

/* Obrázek v nedělníku. Šířka sazby, výška podle poměru stran — a nikdy
   rozdělený mezi dvě strany. */
.blok.obrazek img { display: block; width: 100%; height: auto; border-radius: 4px; }
.blok.obrazek { break-inside: avoid; }

/* Ruční zlom: co stojí za ním, začíná na dalším listu. Na obrazovce je to
   čára s poznámkou, na papíře konec strany. */
.rucni-zlom { border-top: 1px dashed var(--crimson); margin: 10px -10mm;
              height: 0; position: relative; }
.rucni-zlom::after { content: "zlom strany"; position: absolute; left: 100%;
                     margin-left: 3mm; top: -1.6mm; font-size: 7pt;
                     white-space: nowrap; color: var(--crimson); }

@media print {
    /* Na obrazovce si zlom dorovnává výšku do konce strany (js/nedelnik-mira.js);
       na papíře stránku ukončí sazba sama a ta výška by přidala prázdné místo. */
    .rucni-zlom { break-after: page; border: 0; margin: 0; height: 0 !important; }
    .rucni-zlom::after { content: none; }
}

/* The mark of the end of a page. The editor sees where the paper stops. */
.zlom { position: relative; border-top: 1px dashed var(--crimson); margin: 0 -10mm;
        height: 0; }
/* The label stands beside the sheet, not on the text: a word over a line of
   the bulletin is exactly the kind of thing that this page must show clean. */
.zlom span { position: absolute; left: 100%; margin-left: 3mm; top: -2mm;
             font-size: 7pt; white-space: nowrap; color: var(--crimson); }

/* The typesetting that the marks of the editor make in a block.
   Nadpis uvnitř textu je menší než nadpis bloku (11,5 pt) a černý, ne
   červený: nadpis bloku je jeden a musí zůstat tím prvním, co oko najde. */
.blok h2, .blok h3, .blok h4 { font-family: "Playfair Display", Georgia, serif; }
.blok h3 { font-size: 10pt; color: var(--ink); margin: 5px 0 3px; }
.blok h4 { font-size: 9pt; font-weight: 700; color: var(--ink); margin: 4px 0 2px; }
.blok strong { font-weight: 700; }
.blok em { font-style: italic; }
.blok ol { margin: 0 0 4px 16px; }
.blok ol li { margin-bottom: 3px; }

/* The minutes of a meeting on paper. */
.udaje { font-size: 9pt; color: var(--muted); margin-bottom: 3px; }
.udaje b { color: var(--ink); }
.rozepsano { color: var(--crimson); }
.varovani { font-size: 8.5pt; color: #8a6a05; background: #fdf4dd; border-radius: 5px;
            padding: 5px 8px; margin: 6px 0; }

/* A part that stays in the council. Only the full form shows it. */
.interni { border-left: 3px solid var(--crimson); padding: 2px 0 2px 8px; margin: 5px 0;
           background: #fbe9ea; }
.interni::before { content: "interní"; display: block; font-size: 7pt; font-weight: 700;
                   letter-spacing: .6px; text-transform: uppercase; color: var(--crimson); }

@media print {
    .varovani { display: none; }
}

/* A piece of a sentence that stays in the council; only the full form has it. */
.interni-inline { background: #fbe9ea; color: var(--crimson); border-radius: 2px;
                  padding: 0 2px; }

/* The few colours that stand in the sheet itself, not in a variable. */
body.cernobile .varovani { color: #333; background: #eee; }
body.cernobile .interni,
body.cernobile .interni-inline { background: #ededed; }