/* ============================================================
   HOUSE OF PAPAVER — shared styles for content pages
   Same tokens / fonts / dark-mode as the frozen homepage.
   The homepage (index.html) stays self-contained; this file
   only dresses the utility & legal pages.
   ============================================================ */

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---- tokens: light ---- */
:root{
  --bg:#FBF8F1; --panel:#F2ECDE; --ivory:#F7F3EA;
  --ink:#241C12; --ink-2:#5B5240; --ink-3:#74664A;
  --line:#E4DAC7; --line-2:#D5C9AF;
  --accent:#B5402E; --accent-2:#9A3626;
  --btn:#241C12; --btn-ink:#F7F3EA;
  --foot-bg:#1B140B; --foot-ink:#F7F3EA;

  --serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
  --sans:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.19,1);

  --maxw:1340px;
  --readw:68ch;
  --pad:clamp(1.25rem,4.2vw,4rem);
  --fs-body:1.0625rem;
}

/* ---- tokens: dark ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171008; --panel:#1E160C; --ivory:#F3ECDC;
    --ink:#F3ECDC; --ink-2:#C9BA9C; --ink-3:#9B8A6A;
    --line:#33291A; --line-2:#453722;
    --accent:#D66C51; --accent-2:#E1836A;
    --btn:#F3ECDC; --btn-ink:#1B130A;
    --foot-bg:#0F0A03; --foot-ink:#F3ECDC;
  }
}
:root[data-theme="dark"]{
  --bg:#171008; --panel:#1E160C; --ivory:#F3ECDC;
  --ink:#F3ECDC; --ink-2:#C9BA9C; --ink-3:#9B8A6A;
  --line:#33291A; --line-2:#453722;
  --accent:#D66C51; --accent-2:#E1836A;
  --btn:#F3ECDC; --btn-ink:#1B130A;
  --foot-bg:#0F0A03; --foot-ink:#F3ECDC;
}

/* ---- base ---- */
body{
  background:var(--bg); color:var(--ink-2);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh;
}
::selection{background:var(--accent);color:#FBF8F1}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
main{flex:1 0 auto}

/* ---- header ---- */
.site-hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.promise{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:.7rem var(--pad);border-bottom:1px solid var(--line)}
.site-hdr__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.05rem}
.brand{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:.02em;color:var(--ink);line-height:1;white-space:nowrap}
.brand small{display:block;font:500 .52rem/1 var(--mono);letter-spacing:.42em;color:var(--ink-3);margin-top:.4em;text-transform:uppercase}
.hdr-right{display:flex;align-items:center;gap:1.4rem 1.8rem;flex-wrap:wrap;justify-content:flex-end}
.lang-switch{display:inline-flex;align-items:center;gap:.5rem;font:500 .68rem/1 var(--mono);letter-spacing:.1em}
.lang-switch a{color:var(--ink-3);text-transform:uppercase;padding:.35em .15em;transition:color .25s var(--ease)}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang-switch__sep{color:var(--line-2)}
.site-nav{display:flex;gap:1.9rem;flex-wrap:wrap}
.site-nav a{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);position:relative;padding-block:.4rem}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.site-nav a:hover::after{transform:scaleX(1)}
@media (max-width:640px){
  .site-nav{gap:1rem}
  .site-nav a{font-size:.66rem}
  /* Op een telefoon paste de vierdelige nav niet naast logo en tas: Contact viel naar een tweede
     regel en dat gaf een rare hoge balk. About staat ook in de voet van elke pagina, dus die laten
     we hier weg. Shop krijgt hetzelfde kadertje als op de homepage, zodat de winkel overal
     de duidelijkste knop in de balk is. */
  .site-nav a[href="/about.html"]{display:none}
  .site-nav a[href="/shop.html"]{padding:.45rem .8rem;border:1px solid var(--line-2);border-radius:2px}
  .site-nav a[href="/shop.html"]::after{display:none}
}

/* ---- page head ---- */
.page-head{padding-block:clamp(3rem,8vh,6rem) clamp(1.5rem,4vh,3rem);border-bottom:1px solid var(--line)}
.eyebrow{font:500 .72rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.page-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1;letter-spacing:-.015em;color:var(--ink);margin-top:1.1rem;text-wrap:balance}
.page-head .lead{margin-top:1.4rem;max-width:52ch;font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--ink-2);line-height:1.5}
.page-head .updated{margin-top:1.4rem;font:400 .74rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}

/* ---- prose ---- */
.prose{max-width:var(--readw);padding-block:clamp(2.5rem,6vh,4rem);font-size:1.075rem}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;color:var(--ink);letter-spacing:-.01em;margin-top:2.6rem;text-wrap:balance}
.prose h3{font-family:var(--serif);font-weight:600;font-size:1.32rem;color:var(--ink);margin-top:1.8rem}
.prose h2 + p,.prose h3 + p{margin-top:.6rem}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent-2)}
/* a .btn inside prose must keep its own (AA) button colours, not the accent link colour */
.prose a.btn,.prose a.btn:hover{color:var(--btn-ink);text-decoration:none}
.prose ul,.prose ol{margin-top:1rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.3rem;top:.7em;width:.42rem;height:.42rem;border-radius:99px;background:var(--accent)}
.prose ol{list-style:decimal;padding-left:1.5rem}
.prose ol li{padding-left:.3rem}
.prose blockquote{border-left:2px solid var(--line-2);padding-left:1.2rem;color:var(--ink-2);font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.35}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0}
.prose small{font-size:.86rem;color:var(--ink-3)}

