/*
Theme Name: Vinospang
Theme URI: https://vinospang.nl
Author: Vinospang
Description: Vinospang huisstijl-thema — editorial zwart-wit systeem met paginasjablonen voor Home, Ons verhaal, Sobremesa, Sobremesita, 2pack en Fanshop. Bestel-/betaalmomenten zijn shortcode-slots voor de Mollie-plugin.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vinospang
*/

/* ============================================================
   VINOSPANG — huisstijl (kleuren, lettertypes, knoppen, header/footer)
   Dit is de ENIGE plek voor de gedeelde stijl. Wijzig hier een kleur,
   lettertype of knopvorm en het geldt meteen op alle pagina's.
   ============================================================ */

:root{
  --ink:    #131210;
  --ink-2:  #3a3833;
  --ink-3:  #6f6c64;
  --line:   rgba(19,18,16,.14);
  --line-2: rgba(19,18,16,.08);
  --paper:  #f7f5f1;
  --paper-2:#efece6;
  --black:  #0e0d0c;
  --white-on-black: #f3f1ec;
  --white-dim: rgba(243,241,236,.62);
  --line-d: rgba(243,241,236,.18);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Courier New", ui-monospace, monospace;

  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  font-feature-settings:"ss01","cv05";
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--ink); }
::selection{ background:var(--ink); color:var(--paper); }

h1,h2,h3,h4{ margin:0; font-weight:500; }
.serif{ font-family:var(--serif); }

