/*
Theme Name: HappyHealthy New
Theme URI: https://happyhealthy.nl
Author: senhbv
Author URI: https://happyhealthy.nl
Description: Eigen, lichtgewicht thema voor HappyHealthy, code-first opgezet zonder page builder. Neemt de huisstijl van happyhealthy.nl over: paginabreedte, kleuren, logo, navigatie, header en footer.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happyhealthy-new
*/
:root{
--hh-container: 1200px;
--hh-gutter: 24px;
--hh-ink: #212529;
--hh-indigo: #1e3d30; /* koppen: sanofelice-groen (was blauw) */
--hh-font-body: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--hh-font-head: "Libre Baskerville", Georgia, "Times New Roman", serif;
--hh-mint: #38ae8e; /* knopkleur uit het app-design */
--hh-mint-dark: #2e8f73; /* donkerder voor hover */
--hh-cream: #fbf6ea; /* warme cream-bg uit het app-design */
--hh-amber: #ffba49;
--hh-forest: #1e3d30; /* bos-groen (keto-pagina) */
--hh-forest-2: #2d5a47;
--hh-green-tint: #eaf1ed;
--hh-forest-ink: #2c3e36;
--hh-gold: #e8b44d;
--hh-red: #ea1a45;
--hh-muted: #374151;
--hh-border: #eef0f2;
--hh-bg: #ffffff;
--hh-radius: 16px;
--hh-shadow: 2px 9px 23px 1px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
margin:0;
font-family:var(--hh-font-body);
font-size:16px;
line-height:1.5;
color:var(--hh-ink);
background:var(--hh-bg);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:var(--hh-mint-dark);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}
h1,h2,h3,h4,h5,h6{
font-family:var(--hh-font-head);
color:var(--hh-indigo);
font-weight:700;
line-height:1.25;
margin:0 0 .5em;
}
h1{font-size:2.25rem;}
h2{font-size:1.75rem;}
h3{font-size:1.35rem;}
p{margin:0 0 1.25em;}
.container{
width:100%;
max-width:var(--hh-container);
margin-inline:auto;
padding-inline:var(--hh-gutter);
}
/* Content-/archiefpagina's net zo breed als posts (850px), koppen links uitgelijnd */
.container.content-area{max-width:850px;}
.container.content-area.content-area--wide{max-width:960px;}
/* Losse berichten met zijbalk (ingestelde WordPress-widgets): 2-koloms. */
.container.content-area--has-sidebar{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start;}
.content-area--has-sidebar .site-main{min-width:0;}
.content-area--has-sidebar .entry,
.content-area--has-sidebar .comments-area,
.content-area--has-sidebar .related-posts{max-width:none;margin-inline:0;}
.article-sidebar{min-width:0;display:flex;flex-direction:column;gap:22px;}
.article-sidebar .widget{background:#fff;border:1px solid var(--hh-border);border-radius:14px;padding:20px;}
.article-sidebar .widget:empty{display:none;}
.article-sidebar .widget_title{margin:0 0 14px;font-family:var(--hh-font-head);font-weight:700;font-size:1.6rem;line-height:1.25;color:var(--hh-indigo);}
.article-sidebar .widget img{border-radius:10px;}
.article-sidebar .widget ul{list-style:none;margin:0;padding:0;}
.article-sidebar .widget a:not(.button){text-decoration:underline;}
/* Zijbalk-widgets (Custom HTML) beter leesbaar, ook voor oudere bezoekers.
Posttitels hebben geen eigen inline font-size (overschrijfbaar); de kleine
inline maten (13/14/11px) worden per exacte maat wat vergroot. */
.article-sidebar .widget .textwidget a > div:not([style*="font-size"]){font-size:1.2rem;line-height:1.35;}
.article-sidebar .widget .textwidget [style*="font-size:13px"]{font-size:.95rem !important;} /* Top artikelen: excerpt */
.article-sidebar .widget .textwidget [style*="font-size:14px"]{font-size:1.05rem !important;} /* Afslank video tips: titels */
.article-sidebar .widget .textwidget [style*="font-size:11px"]{font-size:.8rem !important;} /* Top artikelen: categorie-label */
/* Over HappyHealthy: functie-tekst zelfde kleur als de artikel-metatekst (--hh-muted) + iets strakkere regelafstand */
.article-sidebar .widget .textwidget [style*="color:#777"]{color:var(--hh-muted) !important;line-height:1.3 !important;}
.article-sidebar .widget p,.article-sidebar .widget li{color:var(--hh-ink);font-size:1.04rem;line-height:1.6;}
.article-sidebar .widget p{margin:0 0 14px;font-size:1.1rem;}
/* Codegebaseerde standaard-widgets */
.article-sidebar .button--full{display:block;width:100%;box-sizing:border-box;text-align:center;padding:12px 16px;font-size:.95rem;border-radius:12px;}
.widget-about{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.widget-about__photo{width:72px;height:72px;flex:none;border-radius:50%;object-fit:cover;}
.widget-about__name{display:block;font-family:var(--hh-font-head);font-weight:700;color:var(--hh-forest);}
.widget-about__role{display:block;font-size:.86rem;color:var(--hh-muted);line-height:1.4;margin-top:2px;}
.widget-posts{display:flex;flex-direction:column;gap:12px;}
.widget-post__link{display:flex;gap:11px;align-items:center;color:var(--hh-indigo);}
.widget-post__link:hover{text-decoration:none;color:var(--hh-mint-dark);}
.widget-post__media{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--hh-green-tint);}
.widget-post__media img{width:56px;height:56px;object-fit:cover;border-radius:10px;display:block;}
.widget-post__title{font-size:.9rem;font-weight:600;line-height:1.35;}
@media (max-width:900px){
.container.content-area--has-sidebar{display:block;max-width:850px;}
/* Zijbalk-widgets verbergen op mobiel/tablet (waar de zijbalk anders onder het
artikel zou stapelen). */
.article-sidebar{display:none;}
}
/* Buttons */
.button,.wp-block-button__link,input[type="submit"]{
display:inline-block;
background:var(--hh-mint);
color:#fff;
font-weight:700;
line-height:1;
padding:18px 34px;
border:0;
border-radius:var(--hh-radius);
cursor:pointer;
transition:background .15s ease, transform .15s ease;
}
.button:hover,.button:focus,.wp-block-button__link:hover,input[type="submit"]:hover{
background:var(--hh-mint-dark);
color:#fff;
text-decoration:none;
transform:translateY(-1px);
}
/* Accessibility */
.screen-reader-text{
position:absolute !important;
width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 20px;border-radius:0 0 10px 0;}
.skip-link:focus{left:8px;top:8px;}
/* Header */
.site-header{
background:#fff;
box-shadow:var(--hh-shadow);
position:sticky;top:0;z-index:50;
}
.site-branding{flex:0 0 auto;}
.site-branding img,.custom-logo{display:block;height:44px;width:auto;}
/* Hoofdbalk */
.main-bar{position:relative;}
.main-bar__inner{display:flex;align-items:center;gap:20px;min-height:80px;}
.keto-button{
display:inline-block;background:var(--hh-mint);color:#fff;font-weight:700;
padding:12px 26px;border-radius:999px;white-space:nowrap;transition:background .15s ease;
}
.keto-button:hover{background:var(--hh-mint-dark);color:#fff;text-decoration:none;}
/* Hoofdmenu */
.main-navigation{margin-left:auto;}
.primary-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px;align-items:center;}
.primary-menu a{color:var(--hh-indigo);font-weight:400;font-size:1.25rem;}
.primary-menu a:hover{color:var(--hh-mint-dark);text-decoration:none;}
.primary-menu .current-menu-item > a,.primary-menu .current_page_item > a{color:var(--hh-mint-dark);}
.primary-menu li{position:relative;}
.primary-menu .sub-menu,.primary-menu .children{
position:absolute;left:0;top:100%;min-width:220px;background:#fff;box-shadow:var(--hh-shadow);
border-radius:12px;list-style:none;margin:0;padding:10px 0;display:none;z-index:60;
}
.primary-menu li:hover > .sub-menu,.primary-menu li:focus-within > .sub-menu,.primary-menu li:hover > .children{display:block;}
.primary-menu .sub-menu a,.primary-menu .children a{display:block;padding:8px 18px;}
.menu-badge,.primary-menu .menu_counter{
display:inline-block;background:var(--hh-red);color:#fff;font-size:.72rem;font-weight:700;
min-width:20px;text-align:center;padding:1px 6px;border-radius:999px;margin-left:4px;line-height:1.4;vertical-align:middle;
}
/* Header-utils: zoekicoon + FR/DE + login */
.header-utils{display:flex;align-items:center;gap:18px;}
.header-utils--mobile{display:none;margin-left:auto;}
.header-utils--desktop{margin-left:auto;}
/* /new3/: utils direct naast het hoofdmenu (het menu duwt met margin-left:auto alles naar rechts) */
.header-utils--inline{margin-left:0;}
.header-search-toggle{background:transparent;border:0;color:var(--hh-indigo);cursor:pointer;padding:4px;line-height:0;display:flex;}
.header-search-toggle:hover{color:var(--hh-mint-dark);}
.lang-switch{display:flex;align-items:center;gap:8px;font-weight:700;}
.lang-switch a{color:var(--hh-amber);}
.lang-switch a:hover{text-decoration:underline;}
.lang-switch__sep{color:var(--hh-border);}
.member-link{display:flex;align-items:center;gap:7px;color:var(--hh-red);font-weight:600;white-space:nowrap;}
.member-link svg{color:var(--hh-indigo);}
.member-link:hover{text-decoration:underline;}
/* Social-tellers (footer) */
.social-counts{display:flex;align-items:center;gap:12px;}
.social-count{display:flex;flex-direction:column;align-items:center;gap:3px;}
.social-count__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--hh-mint);}
.social-count__num{font-size:.68rem;font-weight:700;color:var(--hh-mint-dark);border:1px solid var(--hh-mint);border-radius:999px;padding:0 7px;line-height:1.5;}
.social-count:hover{text-decoration:none;}
.footer-social{justify-content:center;margin:0 auto 18px;}
/* Thema-balk */
.theme-bar{border-top:1px solid var(--hh-border);background:#fff;}
.theme-bar__inner{display:flex;align-items:center;gap:24px;min-height:52px;}
.theme-bar__label{
display:flex;align-items:center;gap:8px;font-weight:600;color:var(--hh-mint-dark);
padding-right:24px;border-right:1px solid var(--hh-border);align-self:stretch;cursor:default;
}
.theme-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:26px;align-items:center;}
.theme-menu > li{position:relative;}
.theme-menu > li > a{color:var(--hh-mint-dark);font-weight:600;font-size:.98rem;display:inline-flex;align-items:center;gap:6px;}
.theme-menu > li.menu-item-has-children > a::after{
content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);margin-top:-3px;
}
.theme-menu a:hover{color:var(--hh-mint);text-decoration:none;}
.theme-menu .sub-menu{
position:absolute;top:100%;left:0;min-width:200px;background:#fff;box-shadow:var(--hh-shadow);
border-radius:12px;list-style:none;margin:0;padding:10px 0;display:none;z-index:60;
}
.theme-menu li:hover > .sub-menu{display:block;}
.theme-menu .sub-menu a{display:block;padding:8px 18px;color:var(--hh-indigo);}
/* Geneste submenu's (niveau 2+) naar rechts uitklappen i.p.v. onderaan */
.theme-menu .sub-menu li{position:relative;}
.theme-menu .sub-menu .sub-menu{top:0;left:100%;}
.theme-menu .sub-menu li.menu-item-has-children > a{
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.theme-menu .sub-menu li.menu-item-has-children > a::after{
content:"";flex:none;width:6px;height:6px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);
}
/* Uitklapbare zoekbalk (via zoekicoon) */
.header-search{border-top:1px solid var(--hh-border);background:#fff;padding:14px 0;}
.header-search .search-form{display:flex;gap:10px;max-width:640px;margin-inline:auto;}
.header-search .search-field{flex:1;border:1px solid var(--hh-border);border-radius:10px;padding:12px 16px;font:inherit;}
.header-search .search-field:focus{outline:none;border-color:var(--hh-mint);}
.header-search .search-submit{padding:12px 22px;}
/* Mobiele toggles */
.menu-toggle{display:none;background:transparent;border:0;cursor:pointer;align-items:center;gap:6px;color:var(--hh-indigo);font-weight:700;padding:8px;border-radius:10px;}
.menu-toggle--primary{width:42px;height:42px;position:relative;padding:0;flex:none;}
.menu-toggle--primary .menu-toggle__bar{position:absolute;top:50%;left:10px;right:10px;height:2px;border-radius:2px;background:var(--hh-indigo);transform:translateY(-50%);}
.menu-toggle--primary .menu-toggle__bar::before,
.menu-toggle--primary .menu-toggle__bar::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--hh-indigo);}
.menu-toggle--primary .menu-toggle__bar::before{top:-6px;}
.menu-toggle--primary .menu-toggle__bar::after{top:6px;}
.menu-toggle--themes{color:var(--hh-mint-dark);gap:7px;font-size:.95rem;}
.menu-toggle--themes svg{flex:none;}
.beginhier{display:none;background:var(--hh-mint);color:#fff;font-weight:700;padding:9px 18px;border-radius:999px;white-space:nowrap;font-size:.9rem;}
.beginhier:hover{background:var(--hh-mint-dark);color:#fff;text-decoration:none;}
/* Sluitknop (X) in de mobiele menu-overlay; standaard verborgen */
.menu-close{display:none;background:transparent;border:0;cursor:pointer;color:var(--hh-indigo);padding:9px;line-height:0;border-radius:50%;}
.menu-close:hover{color:var(--hh-mint-dark);background:var(--hh-green-tint);}
/* ---------- Responsive header ---------- */
@media (max-width:900px){
.main-bar__inner{min-height:64px;gap:12px;}
.keto-button{display:none;}
.header-utils--mobile{display:flex;gap:14px;}
.header-utils--desktop{display:none;}
.header-utils--mobile .member-link span{display:none;}
/* Volledige menu-overlay op mobiel */
.site-header{z-index:250;}
body.hh-menu-open{overflow:hidden;}
.main-navigation,.theme-navigation{
position:fixed;inset:0;background:#fff;
padding:132px var(--hh-gutter) 40px;display:none;z-index:200;overflow-y:auto;
}
.main-navigation.is-open,.theme-navigation.is-open{display:block;}
.menu-close{display:block;position:fixed;top:16px;right:calc(var(--hh-gutter) - 3px);z-index:210;}
.primary-menu,.theme-menu{flex-direction:column;align-items:flex-start;gap:10px;width:100%;}
.primary-menu a{font-size:1.35rem;}
.theme-menu > li > a{font-size:1.25rem;}
.primary-menu .sub-menu,.primary-menu .children,
.theme-menu .sub-menu{position:static;display:block;box-shadow:none;padding:4px 0 6px 16px;min-width:0;}
.theme-bar__inner{gap:10px;min-height:52px;justify-content:space-between;}
.theme-bar__label{display:none;}
.menu-toggle{display:inline-flex;}
.beginhier{display:inline-block;}
h1{font-size:1.8rem;}
}
/* ============================================================
/claude2/ : 'Menu op maat'-knop + popup
============================================================ */
/* /claude2/: fellere groen (mint) overal vervangen door bosgroen #2D5A47 (zoals het logo) */
body.hh-home-claude2{--hh-mint:#2d5a47;--hh-mint-dark:#2d5a47;}
/* Knop-hover lichter (zoals mijn-keto-menu-aanbod: #3D7A5F), niet donkerder */
body.hh-home-claude2 .button:hover,
body.hh-home-claude2 .wp-block-button__link:hover,
body.hh-home-claude2 .menu-op-maat:hover{background:#3d7a5f;color:#fff;}
body.hh-home-claude2 .button--ghost:hover{background:var(--hh-green-tint);color:var(--hh-forest);}
body.hh-home-claude2 .button--gold:hover{background:#f0c25f;color:#1e3d30;}
/* 'Inloggen' als kleine ghost-knop (zoals 'Bekijk succesverhalen', maar kleiner) */
body.hh-home-claude2 .member-link{border:1px solid var(--hh-forest-2);color:var(--hh-forest);background:#fff;border-radius:999px;padding:6px 15px;font-weight:400;font-size:.9rem;}
body.hh-home-claude2 .member-link:hover{background:var(--hh-green-tint);color:var(--hh-forest);text-decoration:none;}
/* Alleen 'Inloggen'-tekst in de knop; het poppetje-icoon weg (rustiger) */
body.hh-home-claude2 .member-link svg{display:none;}
body.hh-home-claude2 .member-link span{display:inline;}
/* Footer FB/YouTube: knop-hoverkleur (#3D7A5F) op hover */
body.hh-home-claude2 a.social-count .social-count__icon{transition:background .15s ease;}
body.hh-home-claude2 a.social-count:hover .social-count__icon{background:#3d7a5f;}
/* Submenu-balk gewicht gelijk aan het hoofdmenu (regular i.p.v. semibold) */
body.hh-home-claude2 .theme-menu > li > a{font-weight:400;}
/* 'Onderwerpen' een tint lichter dan het submenu; font-family:inherit zodat de
lichtere weight ook echt rendert (Arial kent geen 300) */
body.hh-home-claude2 .menu-toggle--themes{font-family:inherit;font-weight:300;}
.menu-op-maat{display:inline-flex;align-items:center;gap:7px;background:var(--hh-mint);color:#fff;font-weight:700;font-size:.95rem;padding:9px 18px;border-radius:999px;white-space:nowrap;transition:background .15s ease;}
.menu-op-maat:hover{background:var(--hh-mint-dark);color:#fff;text-decoration:none;}
.menu-op-maat svg{flex:none;}
/* 'Video's'-menu-item op /claude2/: icoon voor het label, inline en iets lager
zodat het op dezelfde hoogte staat als de andere menu-items */
.menu-item--video > a{display:inline;position:relative;top:2px;}
.menu-video-icon{display:inline-block;vertical-align:middle;margin-right:4px;}
/* Hoofdmenu-hamburger met zichtbaar 'Menu'-label (mobiel, 2e balk) */
.menu-toggle--main{gap:7px;padding:6px 10px;}
.menu-toggle--main svg{flex:none;}
.menu-toggle--main .menu-toggle__label{line-height:1;font-size:.95rem;}
/* /claude3/: 'Menu op maat'-knop in de 2e balk; alleen op mobiel zichtbaar */
.menu-op-maat--row2{display:none;}
/* /claude2/ mobiel: onderwerpen-sectie in de uitklap-overlay (verborgen op desktop) */
.hh2-overlay-topics{display:none;}
.hh2-overlay-topics__title{display:block;margin:22px 0 12px;font-family:var(--hh-font-head);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hh-muted);border-top:1px solid var(--hh-border);padding-top:20px;}
@media (max-width:900px){
.menu-op-maat--desktop{display:none;}
/* /claude2/ mobiel: ÉÉN balk. Hamburger links van het logo, dan het logo;
rechts een zoekicoon en de Inloggen-knop. De 2e (thema)balk vervalt; de
onderwerpen verschijnen onder het hoofdmenu in de uitklap-overlay. */
body.hh-home-claude2 .theme-bar{display:none;}
body.hh-home-claude2 .main-bar__inner{padding-left:12px;padding-right:12px;gap:8px;}
body.hh-home-claude2 .main-bar__inner .site-logo img{width:auto;max-width:200px;height:auto;}
/* Heel smalle telefoons (<=380px): logo iets kleiner zodat het naast de
hamburger + zoek + Inloggen blijft passen zonder te overlopen. */
@media (max-width:380px){
body.hh-home-claude2 .main-bar__inner .site-logo img{max-width:168px;}
}
body.hh-home-claude2 .main-bar__inner .menu-toggle--primary{display:inline-flex;order:-1;color:var(--hh-forest);}
body.hh-home-claude2 .main-bar__inner .menu-toggle--primary .menu-toggle__bar,
body.hh-home-claude2 .main-bar__inner .menu-toggle--primary .menu-toggle__bar::before,
body.hh-home-claude2 .main-bar__inner .menu-toggle--primary .menu-toggle__bar::after{background:var(--hh-forest);}
body.hh-home-claude2 .main-bar__inner .menu-op-maat--desktop{display:none;}
body.hh-home-claude2 .main-bar__inner .header-utils--mobile{display:flex;margin-left:auto;gap:9px;align-items:center;}
body.hh-home-claude2 .header-utils--mobile .header-search-toggle{color:var(--hh-forest);padding:4px;}
body.hh-home-claude2 .header-utils--mobile .member-link{border:1px solid var(--hh-forest-2);color:var(--hh-forest);background:#fff;border-radius:999px;padding:5px 11px;font-weight:600;font-size:13.5px;}
body.hh-home-claude2 .header-utils--mobile .member-link span{display:inline;}
body.hh-home-claude2 .header-utils--mobile .member-link svg{display:none;}
/* Uitklap-overlay: onderwerpen tonen onder het hoofdmenu, kortere top-padding (1 balk) */
body.hh-home-claude2 .hh2-overlay-topics{display:block;}
body.hh-home-claude2 .main-navigation{padding-top:92px;}
/* ---- /claude3/ : afwijkende mobiele header-indeling ---- */
/* Rij 1 (hoofdbalk): hamburger-icoon links, dan logo; rechts zoekicoon + inloggen */
body.hh-home-claude3 .main-bar__inner .menu-toggle--primary{display:inline-flex;order:-1;}
body.hh-home-claude3 .main-bar__inner .menu-op-maat--desktop{display:none;}
body.hh-home-claude3 .main-bar__inner .header-utils--mobile{display:flex;margin-left:auto;gap:16px;}
body.hh-home-claude3 .header-utils--mobile .member-link{border:0;padding:0;}
body.hh-home-claude3 .header-utils--mobile .member-link svg{display:inline;}
body.hh-home-claude3 .header-utils--mobile .member-link span{display:none;}
/* Rij 2 (themabalk): 'Onderwerpen' (met icoon) links, 'Menu op maat'-knop rechts */
body.hh-home-claude3 .theme-bar__inner .menu-toggle--main{display:none;}
body.hh-home-claude3 .theme-bar__inner .header-utils--desktop{display:none;}
body.hh-home-claude3 .theme-bar__inner .menu-toggle--themes{order:1;}
body.hh-home-claude3 .theme-bar__inner .menu-op-maat--row2{display:inline-flex;order:2;margin-left:auto;}
}
/* Popup met onderwerpen-op-maat (alleen die een test hebben) */
.mom-modal{display:none;position:fixed;inset:0;z-index:1000;padding:20px;align-items:center;justify-content:center;}
.mom-modal:target{display:flex;}
.mom-modal__backdrop{position:absolute;inset:0;background:rgba(15,25,20,.55);}
.mom-modal__box{position:relative;z-index:1;background:#fff;border-radius:20px;max-width:660px;width:100%;padding:34px 28px;box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:88vh;overflow-y:auto;}
.mom-modal__close{position:absolute;top:8px;right:16px;font-size:1.9rem;line-height:1;color:#7a8a80;text-decoration:none;}
.mom-modal__close:hover{color:var(--hh-forest);}
.mom-modal__title{font-size:1.7rem;color:var(--hh-forest);margin:0 0 6px;text-align:center;}
.mom-modal__intro{text-align:center;color:var(--hh-muted);margin:0 auto 22px;max-width:440px;}
.mom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mom-option{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--hh-green-tint);border-radius:14px;padding:13px 16px;color:var(--hh-forest);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.mom-option:hover{border-color:var(--hh-forest-2);box-shadow:0 8px 20px rgba(30,61,48,.14);text-decoration:none;color:var(--hh-forest);transform:translateY(-2px);}
.mom-option__icon{flex:none;width:46px;height:46px;border-radius:12px;background:#faf1da;color:#c79320;display:flex;align-items:center;justify-content:center;}
.mom-option__icon svg{width:28px;height:28px;display:block;}
.mom-option__name{font-family:var(--hh-font-head);font-weight:700;font-size:1rem;color:var(--hh-forest);display:block;}
.mom-option__cta{font-size:.82rem;color:var(--hh-forest-2);font-weight:700;}
@media (max-width:560px){.mom-grid{grid-template-columns:1fr;}}
/* Content */
.site-content{padding:40px 0;}
.posts-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;
}
.card{
background:#fff;border:1px solid var(--hh-border);border-radius:var(--hh-radius);overflow:hidden;
display:flex;flex-direction:column;
}
.card__thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;}
.card__body{padding:20px;display:flex;flex-direction:column;gap:10px;}
.card__title{font-size:1.15rem;margin:0;}
.card__title a{color:var(--hh-indigo);}
.card__excerpt{color:var(--hh-muted);font-size:.95rem;}
.card__more{color:var(--hh-mint-dark);font-weight:700;margin-top:auto;}
.page-header{margin-bottom:30px;}
.entry{max-width:850px;margin-inline:auto;}
/* Losse pagina's: content en media 680px breed */
body.page .entry{max-width:680px;}
.entry-title{margin-bottom:.3em;}
.entry-meta{color:var(--hh-muted);font-size:.9rem;margin-bottom:1.5em;}
/* Artikel-meta (auteur, datum, medisch gereviewd, reacties) */
.article-meta{display:flex;align-items:center;gap:12px;margin:0 0 26px;}
.article-meta__avatar{border-radius:50%;width:48px;height:48px;object-fit:cover;flex:0 0 48px;}
.article-meta__avatar-link{flex:0 0 48px;display:block;line-height:0;}
/* Widget-profielfoto: link mag niet krimpen in de flex-rij; foto vast op 100x100. */
.hh-widget-avatar-link{flex:none;display:inline-block;line-height:0;}
.article-sidebar .widget .textwidget img[src*="oscar-helm-profielfoto"]{width:100px !important;height:100px !important;flex:none;object-fit:cover;border-radius:50%;}
.article-meta__text{color:var(--hh-muted);font-size:.92rem;line-height:1.5;}
.article-meta__author{color:var(--hh-indigo);font-weight:700;}
.article-meta__text a{color:var(--hh-mint-dark);text-decoration:underline;}
.article-card__date{color:var(--hh-muted);}
/* Reacties */
.comments-area{max-width:850px;margin:40px auto 0;}
.comments-title{font-size:1.4rem;margin-bottom:20px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list ol.children{list-style:none;margin:0 0 0 40px;padding:0;}
.hh-comment{border-top:1px solid var(--hh-border);padding:20px 0;}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.comment-author{display:flex;align-items:center;gap:10px;}
.comment-author img,.comment-author .avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;}
.comment-author-name{font-weight:700;color:var(--hh-indigo);}
/* 'Terug naar boven'-knop (rechtsonder, verschijnt bij scrollen) */
.hh-to-top{position:fixed;right:22px;bottom:22px;z-index:120;width:46px;height:46px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--hh-mint);color:#fff;border:0;border-radius:12px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.20);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,background .15s ease;}
.hh-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.hh-to-top:hover{background:var(--hh-mint-dark);}
.hh-to-top:focus-visible{outline:2px solid var(--hh-forest-2);outline-offset:2px;}
.hh-to-top svg{width:24px;height:24px;display:block;}
@media (max-width:600px){.hh-to-top{right:14px;bottom:14px;width:42px;height:42px;border-radius:11px;}}
.admin-bar .hh-to-top{bottom:22px;}
.comment-date{color:var(--hh-muted);font-size:.85rem;}
.comment-content{color:var(--hh-ink);}
.comment-reply{margin-top:8px;}
.comment-reply a{color:var(--hh-mint-dark);font-weight:600;font-size:.9rem;}
/* Reactieformulier */
.comment-respond{margin-top:24px;max-width:100%;}
.comment-reply-title{font-size:1.4rem;margin-bottom:6px;}
.comment-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;}
.comment-form-comment,.comment-form-cookies-consent,.form-submit,.comment-notes,.logged-in-as{grid-column:1 / -1;}
.comment-form p{margin:0;}
.comment-form label{display:block;font-weight:600;color:var(--hh-indigo);margin-bottom:6px;}
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
width:100%;padding:12px 14px;border:1px solid var(--hh-border);border-radius:10px;font:inherit;box-sizing:border-box;background:#fff;
}
.comment-form textarea{min-height:130px;resize:vertical;}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--hh-mint);}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px;}
.comment-form-cookies-consent label{margin:0;font-weight:400;}
.comment-form .form-submit .submit{
background:var(--hh-mint);color:#fff;border:0;padding:13px 30px;border-radius:12px;
font-weight:700;font-size:1rem;cursor:pointer;transition:background .15s ease;
}
.comment-form .form-submit .submit:hover{background:var(--hh-mint-dark);}
.comment-form .comment-notes{color:var(--hh-muted);font-size:.9rem;}
@media (max-width:600px){.comment-form{grid-template-columns:1fr;}}
/* Knoppen in content altijd witte tekst (overschrijft de groene link-kleur) */
.entry-content .button,.entry-content .button--big{color:#fff;text-decoration:none;}
.entry-content .button:hover,.entry-content .button--big:hover{color:#fff;}
/* Blog-pagina: zo breed als een post, 2 artikelen naast elkaar */
.container.blog-archive{max-width:850px;}
.blog-archive .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.blog-archive .author-bio{margin-bottom:36px;}
@media (max-width:600px){.blog-archive .posts-grid{grid-template-columns:1fr;}}
.entry-content a{color:var(--hh-mint-dark);text-decoration:underline;}
.entry-content h2,.entry-content h3{margin-top:1.4em;}
.entry-content img{border-radius:12px;}
/* WordPress-uitlijningsclasses (foto links/rechts met tekst ernaast) */
.alignleft,.entry-content .alignleft,.entry-content img.alignleft{float:left !important;margin:.3em 1.6em 1em 0;max-width:50%;height:auto;}
.alignright,.entry-content .alignright,.entry-content img.alignright{float:right !important;margin:.3em 0 1em 1.6em;max-width:50%;height:auto;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.alignnone{max-width:100%;height:auto;}
.entry-content::after,.author-header__bio::after{content:"";display:table;clear:both;}
.wp-caption{max-width:100%;}
.wp-caption-text,.wp-caption .wp-caption-text{font-size:.85rem;color:var(--hh-muted);text-align:center;margin-top:6px;}
/* Bijschrift-afbeeldingen zonder uitlijning links uitlijnen (i.p.v. de default-insprong) */
.entry-content figure.alignnone{margin-left:0;margin-right:0;}
@media (max-width:600px){
.alignleft,.alignright{float:none;display:block;margin:1em auto;max-width:100%;}
}
/* Responsieve media: video-embeds en afbeeldingen nooit breder dan de content */
.entry-content img,.entry-content video,.entry-content embed,.entry-content object,.entry-content iframe,
.review-item img,.review-item__play{max-width:100%;}
.entry-content img{height:auto;}
.entry-content iframe,.wp-video,.wp-block-embed,.fluid-width-video-wrapper{max-width:100%;}
.entry-content iframe[src*="youtube"],.entry-content iframe[src*="youtu.be"],.entry-content iframe[src*="vimeo"]{
display:block;width:100%;aspect-ratio:16/9;height:auto;
}
/* Body-tekst artikelen ~10% groter (ook mobiel) voor betere leesbaarheid */
.entry-content p,.entry-content li{font-size:1.08rem;line-height:1.75;}
/* Lijsten met icoon-bullets, shortcode [list icon="check" color="green"].
Groen SVG-vinkje i.p.v. FontAwesome; kleur via de kleurklasse. */
.entry-content .list_wrapper ul{list-style:none;margin:1.1em 0;padding-left:0;}
.entry-content .list_wrapper ul li{position:relative;padding-left:32px;margin:.55em 0;}
.entry-content .list_wrapper ul li::before{
content:"";position:absolute;left:0;top:.3em;width:19px;height:19px;
background-color:var(--hh-mint-dark);
-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;
mask:url("data:image/svg+xml,") center/contain no-repeat;
}
.entry-content .list_wrapper.green ul li::before{background-color:var(--hh-mint);}
.entry-content .list_wrapper.orange ul li::before{background-color:var(--hh-gold);}
.entry-content .list_wrapper.red ul li::before{background-color:#e05252;}
.entry-content .list_wrapper.default_color ul li::before{background-color:var(--hh-muted);}
/* Kruis voor icon="times"/"arrow_right" (bijv. nadelen-lijst); kleur volgt de kleurklasse */
.entry-content .list_wrapper.times ul li::before,
.entry-content .list_wrapper.times_round ul li::before,
.entry-content .list_wrapper.arrow_right ul li::before,
.entry-content .list_wrapper.arrow-right ul li::before{
-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;
mask:url("data:image/svg+xml,") center/contain no-repeat;
}
/* times zonder kleurklasse: standaard rood (nadelen) */
.entry-content .list_wrapper.times:not(.green):not(.orange):not(.default_color) ul li::before,
.entry-content .list_wrapper.times_round:not(.green):not(.orange):not(.default_color) ul li::before{background-color:#e05252;}
/* Eerste alinea van een blogbericht extra groot */
body.single-post .entry-content > p:first-of-type{font-size:1.2em;line-height:1.6;}
/* Tabellen: horizontaal scrollbaar op mobiel i.p.v. de layout oprekken */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:1.4em 0;}
/* Calculator-veldlabels (o.a. 'Leeftijd:') dezelfde kleur als de contenttekst. */
.entry-content .hh-element__label--before{color:var(--hh-ink);}
/* Callout-box (voorheen [colorbox] van Content Pimper) */
.entry-content .hh-callout{background:var(--hh-green-tint);border:1px solid #d5e4dc;border-left:4px solid var(--hh-forest-2);border-radius:12px;padding:20px 22px;margin:1.6em 0;}
.entry-content .hh-callout__title{font-family:var(--hh-font-head);font-weight:700;font-size:1.2rem;color:var(--hh-forest);margin:0 0 12px;}
.entry-content .hh-callout > .table-scroll:last-child,.entry-content .hh-callout > *:last-child{margin-bottom:0;}
.entry-content .hh-callout .table-scroll{margin:.2em 0 0;}
.entry-content .table-scroll table{margin:0;min-width:100%;}
.entry-content table{border-collapse:collapse;width:100%;}
.entry-content th,.entry-content td{padding:8px 12px;border:1px solid var(--hh-green-tint);text-align:left;}
@media (max-width:600px){.entry-content .table-scroll table{min-width:520px;}}
/* Ervaringen/reviews (blockquotes) als nette kaarten uitgelijnd */
.entry-content blockquote{
margin:1.6em 0;
padding:20px 24px;
background:var(--hh-green-tint);
border-left:4px solid var(--hh-mint);
border-radius:12px;
color:var(--hh-forest);
quotes:none;
}
.entry-content blockquote p{margin:0;font-style:italic;font-size:1.05rem;line-height:1.75;}
.entry-content blockquote p + p{margin-top:.7em;}
.entry-content blockquote cite{display:block;margin-top:.6em;font-style:normal;font-weight:700;color:var(--hh-mint-dark);}
/* Anchor-offset: kopje net onder de meelopende (sticky) header */
/* Anker-offset voor koppen wordt centraal geregeld via html{scroll-padding-top}. */
/* Inhoudsopgave */
.article-toc{
background:var(--hh-green-tint);border:1px solid #d5e4dc;border-radius:14px;
padding:20px 24px;margin:26px 0;
}
.article-toc__title{
display:block;font-weight:700;color:var(--hh-forest);font-family:var(--hh-font-head);
font-size:1.32em;margin-bottom:10px;
}
.article-toc__list{list-style:none;margin:0;padding:0;}
.article-toc__list li{margin-bottom:7px;padding-left:18px;position:relative;}
.article-toc__list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--hh-mint);}
.article-toc__list a{color:var(--hh-mint-dark);}
.article-toc__list a:hover{text-decoration:underline;}
.article-toc__list .toc-sub{margin-left:22px;}
.article-toc__list .toc-sub::before{width:5px;height:5px;background:var(--hh-mint-dark);opacity:.5;}
/* Live zoekresultaten */
.live-search-results{
position:absolute;left:0;right:0;top:100%;margin-top:8px;background:#fff;
border:1px solid var(--hh-border);border-radius:12px;box-shadow:var(--hh-shadow);
z-index:120;overflow-y:auto;max-height:70vh;
}
.live-search-item{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--hh-indigo);}
.live-search-item:hover{background:#f4f7f5;text-decoration:none;}
.live-search-item img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 48px;}
.live-search-noimg{width:48px;height:48px;border-radius:8px;background:var(--hh-border);flex:0 0 48px;}
.live-search-title{font-weight:600;font-size:.95rem;line-height:1.3;}
.live-search-empty{padding:14px;color:var(--hh-muted);}
/* Gerelateerde artikelen */
.related-posts{max-width:850px;margin:48px auto 0;}
.related-posts__title{font-size:1.4rem;margin-bottom:20px;}
.related-posts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.related-post{display:flex;flex-direction:column;gap:10px;}
.related-post__media{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#eef0f2;}
.related-post__media img{width:100%;height:100%;object-fit:cover;display:block;}
.related-post__title{color:var(--hh-indigo);font-weight:600;font-size:.95rem;line-height:1.35;}
.related-post:hover{text-decoration:none;}
.related-post:hover .related-post__title{color:var(--hh-mint-dark);}
@media (max-width:768px){.related-posts__grid{grid-template-columns:1fr 1fr;}}
/* Biobox auteur */
.author-bio{
display:flex;gap:20px;align-items:flex-start;background:var(--hh-green-tint);
border:1px solid #d5e4dc;border-radius:16px;padding:24px;max-width:850px;margin:40px auto 0;
}
.author-bio__avatar{flex:0 0 88px;}
.author-bio__avatar img{width:88px;height:88px;border-radius:50%;object-fit:cover;display:block;}
.author-bio__name{color:var(--hh-forest);font-weight:700;font-family:var(--hh-font-head);font-size:1.15rem;}
.author-bio__function{display:block;color:var(--hh-muted);font-weight:600;font-size:.9rem;margin-bottom:8px;}
.author-bio__text{color:var(--hh-ink);font-size:.95rem;}
.author-bio__text p{margin:0 0 .8em;}
@media (max-width:600px){.author-bio{flex-direction:column;align-items:center;text-align:center;}}
/* Login-formulier ([hh_login]) */
.hh-login{max-width:420px;margin:24px auto;}
.hh-login .wp-login-form p,.hh-login form p{margin:0 0 16px;}
.hh-login label{font-weight:600;color:var(--hh-indigo);display:block;margin-bottom:6px;}
.hh-login input[type="text"],.hh-login input[type="password"],.hh-login input[type="email"]{
width:100%;padding:12px 14px;border:1px solid var(--hh-border);border-radius:10px;font:inherit;box-sizing:border-box;
}
.hh-login input:focus{outline:none;border-color:var(--hh-mint);}
.hh-login .login-remember label{font-weight:400;display:flex;align-items:center;gap:8px;margin:0;}
.hh-login .login-submit input,.hh-login button[type="submit"]{
width:100%;background:var(--hh-mint);color:#fff;border:0;padding:14px;border-radius:12px;
font-weight:700;font-size:1rem;cursor:pointer;transition:background .15s ease;
}
.hh-login .login-submit input:hover,.hh-login button[type="submit"]:hover{background:var(--hh-mint-dark);}
.hh-login__lost{margin-top:8px;}
.hh-login__lost a{color:var(--hh-mint-dark);}
.hh-login--in{text-align:center;}
body.page .entry--login{max-width:920px;}
.login-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;align-items:start;}
.login-option{background:var(--hh-green-tint);border:1px solid #d5e4dc;border-radius:16px;padding:28px;}
.login-option .login-option__title{font-size:1.3rem;margin-top:0;margin-bottom:10px;}
.login-option--app .button{margin-top:8px;}
.login-option .hh-login .login-submit input,
.login-option .button,.login-option .button--big{color:#fff;}
.entry--login .login-help{color:var(--hh-muted);font-size:.9rem;margin:12px 0 0;}
.entry--login .hh-login{margin:20px 0 0;max-width:none;}
@media (max-width:768px){.login-options{grid-template-columns:1fr;}}
/* Afbeelding boven een login-optie (app-mockup / Ultieme Afslank Programma) */
.login-option__image{display:block;width:auto;max-width:100%;height:auto;margin:0 auto 16px;border-radius:12px;}
.login-option--app .login-option__image{max-height:220px;}
.login-option--video .login-option__image{max-height:170px;}
/* Cover net boven de groene knop, links uitgelijnd (ingelogd-weergave). */
.login-option__image--inline{margin:6px 0 16px;}
/* Uitklapbaar inlogformulier (Gebruikersnaam t/m 'Wachtwoord vergeten?') */
.login-collapse{margin-top:8px;}
.login-collapse__summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;background:var(--hh-mint);color:#fff;font-weight:700;font-size:1rem;padding:13px 20px;border-radius:12px;width:100%;box-sizing:border-box;justify-content:center;transition:background .15s ease;}
.login-collapse__summary:hover{background:var(--hh-mint-dark);}
.login-collapse__summary::-webkit-details-marker{display:none;}
.login-collapse__summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s ease;margin-top:-3px;}
.login-collapse[open] .login-collapse__summary::after{transform:rotate(-135deg);margin-top:3px;}
.login-collapse__body .hh-login{margin-top:16px;}
/* Pagination */
.pagination{margin-top:40px;display:flex;justify-content:center;}
.pagination .page-numbers{
display:inline-block;padding:10px 16px;margin:0 4px;border-radius:10px;
color:var(--hh-indigo);font-weight:600;border:1px solid var(--hh-border);
}
.pagination .current{background:var(--hh-mint);color:#fff;border-color:var(--hh-mint);}
.pagination a.page-numbers:hover{border-color:var(--hh-mint);color:var(--hh-mint-dark);text-decoration:none;}
.pagination .dots{border-color:transparent;}
/* Reviews-archief: 2 kolommen op desktop */
.page-subtitle{color:var(--hh-muted);font-size:1.05rem;margin-top:4px;}
/* Koppen bovenaan altijd links uitgelijnd */
.page-header{text-align:left;}
.page-header--center{text-align:left;}
/* Producten-archief */
.products-list{display:flex;flex-direction:column;gap:56px;max-width:980px;margin:0 auto;}
.product-row{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:center;}
.product-row:nth-child(even){grid-template-columns:1fr 260px;}
.product-row:nth-child(even) .product-row__media{order:2;}
.product-row__media{position:relative;text-align:center;}
.product-row__media img{max-width:100%;height:auto;max-height:340px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.15));}
.product-row__label{position:absolute;top:0;left:0;background:var(--hh-amber);color:#1e3d30;font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:8px;}
.product-row__title{font-size:1.6rem;margin-bottom:4px;}
.product-row__pages{color:var(--hh-muted);font-size:.9rem;}
.product-row__desc{color:var(--hh-ink);margin:12px 0 16px;}
.product-row__desc p{margin:0 0 1em;}
.product-row__usps{margin:0 0 20px;}
.product-row__usps-title{font-weight:700;color:var(--hh-indigo);}
.product-row__usps ul{list-style:none;margin:8px 0 0;padding:0;}
.product-row__usps li{position:relative;padding-left:28px;margin-bottom:6px;}
.product-row__usps li::before{content:"\2713";position:absolute;left:0;color:var(--hh-mint);font-weight:700;}
.product-row:nth-child(even) .product-row__usps li,
.product-row:nth-child(even) .product-row__desc{text-align:left;}
@media (max-width:768px){
.product-row,.product-row:nth-child(even){grid-template-columns:1fr;gap:20px;text-align:center;}
.product-row:nth-child(even) .product-row__media{order:0;}
.product-row__media img{max-height:260px;}
}
/* Tekstreviews als masonry-kolommen (pakken strak, minder chaotisch dan een grid) */
.reviews-archive{column-count:2;column-gap:24px;max-width:900px;margin-inline:auto;}
.reviews-archive .review-item{break-inside:avoid;margin:0 0 24px;}
@media (max-width:768px){.reviews-archive{column-count:1;}}
/* Datums verbergen bij reviews (homepage + reviews-pagina) */
.review-item__date{display:none;}
/* Uitgelichte review bovenaan (Nicolette van Dam), zelfde kaartdesign als de
'Toonaangevend'-box: witte kaart, gouden accent, zachte schaduw. */
.reviews-featured{
background:#fff;border:1px solid var(--hh-green-tint);border-radius:24px;
box-shadow:0 14px 38px rgba(30,61,48,.09);
padding:32px;margin:0 auto 40px;text-align:center;
}
.reviews-featured__label{
display:inline-block;color:var(--hh-mint-dark);font-weight:700;
text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;
margin-bottom:18px;padding-bottom:12px;position:relative;
}
.reviews-featured__label::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:48px;height:3px;border-radius:2px;background:var(--hh-gold);
}
.reviews-featured__img{width:100%;max-width:589px;height:auto;border-radius:14px;display:block;margin:0 auto;}
/* Blok met de 4 Wistia video-reviews: 2 kolommen */
.reviews-videos{margin:0 auto 44px;}
.reviews-section-title{font-size:1.5rem;color:var(--hh-forest);margin:0 0 20px;font-family:var(--hh-font-head);}
/* Promotieblok Afslank Receptenbijbel (reviews-pagina) */
.reviews-promo{margin:0 auto 44px;text-align:left;background:#FDF8F3;border:1px solid var(--hh-green-tint);border-radius:20px;padding:32px 28px;}
/* Onderste promoblok extra ruimte erboven */
.reviews-promo--spaced{margin-top:48px;}
.reviews-promo__title{font-size:1.5rem;color:var(--hh-forest);margin:0 0 .5em;font-family:var(--hh-font-head);}
.reviews-promo__text{margin:0;color:var(--hh-forest);font-size:1.08rem;line-height:1.6;}
/* Link onderstrepen zodat de aanklikbare tekst duidelijk opvalt */
.reviews-promo__text a{text-decoration:underline;font-weight:600;}
.reviews-list.reviews-list--quad{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;}
.review-video-item{margin:0;}
.review-video-item__name{font-weight:700;color:var(--hh-forest);margin-bottom:8px;text-align:center;}
@media (max-width:640px){.reviews-list.reviews-list--quad{grid-template-columns:1fr;}}
/* HTML-sitemap (shortcode [hh_html_sitemap], SEOPress-compatibele markup) */
.sp-html-sitemap{margin:16px 0;}
.sp-html-sitemap .sp-cpt-name{font-size:1.7rem;margin:32px 0 18px;padding-bottom:8px;border-bottom:2px solid var(--hh-border);}
.sp-wrap-cats{display:grid;grid-template-columns:1fr;gap:22px;}
.sp-wrap-cat{break-inside:avoid;}
.sp-cat-name{font-size:1.1rem;margin:0 0 8px;}
.sp-cat-name a{color:var(--hh-indigo);}
.sp-list-posts{list-style:none;margin:0;padding:0;}
.sp-list-posts li{margin:0 0 6px;line-height:1.4;}
.sp-list-posts a{color:var(--hh-mint-dark);}
.sp-list-posts a:hover{text-decoration:underline;}
.sp-list-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 26px;}
/* Footer */
.site-footer{
background:#1a1a1a;color:#d1d5db;margin-top:60px;padding:56px 0 28px;
}
.footer-top{
display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:48px;
padding-bottom:36px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{max-width:320px;}
.footer-logo{height:42px;width:auto;display:block;filter:brightness(0) invert(1);}
/* Grijs PNG-logo (homepages): tonen zoals het is, niet naar wit inverten */
.footer-logo--grey{filter:none;}
.footer-tagline{color:#9ca3af;font-size:.95rem;margin:16px 0 0;line-height:1.5;}
.footer-widgets{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;
}
.footer-widget__title{color:#fff;font-size:1rem;font-family:var(--hh-font-head);}
.footer-widget ul{list-style:none;margin:0;padding:0;}
.footer-widget li{margin-bottom:8px;}
.footer-widget a{color:#d1d5db;}
.footer-widget a:hover{color:var(--hh-mint);}
.footer-menu{
list-style:none;margin:0 0 16px;padding:0;
display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
}
.footer-menu a{color:#9ca3af;font-size:.9rem;}
.footer-menu a:hover{color:#fff;}
.footer-bottom{text-align:center;padding-top:8px;}
/* Taalswitch naar de Franse/Duitse zustersites */
.footer-lang{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;margin:0 0 16px;font-size:.9rem;}
.footer-lang__label{color:#9ca3af;}
.footer-lang a{color:#d1d5db;font-weight:600;}
.footer-lang a:hover{color:var(--hh-mint);}
.footer-lang__sep{color:#6b7280;}
.footer-disclaimer{color:#e5e7eb;font-size:.95rem;line-height:1.5;max-width:700px;margin:0 auto 10px;}
.site-info{color:#9ca3af;font-size:.9rem;margin:0;}
@media (max-width:768px){
.footer-top{grid-template-columns:1fr;gap:28px;}
/* Footer-linkblokken naast elkaar op mobiel */
.footer-widgets{grid-template-columns:1fr 1fr;gap:20px;text-align:left;}
}
/* 'Meer dan 100.000 boeken verkocht!': 2 producten naast elkaar op mobiel */
@media (max-width:782px){
.home-books__list{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important;justify-content:stretch !important;}
.home-books__list .book-card{flex:none !important;width:auto !important;}
}
/* Search form */
.search-form{display:flex;gap:10px;max-width:480px;}
.search-field{flex:1;padding:14px 16px;border:1px solid var(--hh-border);border-radius:12px;font:inherit;}
/* Responsive: overige (het mobiele menu wordt hierboven als volledige overlay geregeld) */
@media (max-width:900px){
.site-header__cta{display:none;}
}
/* ============================================================
Homepage
============================================================ */
.button--big{padding:20px 40px;font-size:1.05rem;border-radius:var(--hh-radius);}
.section-head{margin-bottom:24px;}
.section-head__title{margin:0 0 4px;}
.section-head__subtitle,.section-head__intro{color:var(--hh-muted);}
.section-head--row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.see-all{display:inline-block;color:var(--hh-mint-dark);font-weight:700;margin-top:16px;}
.see-all:hover{text-decoration:underline;}
.home-intro{text-align:center;max-width:820px;margin:44px auto 44px;}
.home-intro__title{font-size:2.4rem;color:var(--hh-forest);}
.home-intro__title::after{content:"";display:block;width:64px;height:4px;background:var(--hh-gold);border-radius:2px;margin:16px auto 0;}
.home-intro__text{color:var(--hh-forest-ink);font-size:1.1rem;}
/* Autoriteitssectie: Toonaangevend in afslanken */
.home-authority{
background:#fff;color:var(--hh-forest);border:1px solid var(--hh-green-tint);border-radius:24px;
padding:52px 40px;margin:56px 0;text-align:center;
box-shadow:0 14px 38px rgba(30,61,48,.09);
}
.home-authority__title{
color:var(--hh-forest);font-size:2rem;margin-bottom:22px;
position:relative;padding-bottom:16px;
}
/* Gouden accentstreep onder de titel (sluit aan op de award-badges) */
.home-authority__title::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:64px;height:4px;border-radius:2px;background:var(--hh-gold);
}
/* Alinea valt op via een warm crème panel met gouden linkeraccent */
.home-authority__text{
color:var(--hh-forest);font-size:1.12rem;line-height:1.7;font-weight:500;
max-width:720px;margin:0 auto 34px;
background:var(--hh-cream);border-left:4px solid var(--hh-gold);
border-radius:14px;padding:22px 28px;text-align:left;
}
/* Logo's van de media-bronnen onder de creme box */
.media-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin:0 auto 32px;max-width:640px;}
.media-logo{height:56px;width:auto;object-fit:contain;}
.media-logo--lg{height:62px;}
.media-logo--sm{height:45px;}
.media-logo--text{display:inline-flex;align-items:center;height:56px;font-family:var(--hh-font-head);font-size:1.35rem;font-weight:700;color:var(--hh-forest);}
/* Uitgelichte award-foto met onderschrift (zoals /oscar-helm/), op volledige grootte */
.home-authority__photo{margin:0 auto 30px;max-width:670px;}
.home-authority__photo img{width:100%;height:auto;max-width:670px;border-radius:14px;display:block;margin:0 auto;}
.home-authority__photo figcaption{margin-top:10px;font-size:.9rem;color:var(--hh-muted);font-style:italic;}
/* 6 prijzen: 2 rijen x 3, lauwerkrans + jaartal (design zoals sanofelice.it, geen hover) */
.awards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:560px;margin:0 auto;}
.award-badge{
background:#fff;border:2px solid var(--hh-green-tint);border-radius:14px;
padding:18px 10px;text-align:center;min-width:0;box-shadow:0 2px 8px rgba(30,61,48,.05);
}
.award-medal{
position:relative;display:flex;align-items:center;justify-content:center;
width:120px;max-width:100%;aspect-ratio:120/110;margin:0 auto;container-type:inline-size;
}
.award-laurel{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.award-year{position:relative;font-weight:800;font-size:22cqw;color:var(--hh-forest);line-height:1;transform:translateY(-3.3cqw);}
.award-cat{font-size:.9rem;color:var(--hh-muted);margin-top:6px;line-height:1.25;}
/* Kleine kopjes in de box ('Prijzen op een rij') */
.home-authority__label{font-size:1.05rem;font-weight:700;color:var(--hh-forest);font-family:var(--hh-font-head);margin:0 0 14px;}
/* Subtiel 'eyebrow'-label ('Bekend van'): kleiner, faint grijs, uppercase */
.home-authority__label--eyebrow{font-size:.8rem;font-weight:600;color:#9ca3af;font-family:var(--hh-font-body);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;}
/* Subkopje binnen de box ('Zesvoudig winnaar...'): kleiner dan de hoofdtitel, met scheidingslijn erboven */
.home-authority__subtitle{font-size:1.5rem;color:var(--hh-forest);font-family:var(--hh-font-head);font-weight:700;margin:40px 0 20px;padding-top:34px;border-top:1px solid var(--hh-green-tint);}
@media (max-width:900px){
.home-authority{padding:36px 22px;}
.home-authority__title{font-size:1.6rem;}
.home-authority__text{padding:18px 20px;}
}
@media (max-width:480px){
.awards-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}
/* Boek / weekmenu */
.home-book{
display:grid;grid-template-columns:262px 1fr;gap:40px;align-items:center;
padding:20px 0;margin-bottom:56px;
}
.home-book__media{position:relative;text-align:center;}
.home-book__media img{display:block;margin:0 auto;max-width:262px;width:100%;height:auto;}
.home-book__label{
position:absolute;top:12px;left:12px;background:var(--hh-amber);color:#1f1866;
font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:8px;
}
.home-book__title{font-size:1.8rem;}
.home-book__usps{margin:16px 0;}
.home-book__usps-title{font-weight:700;color:var(--hh-indigo);}
.home-book__usps ul{list-style:none;margin:8px 0 0;padding:0;}
.home-book__usps li{position:relative;padding-left:28px;margin-bottom:8px;}
.home-book__usps li::before{content:"\2713";position:absolute;left:0;color:var(--hh-mint);font-weight:700;}
.home-book__footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;}
.home-book__reassurance{color:var(--hh-muted);font-size:.9rem;}
/* Social highlights */
.home-highlights{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-bottom:56px;}
.highlight-large{
display:grid;grid-template-columns:1fr;gap:20px;align-content:center;text-align:center;
background:#f7f8f9;border-radius:20px;padding:32px;margin-bottom:0;
}
.highlight-large__media{text-align:center;}
.highlight-large__link{display:inline-block;margin-top:12px;color:var(--hh-mint-dark);font-weight:700;}
.highlight-small-grid{display:flex;flex-direction:column;gap:24px;justify-content:space-between;}
.highlight-small{flex:1;}
@media (max-width:768px){
.home-highlights{grid-template-columns:1fr;}
.highlight-large{text-align:left;}
}
.highlight-small{
display:flex;gap:16px;background:#fff;border:1px solid var(--hh-border);
border-radius:16px;overflow:hidden;
}
.highlight-small__media{flex:0 0 120px;background-size:cover;background-position:center;min-height:120px;}
.highlight-small__body{padding:18px 18px 18px 0;}
.highlight-small__title{font-size:1.1rem;margin-bottom:6px;}
.highlight-small__text{color:var(--hh-muted);font-size:.95rem;}
/* Uitgelichte boeken */
.home-books{margin-bottom:56px;}
.home-books__intro{text-align:center;max-width:720px;margin:0 auto 24px;}
.home-books__title{font-size:1.75rem;}
.home-books__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:start;}
.home-books__list .book-card{width:auto;}
@media (max-width:960px){.home-books__list{grid-template-columns:repeat(3,1fr);}}
.home-books__footer{text-align:center;margin-top:32px;}
.book-card{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
padding:20px;border:1px solid var(--hh-border);border-radius:16px;background:#fff;
}
.book-card:hover{box-shadow:var(--hh-shadow);text-decoration:none;}
.book-card__media{position:relative;}
/* Keto app-mockup even hoog als de boekcovers (100x142), telefoon-verhouding */
.book-card__mockup{width:70px;height:142px;object-fit:contain;display:block;}
.book-card__label{
position:absolute;top:-8px;right:-8px;background:var(--hh-amber);color:#1f1866;
font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:8px;
}
.book-card__title{font-size:1rem;color:var(--hh-indigo);margin:0;}
/* Lange titel (Intermittent Fasting Revolutie) kleiner op desktop (6-koloms rij) */
@media (min-width:961px){.book-card__title--sm{font-size:.82rem;}}
.book-card__pages{color:var(--hh-muted);font-size:.85rem;}
.book-card__button{margin-top:auto;padding:10px 20px;font-size:.9rem;}
/* Reviews + video's */
.home-reviews-videos{
display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;margin-bottom:56px;
}
.reviews-list{display:grid;gap:16px;margin-bottom:16px;}
.review-item{background:#fff;border:1px solid var(--hh-border);border-radius:16px;padding:20px;}
.review-item__stars{color:#d9dce0;font-size:1rem;letter-spacing:2px;}
.review-item__stars .star--on{color:var(--hh-amber);}
.review-item__date{display:none;}
.review-item__text{color:var(--hh-ink);}
.review-item__footer{display:flex;align-items:center;gap:12px;margin-top:14px;}
.review-item__avatar{border-radius:50%;width:40px;height:40px;object-fit:cover;}
.review-item__author{display:block;font-weight:700;color:var(--hh-indigo);}
.review-item__source{color:var(--hh-muted);font-size:.85rem;}
.review-item__play,.video-item__thumb{
display:block;background-size:cover;background-position:center;border-radius:12px;
}
.review-item__play{aspect-ratio:16/9;position:relative;}
.reviews-list--video{grid-template-columns:minmax(0,1fr);gap:16px;}
.review-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;min-width:0;width:100%;}
.review-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.videos-list{display:grid;gap:14px;}
.video-item__link{display:flex;align-items:center;gap:12px;}
.video-item__thumb{position:relative;flex:0 0 124px;height:70px;}
.video-item__play,.review-item__play::after{
content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.video-item__title{color:var(--hh-indigo);font-weight:600;font-size:.95rem;}
/* Eerste video groot (zoals 'Afslank video tips' op happyhealthy.nl) */
.video-item--featured .video-item__link{flex-direction:column;align-items:stretch;gap:10px;}
.video-item--featured .video-item__thumb{flex:1 1 auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;}
.video-item--featured .video-item__title{font-size:1.05rem;}
/* Artikelen */
.home-articles{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;}
.articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.article-card{border:1px solid var(--hh-border);border-radius:16px;overflow:hidden;background:#fff;}
.article-card__media{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#eef0f2;}
.article-card__cover{position:absolute;inset:0;}
.article-card__category{
position:absolute;left:12px;bottom:12px;background:#fff;color:var(--hh-indigo);
font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:8px;
}
.article-card__body{padding:18px;}
.article-card__meta{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--hh-muted);margin-bottom:10px;}
.article-card__meta img{border-radius:50%;}
.article-card__title{font-size:1.25rem;}
/* Blogindex (/blog/) + archieven (posts-grid): titels wat groter, richting een kop-formaat. */
.posts-grid .article-card__title{font-size:1.5rem;line-height:1.25;}
.article-card__title a{color:var(--hh-indigo);}
.article-card__excerpt{color:var(--hh-muted);font-size:1.01rem;}
.top-articles{display:grid;gap:14px;}
.top-article{display:block;background:#fff;border:1px solid var(--hh-border);border-radius:14px;padding:16px;}
.top-article:hover{box-shadow:var(--hh-shadow);text-decoration:none;}
.top-article__label{
display:inline-block;background:var(--hh-amber);color:#1f1866;font-size:.72rem;
font-weight:700;padding:2px 8px;border-radius:6px;margin-bottom:6px;
}
.top-article__title{font-size:1rem;color:var(--hh-indigo);margin:0 0 4px;}
.top-article__excerpt{color:var(--hh-muted);font-size:.88rem;margin-bottom:10px;}
.top-article__footer{display:flex;justify-content:space-between;font-size:.8rem;color:var(--hh-muted);}
.top-article__category{color:var(--hh-mint-dark);font-weight:600;}
/* Over mij */
.home-about{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center;max-width:920px;margin:64px auto;}
/* Foto nooit groter dan de echte afbeelding (oscar-helm-profielfoto.png = 200x200) */
.home-about__media img{width:100%;max-width:200px;height:auto;border-radius:20px;display:block;}
.home-about__function{color:var(--hh-muted);font-weight:600;display:block;margin-bottom:12px;}
.home-about__text{color:var(--hh-ink);margin-bottom:20px;}
.home-about__text p{margin:0 0 1em;}
@media (max-width:768px){.home-about{grid-template-columns:1fr;gap:24px;text-align:center;}.home-about__media img{max-width:200px;margin:0 auto;}}
/* Auteurspagina */
.author-header{display:flex;gap:36px;align-items:flex-start;margin:20px 0 44px;}
.author-header__media{flex:0 0 200px;}
.author-header__avatar{width:200px;height:200px;border-radius:20px;object-fit:cover;display:block;}
.author-header__name{margin-bottom:4px;}
.author-header__function{color:var(--hh-muted);font-weight:600;display:block;margin-bottom:14px;}
.author-header__bio{color:var(--hh-ink);}
.author-header__bio p{margin:0 0 1em;}
.author-posts-title{margin:0 0 22px;}
@media (max-width:640px){
.author-header{flex-direction:column;gap:20px;align-items:flex-start;}
.author-header__media{flex:0 0 auto;}
.author-header__avatar{width:150px;height:150px;}
}
/* Klaar om te beginnen (CTA) */
/* Groene CTA-stijl variant van de Toonaangevend-box (alleen /new/, om te vergelijken) */
.home-authority--cta{background:var(--hh-forest);border-color:var(--hh-forest-2);color:#fff;margin-top:28px;}
.home-authority--cta .home-authority__title{color:var(--hh-gold);}
.home-authority--cta .home-authority__label{color:#fff;}
.home-authority--cta .home-authority__photo figcaption{color:rgba(255,255,255,.82);}
.home-cta{background:var(--hh-forest);color:#fff;border-radius:24px;padding:52px 40px 42px;text-align:center;margin:48px 0 0;}
.home-cta__title{color:var(--hh-gold);font-size:2rem;margin-bottom:12px;}
.home-cta__text{color:rgba(255,255,255,.88);max-width:640px;margin:0 auto 26px;font-size:1.08rem;line-height:1.6;}
@media (max-width:900px){.home-cta{padding:36px 22px;}.home-cta__title{font-size:1.6rem;}}
@media (max-width:900px){
.home-book,.highlight-large,.highlight-small-grid,
.home-reviews-videos,.home-articles,.articles-grid,.reviews-list--video{
grid-template-columns:1fr;
}
.home-book{padding:24px;}
.home-intro__title{font-size:1.9rem;}
}
/* ============================================================
HappyHealthy Calculators (plugin) - overrides vanuit thema
============================================================ */
/* Boxkleuren naar de merkgroenen */
.hh-box .hh-box__header{background-color:var(--hh-forest);}
.hh-box .hh-box__content{background-color:var(--hh-green-tint);}
/* Info-popups (Bootstrap-modals) verbergen tot je op de ?-info klikt.
Bootstrap-CSS/JS is bewust niet geladen; we regelen het zelf. */
.hh-element__info{cursor:pointer;}
.modal{display:none;}
.modal.hh-open{
display:block;position:fixed;inset:0;z-index:1000;
background:rgba(0,0,0,.5);overflow-y:auto;padding:20px;
}
.modal.hh-open .modal-dialog{max-width:540px;margin:6vh auto;}
.modal.hh-open .modal-content{
background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;
}
.modal .modal-header{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 20px;background:var(--hh-forest);color:#fff;
}
.modal .modal-header .modal-title{margin:0;font-size:1.15rem;color:#fff;}
.modal .modal-header .close{
background:transparent;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.85;
}
.modal .modal-header .close:hover{opacity:1;}
.modal .modal-body{padding:20px;color:var(--hh-ink);}
.modal .modal-body a{color:var(--hh-mint-dark);}
.modal .modal-footer{padding:14px 20px;border-top:1px solid var(--hh-border);text-align:right;}
.modal .modal-footer .btn{
background:var(--hh-mint);color:#fff;border:0;border-radius:999px;padding:8px 20px;cursor:pointer;font-weight:700;
}
.modal .modal-footer .btn:hover{background:var(--hh-mint-dark);}
body.hh-modal-lock{overflow:hidden;}
/* Video-popup (YouTube-lightbox, o.a. voor de 'Afslank video tips'-links in de zijbalk) */
.hh-video-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.hh-video-modal.is-open{opacity:1;visibility:visible;}
.hh-video-modal__backdrop{position:absolute;inset:0;background:rgba(10,20,15,.82);}
.hh-video-modal__dialog{position:relative;z-index:1;width:min(920px,100%);}
.hh-video-modal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.hh-video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.hh-video-modal__close{position:absolute;top:-46px;right:-4px;width:40px;height:40px;padding:0;background:transparent;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;}
.hh-video-modal__close:hover{color:var(--hh-gold);}
@media (max-width:600px){.hh-video-modal{padding:14px;}.hh-video-modal__close{top:-40px;}}
/* ============================================================
Kolommen-shortcodes ([row] / [column width="one_half"])
============================================================ */
.hh-row{display:flex;flex-wrap:wrap;gap:24px;margin:1.2em 0;}
.hh-row > br{display:none;}
.hh-column{min-width:0;flex:1 1 100%;}
.hh-column--one_half{flex:0 1 calc(50% - 12px);}
.hh-column--one_third{flex:0 1 calc(33.333% - 16px);}
.hh-column--two_third{flex:0 1 calc(66.666% - 8px);}
.hh-column--one_fourth{flex:0 1 calc(25% - 18px);}
.hh-column--three_fourth{flex:0 1 calc(75% - 6px);}
.hh-column--one_full{flex:0 1 100%;}
.hh-column > :first-child{margin-top:0;}
@media (max-width:640px){
.hh-row{gap:16px;}
.hh-column{flex:1 1 100%;}
}
/* Weekmenu-/tabellayout: [row]/[column]-shortcodes in een callout renderen als
nette tabel. De content gebruikt per abuis 'one_full'-kolommen (elk 100%), die
anders stapelen; hier zetten we ze naast elkaar met koprij, zebra-striping en
celranden. Horizontaal scrollbaar op smalle schermen. */
.entry-content .hh-callout:has(.hh-row){overflow-x:auto;}
.entry-content .hh-callout .hh-row{
display:flex;flex-wrap:nowrap;gap:0;margin:0;min-width:540px;
border-bottom:1px solid #cfe0d7;
}
.entry-content .hh-callout .hh-row:last-child{border-bottom:0;}
.entry-content .hh-callout .hh-row .hh-column{
flex:1 1 0;min-width:0;padding:9px 12px;border-left:1px solid #cfe0d7;
}
.entry-content .hh-callout .hh-row .hh-column:first-child{border-left:0;}
/* Smalle eerste kolom (bv. 'Dagen') alleen bij bredere tabellen met 4+ kolommen
(het weekmenu). Tabellen met 2 kolommen (bv. de calorietabel Vrouwen|Mannen)
houden gelijke kolommen. */
.entry-content .hh-callout .hh-row:has(.hh-column:nth-child(4)) .hh-column:first-child{flex:0 0 96px;}
.entry-content .hh-callout .hh-row .hh-column p{margin:0;font-size:.95rem;line-height:1.4;}
.entry-content .hh-callout .hh-row:nth-of-type(even){background:rgba(255,255,255,.55);}
.entry-content .hh-callout .hh-row:first-child{background:var(--hh-forest);border-radius:8px 8px 0 0;}
.entry-content .hh-callout .hh-row:first-child .hh-column{border-left-color:rgba(255,255,255,.2);}
.entry-content .hh-callout .hh-row:first-child strong{color:#fff;}
.entry-content .hh-callout hr{display:none;}
.entry-content .hh-callout:has(.hh-row) p:empty{display:none;}
@media (max-width:640px){
/* Op mobiel: callout-tabellen met minder dan 4 kolommen (bv. de calorietabel
Vrouwen|Mannen) netjes stapelen; het bredere weekmenu (4 kolommen) blijft
horizontaal scrollbaar. */
.entry-content .hh-callout .hh-row:not(:has(.hh-column:nth-child(4))){min-width:0;flex-wrap:wrap;border-bottom:0;}
.entry-content .hh-callout .hh-row:not(:has(.hh-column:nth-child(4))) .hh-column{flex:1 1 100%;border-left:0;padding:6px 0;}
}
/* Highlight-box ([highlight color="..."]) in huisstijl: crème met gouden accent */
.entry-content .highlight_wrapper{
background:var(--hh-cream);border-left:4px solid var(--hh-gold);border-radius:14px;
padding:20px 24px;margin:1.4em 0;color:var(--hh-forest);
}
.entry-content .highlight_wrapper > :first-child{margin-top:0;}
.entry-content .highlight_wrapper > :last-child{margin-bottom:0;}
/* Wrapper rond ingevoegde promoties (happyhealthy-core promoties-module) */
.entry-content .hhcore-promo{clear:both;margin:1.8em 0;}
.entry-content .hhcore-promo > :first-child{margin-top:0;}
.entry-content .hhcore-promo > :last-child{margin-bottom:0;}
/* Herhaalde koptekst-promotie onder de reacties. Staat buiten .entry-content,
dus de artikel-styling (highlight-box, alinea-typografie, links) wordt hier
gericht overgenomen zodat het design gelijk is aan de promotie in het artikel. */
.hhcore-promo--repeat{clear:both;margin:2.4em 0 0;color:var(--hh-forest);}
.hhcore-promo--repeat > :first-child{margin-top:0;}
.hhcore-promo--repeat > :last-child{margin-bottom:0;}
.hhcore-promo--repeat p,.hhcore-promo--repeat li{font-size:1.08rem;line-height:1.75;color:var(--hh-forest);}
.hhcore-promo--repeat a{color:var(--hh-mint-dark);text-decoration:underline;}
.hhcore-promo--repeat .highlight_wrapper{
background:var(--hh-cream);border-left:4px solid var(--hh-gold);border-radius:14px;
padding:20px 24px;margin:1.4em 0;color:var(--hh-forest);
}
.hhcore-promo--repeat .highlight_wrapper > :first-child{margin-top:0;}
.hhcore-promo--repeat .highlight_wrapper > :last-child{margin-bottom:0;}
/* CTA-knop in promotieboxen: een losstaande link (alleen in zijn eigen alinea)
wordt een volle-breedte groene knop met pijl, voor meer nadruk en CTR. Inline-
links middenin een zin blijven gewone tekstlinks. Geldt voor de promotie in het
artikel én de herhaling onder de reacties. */
.entry-content .hhcore-promo p > a.hh-cta-btn,
.hhcore-promo--repeat p > a.hh-cta-btn{
display:block;text-align:center;background:#1e3d30 !important;color:#fff !important;
font-weight:600;text-decoration:none;padding:13px 22px;border-radius:10px;
margin-top:4px;transition:background .15s ease,transform .15s ease;
}
.entry-content .hhcore-promo p > a.hh-cta-btn::after,
.hhcore-promo--repeat p > a.hh-cta-btn::after{content:" \2192";}
.entry-content .hhcore-promo p > a.hh-cta-btn:hover,
.hhcore-promo--repeat p > a.hh-cta-btn:hover{background:#2d5a47 !important;transform:translateY(-1px);}
/* Introtekst bovenaan een artikel (~10% groter dan de bodytekst).
Alleen de directe alinea's; tekst in een shortcode-box ([highlight] e.d.)
zit genest en blijft daardoor op normale grootte. */
.entry-content .entry-intro{line-height:1.7;color:var(--hh-forest);margin-bottom:1.4em;}
.entry-content .entry-intro > p{font-size:1.2rem;line-height:1.7;margin:0 0 .8em;}
.entry-content .entry-intro > p:last-child{margin-bottom:0;}
/* WP-adminbalk niet over de sticky header laten vallen (ingelogd) */
.admin-bar .site-header{top:32px;}
@media (max-width:782px){.admin-bar .site-header{top:46px;}}
/* Ankerlinks (#comments, kopjes) niet onder de sticky header laten landen */
/* Anker-navigatie: offset onder de sticky header (header 133px desktop / 64px mobiel),
werkt voor alle #anchors incl. smooth-scroll. Deze waarde is de bron voor de
ankerafhandeling in assets/js/navigation.js; pas ze samen aan. */
html{scroll-padding-top:148px;}
@media (max-width:900px){html{scroll-padding-top:80px;}}
html:has(body.admin-bar){scroll-padding-top:180px;}
@media (max-width:900px){html:has(body.admin-bar){scroll-padding-top:126px;}}
/* reCAPTCHA v3-badge verbergen op alle toestellen. */
.grecaptcha-badge{visibility:hidden !important;}
/* Deelknoppen (alleen blogposts) */
.share-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 26px;}
.share-buttons__label{font-weight:700;color:var(--hh-forest);margin-right:2px;}
.share-button{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;color:#fff;flex:none;
transition:transform .12s ease,opacity .12s ease;
}
.share-button:hover{transform:translateY(-2px);opacity:.92;color:#fff;text-decoration:none;}
.share-button--facebook{background:#1877f2;}
.share-button--x{background:#000;}
.share-button--whatsapp{background:#25d366;}
.share-button--pinterest{background:#e60023;}
.share-button--email{background:var(--hh-mint-dark);}
/* Deel-plaatsing: mobiel = horizontale rij onderaan het artikel; desktop = zwevende kolom naast het artikel */
.share-rail{display:none;}
.share-bottom{margin-top:32px;}
.share-bottom .share-buttons{margin:0;}
@media (min-width:1080px){
.entry-body{position:relative;}
.share-bottom{display:none;}
.share-rail{display:block;position:absolute;top:0;left:-72px;height:100%;}
.share-rail .share-buttons{position:sticky;top:150px;flex-direction:column;align-items:center;gap:10px;margin:0;}
.share-rail .share-buttons__label{display:none;}
.admin-bar .share-rail .share-buttons{top:182px;}
}
/* ============================================================
Productenpagina: compacte kaarten (afbeelding boven, tekst eronder)
============================================================ */
.products-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.products-group-title{grid-column:1/-1;font-size:1.5rem;color:var(--hh-forest);font-family:var(--hh-font-head);margin:20px 0 -6px;}
.products-list > .products-group-title:first-child{margin-top:0;}
.product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hh-border);border-radius:18px;overflow:hidden;}
.product-card__media{position:relative;background:var(--hh-green-tint);padding:26px;text-align:center;}
.product-card__media img{max-height:190px;width:auto;max-width:100%;object-fit:contain;display:inline-block;}
.product-card__label{position:absolute;top:14px;left:14px;background:var(--hh-gold);color:#1a1a1a;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;}
.product-card__body{display:flex;flex-direction:column;flex:1;padding:22px 24px;}
.product-card__title{font-size:1.25rem;margin:0 0 6px;color:var(--hh-forest);}
.product-card__meta{font-size:.85rem;color:var(--hh-muted);font-weight:600;margin:0 0 12px;}
.product-card__desc{color:var(--hh-ink);font-size:.95rem;line-height:1.6;margin-bottom:14px;}
.product-card__desc p{margin:0 0 .7em;}
.product-card__desc p:last-child{margin-bottom:0;}
.product-card__usps{margin-bottom:16px;}
.product-card__usps-title{display:block;font-weight:700;color:var(--hh-forest);margin-bottom:8px;font-size:.95rem;}
.product-card__usps ul{list-style:none;margin:0;padding:0;}
.product-card__usps li{position:relative;padding-left:26px;margin-bottom:8px;font-size:.92rem;line-height:1.4;color:var(--hh-ink);}
.product-card__usps li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;background-color:var(--hh-mint);
-webkit-mask:url("data:image/svg+xml,") center/contain no-repeat;
mask:url("data:image/svg+xml,") center/contain no-repeat;}
.product-card__cta{margin-top:auto;align-self:flex-start;}
@media (max-width:768px){.products-list{grid-template-columns:1fr;}}
/* ============================================================
/new/ experimenteer-pagina
============================================================ */
/* Alle secties in een box (behalve de intro bovenaan), kopjes gecentreerd */
.home-boxed > section:not(.home-intro){background:#fff;border:1px solid var(--hh-green-tint);border-radius:24px;padding:48px;margin:0 0 32px;box-shadow:0 8px 26px rgba(30,61,48,.06);}
.home-boxed > section:last-child{margin-bottom:0;}
.home-boxed .home-intro{text-align:center;margin:44px auto 32px;}
.home-boxed .interest-picker{text-align:center;}
/* Over mij op volledige box-breedte (i.p.v. de smallere 920px) */
.home-boxed .home-about{max-width:none;margin:0;}
.home-boxed .section-head{text-align:center;align-items:center;}
.home-boxed .home-books__intro{text-align:center;}
@media (max-width:768px){.home-boxed > section{padding:26px 18px;}}
/* ---- /new2/ : secties als volle-breedte, licht-gekleurde banden (geen boxen) ---- */
.home-striped > section{position:relative;margin:0;padding:64px 0;}
/* Hero-band iets minder toploop zodat de titel op dezelfde hoogte staat als /new/ en / */
.home-striped > section:first-child{padding-top:44px;}
/* Volle-breedte kleurband achter elke sectie (breekt uit de container) */
.home-striped > section::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;}
/* Afwisselend #FDF8F3 (start) en wit, om en om */
.home-striped > section:nth-of-type(odd)::before{background:#FDF8F3;}
.home-striped > section:nth-of-type(even)::before{background:#ffffff;}
/* Eerste/laatste band 40px laten doorlopen: geen losse witte strook boven de hero of onder 'Over mij' */
.home-striped > section:first-child::before{top:-40px;}
.home-striped > section:last-child::before{bottom:-40px;}
/* Autoriteitssectie: box-styling weghalen, maar de band-padding (64px) behouden zodat de titel niet tegen de rand plakt */
.home-striped .home-authority{background:transparent;border:0;box-shadow:none;}
/* Tekst-alinea niet meer in het creme kadertje op de gekleurde band */
.home-striped .home-authority__text{background:transparent;border-left:0;border-radius:0;padding:0;text-align:center;max-width:760px;}
/* Koppen centreren, over-mij gecentreerd binnen de band */
.home-striped .home-intro{text-align:center;margin:0 auto;}
.home-striped .interest-picker{text-align:center;}
.home-striped .home-about{margin-inline:auto;}
.home-striped .section-head{text-align:center;align-items:center;}
.home-striped .home-books__intro{text-align:center;}
@media (max-width:768px){.home-striped > section{padding:44px 0;}}
/* Interesse-tegels duidelijker klikbaar maken (Bekijk-pijl) */
.interest-card__cta{margin-top:6px;color:var(--hh-mint-dark);font-weight:700;font-size:.85rem;opacity:.9;transition:transform .15s ease,opacity .15s ease;}
.interest-card:hover .interest-card__cta{transform:translateX(3px);opacity:1;}
/* Interesse-kiezer (topic-tegels) */
.interest-picker{text-align:center;margin-bottom:56px;}
.interest-picker__title{font-size:1.75rem;color:var(--hh-forest);margin:0 0 6px;}
.interest-picker__intro{color:var(--hh-muted);margin:0 auto 28px;max-width:600px;}
.interest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:860px;margin:0 auto;}
.interest-card{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:#fff;border:1px solid var(--hh-green-tint);border-radius:16px;padding:24px 14px;min-height:130px;
color:var(--hh-forest);text-align:center;font-weight:700;
box-shadow:0 2px 8px rgba(30,61,48,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.interest-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(30,61,48,.12);border-color:var(--hh-mint);text-decoration:none;color:var(--hh-forest);}
.interest-card__icon{font-size:2rem;line-height:1;}
.interest-card__label{font-size:.95rem;line-height:1.25;}
@media (max-width:760px){.interest-grid{grid-template-columns:repeat(2,1fr);}}
/* 3 social-proof feiten naast elkaar */
.facts-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 auto 56px;}
.fact{background:#fff;border:1px solid var(--hh-green-tint);border-radius:16px;padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(30,61,48,.05);}
.fact__icon{width:46px;height:46px;border-radius:50%;background:var(--hh-mint);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
/* Aanklikbaar FB-icoon (link naar de Facebookpagina) */
a.fact__icon--fb{cursor:pointer;transition:background .15s ease,transform .15s ease;}
a.fact__icon--fb:hover{background:var(--hh-mint-dark);transform:translateY(-2px);}
.fact__icon svg{width:22px;height:22px;}
.fact__number{font-size:1.7rem;font-weight:800;color:var(--hh-forest);line-height:1;}
.fact__label{font-weight:700;color:var(--hh-forest);}
.fact__text{font-size:.9rem;color:var(--hh-muted);line-height:1.45;}
.fact__link{margin-top:6px;color:var(--hh-mint-dark);font-weight:700;font-size:.9rem;}
@media (max-width:700px){.facts-strip{grid-template-columns:1fr;}}
/* Secties op volledige breedte + 3-koloms artikelen + gecentreerde knoppen */
.home-reviews-videos--full{grid-template-columns:1fr;}
.home-articles--full{grid-template-columns:1fr;}
.articles-grid--three{grid-template-columns:repeat(3,1fr);}
.articles-grid--four{grid-template-columns:repeat(4,1fr);}
.home-reviews__footer,.home-articles__footer{text-align:center;margin-top:28px;}
@media (max-width:900px){.articles-grid--three{grid-template-columns:repeat(2,1fr);}.articles-grid--four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.articles-grid--three{grid-template-columns:1fr;}.articles-grid--four{grid-template-columns:1fr;}}
/* ============================================================
App reviews in Trustpilot-stijl (op de reviewspagina)
============================================================ */
.app-reviews{margin:8px 0 40px;}
.tp-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;}
.tp-brand__star{width:24px;height:24px;color:#00b67a;display:inline-flex;}
.tp-brand__star svg{width:100%;height:100%;display:block;}
.tp-brand__name{font-weight:700;color:#191919;font-size:1.05rem;font-family:var(--hh-font-body);}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tp-card{background:#fff;border:1px solid #e7e7ea;border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:10px;text-align:left;}
.tp-stars{display:flex;gap:3px;}
.tp-star{width:22px;height:22px;color:#dcdce6;display:inline-flex;}
.tp-star.is-on{color:#00b67a;}
.tp-star svg{width:100%;height:100%;display:block;}
.tp-card__title{font-size:1rem;font-weight:700;color:#191919;margin:0;font-family:var(--hh-font-body);line-height:1.35;}
.tp-card__text{font-size:.92rem;color:#4b4b4b;line-height:1.55;margin:0;flex:1;}
.tp-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.82rem;color:#6b6b6b;margin:0;}
.tp-card__name{font-weight:700;color:#191919;}
.tp-card__verified{display:inline-flex;align-items:center;gap:3px;color:#00b67a;font-weight:600;}
.tp-card__verified svg{color:#00b67a;}
.app-reviews__more{text-align:center;margin-top:20px;}
.app-reviews__more a{font-weight:700;}
/* CTA-box onder de app reviews: menu op maat */
.app-reviews__cta{margin:26px 0 0;text-align:center;background:var(--hh-green-tint);border:1px solid var(--hh-green-tint);border-radius:20px;padding:28px 24px;}
.app-reviews__cta-title{font-size:1.4rem;color:var(--hh-forest);margin:0 0 6px;font-family:var(--hh-font-head);}
.app-reviews__cta-text{color:var(--hh-forest);margin:0 auto 18px;max-width:520px;}
@media (max-width:1000px){.tp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tp-grid{grid-template-columns:1fr;}}
/* ============================================================
/claude/ homepage-variant : look & feel van mijn-keto-menu-aanbod
(warme creme basis, bos-groene pill-CTA's, zachte groen-accenten).
Alles is gescoped onder .home-claude zodat /new/, /new2/ en /new3/
ongemoeid blijven. Erft de volle-breedte banden van .home-striped.
============================================================ */
.home-claude{--hh-radius:18px;}
/* -- Banden: warme creme om en om met wit (zoals de keto-aanbodpagina) -- */
.home-claude.home-striped > section:nth-of-type(odd)::before{background:#fdf8f3;}
.home-claude.home-striped > section:nth-of-type(even)::before{background:#ffffff;}
/* Expliciete bandkleuren via een sectieklasse (wint op de nth-of-type-regels) */
.home-claude.home-striped > section.band-green::before{background:var(--hh-forest);}
.home-claude.home-striped > section.band-cream::before{background:#fdf8f3;}
.home-claude.home-striped > section.band-white::before{background:#ffffff;}
/* -- Pill-CTA's in bos-groen: de signatuur van de best converterende pagina -- */
.home-claude .button,
.home-claude .wp-block-button__link,
.home-claude input[type="submit"]{
background:var(--hh-forest-2);border-radius:999px;
box-shadow:0 8px 20px rgba(30,61,48,.16);
}
.home-claude .button:hover,
.home-claude .wp-block-button__link:hover,
.home-claude input[type="submit"]:hover{background:var(--hh-forest);}
.home-claude .button--big{border-radius:999px;}
/* Ghost-knop (secundair): witte pill met groene rand */
.home-claude .button--ghost{background:#fff;color:var(--hh-forest);border:2px solid var(--hh-forest-2);box-shadow:none;}
.home-claude .button--ghost:hover{background:var(--hh-green-tint);color:var(--hh-forest);}
/* Gouden knop: voor gebruik op de groene afsluitband */
.home-claude .button--gold{background:var(--hh-gold);color:#1e3d30;box-shadow:0 10px 26px rgba(0,0,0,.22);}
.home-claude .button--gold:hover{background:#f0c25f;color:#1e3d30;}
/* -- Hero -- */
.home-claude .home-hero{text-align:center;max-width:880px;margin:0 auto;padding:8px 0 56px;}
.home-hero__ribbon{
display:inline-flex;align-items:center;gap:9px;background:var(--hh-green-tint);color:var(--hh-forest);
font-weight:700;font-size:.92rem;line-height:1.4;padding:9px 20px;border-radius:999px;
margin:0 auto 24px;max-width:100%;
}
.home-hero__laurel{height:22px;width:auto;flex:none;}
.home-hero__stars{color:var(--hh-gold);margin-right:8px;letter-spacing:1px;}
.home-hero__title{font-size:2.75rem;line-height:1.14;color:var(--hh-forest);margin:0 0 18px;}
.home-hero__text{font-size:1.18rem;line-height:1.65;color:var(--hh-forest-ink);max-width:680px;margin:0 auto 30px;}
.home-hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media (max-width:600px){
.home-hero__title{font-size:2rem;}
.home-hero__text{font-size:1.06rem;}
.home-hero__actions{flex-direction:column;align-items:stretch;max-width:340px;margin:0 auto;}
.home-hero__actions .button{width:100%;text-align:center;}
}
/* -- Interesse-tegels: warmer, met korte belofte + 'Populair'-label -- */
.home-claude .interest-picker__title{font-size:1.9rem;}
.home-claude .interest-card{
position:relative;justify-content:flex-start;gap:8px;padding:26px 16px 22px;min-height:172px;
background:#fff;border:1px solid var(--hh-green-tint);
}
.home-claude .interest-card:hover{border-color:var(--hh-forest-2);box-shadow:0 12px 28px rgba(30,61,48,.14);}
.home-claude .interest-card__icon{font-size:2.15rem;}
.home-claude .interest-card__label{font-size:1.02rem;font-weight:800;color:var(--hh-forest);}
.interest-card__desc{font-size:.85rem;font-weight:500;color:var(--hh-muted);line-height:1.35;}
.home-claude .interest-card__cta{color:var(--hh-forest-2);margin-top:auto;}
/* -- Feiten/autoriteit: iconen in bos-groen i.p.v. mint (matcht de keto-look) -- */
.home-claude .fact{background:#fff;border-color:var(--hh-green-tint);}
.home-claude .fact__icon{background:var(--hh-forest-2);}
.home-claude a.fact__icon--fb:hover{background:var(--hh-forest);}
/* Award-badges met een zachtgroene rand */
.home-claude .award-badge{border-color:var(--hh-green-tint);}
/* -- Afsluitende CTA-band (groen) -- */
.home-claude .home-final-cta{text-align:center;color:#fff;}
.home-final-cta__title{color:var(--hh-gold);font-size:2rem;margin:0 0 12px;}
.home-final-cta__text{color:rgba(255,255,255,.9);font-size:1.12rem;line-height:1.6;max-width:600px;margin:0 auto 26px;}
@media (max-width:600px){.home-final-cta__title{font-size:1.6rem;}}
/* Witte strook boven de footer weg: de groene afsluitband loopt direct door
in de footer. Op /claude/ (oude body-class) en op de homepage (body.home,
die de claude2-indeling laadt). Alleen de front-page, zodat gewone pagina's
en posts hun normale footer-marge houden. */
body.hh-home-claude .site-content,
body.home .site-content{padding-bottom:0;}
body.hh-home-claude .site-footer,
body.home .site-footer{margin-top:0;}
/* ============================================================
Gedeelde 2-koloms hero (links tekst, rechts award-foto)
voor /new2-2/ en /claude2/.
============================================================ */
.home-hero2{display:flex;gap:44px;align-items:center;flex-wrap:wrap;text-align:left;}
.home-hero2__col{flex:1 1 440px;min-width:300px;}
.home-hero2__ribbon{display:inline-flex;align-items:center;gap:9px;background:var(--hh-green-tint);color:var(--hh-forest);font-weight:600;font-size:.9rem;line-height:1.4;padding:8px 18px;border-radius:999px;margin:0 0 20px;}
.home-hero2__laurel{height:22px;width:auto;flex:none;}
.home-hero2__stars{color:var(--hh-gold);margin-right:8px;letter-spacing:1px;}
.home-hero2__title{font-size:2.6rem;line-height:1.14;color:var(--hh-forest);margin:0 0 16px;}
.home-hero2__text{font-size:1.15rem;line-height:1.6;color:var(--hh-forest-ink);max-width:54ch;margin:0 0 26px;}
.home-hero2__actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.home-hero2__figure{flex:1 1 360px;min-width:280px;max-width:480px;margin:0;}
.home-hero2__figure img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 32px rgba(28,42,24,.18);display:block;}
.home-hero2__figure figcaption{font-size:.85rem;color:var(--hh-muted);margin-top:10px;text-align:center;}
@media (max-width:768px){
.home-hero2__title{font-size:2rem;}
.home-hero2__actions{max-width:360px;}
.home-hero2__actions .button{width:100%;text-align:center;}
}
/* Ghost-knop voor de mint-thema-context (/new2-2/, buiten .home-claude) */
.button--ghost2{background:#fff;color:var(--hh-forest);border:2px solid var(--hh-mint);box-shadow:none;}
.button--ghost2:hover{background:var(--hh-green-tint);color:var(--hh-forest);}
/* ============================================================
/claude2/ : keto-aanbod skin (bovenop .home-claude) voor de
redesign-layout: donkere autoriteitskaart, productcovers, quotes.
============================================================ */
.home-claude2 .hh2-sec-head{text-align:center;margin-bottom:28px;}
.home-claude2 .hh2-sec-head h2{margin:0 0 8px;font-size:clamp(1.6rem,3.4vw,2.1rem);color:var(--hh-forest);}
.home-claude2 .hh2-sec-head p{color:var(--hh-muted);font-size:1.05rem;margin:0;}
.home-claude2 .hh2-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;text-align:left;}
.home-claude2 .hh2-head-row h2{margin:0;font-size:clamp(1.5rem,3vw,1.9rem);color:var(--hh-forest);}
.home-claude2 .hh2-head-row a{font-weight:700;flex:none;color:var(--hh-forest-2);}
/* Onderwerpen: horizontale tegels met korte call-to-action */
.home-claude2 .hh2-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;max-width:960px;margin:0 auto;}
.home-claude2 .hh2-topic{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--hh-green-tint);border-radius:14px;padding:16px 18px;color:var(--hh-forest);box-shadow:0 2px 8px rgba(30,61,48,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.home-claude2 .hh2-topic:hover{border-color:var(--hh-forest-2);box-shadow:0 10px 22px rgba(30,61,48,.14);text-decoration:none;color:var(--hh-forest);transform:translateY(-2px);}
.home-claude2 .hh2-topic__icon{font-size:26px;flex:none;line-height:1;}
.home-claude2 .hh2-topic__name{font-family:var(--hh-font-head);font-weight:700;font-size:1.05rem;color:var(--hh-forest);display:block;}
.home-claude2 .hh2-topic__cta{font-size:.85rem;color:var(--hh-forest-2);font-weight:700;}
/* Variant: onderwerptegels met een consistente lijn-iconenset (advies) */
.home-claude2 .hh2v-topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;max-width:960px;margin:0 auto;}
.home-claude2 .hh2v-topic{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--hh-green-tint);border-radius:14px;padding:14px 18px;color:var(--hh-forest);box-shadow:0 2px 8px rgba(30,61,48,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.home-claude2 .hh2v-topic:hover{border-color:var(--hh-forest-2);box-shadow:0 10px 22px rgba(30,61,48,.14);text-decoration:none;color:var(--hh-forest);transform:translateY(-2px);}
.home-claude2 .hh2v-topic__ico{flex:none;width:54px;height:54px;border-radius:14px;background:var(--hh-green-tint);color:var(--hh-forest);display:flex;align-items:center;justify-content:center;}
.home-claude2 .hh2v-topic__ico svg{width:32px;height:32px;display:block;}
.home-claude2 .hh2v-topic__name{font-family:var(--hh-font-head);font-weight:700;font-size:1.05rem;color:var(--hh-forest);display:block;}
.home-claude2 .hh2v-topic__cta{font-size:.85rem;color:var(--hh-forest-2);font-weight:700;}
/* Variant 3 (minder groen): dun omlijnd rond icoon, neutraal i.p.v. gevulde groene tegel. */
.home-claude2 .hh3v-topic__ico{background:#fff;border:1.5px solid var(--hh-green-tint);border-radius:50%;color:var(--hh-forest-2);width:52px;height:52px;}
.home-claude2 .hh3v-topic:hover .hh3v-topic__ico{border-color:var(--hh-forest-2);}
/* Variant 4 (goud-accent): icoon in warme goud-tint tegel op witte kaart. */
.home-claude2 .hh4v-topic__ico{background:#faf1da;color:#c79320;border-radius:14px;}
/* Hero op /claude2/ bovenaan uitlijnen: lint op dezelfde hoogte als de fototop */
.home-claude2 .home-hero2{align-items:flex-start;}
/* Knoppen op /claude2/ volgen /claude/: bos-groen (primair) + goud (afsluit-CTA).
Geen aparte kleur meer nodig; .home-claude levert dit al. */
/* Hero-lint op mobiel: pil rond de tekst (geen band), maar de lettergrootte
schaalt met de schermbreedte zodat de tekst de max. breedte benut op 1 regel */
@media (max-width:600px){
.home-hero2__ribbon{display:flex;width:100%;box-sizing:border-box;justify-content:center;text-align:center;margin:0 0 20px;border-radius:999px;white-space:nowrap;font-size:clamp(.74rem, 3.4vw, 1.05rem);padding:10px 14px;gap:8px;letter-spacing:0;}
.home-hero2__laurel{height:17px;}
}
/* Autoriteit: volle-breedte groene band (geen losse kaart), tekst op containerbreedte */
.home-claude2 .hh2-authority{background:transparent;border-radius:0;padding:0;color:#eaf1ed;text-align:left;max-width:none;margin:0;}
.home-claude2 .hh2-authority h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.1rem);margin:0 0 8px;}
.home-claude2 .hh2-authority__lead{color:#c4d4b8;font-size:1.05rem;max-width:none;margin:0 0 28px;}
.home-claude2 .hh2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin-bottom:30px;}
.home-claude2 .hh2-stat__num{font-family:var(--hh-font-head);font-weight:800;font-size:1.9rem;color:var(--hh-gold);display:block;line-height:1;}
.home-claude2 .hh2-stat__label{font-size:.9rem;color:#c4d4b8;}
.home-claude2 .hh2-known{display:flex;align-items:center;gap:18px 28px;flex-wrap:wrap;background:#fff;border-radius:14px;padding:16px 24px;}
.home-claude2 .hh2-known__label{font-family:var(--hh-font-head);font-weight:700;font-size:.85rem;color:var(--hh-muted);letter-spacing:.04em;text-transform:uppercase;}
.home-claude2 .hh2-known img{width:auto;}
.home-claude2 .hh2-award-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;}
.home-claude2 .hh2-award-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hh-gold);border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:700;color:#fff;}
.home-claude2 .hh2-award-pill img{height:19px;width:auto;}
.home-claude2 .hh2-award-note{font-size:1rem;color:#c4d4b8;}
@media (max-width:600px){
.home-claude2 .hh2-award-pill{font-size:1.05rem;padding:9px 17px;}
.home-claude2 .hh2-award-pill img{height:21px;}
.home-claude2 .hh2-award-note{font-size:1.05rem;width:100%;}
}
/* Lichte (creme) variant van de autoriteitskaart, ter vergelijking (new2-stijl) */
.home-claude2 .hh2-authority--light{color:var(--hh-forest);text-align:center;}
.home-claude2 .hh2-authority--light h2{color:var(--hh-forest);}
.home-claude2 .hh2-authority--light .hh2-authority__lead{color:var(--hh-muted);margin-left:auto;margin-right:auto;}
/* Statistieken elk in een wit boxje */
.home-claude2 .hh2-authority--light .hh2-stats{max-width:920px;margin:0 auto 34px;}
.home-claude2 .hh2-authority--light .hh2-stat{background:#fff;border:1px solid var(--hh-green-tint);border-radius:16px;padding:20px 14px;box-shadow:0 2px 8px rgba(30,61,48,.05);align-items:center;text-align:center;}
.home-claude2 .hh2-authority--light .hh2-stat__num{color:var(--hh-forest-2);}
.home-claude2 .hh2-authority--light .hh2-stat__label{color:var(--hh-muted);}
/* 'Bekend van' + award-tekst + jaar-vakken (new2-stijl) */
.home-claude2 .hh2-authority--light .media-logos{margin-bottom:34px;}
/* Jaar-pillen even groot als in de donkergroene sectie (erven de maat van .hh2-award-pill);
alleen kleuren wijken af (witte box, bos-groene rand/tekst) en de rij is gecentreerd */
.home-claude2 .hh2-authority--light .hh2-award-row--light{justify-content:center;}
.home-claude2 .hh2-authority--light .hh2-award-pill{background:#fff;border-color:var(--hh-forest-2);color:var(--hh-forest);}
/* Mobiel: minder creme-ruimte tussen de header en de hero. Nu de hh-home-claude2
body-class sitebreed is (nav + knopkleur), beperken we dit tot de hero-homepage
zelf (site-content met daarin de .homepage-container), zodat gewone pagina's
hun normale bovenmarge houden. */
@media (max-width:768px){
body.hh-home-claude2 .site-content:has(> .homepage){padding-top:0;}
.home-claude2.home-striped > section:first-child{padding-top:22px;}
}
/* Producten: 6 covers naast elkaar, volle containerbreedte */
.home-claude2 .hh2-product-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:none;margin:0 auto;}
.home-claude2 .hh2-product{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--hh-green-tint);border-radius:16px;padding:16px;color:var(--hh-forest);flex:0 0 auto;width:184px;}
@media (max-width:900px){.home-claude2 .hh2-product{width:200px;}}
@media (max-width:520px){.home-claude2 .hh2-product{width:calc(50% - 8px);}}
.home-claude2 .hh2-product:hover{border-color:var(--hh-forest-2);box-shadow:0 8px 20px rgba(30,61,48,.14);text-decoration:none;color:var(--hh-forest);}
.home-claude2 .hh2-product__media{position:relative;display:block;}
.home-claude2 .hh2-product__media img{width:100%;height:170px;object-fit:contain;display:block;}
.home-claude2 .hh2-product__badge{position:absolute;top:-6px;left:-6px;background:var(--hh-gold);color:#1e3d30;font-size:.68rem;font-weight:800;border-radius:999px;padding:3px 10px;}
.home-claude2 .hh2-product__name{font-family:var(--hh-font-head);font-weight:700;font-size:1rem;line-height:1.3;color:var(--hh-forest);}
.home-claude2 .hh2-product__sub{font-size:.85rem;color:var(--hh-ink);font-weight:400;display:inline-block;margin-top:2px;}
.home-claude2 .hh2-product__meta{font-size:.8rem;color:var(--hh-muted);}
.home-claude2 .hh2-product__try{font-size:.85rem;color:var(--hh-forest-2);font-weight:700;margin-top:2px;}
/* Succesverhalen: video's + quotes */
.home-claude2 .hh2-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.home-claude2 .hh2-video{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:var(--hh-forest);}
.home-claude2 .hh2-quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px;}
.home-claude2 .hh2-quote{background:#fff;border:1px solid var(--hh-green-tint);border-radius:14px;padding:20px;margin:0;display:flex;flex-direction:column;gap:10px;}
.home-claude2 .hh2-quote__stars{color:var(--hh-gold);font-size:15px;letter-spacing:2px;}
.home-claude2 .hh2-quote blockquote{margin:0;font-size:1rem;line-height:1.55;color:var(--hh-ink);}
.home-claude2 .hh2-quote figcaption{font-size:.9rem;font-weight:700;color:var(--hh-muted);}
.home-claude2 .hh2-quote figcaption span{color:var(--hh-forest-2);}
/* Over Oscar: geen witte box, op de creme band */
.home-claude2 .hh2-about{display:flex;gap:36px;align-items:center;flex-wrap:wrap;background:transparent;border:0;padding:0;max-width:1000px;margin:0 auto;text-align:left;}
.home-claude2 .hh2-about__photo{width:200px;height:auto;flex:none;margin:0 auto;border-radius:16px;}
.home-claude2 .hh2-about__body{flex:1 1 380px;min-width:280px;}
.home-claude2 .hh2-about__body h2{margin:0 0 6px;font-size:clamp(1.5rem,3vw,1.9rem);}
.home-claude2 .hh2-about__role{margin:0 0 14px;font-size:.98rem;font-weight:700;color:var(--hh-forest-2);}
.home-claude2 .hh2-about__text{margin:0 0 16px;font-size:1rem;line-height:1.65;color:var(--hh-ink);}