/* data table (shipping rates etc.) */
.table-wrap{overflow-x:auto;margin-top:1.4rem;border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line)}
thead th{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);background:var(--panel)}
tbody tr:last-child td{border-bottom:none}
td:last-child,th:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

/* verzendtarieven: 6 kolommen, dus breder dan de standaardtabel — .table-wrap scrollt op mobiel.
   De `font`-shorthand op `thead th` reset alles, daarom krijgt <small> hier een eigen regel;
   zonder die regel wint `.prose small` en wordt het bijschrift gróter dan de kop erboven. */
.pdp-all{margin:3rem auto 4.5rem;max-width:26rem}
.pdp-all .btn{justify-content:center}

.rates{min-width:50rem}
/* Kolombreedtes vastzetten: zonder dit knijpt de bestemmingskolom dicht en valt de landenlijst
   over zes regels uiteen, waardoor de rij drie keer zo hoog wordt als de prijzen ernaast. */
.rates th:nth-child(1){width:31%}
.rates th:nth-child(2){width:17%}
.rates th:nth-child(n+3){width:13%}
.rates thead th small{display:block;margin-top:.3rem;font:400 .62rem/1.3 var(--mono);letter-spacing:.06em;text-transform:none;color:var(--ink-3);white-space:nowrap}
.rates tbody td small{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.rates td:nth-child(n+3){font-variant-numeric:tabular-nums;white-space:nowrap}
.rates td:nth-child(2){white-space:nowrap}
/* De leeskolom is 68ch; zes kolommen passen daar niet in. Op ruimere schermen treedt de tabel
   daarom symmetrisch buiten de kolom — horizontaal scrollen terwijl er ruimte zat is, leest als
   een bug. Daaronder blijft .table-wrap gewoon scrollen. */
@media (min-width:64rem){.table-wrap--wide{width:56rem;margin-inline:calc((100% - 56rem) / 2)}}

/* callout */
.note{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1.2rem 1.4rem;font-size:.96rem}
.note strong{color:var(--ink)}

/* fill-in marker for Bas */
/* Placeholder marker (Bas fills these in). Opaque light chip → legible on any
   background incl. the dark footer, and clearly flags a TODO. */
.fill{background:#F7ECD5;color:var(--accent-2);border-radius:2px;padding:.05em .45em;font:500 .82em/1 var(--mono);letter-spacing:.02em}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:1em 1.6em;border-radius:2px;border:1px solid var(--btn);background:var(--btn);color:var(--btn-ink);cursor:pointer;transition:.3s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}

/* ---- contact form ---- */
.form{max-width:38rem;display:flex;flex-direction:column;gap:1.1rem;padding-block:clamp(2rem,5vh,3rem)}
.form label{display:flex;flex-direction:column;gap:.45rem;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.form input,.form textarea{background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:.9em 1em;color:var(--ink);font-size:1rem;font-family:var(--sans)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form textarea{min-height:8rem;resize:vertical}

/* ---- footer ---- */
.site-foot{flex-shrink:0;background:var(--foot-bg);color:var(--foot-ink);margin-top:clamp(3rem,8vh,6rem)}
.site-foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-top:clamp(3rem,7vh,5rem);padding-bottom:3rem;border-bottom:1px solid color-mix(in srgb,var(--foot-ink) 14%,transparent)}
.ft-brand .b{font-family:var(--serif);font-weight:600;font-size:1.8rem;color:var(--foot-ink);letter-spacing:.02em}
.ft-brand p{margin-top:1.1rem;max-width:34ch;font-size:.92rem;color:color-mix(in srgb,var(--foot-ink) 62%,transparent)}
.ft-col .ft-title{font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--foot-ink) 55%,transparent);margin:1.67em 0 1.3rem;padding:0}
.ft-col ul{display:flex;flex-direction:column;gap:.8rem}
.ft-col a{font-size:.92rem;color:color-mix(in srgb,var(--foot-ink) 78%,transparent);transition:.3s var(--ease)}
.ft-col a:hover{color:var(--foot-ink)}
.site-foot__bottom{padding-block:1.8rem 2.6rem}
.ft-social{display:flex;gap:.65rem;margin-top:1.2rem}
.ft-social a{width:34px;height:34px;border-radius:99px;border:1px solid color-mix(in srgb,var(--foot-ink) 24%,transparent);display:grid;place-items:center;color:var(--foot-ink);transition:background .3s ease,border-color .3s ease}
.ft-social a:hover{background:color-mix(in srgb,var(--foot-ink) 12%,transparent);border-color:transparent}
.ft-social svg{display:block}
.ft-legal{font:400 .74rem/1.7 var(--mono);letter-spacing:.02em;color:color-mix(in srgb,var(--foot-ink) 48%,transparent);max-width:75ch}
@media (max-width:820px){ .site-foot__top{grid-template-columns:1fr 1fr} .ft-brand{grid-column:1/-1} }
@media (max-width:520px){ .site-foot__top{grid-template-columns:1fr} }

/* ---- Opening soon (pre-launch: geen checkout tot Mollie live is) ---- */
[hidden]{display:none!important} /* maak het hidden-attribuut betrouwbaar (bv. verborgen winkelwagen) */
.btn--soon,.btn--soon:hover,.btn--soon:focus{background:transparent;color:var(--ink-3);border:1px solid var(--line-2);cursor:not-allowed;box-shadow:none}
.soon-note{margin:.9rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.soon-note a{color:var(--accent)}
.shop-notice{margin:0 0 1.8rem;padding:.95rem 1.15rem;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);color:var(--ink-2);font-size:.95rem;line-height:1.55}
.shop-notice strong{color:var(--ink)}
.shop-notice a{color:var(--accent)}