.eyebrow{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.eyebrow.on-black{ color:var(--white-dim); }

.display{ font-family:var(--serif); font-weight:500; font-size:clamp(3rem, 8vw, 6.4rem); line-height:.98; letter-spacing:-.015em; }
.h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.04; letter-spacing:-.01em; }
.h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.1; }
.lead{ font-size:clamp(1.08rem,1.5vw,1.32rem); line-height:1.62; color:var(--ink-2); }
.muted{ color:var(--ink-3); }
em.it, .it{ font-style:italic; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding-block:clamp(72px,11vw,140px); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.kicker-row{ display:flex; align-items:baseline; gap:18px; }
.kicker-num{ font-family:var(--mono); font-size:.78rem; color:var(--ink-3); letter-spacing:.05em; }

.site-head{ position:sticky; top:0; z-index:50; background:rgba(247,245,241,.86); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); }
.site-head .bar{ display:flex; align-items:center; gap:32px; height:74px; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.brand{ display:inline-flex; align-items:center; white-space:nowrap; }
.brand img{ height:34px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav a{ font-size:.86rem; font-weight:500; color:var(--ink-2); letter-spacing:.01em; position:relative; padding-block:6px; transition:color .2s ease; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right .28s ease; }
.nav a:hover::after{ right:0; }
.nav a.active,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a{ color:var(--ink); }
.nav a.active::after,
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after{ right:0; background:var(--line); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.04em; padding:13px 24px; border-radius:999px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease; white-space:nowrap; }
.btn:hover{ background:transparent; color:var(--ink); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn.on-black{ background:var(--white-on-black); color:var(--black); border-color:var(--white-on-black); }
.btn.on-black:hover{ background:transparent; color:var(--white-on-black); }
.btn.sm{ padding:10px 18px; font-size:.78rem; }
.btn-arrow{ transition:transform .2s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.tlink{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.9rem; letter-spacing:.01em; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.tlink .a{ transition:transform .2s ease; }
.tlink:hover .a{ transform:translateX(4px); }
.tlink.on-black{ border-color:var(--white-on-black); color:var(--white-on-black); }

.menu-toggle{ display:none; align-items:center; gap:8px; cursor:pointer; background:transparent; border:1px solid var(--line); border-radius:999px; padding:9px 15px; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }

.ph{ position:relative; overflow:hidden; background-color:#e6e2db; background-image:repeating-linear-gradient(45deg, transparent 0 11px, rgba(19,18,16,.045) 11px 12px); }
.ph.dark{ background-color:#1a1917; background-image:repeating-linear-gradient(45deg, transparent 0 11px, rgba(243,241,236,.05) 11px 12px); }
.ph::after{ content:attr(data-label); position:absolute; inset:0; margin:auto; height:fit-content; width:fit-content; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:5px 9px; border:1px solid var(--line); background:rgba(247,245,241,.7); white-space:nowrap; }
.ph.dark::after{ color:var(--white-dim); border-color:var(--line-d); background:rgba(14,13,12,.5); }

.shot{ display:block; width:100%; height:100%; object-fit:cover; background:#1a1917; }
.pillar .shot{ margin-top:auto; aspect-ratio:16/10; }

.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.field input, .field select, .field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:11px 2px; transition:border-color .2s ease; width:100%; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ink); }
.field.on-black label{ color:var(--white-dim); }
.field.on-black input, .field.on-black select, .field.on-black textarea{ color:var(--white-on-black); border-color:var(--line-d); }
.field.on-black input::placeholder{ color:rgba(243,241,236,.4); }
.field.on-black input:focus, .field.on-black select:focus, .field.on-black textarea:focus{ border-color:var(--white-on-black); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 28px; }
.form-grid .full{ grid-column:1 / -1; }
.note{ font-size:.82rem; color:var(--ink-3); }

.choice-row{ display:flex; flex-wrap:wrap; gap:10px; }
.choice{ position:relative; cursor:pointer; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:.86rem; font-weight:500; color:var(--ink-2); transition:all .18s ease; user-select:none; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice:hover{ border-color:var(--ink); }
.choice:has(input:checked){ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.site-foot{ background:var(--black); color:var(--white-on-black); }
.site-foot .wrap{ padding-block:clamp(56px,8vw,96px); }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot-brand img{ height:34px; width:auto; display:block; }
.foot-col h5{ margin:0 0 16px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--white-dim); font-weight:600; }
.foot-col a, .foot-col p{ display:block; margin:0 0 10px; color:var(--white-dim); font-size:.92rem; transition:color .2s ease; }
.foot-col a:hover{ color:var(--white-on-black); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:space-between; align-items:center; margin-top:clamp(40px,6vw,72px); padding-top:26px; border-top:1px solid var(--line-d); font-size:.78rem; color:var(--white-dim); letter-spacing:.02em; }

.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--ink); display:inline-block; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

@media (max-width: 860px){
  .nav{ gap:18px; }
  .nav .nav-links{ position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--pad) 18px; display:none; }
  .nav .nav-links.open{ display:flex; }
  .nav .nav-links a{ padding:13px 0; width:100%; border-bottom:1px solid var(--line-2); }
  .menu-toggle{ display:inline-flex; }
  .form-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  body{ font-size:16px; }
  .foot-top{ grid-template-columns:1fr; gap:30px; }
  .brand img{ height:26px; }
  .site-head .bar{ gap:14px; }
  .nav{ gap:12px; }
  .btn.sm{ padding:9px 14px; font-size:.74rem; }
  .menu-toggle{ padding:8px 12px; font-size:.72rem; }
}

/* ============================================================
   Pagina-specifieke opmaak (hero's, secties per pagina) staat
   NIET hier, maar bovenaan elk paginasjabloon in /page-templates/
   en /front-page.php — zo blijft dit bestand de gedeelde basis.
   ============================================================ */

/* ============================================================
   FORMINATOR — huisstijl-override
   Maakt Forminator-formulieren (in het Shortcode-blok) gelijk aan
   de rest van de site: onderlijnde velden, ronde zwarte knop, zelfde
   lettertypes. Werkt op de standaard Forminator-markup/classes.
   ============================================================ */
.forminator-custom-form{ font-family:var(--sans); color:var(--ink); max-width:none; }
.forminator-custom-form .forminator-row{ margin-bottom:26px; }
.forminator-custom-form label,
.forminator-custom-form .forminator-label{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; display:block; }
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="number"],
.forminator-custom-form input[type="date"],
.forminator-custom-form select,
.forminator-custom-form textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:11px 2px;
  width:100%; box-shadow:none; transition:border-color .2s ease;
}
.forminator-custom-form input:focus,
.forminator-custom-form select:focus,
.forminator-custom-form textarea:focus{ outline:none; border-color:var(--ink); box-shadow:none; }
.forminator-custom-form ::placeholder{ color:var(--ink-3); opacity:1; }

.forminator-custom-form .forminator-checkbox label,
.forminator-custom-form .forminator-radio label{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink-2); font-size:.92rem; }

.forminator-custom-form .forminator-button,
.forminator-custom-form button[type="submit"],
.forminator-custom-form input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.04em;
  padding:13px 24px; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .15s ease,background .2s ease,color .2s ease; box-shadow:none;
}
.forminator-custom-form .forminator-button:hover,
.forminator-custom-form button[type="submit"]:hover,
.forminator-custom-form input[type="submit"]:hover{ background:transparent; color:var(--ink); }
.forminator-custom-form .forminator-button:active{ transform:translateY(1px); }

.forminator-custom-form .forminator-response-message.forminator-success{ font-family:var(--serif); font-style:italic; color:var(--ink); border:1px solid var(--line); border-radius:0; background:var(--paper-2); }
.forminator-custom-form .forminator-error-message,
.forminator-custom-form .forminator-error{ color:#8a2f1f; font-size:.82rem; }

/* Op donkere secties (bv. wachtlijst-blok op Home) */
.on-black .forminator-custom-form label,
.on-black .forminator-custom-form .forminator-label{ color:var(--white-dim); }
.on-black .forminator-custom-form input,
.on-black .forminator-custom-form select,
.on-black .forminator-custom-form textarea{ color:var(--white-on-black); border-color:var(--line-d); }
.on-black .forminator-custom-form ::placeholder{ color:rgba(243,241,236,.4); }
.on-black .forminator-custom-form input:focus,
.on-black .forminator-custom-form select:focus,
.on-black .forminator-custom-form textarea:focus{ border-color:var(--white-on-black); }
.on-black .forminator-custom-form .forminator-button,
.on-black .forminator-custom-form button[type="submit"]{ background:var(--white-on-black); color:var(--black); border-color:var(--white-on-black); }
.on-black .forminator-custom-form .forminator-button:hover,
.on-black .forminator-custom-form button[type="submit"]:hover{ background:transparent; color:var(--white-on-black); }