@import url("../styles.css");

/* ============================================================
   islam.css - 2 oktober 2026
   Aanvulling op styles.css voor dick.wursten.be/islam.
   Nieuw bestand; vervangt de stylesheets van het WordPress-thema
   Twenty Sixteen (wp-content/themes/twentysixteen).

   Alleen wat de gedeelde huisstijl niet heeft:
   het ingesprongen blok, de voetnoten, de uitlijning van
   afbeeldingen en het versnummer.
   5e versie, 3 oktober: navigatie in gewone letters, geen kapitalen.
   4e versie: sitekop (naam en ondertitel van de site).
   3e versie: citaten met streep en tint.
   2e versie: .aligncenter/.alignleft/.alignright, .versNum.
   ============================================================ */

/* Naam van de site boven de navigatie, zoals in WordPress:
       <header class="sitekop">
         <p class="sitenaam"><a href="index.html">De islam</a></p>
         <p class="siteondertitel">Basisinformatie over de islam</p>
       </header> */
.sitekop { margin: 0.5rem 0 1.25rem; }

.sitenaam {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.sitenaam a,
.sitenaam a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.siteondertitel {
  margin: 0.2rem 0 0;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* Hoofdnavigatie: gewone letters, zoals in WordPress.
   styles.css zet de navigatie in kleine kapitalen met spatiering;
   dat wordt hier teruggezet. nav.inhoud (de inhoudsopgave binnen
   een pagina) regelt zichzelf en blijft buiten schot. */
nav:not(.inhoud) {
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
}

nav:not(.inhoud) a { color: var(--color-text); }

/* Citaten (koran, hadith, bijbel).

   styles.css laat een <blockquote> alleen inspringen; dat leek hier
   te veel op gewone tekst. In /islam krijgt elk citaat daarom een
   indigo streep links, een lichte tint, een iets kleinere letter en
   meer lucht erboven en eronder. De tekst blijft RECHTOP, zodat
   cursief binnen een citaat nadruk blijft.

   .inspring is de ingesprongen alinea uit WordPress (padding-left:
   40px); die werd voor hetzelfde doel gebruikt en ziet er dus
   hetzelfde uit. */
blockquote,
.inspring {
  max-width: 38rem;
  margin: 1.6rem 0 1.6rem 1.2rem;
  padding: 0.7rem 1.2rem;
  border-left: 3px solid var(--color-accent);
  background: #f4f1ea;
  font-size: 0.95em;
  line-height: 1.55;
}

blockquote p { margin: 0 0 0.6rem; }
blockquote p:last-child { margin-bottom: 0; }

/* twee ingesprongen alinea's na elkaar vormen een blok */
.inspring + .inspring { margin-top: -1.6rem; padding-top: 0; }

/* Vindplaats onder een citaat: <cite>Soera 44:45</cite> */
blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--color-muted);
}

@media (max-width: 600px) {
  blockquote, .inspring { margin-left: 0; }
}

@media print {
  blockquote, .inspring { background: none; }
}

/* Nootcijfer in de tekst: geen streep eronder, regelhoogte blijft gelijk */
sup { line-height: 0; }

sup a {
  text-decoration: none;
  padding: 0 0.1em;
}

/* Voetnoten onderaan de pagina */
.voetnoten {
  max-width: var(--max-width);
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.voetnoten li { margin: 0 0 0.5rem; }

/* Wie op een nootcijfer klikt ziet welke noot bedoeld is, en omgekeerd */
.voetnoten li:target,
sup a:target {
  background: #fff3c4;
}

/* Lijst met alle pagina's (inhoud.html) */
.container > ul ul { margin-top: 0.2rem; margin-bottom: 0.4rem; }

/* Afbeeldingen: de uitlijnklassen van WordPress blijven in gebruik */
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.aligncenter img { margin: 0 auto; }

.alignleft  { float: left;  margin: 0.3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: 0.3rem 0 1rem 1.5rem; }

/* een kop begint nooit naast een zwevende afbeelding */
h1, h2, h3, h4 { clear: both; }

@media (max-width: 600px) {
  .alignleft, .alignright { float: none; margin: 1rem 0; }
}

/* Versnummer in een overgenomen bijbeltekst */
.versNum {
  font-family: var(--font-ui);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  color: var(--color-muted);
  margin-right: 0.15em;
}