/* mobile.css - mobiele weergave voor alle paginatypes van chazzanut.com.
   Wordt NA /chazzanut.css geladen (<link rel="stylesheet" href="/mobile.css">).
   Alles wat de weergave verandert staat in @media screen and (max-width:768px); vanaf
   769 px is de desktopweergave ongewijzigd. Buiten de media query staan alleen
   verbergregels voor de door mobile.js toegevoegde elementen.

   Paginatypes (mobile.js zet een klasse op <html>):
     html.m-menu   pagina met menukolom (td.nav): hamburgerbalk, overlay, colofon onderaan
     html.m-book   scan-pagina (blockquote met img en Next/Contents): vaste balk onderaan
     (geen)        jPlayer-pagina's (body.demo) en overige pagina's: alleen CSS
   Zonder JS blijven de pagina's bruikbaar: menu zichtbaar en onder elkaar, scan op
   schermbreedte. Geen !important: dezelfde of hogere specificiteit, later in de cascade. */

.m-bar,
.m-colofon,
.m-nav {
    display: none;
}

.m-scan {
    display: contents; /* wrapper is onzichtbaar; layout ongewijzigd */
}

@media screen and (max-width: 768px) {
    :root {
        --m-bar: 52px;
        --m-ink: #313163;
        --m-tint: #efeff7;
    }

    /* ---- Basis voor alle pagina's -------------------------------------- */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    body {
        margin: 0;
        /* notenbalk (score.gif, attribuut background=) weg: leesbaarheid */
        background-image: none;
        background-color: #fff;
        overflow-wrap: break-word;
    }
    body.m-open {
        overflow: hidden;
    }
    img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Menupagina's: layouttabellen onder elkaar ---------------------
       Alleen de drie layouttabellen (buitenste, menu, inhoud) via
       kindcombinators; datatabellen in de inhoud blijven tabellen. */
    body > table,
    body > table > tbody,
    body > table > tbody > tr,
    body > table > tbody > tr > td,
    body > table > tbody > tr > td:last-child > table,
    body > table > tbody > tr > td:last-child > table > tbody,
    body > table > tbody > tr > td:last-child > table > tbody > tr,
    body > table > tbody > tr > td:last-child > table > tbody > tr > td,
    body > table > tbody > tr > td:first-child table,
    body > table > tbody > tr > td:first-child tbody,
    body > table > tbody > tr > td:first-child tr,
    body > table > tbody > tr > td:first-child td {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* spacer (width=40) en lege cellen in de menutabel */
    body > table > tbody > tr > td:nth-child(2),
    body > table > tbody > tr > td:first-child td:not(.nav):not(.colofon) {
        display: none;
    }
    body > table > tbody > tr > td:last-child {
        padding: 12px 16px 24px;
    }
    body > table > tbody > tr > td:last-child table table {
        width: 100%;
        max-width: 100%;
    }
    body > table > tbody > tr > td:last-child table table td {
        width: auto;
        padding: 6px 4px;
    }

    /* ---- Menupagina's: balk met hamburger (door mobile.js ingevoegd) ---- */
    html.m-menu .m-bar {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 30;
        box-sizing: border-box;
        height: var(--m-bar);
        padding: 0 8px 0 4px;
        background: var(--m-ink);
        color: var(--m-tint);
        font-family: verdana, arial, helvetica, sans-serif;
    }
    html.m-menu .m-bar button {
        flex: none;
        min-width: 48px;
        height: 48px;
        padding: 0 12px;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        font-size: 18px;
        cursor: pointer;
    }
    html.m-menu .m-bar button:focus-visible,
    html.m-menu .m-bar a:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -3px;
    }
    html.m-menu .m-bar .m-ham {
        display: inline-block;
        font-size: 26px;
        line-height: 1;
        vertical-align: -3px;
        margin-right: 6px;
    }
    html.m-menu .m-bar a {
        display: block;
        flex: 1;
        padding: 14px 8px;
        color: var(--m-tint);
        font-size: 18px;
        text-align: right;
        text-decoration: none;
    }

    /* menukolom: ingeklapt zodra JS draait, overlay als de knop open staat */
    html.m-menu body > table > tbody > tr > td:first-child {
        display: none;
    }
    html.m-menu body.m-open > table > tbody > tr > td:first-child {
        display: block;
        position: fixed;
        top: var(--m-bar);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        overflow-y: auto;
        background: var(--m-tint);
        padding: 0 0 24px;
    }
    td.nav {
        padding: 0 16px;
        font-size: 17px;
    }
    td.nav br {
        display: none;
    }
    td.nav a {
        display: block;
        margin: 0 -16px;
        padding: 12px 16px;
        min-height: 24px;
        line-height: 24px;
        font-size: 17px;
        border-bottom: 1px solid #d8d8ea;
    }
    td.nav a:focus-visible {
        outline: 3px solid var(--m-ink);
        outline-offset: -3px;
    }
    td.nav .m-ind {
        display: none;
    }
    td.nav a.m-sub {
        padding-left: 32px;
    }
    td.nav .m-here {
        display: block;
        padding: 12px 0;
        line-height: 24px;
        font-weight: bold;
        color: var(--m-ink);
    }

    /* colofon: met JS een kopie onderaan (.m-colofon), het origineel verborgen */
    html.m-menu td.colofon {
        display: none;
    }
    html.m-menu .m-colofon {
        display: block;
        padding: 16px;
        background: var(--m-tint);
        font: 15px/1.6 arial, helvetica, sans-serif;
    }
    .m-colofon a {
        display: inline-block;
        padding: 12px 0;
        color: #08470e;
        text-decoration: none;
    }
    td.colofon a {
        display: inline-block;
        padding: 10px 0;
    }

    /* ---- Menupagina's: typografie --------------------------------------- */
    html.m-menu h1 {
        font-size: 28px;
        line-height: 1.2;
        margin: 0.4em 0;
    }
    html.m-menu h4 {
        font-size: 20px;
    }
    html.m-menu font.small,
    html.m-menu font[size="-1"],
    html.m-menu font[size="-2"] {
        font-size: 14px;
    }
    html.m-menu font[size="2"] {
        font-size: 16px;
    }
    html.m-menu a,
    html.m-menu li,
    html.m-menu p {
        overflow-wrap: anywhere;
    }
    html.m-menu ul,
    html.m-menu ol {
        padding-left: 28px;
    }
    html.m-menu li {
        padding: 8px 0;
    }
    html.m-menu blockquote {
        margin-left: 0;
        margin-right: 0;
    }
    html.m-menu td.art,
    html.m-menu th.art,
    html.m-menu th.top,
    html.m-menu td.data {
        font-size: 16px;
    }
    html.m-menu pre {
        max-width: 100%;
        overflow-x: auto;
    }
    html.m-menu img[align="right"] {
        max-width: 40%;
    }
    html.m-menu img[src$="hr.gif"] {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    html.m-menu a[href^="#n"] {
        padding: 0 6px;
        margin: 0 -2px;
    }
    html.m-menu a[href="#top"] {
        display: block;
        width: fit-content;
        margin-left: auto;
        padding: 18px;
    }
    html.m-menu a[name],
    html.m-menu [id] {
        scroll-margin-top: calc(var(--m-bar) + 8px);
    }
    /* vangnet van mobile.js voor te brede datatabellen */
    .m-scroll {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ---- sedersongs.html (Word-export, tweekoloms tekstblok) -------------
       Inline width/margin in style= blijven staan; max-width wint ervan. */
    div.Section1 table,
    div.Section1 tbody,
    div.Section1 tr,
    div.Section1 td {
        display: block;
        max-width: 100%;
        box-sizing: border-box;
    }
    div.Section1 {
        padding: 0 8px;
    }
    /* De inline 10pt-letters (13,3px) van de Word-export blijven staan: besluit van de
       eigenaar (alleen injectie en basisregels voor sedersongs.html), geen !important. */

    /* ---- Scan-pagina's (Next/Prev/Contents) ------------------------------ */
    body > blockquote {
        margin: 0;
        padding: 0 12px; /* de dubbele inspringing (2 x 40px) weg */
    }
    body > blockquote blockquote {
        margin: 0;
        padding: 0;
    }
    html.m-book hr {
        margin: 8px 12px;
    }
    html.m-book.m-has-bar body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
    html.m-book .m-scan {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        text-align: center;
        margin: 4px 0;
    }
    html.m-book .m-scan img {
        display: inline-block;
        vertical-align: top;
        margin: 0;
    }
    html.m-book.m-full .m-scan {
        text-align: left;
    }
    html.m-book.m-full .m-scan img {
        max-width: none;
    }
    html.m-book h2 {
        font-size: 1.25rem;
        line-height: 1.25;
        margin: 12px 0 6px;
        overflow-wrap: anywhere;
    }
    html.m-book p,
    html.m-book li {
        font-size: 1rem;
        line-height: 1.4;
    }
    html.m-book ul {
        padding-left: 24px;
    }
    /* tapdoelen >= 44px; ook Midi-links en de inline navigatie (zonder JS) */
    html.m-book a[href] {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 10px;
    }
    html.m-book p > a:first-child,
    html.m-book body > blockquote > a:first-of-type {
        padding-left: 0;
    }
    /* de dubbele navigatie onder de scan vervangt de vaste balk */
    html.m-book.m-has-bar .m-dup {
        display: none;
    }
    html.m-book .m-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: var(--m-ink);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.35);
    }
    html.m-book .m-nav a[href],
    html.m-book .m-nav span,
    html.m-book .m-nav button {
        flex: 1 1 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 56px;
        margin: 0;
        padding: 0 4px;
        border: 0;
        border-radius: 0;
        background: none;
        color: #fff;
        font: 600 16px/1 Arial, Helvetica, sans-serif;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    html.m-book .m-nav a[href],
    html.m-book .m-nav span {
        white-space: nowrap;
    }
    html.m-book .m-nav button {
        flex: 0 0 64px;
        border-left: 1px solid #5a5a95;
        cursor: pointer;
    }
    html.m-book .m-nav span {
        opacity: 0.4;
    }
    html.m-book .m-nav a[href]:active,
    html.m-book .m-nav button:active {
        background: #4a4a8a;
    }
    html.m-book .m-nav a[href]:focus-visible,
    html.m-book .m-nav button:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -3px;
    }

    /* ---- jPlayer-pagina's (ivriet/*.html), alleen CSS -------------------- */
    body.demo #container {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 12px;
    }
    body.demo h2 {
        font-size: 1.4rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    body.demo p {
        font-size: 1rem;
    }
    /* afspeellijst-rijen >= 44px hoog, tekst >= 14px */
    body.demo .jp-playlist a.jp-playlist-item {
        display: block;
        box-sizing: border-box;
        min-height: 44px;
        padding-top: 13px;
        padding-bottom: 13px;
        font-size: 1rem;
    }
    body.demo .jp-current-time,
    body.demo .jp-duration {
        font-size: 14px;
    }
    /* volumeknoppen (16x11) zijn zinloos op mobiel: het volume loopt via het toestel */
    body.demo .jp-volume-controls {
        display: none;
    }

    /* ---- Printer- en validator-iconen: geen functie op mobiel -------------
       Bewust laatst: moet de display-regels van td.colofon a en .m-colofon a
       (gelijke specificiteit) overrulen. */
    html a[href*="validator.w3.org"],
    html a[onclick*="print"],
    html img[src$="/printer.gif"],
    html img[src$="/validated.gif"] {
        display: none;
    }
}