/*
Theme Name: Niké Messelaar Uitvaartverzorging
Theme URI: https://nikemesselaaruitvaartverzorging.nl
Author: Willem Online
Author URI: https://willemonline.nl
Description: Eigen thema voor Niké Messelaar Uitvaartverzorging. Een rustige onepager die maar één ding hoeft, mensen laten weten hoe ze Niké bereiken. Lean, geen pagebuilder. Gebouwd door Willem Online.
Version: 0.3.0
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nike
*/

/*
Changelog
0.3.0  14-10-2026  E-mailadres aan (NIKE_EMAIL_ACTIEF true): contact, schema en llms.txt. Indexering aan.
0.2.5  28-09-2026  Portret van Niké (FOTO KM-14, bijgesneden 4:5, webp 950x1188, 49 KB) in plaats van de vlinder.
0.2.4  28-09-2026  Teksten van Ramon (mail 24-09): altijd bereikbaar, rustmoment-blok, nieuwe diensten,
                   koppen korter, logo in het midden van de kop, Noord-Holland op eigen regel,
                   telefoonnummer onderaan kleiner (max 46px, was 84px).
0.2.3  11-09-2026  Deelafbeelding 1200x630 (og:image, summary_large_image), kortere titel van 50 tekens,
                   geo-coördinaten en image in het LocalBusiness-schema.
0.2.2  11-09-2026  Favicon: vlinder als SVG, 48px PNG en apple-touch-icon, /favicon.ico wijst naar de PNG.
0.2.1  11-09-2026  assets/fonts/.htaccess met een jaar browsercache voor woff2, de server stuurde er geen mee.
0.2.0  11-09-2026  Performance-ronde. Lettertypes lokaal in assets/fonts (latin), geen verbinding meer met
                   Google Fonts. Fraunces en Figtree worden vooraf geladen.
0.1.1  11-09-2026  ?author=1 ging via redirect_canonical eerst naar /author/<gebruikersnaam>/. Onze
                   doorverwijzing naar home draait nu op prioriteit 1, dus de naam lekt niet meer.
0.1.0  11-09-2026  Eerste versie, 1:1 uit ontwerp v1 (clients/nike-messelaar/ontwerp/onepager.html).
                   SEO, JSON-LD, llms.txt, robots.txt voor AI-crawlers en de vaste beveiligingsset.
                   E-mailadres staat klaar maar blijft verborgen tot NIKE_EMAIL_ACTIEF op true staat.
*/

/* Lettertypes, lokaal. Figtree en Fraunces zijn variabele fonts, één bestand dekt alle gewichten. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/fonts/figtree-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap;src:url("assets/fonts/fraunces-latin.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 500;font-display:swap;src:url("assets/fonts/fraunces-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Saira Extra Condensed";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/saira-extra-condensed-300-latin.woff2") format("woff2")}
@font-face{font-family:"Saira Extra Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/saira-extra-condensed-600-latin.woff2") format("woff2")}

/* Gedeelde opmaak: kop, voet, knoppen en typografie. De secties van de
   homepage staan in front-page.php, bij de pagina waar ze bij horen. */

:root{
  --paper:#FBF6F3; --paper-2:#F5EAE7; --blush:#EFD9D8;
  --rose:#C4868E; --rose-deep:#9B5D67; --plum:#5A3440;
  --ink:#3F3134; --muted:#7A6769; --line:#E8D8D5;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Figtree",system-ui,sans-serif;font-size:18px;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .25 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
img{max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
a:focus-visible,button:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}

/* interne notitie, alleen zichtbaar voor wie is ingelogd */
.ph{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.2 "Figtree",sans-serif;letter-spacing:.03em;color:#7A4E0E;background:#FFF4D6;border:1px dashed #D9A640;border-radius:6px;padding:4px 8px;vertical-align:middle}

/* bovenbalk */
.top{background:var(--plum);color:#F4E4E4;font-size:14px}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:9px}
.top a{text-decoration:none;font-weight:600;letter-spacing:.02em}
.stip{display:inline-block;width:7px;height:7px;border-radius:50%;background:#E9B7BE;margin-right:9px;box-shadow:0 0 0 0 rgba(233,183,190,.6);animation:puls 2.6s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(233,183,190,.55)}70%{box-shadow:0 0 0 9px rgba(233,183,190,0)}100%{box-shadow:0 0 0 0 rgba(233,183,190,0)}}

/* kop */
.kop .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-block:20px}
.kop .merk{grid-column:2}
.kop .knop{grid-column:3;justify-self:end}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none}
.merk svg{width:66px;height:44px;flex:none}
.merk-tekst{display:flex;flex-direction:column;line-height:.95}
.merk-naam{font:300 23px/1 "Saira Extra Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.merk-sub{font:600 22px/1 "Saira Extra Condensed",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--plum);margin-top:3px}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font:600 16px/1 "Figtree",sans-serif;text-decoration:none;transition:background .25s,transform .25s,border-color .25s,color .25s;white-space:nowrap}
.knop svg{width:18px;height:18px;flex:none}
.knop-vol{background:var(--rose-deep);color:#fff}
.knop-vol:hover{background:var(--plum);transform:translateY(-2px)}
.knop-rand{border:1.5px solid var(--rose);color:var(--plum)}
.knop-rand:hover{background:var(--blush);border-color:var(--rose-deep)}
.knop-licht{background:#F6DFE1;color:var(--plum)}
.knop-licht:hover{background:#fff;transform:translateY(-2px)}

/* typografie */
.kicker{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 "Figtree",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:22px}
.kicker::before{content:"";width:28px;height:1.5px;background:var(--rose)}
h1,h2{font-family:"Fraunces",Georgia,serif;font-weight:380;color:var(--plum);font-optical-sizing:auto}
h1{font-size:clamp(42px,5.8vw,74px);line-height:1.03;letter-spacing:-.022em}
h1 em,h2 em{font-style:italic;font-weight:320;color:var(--rose-deep)}
h2{font-size:clamp(34px,4.2vw,52px);line-height:1.08;letter-spacing:-.018em}
section{padding-block:104px}
.tekst p+p{margin-top:18px}

/* losse pagina's buiten de homepage */
.inhoud{padding-block:72px}
.inhoud .wrap{max-width:760px}
.inhoud h1{font-size:clamp(34px,4.2vw,52px);line-height:1.08;margin-bottom:28px}
.inhoud .tekst h2{font-size:clamp(24px,2.6vw,30px);margin-top:36px}
.inhoud .tekst ul,.inhoud .tekst ol{margin-top:18px;padding-left:1.2em}

/* voet */
.voet{border-top:1px solid var(--line);padding-block:34px 40px;font-size:15px;color:var(--muted)}
.voet .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px}
.voet .merk svg{width:48px;height:32px}
.voet .merk-naam{font-size:18px}
.voet .merk-sub{font-size:17px}
.voet-rechts{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center}
.voet a{text-decoration:none}
.voet a:hover{color:var(--rose-deep)}

.belbalk{display:none}

/* onthullen bij scrollen */
.js .onthul{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .onthul.zicht{opacity:1;transform:none}

@media (max-width:900px){
  section{padding-block:76px}
}
@media (max-width:760px){
  body{font-size:17px;padding-bottom:86px}
  .kop .knop{display:none}
  .top .wrap{justify-content:center}
  .top .top-nummer{display:none}
  .merk svg{width:54px;height:36px}
  .merk-naam{font-size:19px}
  .merk-sub{font-size:18px}
  .belbalk{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,246,243,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .belbalk .knop{width:100%;padding-block:17px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .onthul{opacity:1;transform:none}
}