/* Gedeelde opmaak voor alle pagina's van wt.lademisa.nl.
   Stond eerst in index.html; losgetrokken toen er editiepagina's bij kwamen,
   zodat de stijl op één plek staat.
   Let op: paden hierin zijn relatief aan deze map (assets/), niet aan de pagina. */

  /* Koppen en tellercijfers: Bradley Hand eerst. Dat lettertype staat op elke Mac,
     iPhone en iPad, en is de letter waar de keuze op viel. Meeleveren mag niet
     (Apple-licentie), dus wie het niet heeft — Windows, Android — krijgt Architects
     Daughter uit dit bestand. Dat staat in de repo, dus geen verzoek naar Google.
     Beide zijn dun; met -webkit-text-stroke worden de lijnen gelijkmatig iets dikker
     getrokken in plaats van de browser te laten verdikken. */
  @font-face {
    font-family: "Krijt";
    src: url("fonts/architects.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "Comic";
    src: url("fonts/comic-neue.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }

  :root {
    --roze:      #d3509a;
    --roze-diep: #b13a7f;   /* donkerder roze, voor kleine tekst op licht */
    --donker:    #2b3033;
    --taupe:     #6f6a5c;
    --lijn:      #ddd6ca;
    --kaart:     rgba(255, 255, 255, 0.78);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    color: var(--donker);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* Foto als vaste achtergrond. Een apart element in plaats van
     background-attachment: fixed, want dat hapert op iOS. */
  .achtergrond {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.88) 0%,
                      rgba(255, 255, 255, 0.46) 22%,
                      rgba(255, 255, 255, 0.26) 45%,
                      rgba(255, 255, 255, 0.70) 100%),
      url("sfeer.jpg");
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.25rem 3rem;
  }

  .wrap {
    width: 100%;
    max-width: 42rem;
    text-align: center;
  }

  .logo {
    width: min(11rem, 45vw);
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    /* Meerdere schaduwen op elkaar: het logo staat over de kop van de hond,
       en één grote vervaging verdwijnt daar in de achtergrond. */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
            drop-shadow(0 0 14px rgba(255, 255, 255, 1))
            drop-shadow(0 0 26px rgba(255, 255, 255, 0.98))
            drop-shadow(0 0 48px rgba(255, 255, 255, 0.9));
  }

  /* Kleiner logo onderaan, als afsluiting. */
  .logo-klein {
    width: 3.5rem;
    height: auto;
    margin: 0 auto 0.75rem;
    display: block;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95))
            drop-shadow(0 0 28px rgba(255, 255, 255, 0.8));
  }

  /* Het logo linkt naar de hoofdsite. Een zichtbare rand bij toetsenbordgebruik,
     zodat duidelijk is dat het aanklikbaar is. */
  .logo-link:focus-visible {
    outline: 2px solid var(--roze);
    outline-offset: 6px;
    border-radius: 0.4rem;
  }

  h1 {
    font-family: "Bradley Hand", "Krijt", cursive;
    font-weight: 400;
    color: var(--roze);
    font-size: clamp(2.4rem, 9vw, 4rem);
    line-height: 1.05;
    margin: 0 0 0.75rem;
  }

  .datum {
    font-family: "Bradley Hand", "Krijt", cursive;
    color: var(--donker);
    font-size: clamp(1.4rem, 5vw, 2rem);
    margin: 0 0 4.75rem;
  }

  /* Architects Daughter bestaat maar in een dikte. De lijnen zelf iets dikker
     trekken geeft een gelijkmatiger resultaat dan de browser laten verdikken,
     en ziet er op elk apparaat hetzelfde uit. */
  h1, .datum, .unit .value, .tot-dan, .geopend h2 {
    -webkit-text-stroke: 0.038em currentColor;
  }

  /* Zachte witte gloed, zodat tekst leesbaar blijft waar de foto donker is. */
  h1, .datum, .tot-dan {
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.95),
                 0 0 34px rgba(255, 255, 255, 0.85);
  }

  .datum {
    text-shadow: 0 0 4px #fff, 0 0 9px #fff, 0 0 16px #fff,
                 0 0 26px rgba(255, 255, 255, 0.92),
                 0 0 44px rgba(255, 255, 255, 0.8);
  }

  .countdown-label, .opent-op {
    text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #fff,
                 0 0 12px #fff, 0 0 18px #fff,
                 0 0 28px rgba(255, 255, 255, 0.95),
                 0 0 44px rgba(255, 255, 255, 0.85);
    /* Comic Sans heeft wel een vette variant, maar die scheelt te weinig.
       De lijnen zelf verdikken werkt hier beter, net als bij de koppen. */
    -webkit-text-stroke: 0.022em currentColor;
  }

  /* ---- teller ---- */

  .countdown-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--donker);
    margin-bottom: 1rem;
  }

  .countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    max-width: 28rem;
    margin: 0 auto;
  }

  .unit {
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 0.7rem;
    padding: 0.9rem 0.3rem 0.7rem;
  }

  .unit .value {
    display: block;
    font-family: "Bradley Hand", "Krijt", cursive;
    font-size: clamp(1.7rem, 7vw, 2.6rem);
    line-height: 1;
    color: var(--roze);
  }

  .unit .naam {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--taupe);
  }

  .opent-op {
    font-family: "Comic Sans MS", "Comic", cursive;
    font-weight: 700;
    margin-top: 1.1rem;
    color: var(--donker);
    font-size: 1rem;
  }

  /* ---- geopende staat ---- */

  .geopend { display: none; }
  body.is-open .teller-blok { display: none; }
  body.is-open .geopend { display: block; }

  .geopend h2 {
    font-family: "Bradley Hand", "Krijt", cursive;
    font-weight: 400;
    color: var(--roze);
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    margin: 0 0 1.5rem;
  }

  .knop {
    display: inline-block;
    background: var(--roze);
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.9rem 2.4rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
  }

  .knop:hover, .knop:focus-visible { background: var(--roze-diep); }
  .knop:focus-visible { outline: 2px solid var(--roze-diep); outline-offset: 3px; }

  /* ---- leesgedeelte onder de teller ----
     Zelfde schreefletter als de editiepagina's, zodat langere tekst prettig
     leest. De sfeer erboven blijft ongemoeid. */

  @font-face {
    font-family: "Serif";
    src: url("fonts/serif-recht.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Serif";
    src: url("fonts/serif-cursief.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
  }

  .leesdeel {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--lijn);
    border-radius: 0.9rem;
    padding: 2rem 2rem 1.5rem;
    margin-top: 1.5rem;
    text-align: left;
    font-family: "Serif", Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.84);
  }

  .leesdeel section + section { margin-top: 2.5rem; }

  .leesdeel h2 {
    font-family: "Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--donker);
    margin: 0 0 0.8rem;
  }

  .leesdeel p { margin: 0 0 1rem; }
  .leesdeel p:last-child { margin-bottom: 0; }
  .leesdeel a { color: var(--roze-diep); }

  /* Nog te schrijven. Valt bewust op, zodat het niet ongemerkt online blijft. */
  .leesdeel .nog-schrijven {
    border-left: 3px solid var(--roze);
    background: rgba(211, 80, 154, 0.06);
    padding: 0.9rem 1.2rem;
    color: rgba(0, 0, 0, 0.55);
    font-style: italic;
  }

  .films { display: grid; gap: 1.25rem; margin: 1.25rem 0; }
  .films video { width: 100%; height: auto; display: block; border-radius: 0.5rem; }

  .film-plek {
    border: 2px dashed rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.03);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    text-align: center;
    padding: 1rem;
    border-radius: 0.5rem;
  }

  /* Staand gefilmd, dus drie naast elkaar past beter dan twee met een gat. */
  @media (min-width: 34rem) {
    .films { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  }

  /* ---- gegevens ---- */

  .gegevens {
    margin-top: 3.25rem;
    background: var(--kaart);
    border: 1px solid var(--lijn);
    border-radius: 0.9rem;
    padding: 1.75rem 1.75rem 1.5rem;
    text-align: left;
  }

  dl {
    margin: 0;
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.85rem 1.25rem;
  }

  dt {
    color: #5a564b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 0.2rem;
  }

  dd {
    margin: 0;
    line-height: 1.5;
    font-family: "Comic Sans MS", "Comic", cursive;
    font-size: 1.05rem;
  }
  dd a { color: var(--roze-diep); }

  /* Verwijzing naar de 2027-pagina. Bewust geen knop: die plek is straks voor de
     inschrijflink, en twee knoppen onder elkaar vechten om dezelfde aandacht.
     Wel de gegevensletter, zodat het bij het blok erboven hoort. */
  .meer-weten {
    font-family: "Bradley Hand", "Krijt", cursive;
    font-size: 1.25rem;
    /* Zelfde afstand als boven het gegevensblok, zodat het er los van staat. */
    margin: 3.25rem 0 0;
  }

  /* Een gloed om de letters bleef dun tegen de vlekkerige foto. Daarom een
     echte lichte ondergrond, hetzelfde pilletje als in de balk bovenaan. */
  .meer-weten a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--lijn);
    border-radius: 2rem;
    padding: 0.55rem 1.5rem;
    color: var(--donker);
    /* Onderstreept, zodat meteen te zien is dat het een link is en niet
       zomaar een tekstblokje. */
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    transition: background 0.15s ease;
  }

  /* Zelfde reactie als de jaartallen bovenaan: bij aanwijzen wordt de tekst roze. */
  .meer-weten a:hover, .meer-weten a:focus-visible {
    background: #fff;
    color: var(--roze-diep);
  }

  .tot-dan {
    font-family: "Bradley Hand", "Krijt", cursive;
    color: var(--roze);
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin: 2.5rem 0 0;
  }

  footer {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    text-align: center;
  }

  footer a { color: var(--taupe); text-decoration: none; }
  footer a:hover, footer a:focus-visible { color: var(--roze); }

  @media (max-width: 30rem) {
    dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
    dd { margin-bottom: 0.9rem; }
    .gegevens { padding: 1.5rem 1.25rem 1rem; }
  }

