/*
Theme Name: Noorderhart
Theme URI: https://www.noorderhart.nl
Description: Child theme van Twenty Twenty-Five voor praktijk Noorderhart — voetreflexologie en energiewerk. Kleuren afgeleid van het logo, Cormorant Garamond over Lora.
Author: Noorderhart
Template: twentytwentyfive
Version: 1.0
Text Domain: noorderhart
*/

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --nh-bg:#fdfbfa;
  --nh-surface:#f4eef0;
  --nh-text:#201f1d;
  --nh-accent:#bd5f89;
  --nh-accent-100:#fdeef4;
  --nh-accent-300:#efbcd2;
  --nh-accent-400:#e29fbe;
  --nh-accent-700:#8f3f65;
  --nh-divider:rgba(32,31,29,.16);
  --nh-radius:7px;
}

/* ── Basis ────────────────────────────────────────────────────────────── */
body{background:var(--nh-bg); color:var(--nh-text)}
a{color:var(--nh-accent); text-underline-offset:3px}
a:hover{color:var(--nh-accent-700)}
:focus-visible{outline:2px solid var(--nh-accent); outline-offset:2px}
::selection{background:rgba(189,95,137,.3)}

h1,h2,h3,h4,h5,h6{font-weight:400; line-height:1.12; letter-spacing:-.015em}

/* ── Kicker (bovenkopje in accentkleur) ───────────────────────────────── */
.nh-kicker{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--nh-accent-700); margin-bottom:1.2rem;
}

/* ── Knoppen: omlijnd, nooit gevuld ───────────────────────────────────── */
.wp-block-button__link,
.wp-element-button{
  background:transparent; color:var(--nh-accent);
  border:1px solid var(--nh-accent); border-radius:4px;
  padding:.8em 1.4em; font-family:"Cormorant Garamond",serif; font-size:1rem;
}
.wp-block-button__link:hover,
.wp-element-button:hover{background:rgba(189,95,137,.12); color:var(--nh-accent-700)}
.wp-block-button.is-style-outline-neutral .wp-block-button__link{
  color:var(--nh-text); border-color:var(--nh-divider);
}
.wp-block-button.is-style-outline-neutral .wp-block-button__link:hover{background:rgba(32,31,29,.07)}

/* ── Secties met zacht roze grond ─────────────────────────────────────── */
.nh-tint{background:var(--nh-accent-100)}
.nh-rules{border-top:1px solid var(--nh-divider); border-bottom:1px solid var(--nh-divider)}
/* Scheidingslijntjes tussen de drie kolommen van de praktische strook */
.nh-rules .wp-block-column + .wp-block-column{
  border-left:1px solid var(--nh-divider); padding-left:3rem;
}
@media (max-width:781px){
  .nh-rules .wp-block-column + .wp-block-column{
    border-left:0; padding-left:0;
    border-top:1px solid var(--nh-divider); padding-top:2rem;
  }
}

/* ── Hero met foto en tekst-overlay ───────────────────────────────────── */
.nh-hero{position:relative; border-radius:var(--nh-radius); overflow:hidden}
.nh-hero img{width:100%; height:600px; object-fit:cover; object-position:center 62%; display:block}
.nh-hero .nh-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(253,247,250,.96) 0%, rgba(253,247,250,.88) 38%, rgba(253,247,250,0) 74%);
}
.nh-hero .nh-hero-body{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:0 8% 0 7%; max-width:62%;
}
@media (max-width:781px){
  .nh-hero img{height:420px}
  .nh-hero .nh-hero-body{position:static; max-width:none; padding:1.5rem 0 0}
  .nh-hero .nh-hero-veil{display:none}
}

/* ── Kaarten: omlijnd, niet gevuld ────────────────────────────────────── */
.nh-card{
  border:1px solid var(--nh-divider); border-radius:4px; padding:1.7rem 1.6rem;
  background:var(--nh-bg);
}
.nh-card.nh-card-top{border-top:2px solid var(--nh-accent-400)}
.nh-card.nh-card-tint{background:var(--nh-accent-100); border-color:var(--nh-accent-300)}
.nh-card .nh-meta{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--nh-accent-700)}
.nh-card h3{margin:.4rem 0 .6rem}

/* ── Citaten ──────────────────────────────────────────────────────────── */
.nh-quote{margin:0 0 2.2rem; padding:0 1.6rem; border-left:1px solid var(--nh-accent-400)}
.nh-quote p{font-family:"Cormorant Garamond",serif; font-size:1.32rem; line-height:1.5; margin:0 0 .8rem}
.nh-quote cite{font-style:normal; font-size:.82rem; color:var(--nh-accent-700)}
.nh-stars{color:var(--nh-accent); letter-spacing:.2em; font-size:.9rem}

