/* ==========================================================================
   HUTT ROSSUM — basis & chrome (schoon, voor het Wolweide-thema)
   Tokens, typografie, knoppen, topbar/nav/mobiel menu, footer.
   ========================================================================== */
/* ---------- Gilroy (huisstijl-lettertype) ----------
   Echte Gilroy wordt via @font-face geladen uit assets/fonts/.
   Montserrat blijft als web-safe fallback geladen (zie class-assets.php),
   zodat de site correct rendert zolang de gelicentieerde Gilroy-bestanden
   nog niet in assets/fonts/ staan. Zie assets/fonts/LEESMIJ-GILROY.txt. */
@font-face{
  font-family:'Gilroy';
  src:url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gilroy';
  src:url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gilroy';
  src:url('../fonts/Gilroy-Bold.woff2') format('woff2');
  /* gewicht 600 (SemiBold) valt automatisch terug op deze 700 (zelfde familie) */
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  /* Titels: de schuine (italic) serif-kop uit het oude ontwerp (Newsreader),
     hergebruikt op verzoek. Body/UI: Gilroy (met Montserrat als fallback). */
  --font-display:'Newsreader', Georgia, serif;
  --font-body:'Gilroy', 'Montserrat', system-ui, sans-serif;

  --brown:#785235;
  --brown-deep:#3b2a25;
  --brown-darker:#292524;
  --brown-soft:#a3805f;
  --paper:#f3ead8;
  --paper-warm:#ece0c6;
  --paper-soft:#f7f1e3;
  --ink:#1d1612;
  --ink-soft:#4a3a31;
  --muted:#7c6657;
  --line:rgba(59,42,37,0.16);
  --line-strong:rgba(59,42,37,0.42);
  --green:#5d6a3d;

  --bg:var(--paper);
  --bg-warm:var(--paper-warm);
  --bg-soft:var(--paper-soft);
  --bg-deep:var(--brown-deep);
  --bg-darker:var(--brown-darker);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --display:var(--brown-deep);
  --accent:var(--brown);
  --accent-soft:var(--brown-soft);
  --on-deep-soft:#e9d9b9;

  --max:1440px;
  --gutter:clamp(22px,4.6vw,84px);
  --r:6px;
  --r-lg:14px;
  --space-section:clamp(96px,11vw,184px);
  --space-block:clamp(48px,6vw,104px);

  --ease-out:cubic-bezier(.16,.84,.32,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-expo:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:var(--paper); }
h1,h2,h3,h4{ margin:0; color:var(--display); line-height:1.04; letter-spacing:-.018em; }
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.serif{ font-family:var(--font-display); font-style:italic; }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; }
/* Anchor-navigatie: sectiekop niet onder de sticky nav laten verdwijnen. */
[id]{ scroll-margin-top:96px; }

/* shared italic-serif heading used by aanbod/detail */
.statement-h{ font-family:var(--font-display); font-style:italic; font-weight:400; line-height:1; letter-spacing:-.022em; color:var(--display); margin:0; text-wrap:balance; }

/* ---------- Buttons ---------- */
.btn{
  --bg-btn:var(--brown-deep); --fg-btn:var(--paper);
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border-radius:999px;
  background:var(--bg-btn); color:var(--fg-btn); border:1px solid var(--bg-btn);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease-out), transform .35s var(--ease-out), border-color .4s;
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:translateY(101%); transition:transform .5s var(--ease-expo); }
.btn:hover{ transform:translateY(-2px); border-color:var(--accent); }
.btn:hover::after{ transform:translateY(0); }
.btn.ghost{ --bg-btn:transparent; --fg-btn:var(--display); border-color:var(--line-strong); }
.btn.ghost:hover{ color:var(--paper); }
.btn.light{ --bg-btn:var(--paper); --fg-btn:var(--brown-deep); border-color:var(--paper); }
.btn .arrow{ width:18px; height:10px; position:relative; display:inline-block; }
.btn .arrow::before{ content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
  transition:transform .4s var(--ease-out); }
.btn:hover .arrow::before{ transform:translateX(4px); }

.link{ display:inline-flex; align-items:center; gap:14px; font-weight:600; color:var(--display); position:relative; padding-bottom:5px; }
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(1); transform-origin:right; transition:transform .5s var(--ease-expo); }
.link:hover::after{ transform:scaleX(0); transform-origin:left; }
.link .arrow{ width:18px; height:10px; position:relative; }
.link .arrow::before{ content:""; position:absolute; inset:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'><path d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5'/></svg>") no-repeat center/contain; }

/* image frame (rounded, no animation) */
.frame{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--brown-deep); }
.frame .pic{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:80; }