/* ---- menubalk bovenaan ---- */

.menubalk {
  width: 100%;
  max-width: 62.5rem;   /* zelfde breedte als op de editiepagina's */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 0 auto 2rem;
}

.menubalk .merk img {
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.85));
}

.nav {
  margin: 0;
  font-size: 1.15rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav .knopje {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--lijn);
  border-radius: 2rem;
  padding: 0.35rem 1.1rem;
  border-bottom-width: 1px;
}

.nav .knopje:hover { background: #fff; }

@media (max-width: 34rem) {
  .menubalk { justify-content: flex-start; gap: 1rem; }
  .nav { gap: 1.1rem; font-size: 0.9rem; }
}

.nav a {
  color: var(--donker);
  text-decoration: none;
  border-bottom: 2px solid rgba(111, 106, 92, 0.45);
  padding-bottom: 2px;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 12px #fff,
               0 0 22px rgba(255, 255, 255, 0.85);
}

.nav a:hover, .nav a:focus-visible { color: var(--roze-diep); }
/* De pagina waar je nu bent licht op; de andere is een gewone link. */
.nav a[aria-current="page"],
.nav .nu {
  color: var(--roze);
  border-bottom: 2px solid var(--roze);
  padding-bottom: 2px;
  font-weight: 600;
}

/* ---- editiepagina's ---- */

.blok {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
  text-align: left;
}

.blok h2 {
  font-family: "Bradley Hand", "Krijt", cursive;
  font-weight: 400;
  color: var(--roze);
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin: 0 0 1rem;
}

.blok p { margin: 0 0 1rem; line-height: 1.6; }
.blok p:last-child { margin-bottom: 0; }
.blok a { color: var(--roze-diep); }

/* Uitslagen. Geleider en hond staan onder elkaar in één kolom, anders wordt
   de tabel op een telefoon te breed voor de lange kennelnamen. */
.klasse { margin-top: 1.75rem; }
.klasse:first-of-type { margin-top: 0.5rem; }

.klasse h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5a564b;
  margin: 0 0 0.6rem;
}

