/* ============================================================
   site.css - Brass Friends Lembeek
   ------------------------------------------------------------
   Het enige CSS-bestand dat per klant wijzigt.

   HUISSTIJL
   ------------------------------------------------------------
   Zenn gaf drie kleurcodes door: zwart #000000, wit #ffffff en
   blauw #1a67d2. Die laatste is het accent en staat overal in de
   site op dezelfde manier: knoppen, verwijzingen, de datumkolom
   van de agenda, de gekozen stoel op het zaalplan. Er is geen
   tweede accentkleur.

   Twee bewuste afwijkingen van zijn codes, allebei klein en
   allebei omkeerbaar door in dit blok een waarde te wijzigen:

   1. Zwart is #0d1117 en niet #000000. Zuiver zwart op zuiver wit
      geeft een harde rand die bij lang lezen vermoeit. Op een
      scherm is het verschil niet te zien, in de leesbaarheid wel.
   2. De demo van augustus was donker. Deze site is licht. Met
      zwart-wit-blauw als huisstijl is wit de grond die die drie
      kleuren laat kloppen, en het logo is zwart lijnwerk op wit.

   Contrast, machinaal nagerekend:
     --text op --bg           14,99:1   (eis 4,5)
     --text-muted op --bg      5,98:1   (eis 4,5)
     --accent op --bg          5,37:1   (eis 4,5 tekst, 3,0 rand)
     --accent op --bg-panel    4,57:1   (eis 4,5)
     --on-accent op --accent   5,37:1   (eis 4,5, knoptekst)
     --veld-rand op --bg       4,47:1   (eis 3,0, WCAG 1.4.11)
   ============================================================ */