/* ---------- Topbar ---------- */
.topbar{ background:var(--bg-darker); color:var(--on-deep-soft); font-size:12px; letter-spacing:.04em; position:relative; z-index:60; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:11px var(--gutter); }
.topbar .left,.topbar .right{ display:flex; gap:22px; align-items:center; }
.topbar a:hover{ color:var(--paper); }
/* Groter tapvlak op touch zonder de balk hoger te maken. */
.topbar a{ display:inline-block; padding:8px 0; margin:-8px 0; }
@media (max-width:640px){
  .topbar .wrap{ justify-content:center; gap:0; }
  .topbar .right{ display:none; }
  .topbar .left{ width:100%; justify-content:center; gap:0; }
  .topbar .left .hide-sm{ display:none; }
  .topbar .tb-key{ text-align:center; }
}

/* ---------- Nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line); transition:background .5s, box-shadow .5s; }
.nav.shrunk{ box-shadow:0 10px 40px -28px rgba(37,25,21,.5); }
.nav .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:18px var(--gutter); transition:padding .4s var(--ease-soft); }
.nav.shrunk .wrap{ padding-top:13px; padding-bottom:13px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:40px; width:auto; transition:height .4s; }
.nav.shrunk .brand img{ height:34px; }
.brand .tag{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); padding-left:14px; border-left:1px solid var(--line); }
.nav-links{ display:flex; justify-content:center; gap:30px; font-size:13.5px; font-weight:500; color:var(--display); }
.nav-links a{ position:relative; padding:6px 2px; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--accent); }
.nav-cta{ display:flex; justify-content:flex-end; gap:12px; align-items:center; }
.nav-cta .btn{ padding:12px 22px; }
.nav-cta .btn:hover{ color:#fff; }
.menu-toggle{ display:none; }

/* ---------- Mobile menu ---------- */
.menu-toggle{ width:46px; height:46px; border:1px solid var(--line-strong); border-radius:999px; background:transparent; position:relative; }
.menu-toggle span{ position:absolute; left:12px; right:12px; height:1.5px; background:var(--display); transition:transform .3s,opacity .3s; }
.menu-toggle span:nth-child(1){ top:18px; } .menu-toggle span:nth-child(2){ top:26px; }
.menu-toggle.open span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* z-index boven de cookiebanner (200); safe-area voor de home-indicator;
   overscroll-behavior voorkomt scroll-doorketening naar de pagina. */
