/* ==========================================================
   Canonieke parenteel-opmaak
   Gebaseerd op de werkende Parenteel Stoffelen.
   Alleen gebruiken op <body class="parenteel-page">.
   ========================================================== */

.parenteel-page .parenteel-hero{
  padding:56px 0 32px;
  background:linear-gradient(135deg,#edf2e8,#faf6ec)
}
.parenteel-page .parenteel-hero h1{
  font-size:clamp(2rem,5vw,3.5rem);
  color:#263a33;
  margin:.3em 0
}
.parenteel-page .parenteel-hero .intro{
  max-width:820px;
  font-size:1.15rem;
  line-height:1.8
}
.parenteel-page .parenteel-meta{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin:1.5rem 0
}
.parenteel-page .parenteel-meta span{
  padding:.45rem .8rem;
  border:1px solid #ced8c9;
  border-radius:30px;
  font-size:.9rem
}
.parenteel-page .parenteel-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin:1.4rem 0
}
.parenteel-page .parenteel-actions a{
  padding:.75rem 1rem;
  border:1px solid #677d67;
  border-radius:5px;
  color:#263a33;
  background:#fff;
  text-decoration:none;
  font-weight:700
}

.parenteel-page .parenteel-body{
  padding:32px 0 70px;
  background:#faf8f2
}
.parenteel-page .parenteel-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:36px;
  align-items:start
}
.parenteel-page .parenteel-nav{
  position:sticky;
  top:24px;
  padding:20px;
  background:#eff3eb;
  border:1px solid #d7dfd0;
  border-radius:8px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  overflow:hidden
}
.parenteel-page .parenteel-nav strong{
  display:block!important;
  float:none!important;
  position:static!important;
  width:100%!important;
  box-sizing:border-box;
  margin:0 0 12px!important;
  white-space:normal!important
}
.parenteel-page .parenteel-nav a{
  display:block!important;
  float:none!important;
  position:static!important;
  width:100%!important;
  box-sizing:border-box;
  padding:.45rem 0!important;
  color:#263a33;
  white-space:normal!important;
  overflow-wrap:anywhere
}

.parenteel-page .parenteel-reading{
  padding:22px 26px;
  background:#f3ecdb;
  border-left:4px solid #9a7040;
  margin-bottom:24px;
  line-height:1.8
}
.parenteel-page .parenteel-reading p:last-child{margin-bottom:0}

.parenteel-page .parenteel-search{
  padding:20px;
  border:1px solid #d7dfd0;
  background:#fff;
  border-radius:8px;
  margin-bottom:26px
}
.parenteel-page .parenteel-search label{
  display:block;
  font-weight:700;
  margin-bottom:8px
}
.parenteel-page .parenteel-search input{
  box-sizing:border-box;
  width:100%;
  padding:12px;
  border:1px solid #a6b3a0;
  border-radius:4px;
  font:inherit
}
.parenteel-page .parenteel-search button{
  font:inherit;
  padding:7px 12px;
  border:1px solid #a6b3a0;
  background:#eff3eb;
  border-radius:4px;
  margin-top:10px;
  cursor:pointer
}
.parenteel-page .parenteel-search p{
  margin:.5rem 0 0;
  font-size:.9rem;
  color:#566359
}

.parenteel-page .generation{
  scroll-margin-top:30px;
  margin-bottom:42px
}
.parenteel-page .generation>h2{
  font-size:1.8rem;
  color:#263a33;
  border-bottom:2px solid #b6c7ac;
  padding-bottom:12px
}
.parenteel-page .family-card{
  background:#fff;
  border:1px solid #dbe1d5;
  border-radius:9px;
  padding:25px 28px;
  margin:20px 0;
  scroll-margin-top:30px;
  box-shadow:0 3px 14px #263a3306
}
.parenteel-page .family-card:target{
  outline:3px solid #b59a65;
  outline-offset:3px
}
.parenteel-page .family-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  margin-bottom:9px
}
.parenteel-page .family-code{
  font-weight:700;
  color:#456045;
  background:#edf4e7;
  padding:.3rem .65rem;
  border-radius:4px
}
.parenteel-page .family-top a,
.parenteel-page .source-ref{
  font-size:.85rem;
  color:#66705e;
  text-align:right
}
.parenteel-page .family-card h3{
  font-size:1.4rem;
  color:#263a33;
  line-height:1.4;
  margin:.5rem 0 1rem;
  overflow-wrap:anywhere
}
.parenteel-page .family-card p{
  line-height:1.8;
  margin:0 0 .9rem;
  overflow-wrap:anywhere
}
.parenteel-page .child-entry{
  padding-top:12px;
  border-top:1px solid #e9ede4;
  margin-top:16px!important
}
.parenteel-page .follow{
  display:inline-block;
  font-size:.85rem;
  margin-left:.5rem;
  color:#536d40
}
.parenteel-page .source-paragraph{white-space:normal}
.parenteel-page .family-note{
  background:#fff5dc;
  padding:12px 15px;
  border-left:3px solid #b38b46;
  font-size:.94rem;
  line-height:1.65;
  margin:15px 0
}
.parenteel-page .family-note.strong{
  background:#edf4e7;
  border-left-color:#668255
}
.parenteel-page .family-note.uncertain{
  background:#f6f1e7;
  border-left-color:#9a7040
}
.parenteel-page .parenteel-small{
  font-size:.9rem;
  color:#64705f
}
.parenteel-page .privacy-note{
  padding:22px 26px;
  border-left:4px solid #6b7f94;
  background:#eef4f7;
  line-height:1.75
}
.parenteel-page .family-card[hidden],
.parenteel-page .generation[hidden]{
  display:none!important
}

@media(max-width:800px){
  .parenteel-page .parenteel-layout{
    grid-template-columns:1fr;
    gap:20px
  }
  .parenteel-page .parenteel-nav{
    position:static;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.25rem 1rem!important;
    overflow:visible
  }
  .parenteel-page .parenteel-nav strong{
    grid-column:1/-1;
    width:100%!important;
    margin:0 0 6px!important
  }
  .parenteel-page .parenteel-nav a{
    font-size:.9rem;
    padding:.35rem 0!important
  }
  .parenteel-page .family-card{padding:20px}
  .parenteel-page .parenteel-reading{padding:18px}
  .parenteel-page .parenteel-hero{padding-top:32px}
}
@media(max-width:520px){
  .parenteel-page .parenteel-nav{
    grid-template-columns:1fr!important
  }
}
@media print{
  .parenteel-page #site-header,
  .parenteel-page #site-footer,
  .parenteel-page .parenteel-nav,
  .parenteel-page .parenteel-search,
  .parenteel-page .parenteel-actions,
  .parenteel-page .family-top a{
    display:none
  }
  .parenteel-page .parenteel-layout{display:block}
  .parenteel-page .family-card{
    box-shadow:none;
    break-inside:auto
  }
  .parenteel-page .parenteel-body{background:white}
  .parenteel-page .generation[hidden],
  .parenteel-page .family-card[hidden]{
    display:block!important
  }
}