@layer site {
  :root {
    color-scheme: light;

    /* ---- Semantiek opnieuw gericht --------------------------
       De neutrale ladder in tokens.css blijft onaangeroerd.
       Alleen waar elk semantisch token heen wijst, verandert:
       de ladder daar is warm-neutraal en deze huisstijl is koel. */
    --bg:          #ffffff;
    --bg-sunken:   #f4f6f9;
    --bg-panel:    #e9edf3;
    --rule:        #d4dae3;
    --veld-rand:   #6f7885;   /* rand van een invoerveld        */
    --text:        #23272e;
    --text-strong: #0d1117;
    --text-muted:  #5b6472;

    --accent:        #1a67d2;   /* het blauw van Zenn            */
    --accent-strong: #1550a8;   /* hover, actieve staat          */
    --accent-tint:   #e8f0fc;
    --on-accent:     #ffffff;

    --danger:      #b3261e;
    --danger-tint: #fdecea;

    /* Schaduw getint naar de koele grond, niet zuiver zwart. */
    --shadow-s: 0 1px 2px rgb(13 17 23 / 0.06),
                0 1px 1px rgb(13 17 23 / 0.04);
    --shadow-m: 0 2px 4px rgb(13 17 23 / 0.05),
                0 8px 20px -6px rgb(13 17 23 / 0.12);

    --font-display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  }

  /* De foundation zet de rand van een invoerveld op --n-4. Die
     kleur is warm-grijs en hoort bij het huispalet, niet bij dit
     koele. Zelfde contrast, andere temperatuur. */
  .input, .select, .textarea { border-color: var(--veld-rand); }

  /* --------------------------------------------------------
     Kop van de pagina. Het logo staat links en brengt je terug
     naar de homepagina, zoals Zenn vroeg.
     -------------------------------------------------------- */
  .merk {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text-strong);
  }
  .merk img {
    inline-size: 46px;
    block-size: 46px;
    object-fit: contain;
    flex: 0 0 auto;
  }
  .merk__naam {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  /* Onder 26rem past de naam niet meer naast het logo zonder de
     navigatieknop weg te duwen. Dan draagt het logo alleen. */
  @media (max-width: 26rem) {
    .merk__naam { display: none; }
  }

  /* --------------------------------------------------------
     Hero. Het beeld draagt de pagina, de tekst ligt erbovenop.
     De naam staat als echte tekst en niet in de foto gebakken:
     zo schaalt hij mee op een gsm, leest een schermlezer hem
     voor en vindt een zoekmachine hem terug.
     -------------------------------------------------------- */
  .hero {
    position: relative;
    background: var(--text-strong);
    overflow: hidden;
  }
  .hero__foto { position: absolute; inset: 0; z-index: 0; }
  .hero__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
  /* Twee lagen: een vlakke demper over het geheel en een verloop
     dat de tekstzijde extra dicht maakt. Zonder de tweede laag
     zakt de kop weg zodra de foto daar oplicht. */
  .hero__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(100deg,
        rgb(6 10 16 / 0.92) 8%,
        rgb(6 10 16 / 0.78) 46%,
        rgb(6 10 16 / 0.34) 100%),
      rgb(6 10 16 / 0.28);
  }
  .hero__inhoud {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 9vw, 5.5rem);
    max-width: 36rem;
  }
  .hero__title { color: #ffffff; }
  .hero__sub { color: #e3e8f0; }

  /* "sinds 2006" hoort bij de naam en niet bij de lopende tekst,
     dus hij staat er strak onder met een blauwe streep ertussen
     in plaats van een witregel. */
  .sinds {
    display: inline-block;
    margin-block: 0.85rem 1.5rem;
    padding-top: 0.85rem;
    border-top: 2px solid var(--accent);
    color: #ffffff;
    font-size: var(--step-1);
    letter-spacing: 0.02em;
  }

  /* De slogan van de band, bovenaan het tabblad Band. Krijgt
     dezelfde blauwe streep als "sinds 2006" op de homepagina,
     zodat de twee openingen als één familie lezen. Geen
     inline-block hier: de zin loopt over twee regels en dan hoort
     de streep zo breed te zijn als het tekstblok, niet als de
     eerste regel. */
  .slogan {
    margin-block: 0.85rem 0;
    padding-top: 0.85rem;
    border-top: 2px solid var(--accent);
    inline-size: fit-content;
    max-inline-size: 28rem;
    color: #ffffff;
    font-size: var(--step-2);
    line-height: var(--lh-snug);
    /* balance verdeelt de zin over twee even lange regels in
       plaats van een volle eerste en een korte tweede. Bij een
       slogan van één zin scheelt dat, en de blauwe streep erboven
       sluit dan ook aan bij wat eronder staat. */
    text-wrap: balance;
  }

  /* De binnenpagina's krijgen dezelfde hero, maar lager: daar
     draagt de kop de pagina en het beeld doet mee. */
  .hero--kort .hero__inhoud { padding-block: clamp(2.25rem, 6vw, 3.5rem); }

  /* De tweede knop in de hero staat op een donkere foto en niet op
     de witte grond waar .btn--secondary voor gemaakt is. Zonder
     deze regels is hij bijna-zwart op bijna-zwart en dus
     onzichtbaar. Wit op de gedempte foto haalt ruim 4,5:1. */
  .hero .btn--secondary {
    color: #ffffff;
    border-color: rgb(255 255 255 / 0.6);
  }
  .hero .btn--secondary:hover {
    border-color: #ffffff;
    background: rgb(255 255 255 / 0.12);
  }

  /* --------------------------------------------------------
     Het galaconcert op de homepagina. Affiche links, tekst
     rechts. Zolang de affiche er niet is, staat er een kader
     dat zegt wat er komt, en geen lege plek.
     -------------------------------------------------------- */
  .gala {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  @media (max-width: 48rem) {
    .gala { grid-template-columns: 1fr; }
  }

  .affiche {
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    background: var(--bg-sunken);
    overflow: hidden;
  }
  .affiche img { width: 100%; height: auto; }

  /* De plaatshouder houdt de verhouding van een A3-affiche aan,
     zodat de pagina niet verspringt zodra het echte beeld komt. */
  .affiche--leeg {
    aspect-ratio: 297 / 420;
    display: grid;
    place-content: center;
    gap: 0.5rem;
    padding: var(--sp-m);
    text-align: center;
    border: 2px dashed var(--veld-rand);
    color: var(--text-muted);
  }
  .affiche--leeg b { color: var(--text); }
  .affiche--leeg p { margin: 0; font-size: var(--step--1); }

  /* De vaste gegevens van het concert. Geen tabel met een lijn
     onder elke rij: vier paren die naast elkaar mogen staan. */
  .feiten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-s) var(--sp-m);
    margin: var(--sp-m) 0;
    padding: 0;
  }
  .feiten div { margin: 0; }
  .feiten dt {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }
  .feiten dd {
    margin: 0;
    color: var(--text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* --------------------------------------------------------
     Agenda. Geen kaartenrij: een lijst waarin de datum de
     ankerkolom is. Zes items in een kaartenrij oogt als een
     winkel, dezelfde zes in een lijst oogt als een agenda.
     -------------------------------------------------------- */
  .agenda { display: flex; flex-direction: column; }
  .agenda__item {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: 0.35rem 1.5rem;
    align-items: baseline;
    padding-block: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .agenda__item:last-child { border-bottom: 1px solid var(--rule); }
  .agenda__dag {
    grid-row: 1 / span 2;
    text-align: center;
    padding: 0.5rem 0.25rem;
    background: var(--accent-tint);
    border-radius: var(--r-s);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
  }
  .agenda__dag b {
    display: block;
    font-size: var(--step-2);
    color: var(--accent-strong);
  }
  .agenda__dag span {
    display: block;
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  /* Een datum die nog niet vastligt. Dan staat er geen cijfer,
     maar het woord dat er wel is. */
  .agenda__dag--open b {
    font-size: var(--step-0);
    line-height: 1.3;
    padding-block: 0.35rem;
  }
  .agenda__titel { margin: 0; font-size: var(--step-1); color: var(--text-strong); }
  .agenda__waar { grid-column: 2; margin: 0; color: var(--text-muted); font-size: var(--step--1); }
  .agenda__actie { grid-column: 3; grid-row: 1 / span 2; }

  @media (max-width: 40rem) {
    .agenda__item { grid-template-columns: 4.25rem 1fr; }
    .agenda__actie { grid-column: 1 / -1; grid-row: auto; margin-top: 0.75rem; }
  }

  /* --------------------------------------------------------
     De bezetting. Drieëndertig namen in één lijst is de luiste
     layout die er is, dus ze staan in zes groepen, en binnen een
     groep per lessenaar. Het raster vult zich naar de breedte
     van het scherm.
     -------------------------------------------------------- */
  .bezetting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-m) var(--sp-l);
    margin: 0;
    padding: 0;
  }
  .bezetting__groep {
    break-inside: avoid;
    border-top: 2px solid var(--accent);
    padding-top: var(--sp-xs);
  }
  .bezetting__groep h3 {
    margin: 0 0 var(--sp-xs);
    font-size: var(--step-0);
    color: var(--text-strong);
  }
  .lessenaar { margin: 0 0 var(--sp-s); }
  .lessenaar dt {
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  .lessenaar dd {
    margin: 0;
    color: var(--text);
  }
  /* Een lessenaar waar ze iemand voor zoeken. De kleur alleen zou het
     verschil moeten dragen, dus staat het ook met zoveel woorden in de
     tekst van de regel zelf. */
  .lessenaar dd.open {
    color: var(--accent-strong);
    font-weight: 600;
  }

  /* --------------------------------------------------------
     Dirigent. Portret naast de tekst, en het portret blijft
     staand: een dirigent in een liggend kader wordt een
     landschap met een mens erin.
     -------------------------------------------------------- */
  .portret {
    margin: 0;
    border-radius: var(--r-m);
    overflow: hidden;
    background: var(--bg-panel);
  }
  .portret img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 30%;
  }
  .portret figcaption {
    padding: var(--sp-xs) var(--sp-s);
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  /* --------------------------------------------------------
     De solisten van het galaconcert. Twee kolommen naast
     elkaar, portret boven de tekst. Bewust niet portret-links
     onder elkaar: met de affiche verderop op de pagina werd dat
     drie keer beeld-naast-tekst na elkaar. Het portret blijft
     smaller dan de kolom, anders wordt het op een breed scherm
     hoger dan de tekst eronder.
     -------------------------------------------------------- */
  .solisten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--sp-xl) var(--sp-l);
    align-items: start;
  }
  .solist .portret { max-inline-size: 16rem; margin-bottom: var(--sp-m); }
  .solist h3 { margin: 0; font-size: var(--step-2); color: var(--text-strong); }
  .solist__rol { margin-top: 0.2rem; color: var(--accent-strong); font-weight: 600; }

  /* Een brede beeldband tussen twee tekstblokken. Bewust geen
     derde beeld-naast-tekst: twee daarvan op één pagina is de
     grens, de derde maakt er een ritme van en dat is precies
     wat een gegenereerde site verraadt. */
  /* Volledig beeld, geen uitsnede. Hier stond eerst een vaste
     hoogte met object-fit: cover, en dat sneed de muzikanten hun
     hoofd af. Bij een sfeerbeeld mag dat, bij een foto waar je
     gezichten op moet herkennen niet. De verhouding van het
     bestand bepaalt nu de hoogte, en aspect-ratio houdt de plek
     al vrij voor het beeld geladen is, zodat de pagina niet
     verspringt. */
  .band {
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 934;
    border-radius: var(--r-m);
  }

  .bron { font-size: var(--step--1); color: var(--text-muted); }

  /* --------------------------------------------------------
     Contactblok op de homepagina: gegevens links, formulier
     rechts. De gegevens staan er ook voluit, want iemand die
     wil bellen moet niet eerst een formulier invullen.
     -------------------------------------------------------- */
  .gegevens { margin: 0; }
  .gegevens div + div { margin-top: var(--sp-s); }
  .gegevens dt {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }
  .gegevens dd { margin: 0; }

  /* --------------------------------------------------------
     Het ticketblok op de galaconcertpagina. Staat in een eigen
     paneel, want het is het enige op die pagina waar je iets
     moet doen. De verkoop zelf loopt bij Stamhoofd, dus hier
     staat geen formulier meer, alleen de prijzen en de knop.
     -------------------------------------------------------- */
  .tickets {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    padding: clamp(1.25rem, 4vw, 2rem);
  }
  .tickets h2 { margin-top: 0; }
  .tickets .feiten { max-width: 26rem; }

  /* De regel die zegt dat de verkoop nog niet open is. Verdwijnt
     samen met de TODO in galaconcert.html zodra de webshop er is,
     dus hij staat er bewust als een opvallend blok en niet als een
     zinnetje dat je over het hoofd ziet. */
  .ticketnoot {
    background: var(--accent-tint);
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    color: var(--text);
  }

  /* --------------------------------------------------------
     Duo-variant met een staand beeld.
     -------------------------------------------------------- */
  .duo--staand { align-items: stretch; }
  .duo--staand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-m);
  }

  /* --------------------------------------------------------
     Voettekst. Het logo staat er nog een keer, want de site
     eindigt waar hij begint.
     -------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--rule); }
  .site-footer__logo {
    inline-size: 56px;
    block-size: 56px;
    object-fit: contain;
    margin-bottom: var(--sp-xs);
  }
}

/* ============================================================
   Buiten elke @layer, en dat is met opzet.
   ------------------------------------------------------------
   Alles hierboven zit in @layer site. Dat is goed zolang de site
   op zijn eigen server draait. Maar wordt hij gebundeld en in een
   omgeving geplakt die zelf een reset meebrengt, dan wint die
   reset: ongelaagde CSS verslaat elke gelaagde regel, ongeacht
   specificiteit of volgorde.

   Daarom staan achtergrond, tekstkleur en color-scheme hier nog
   een keer, buiten de lagen. Dit is de enige plek in het bestand
   waar dat mag.
   ============================================================ */

/* :root:root en niet html, want een reset gebruikt zelf :root en
   dat is specifieker dan html. Verdubbelen wint zonder
   !important. Dit stuurt de schuifbalken en het uitklapmenu van
   een native select. */
:root:root { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}