.mobile-menu{ position:fixed; inset:0; z-index:300; background:var(--brown-deep); color:var(--paper); transform:translateY(-100%); transition:transform .6s var(--ease-expo); padding:18px var(--gutter) calc(36px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:48px; margin-bottom:14px; flex:none; }
.mm-logo{ height:34px; width:auto; filter:brightness(0) invert(.86) sepia(.5) saturate(.7); }
.mm-close{ width:48px; height:48px; flex:none; border-radius:999px; border:1px solid rgba(243,234,216,.32); background:transparent; position:relative; display:grid; place-items:center; transition:background .3s,border-color .3s; }
.mm-close:hover{ background:rgba(243,234,216,.08); }
.mm-close span{ position:absolute; left:50%; top:50%; width:18px; height:1.6px; background:var(--paper); }
.mm-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.mm-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
.mobile-menu .links{ display:flex; flex-direction:column; flex:1; justify-content:center; }
.mobile-menu .links a{ font-family:var(--font-display); font-style:italic; font-size:clamp(28px,7.6vw,46px); padding:11px 0; border-bottom:1px solid rgba(243,234,216,.12); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu .links a:last-child{ border-bottom:0; }
.mobile-menu .links a .ar{ font-size:18px; color:rgba(243,234,216,.4); font-style:normal; font-family:var(--font-body); }
.mobile-menu .foot{ padding-top:24px; border-top:1px solid rgba(243,234,216,.15); display:grid; gap:6px; font-size:13.5px; color:#d6c8b1; flex:none; }
.mobile-menu .foot a{ color:var(--paper); }
.mobile-menu .foot .label{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(243,234,216,.5); font-weight:700; margin-bottom:10px; }
body.menu-open{ overflow:hidden; }

/* ---------- Footer ----------
   Donkere footer exact zoals in het Claude-handoff-ontwerp (#251915). */
.site-footer{ background:#251915; color:#c4ad88; padding:clamp(80px,9vw,120px) 0 30px; font-size:14px; border-top:1px solid rgba(236,225,204,.12); }
.site-footer .wrap{ display:grid; grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr)); gap:clamp(40px,5vw,72px); }
.site-footer ul a{ overflow-wrap:anywhere; }
.site-footer h4{ color:#ece1cc; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:22px; margin-bottom:18px; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.site-footer a:hover{ color:var(--paper); }
.site-footer .logoftr{ height:54px; width:auto; filter:brightness(0) invert(.82) sepia(.6) saturate(.7); margin-bottom:18px; }
.site-footer .brand-col p{ color:#b09a78; max-width:36ch; line-height:1.65; }
.site-footer .legal{ margin-top:clamp(56px,7vw,88px); padding-top:28px; grid-column:1/-1; border-top:1px solid rgba(236,225,204,.15); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:12px; color:#98856c; gap:16px; letter-spacing:.06em; }
.site-footer .legal .legal-copy{ justify-self:start; }
.site-footer .legal .legal-links{ justify-self:center; display:inline-flex; gap:10px; align-items:center; }
.site-footer .legal .legal-links a{ color:#cbb89a; }
.site-footer .legal .credit{ justify-self:end; }
.site-footer .legal .credit b{ color:#ece1cc; font-weight:600; }

/* Knop in de footer en in het telefoon-menu:
   standaard crème (#F3EAD8) met donkere tekst; bij hover bruin (#7A5336)
   met witte tekst. */
.site-footer .btn.light, .mobile-menu .btn.light{
  --bg-btn:#F3EAD8; --fg-btn:#1d1612;
  background:#F3EAD8; color:#1d1612; border-color:#F3EAD8;
}
.site-footer .btn.light::after, .mobile-menu .btn.light::after{ background:#7A5336; }
.site-footer .btn.light:hover, .mobile-menu .btn.light:hover{ color:#fff; border-color:#7A5336; }

/* ---------- Astra/native "blauw" neutraliseren binnen het ontwerp ---------- */
body.hr-site input,
body.hr-site select,
body.hr-site textarea{ accent-color:var(--accent); }
body.hr-site input:focus,
body.hr-site select:focus,
body.hr-site textarea:focus{ outline:none; box-shadow:none; }
body.hr-site :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Astra scroll-naar-boven knop in huisstijl i.p.v. standaard (blauw) accent.
   De pijl is een SVG: kleur via fill (color alleen volstaat niet). */
#ast-scroll-top{ background:var(--brown-deep)!important; color:var(--paper)!important; border-radius:10px; }
#ast-scroll-top:hover{ background:var(--accent)!important; }
#ast-scroll-top svg,
#ast-scroll-top .ast-arrow-svg,
#ast-scroll-top path{ fill:var(--paper)!important; color:var(--paper)!important; }

/* Vangnet: Astra's globale (blauwe) kleurenpalet binnen het ontwerp naar de
   huisstijl forceren, zodat thema-knoppen/links/accenten nooit blauw zijn. */
body.hr-site{
  --ast-global-color-0:#785235;
  --ast-global-color-1:#3b2a25;
  --ast-global-color-2:#785235;
  --ast-global-color-5:#785235;
}
body.hr-site a{ color:inherit; }
body.hr-site .ast-button,
body.hr-site button.ast-button,
body.hr-site .wp-block-button__link{ background-color:var(--brown-deep); color:var(--paper); border-color:var(--brown-deep); }

/* ---------- Responsive chrome ---------- */
@media (max-width:920px){
  .nav .wrap{ grid-template-columns:1fr auto; }
  .nav-links{ display:none; }
  .nav-cta .btn:not(.menu-toggle){ display:none; }
  .menu-toggle{ display:inline-grid; place-items:center; }
  .topbar .hide-sm{ display:none; }
  .site-footer .wrap{ grid-template-columns:1fr 1fr; gap:48px; }
  .site-footer .legal{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .site-footer .legal .legal-copy,.site-footer .legal .legal-links,.site-footer .legal .credit{ justify-self:center; }
}
@media (max-width:640px){
  .site-footer .wrap{ grid-template-columns:1fr; gap:40px; text-align:center; justify-items:center; }
  .site-footer .brand-col{ display:flex; flex-direction:column; align-items:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}