/*
Theme Name: Hondenopvang
Description: Thema voor Stichting Hondenopvang. Elke hond heeft een eigen
  dagboekpagina, geordend per jaar. Overgenomen uit de oude Joomla-site;
  de dagboekopmaak (datumkop, tekst, twee foto's naast elkaar) is bewust
  onveranderd gehouden.
Version: 1.0
*/

:root {
  --zand:        #FAF6EF;
  --zand-diep:   #F0E8DA;
  --inkt:        #2B2520;
  --inkt-zacht:  #6B6158;
  --groen:       #4A6B4F;
  --groen-diep:  #35503A;
  --oker:        #C8893A;
  --lijn:        #E0D6C6;
  --kader:       980px;
  --tekst:       760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zand);
  color: var(--inkt);
  font: 17px/1.7 Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--kader); margin: 0 auto; padding: 0 20px; }

a { color: var(--groen-diep); }
a:hover { color: var(--oker); }

/* ---------- kop ---------- */

.sitekop {
  background: var(--groen-diep);
  color: #fff;
  border-bottom: 5px solid var(--oker);
}
.sitekop .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 20px; }
.sitenaam {
  font-size: 25px; font-weight: normal; letter-spacing: .01em;
  margin: 0; line-height: 1.2;
}
.sitenaam a { color: #fff; text-decoration: none; }
.leus { margin: 0; font-size: 14px; color: #CFE0D2; font-style: italic; flex: 1 1 auto; }

.hoofdmenu { display: flex; flex-wrap: wrap; gap: 4px 2px; background: var(--groen); }
.hoofdmenu .wrap { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 20px; width: 100%; }
.hoofdmenu a {
  display: block; padding: 11px 15px; color: #EAF2EB; text-decoration: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
}
.hoofdmenu a:hover, .hoofdmenu a[aria-current] { background: var(--groen-diep); color: #fff; }

/* ---------- inhoud ---------- */

main { padding: 34px 0 56px; }

h1.paginakop {
  font-size: 34px; line-height: 1.2; font-weight: normal;
  margin: 0 0 6px; color: var(--groen-diep);
}
.onderkop { margin: 0 0 26px; color: var(--inkt-zacht); font-size: 15px; font-style: italic; }

.inhoud { max-width: var(--tekst); }
.inhoud img { max-width: 100%; height: auto; border-radius: 3px; }
.inhoud h2, .inhoud h3 { color: var(--groen-diep); font-weight: normal; line-height: 1.25; }

/* Verborgen voor het oog, wel te lezen door een schermlezer. */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* De oude site had koppen met een vaste blauwe kleur in de tekst zelf.
   Die kleur kan alleen met !important worden overruled, omdat het een
   style-attribuut is. De tekst blijft ongewijzigd; alleen de kleur volgt
   nu het thema. */
.inhoud h2 span[style], .inhoud h3 span[style],
.inhoud h4 span[style], .inhoud h5 span[style] { color: inherit !important; }

/* ---------- dagboek ---------- */

.dagboek { max-width: var(--tekst); }

.dag {
  border-top: 1px solid var(--lijn);
  padding: 22px 0 10px;
}
.dag:first-child { border-top: none; padding-top: 4px; }

.dag > h4 {
  margin: 0 0 14px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--oker); text-align: left !important;
}
.dag p { margin: 0 0 12px; }

/* De foto's stonden in Joomla twee aan twee naast elkaar, 420 breed.
   Met de halve kolombreedte blijven die paren bij elke schermbreedte
   naast elkaar staan; op een telefoon gaan ze onder elkaar. */
.dag img {
  max-width: calc(50% - 7px);
  height: auto;
  vertical-align: top;
  margin: 2px 0;
  border-radius: 3px;
  background: var(--zand-diep);
}

/* Marianne zette haar onderschriften met lange reeksen vaste spaties onder
   de foto's. Die reeksen zijn bij de import vervangen door dit element, dat
   meeschaalt in plaats van de regel uit te duwen. */
.kgap { display: inline-block; min-width: 2.2em; }

.dag hr { display: none; }

/* ---------- lijsten van honden ---------- */

.jaarblok { margin: 0 0 34px; }
.jaarkop {
  font-size: 15px; font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: var(--inkt-zacht);
  margin: 0 0 12px; padding-bottom: 7px; border-bottom: 2px solid var(--lijn);
}
.hondenrij { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.hondkaart {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--lijn); border-radius: 5px; overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.hondkaart:hover { border-color: var(--oker); transform: translateY(-2px); }
.hondkaart .plaatje { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--zand-diep); }
.hondkaart .naam {
  display: block; padding: 10px 12px 11px; color: var(--groen-diep);
  font-size: 18px; line-height: 1.25;
}
.hondkaart .aantal { display: block; font-size: 13px; color: var(--inkt-zacht); font-family: system-ui, sans-serif; }

/* ---------- voet ---------- */

.sitevoet {
  background: var(--groen-diep); color: #CFE0D2;
  padding: 26px 0 32px; font-size: 14px;
  font-family: system-ui, -apple-system, sans-serif;
}
.sitevoet a { color: #fff; }
.sitevoet p { margin: 0 0 6px; }

.voorbeeldbalk {
  background: var(--oker); color: #2B2520; text-align: center;
  padding: 7px 16px; font: 13px/1.4 system-ui, -apple-system, sans-serif;
}

@media (max-width: 620px) {
  .dag img { max-width: 100%; }
  .kgap { display: block; height: .1em; min-width: 0; }
  h1.paginakop { font-size: 27px; }
  .sitenaam { font-size: 21px; }
}