table.uitslag {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.uitslag th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
  font-weight: 600;
  padding: 0 0.4rem 0.4rem 0;
  border-bottom: 1px solid var(--lijn);
}

table.uitslag td {
  padding: 0.55rem 0.4rem 0.55rem 0;
  border-bottom: 1px solid rgba(221, 214, 202, 0.6);
  vertical-align: top;
}

table.uitslag tr:last-child td { border-bottom: none; }
table.uitslag .plaats { width: 2.2rem; color: var(--roze); font-weight: 700; }
table.uitslag .hond { display: block; color: var(--taupe); font-size: 0.85rem; }
table.uitslag .punten, table.uitslag .diploma { text-align: right; white-space: nowrap; }
table.uitslag .diploma { width: 3.5rem; color: var(--roze-diep); font-weight: 600; }

.downloads { margin-top: 1.25rem; font-size: 0.9rem; }
.downloads a { display: inline-block; margin-right: 1.25rem; }

/* ---- overzicht van edities ---- */

.editie-kaart {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 0.9rem;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  text-align: left;
  transition: border-color 0.15s ease;
}

.editie-kaart:hover, .editie-kaart:focus-visible { border-color: var(--roze); }

.editie-kaart .jaar {
  font-family: "Bradley Hand", "Krijt", cursive;
  color: var(--roze);
  font-size: 1.6rem;
  display: block;
}

.editie-kaart .waar { color: var(--donker); }
.editie-kaart .cijfers { display: block; margin-top: 0.35rem; color: var(--taupe); font-size: 0.9rem; }

@media (max-width: 30rem) {
  .blok { padding: 1.25rem 1.1rem; }
}