/* ── Reviewkaarten (pagina Ervaringen) ─────────────────────────── */
.nh-review{
  border:1px solid var(--nh-divider); border-radius:4px;
  padding:1.9rem 1.75rem; background:var(--nh-bg);
}
.nh-review p{margin:0 0 .85rem}
.nh-review .nh-stars{margin-bottom:.7rem}
.nh-review .nh-lead{
  font-family:"Cormorant Garamond",serif; font-size:1.32rem; line-height:1.5;
}
.nh-review .nh-cite{font-size:.78rem; color:rgba(32,31,29,.58); margin-bottom:0}
.nh-review-lead{
  background:var(--nh-accent-100); border-color:var(--nh-accent-300);
  border-radius:7px; padding:2.5rem 2.6rem;
}
.nh-review-lead .nh-lead{font-size:1.62rem}
.nh-review-lead .nh-cite{color:var(--nh-accent-700)}
.nh-review-wide{background:var(--nh-accent-100); border-color:var(--nh-accent-300)}
.nh-review-wide .nh-lead{font-size:1.42rem}
.nh-review-wide .nh-cite{color:var(--nh-accent-700)}
/* de kolommen zelf zijn de kaarten: geen extra tussenruimte binnenin */
.wp-block-column.nh-review{align-self:stretch}

/* ── Foto's als ingeplakte plaat ──────────────────────────────────────── */
.nh-plate img{
  border:6px solid var(--nh-surface); outline:1px solid var(--nh-divider);
  filter:saturate(.94) contrast(1.02);
}
.nh-round img{border-radius:50%}

/* ── Tabellen ─────────────────────────────────────────────────────────── */
.nh-table table{width:100%; border-collapse:collapse; font-size:1rem}
.nh-table th{
  text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(32,31,29,.6); padding:.6rem; border-bottom:1px solid var(--nh-divider); font-weight:400;
}
.nh-table td{padding:.6rem; border-bottom:1px solid var(--nh-divider)}
.nh-table .nh-num{text-align:right; font-variant-numeric:tabular-nums}

/* ── Lijst met streepjes in accentkleur ───────────────────────────────── */
.nh-dashes{list-style:none; padding:0; margin:0}
.nh-dashes li{display:grid; grid-template-columns:1rem 1fr; gap:.9rem; margin-bottom:.8rem}
.nh-dashes li::before{content:"—"; color:var(--nh-accent)}

/* ── Breedtes ─────────────────────────────────────────────────────────── */
/* De inhoudskolom krijgt de volle breedte; per blok bepalen wíí de maat.
   Bewust met !important, zodat een opgeslagen sitebreedte of WordPress' eigen
   layout-CSS er niet overheen gaat. */
body{--nh-wide:1240px; --nh-content:960px}
@media (max-width:1320px){body{--nh-wide:calc(100vw - 80px)}}
@media (max-width:1060px){body{--nh-content:calc(100vw - 80px)}}
@media (max-width:900px){body{--nh-wide:calc(100vw - 40px); --nh-content:calc(100vw - 40px)}}

.wp-site-blocks{--wp--style--root--padding-left:0; --wp--style--root--padding-right:0}

.wp-block-post-content,
.entry-content{max-width:none!important; width:100%!important; padding-left:0!important; padding-right:0!important}

.wp-block-post-content > *,
.entry-content > *{max-width:var(--nh-content)!important; margin-left:auto!important; margin-right:auto!important}
.wp-block-post-content > .alignwide,
.entry-content > .alignwide,
.wp-block-post-content > .wp-block-cover,
.entry-content > .wp-block-cover{max-width:var(--nh-wide)!important}
.wp-block-post-content > .alignfull,
.entry-content > .alignfull{max-width:none!important; width:100%!important}

/* Binnen een volle-breedte strook (roze grond) weer terug naar de brede maat */
.wp-block-group.alignfull > .wp-block-group__inner-container > *,
.wp-block-group.alignfull > *{max-width:var(--nh-wide); margin-left:auto; margin-right:auto}

/* ── Header ───────────────────────────────────────────────────────────── */
/* Paginatitel ("Home", "Contact" …) niet tonen: elke pagina heeft een eigen kop */
body.page .wp-block-post-title{display:none}
.nh-header{
  position:sticky; top:0; z-index:20;
  background:var(--nh-bg);
  border-bottom:1px solid var(--nh-divider);
}
.admin-bar .nh-header{top:32px}
.nh-header-inner{
  max-width:1240px; margin:0 auto; padding:14px 40px;
  gap:34px;
}
.nh-brand-link{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--nh-text);
}
.nh-brand-link:hover{color:var(--nh-text)}
.nh-brand-mark{width:76px; height:76px; display:block; flex:0 0 auto}
.nh-brand-text{display:flex; flex-direction:column; line-height:1.15}
.nh-brand-name{
  font-family:"Cormorant Garamond",serif; font-size:1.45rem;
  letter-spacing:.13em;
}
.nh-brand-sub{font-size:.68rem; letter-spacing:.09em; color:var(--nh-accent-700); margin-top:.2rem}
.nh-nav-wrap{gap:24px}
.nh-header .wp-block-navigation{font-size:.94rem}
.nh-header .wp-block-navigation a{color:var(--nh-text); text-decoration:none}
.nh-header .wp-block-navigation a:hover,
.nh-header .wp-block-navigation .current-menu-item a{color:var(--nh-accent-700)}
.nh-header-cta .wp-block-button__link{font-size:.94rem; padding:.5rem 1.1rem}
@media (max-width:781px){
  .nh-header-inner{padding:12px 20px; gap:16px}
  .nh-brand-sub{display:none}
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.wp-block-site-title{font-family:"Cormorant Garamond",serif; letter-spacing:.13em; text-transform:uppercase}
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item a{color:var(--nh-accent-700)}
.nh-footer{background:var(--nh-surface); font-size:.82rem; color:rgba(32,31,29,.66)}