/* dieetdip.nl shared stylesheet — header/hero/cards migrated to Tailwind +
   DaisyUI (assets/tailwind.css, loaded alongside this file); everything
   else (recognize box, stats strip, method/trust sections, footer,
   cookie banner) stays on this original hand-written system. See
   Buythis.nl's MDFiles/architecture.md Sec.5d for the migration pattern
   and gotchas this reuses. */

:root{
  /* 2026-09-16 repaint (newfysic.nl reference) -- variable NAMES kept
     identical so product.php/contact.php/footer.php/cookie-banner.php
     (outside this pass's scope) automatically pick up the new palette
     via their existing var() references, no edits needed there. --coral
     is now a deep plum, not literally coral-colored anymore; kept the
     name rather than doing a project-wide rename for a color swap. */
  --bg:#FBF5F1; --panel:#F3E3DC; --panel-mint:#CFF3E6; --white:#FFFFFF;
  --ink:#241221; --ink-soft:#5E5468; --line:#E8D3C8;
  --coral:#612248; --coral-dark:#4A1936; --gold:#C98A3E; --teal:#0B7C6C;
  --radius:20px; --radius-sm:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;}
h1,h2,h3,.disp{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;margin:0;}
a{color:inherit;} img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.mono{font-family:'Space Mono',monospace;}

/* Photo backgrounds + parallax (2026-09-17) -- real free-licensed photos
   (Openverse/Wikimedia Commons, CC BY, commercial use allowed with
   attribution -- credited in footer.php), not stock-photo-generic or
   AI-generated. background-attachment:fixed is the plain-CSS parallax
   trick (element stays pinned to the viewport while the page scrolls
   over it) -- zero JS, but iOS Safari silently ignores `fixed` and some
   mobile browsers jank on it, so it's turned back to `scroll` below
   900px rather than fought. */
.hero-photo{
  position:relative;
  background-image:linear-gradient(180deg, rgba(36,18,33,.45), rgba(36,18,33,.82)), url('images/hero-comeback.jpg');
  background-size:cover;
  background-position:center 35%;
  background-attachment:fixed;
  color:#fff;
}
.cta-photo{
  position:relative;
  background-image:linear-gradient(160deg, rgba(97,34,72,.88), rgba(36,18,33,.78)), url('images/hero-comeback.jpg');
  background-size:cover;
  background-position:center 60%;
  background-attachment:fixed;
  color:#fff;
}
@media (max-width:900px){
  .hero-photo, .cta-photo{ background-attachment:scroll; }
}
.inset-photo{
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:3/4;
  background-image:url('images/workout-mat.jpg');
  background-size:cover;
  background-position:center 20%;
  box-shadow:0 16px 40px rgba(36,18,33,.18);
}

/* .btn-legacy -- renamed from the old bare .btn/.btn-primary so it no
   longer collides with DaisyUI's own .btn/.btn-primary classes (see
   Buythis.nl architecture.md Sec.5d for why unlayered CSS here would
   otherwise silently beat Tailwind's layered component styles). Still
   used by product.php and contact.php, which weren't part of this pass. */
.btn-legacy{font-weight:600;font-size:14.5px;padding:14px 26px;text-decoration:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;}
.btn-legacy-primary{background:var(--coral);color:var(--white);box-shadow:0 4px 14px rgba(97,34,72,0.28);}
.btn-legacy-primary:hover{filter:brightness(1.06);}

.tag{font-family:'Space Mono';font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:4px 10px;border-radius:999px;color:var(--coral-dark);background:rgba(97,34,72,0.12);}
.price{font-family:'Space Mono';font-size:14px;}
.price small{color:var(--ink-soft);font-weight:400;}

/* Sections */
.section{padding:64px 0;border-bottom:1px solid var(--line);}
@media (max-width:760px){.section{padding:44px 0;}}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-head p{color:var(--ink-soft);font-size:14px;max-width:38ch;margin-top:8px;}
.eyebrow{font-family:'Space Mono';font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--coral);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--coral);}

.recognize{background:linear-gradient(135deg, var(--panel) 0%, var(--panel-mint) 100%);border-radius:var(--radius);padding:40px;}
.recognize p{color:var(--ink-soft);font-size:16px;max-width:60ch;margin:0 0 12px;}
.recognize p:last-child{margin-bottom:0;}
.recognize strong{color:var(--ink);}

/* Method */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:860px){.method-grid{grid-template-columns:1fr;}}
.method-copy p{color:var(--ink-soft);font-size:15px;margin-bottom:16px;}
.doodle{width:100%;max-width:320px;height:auto;margin-top:20px;}
.method-list{list-style:none;margin:0;padding:0;}
.method-list li{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);}
.method-list li:last-child{border-bottom:1px solid var(--line);}
.method-list .idx{font-family:'Space Mono';color:var(--coral);font-size:13px;padding-top:2px;}
.method-list h4{font-family:'Fraunces';font-size:16px;font-weight:600;margin:0 0 6px;}
.method-list p{margin:0;font-size:14px;color:var(--ink-soft);}

.trust-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr;}}
.trust-copy p{color:var(--ink-soft);font-size:15px;margin-bottom:16px;}
.disclosure{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);padding:24px;border-top:4px solid var(--teal);}
.disclosure h4{font-family:'Fraunces';font-size:16px;margin-bottom:10px;}
.disclosure p{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;}
.disclosure p:last-child{margin-bottom:0;}

/* Background now comes from .cta-photo (assets/style.css, photo section)
   -- .band no longer sets its own, and .band p no longer hardcodes a
   dark ink color, since that would win over the white text utility
   classes used wherever .band is combined with a photo background. */
.band{padding:72px 0;text-align:center;}
@media (max-width:760px){.band{padding:44px 0;}}
.band h2{font-size:clamp(24px,3.2vw,32px);max-width:24ch;margin:0 auto 14px;}
.band p{max-width:44ch;margin:0 auto 26px;}
.band-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

/* Generic inner-page head (category/contact/privacy) */
.page-head{padding:56px 0 36px;border-bottom:1px solid var(--line);}
@media (max-width:760px){ .page-head{padding:40px 0 28px;} }
.page-head h1{font-size:clamp(26px,3.8vw,40px);}
.page-head p{color:var(--ink-soft);margin-top:14px;max-width:60ch;font-size:15px;}
.crumb{padding:16px 0;font-family:'Space Mono';font-size:12.5px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.crumb a{text-decoration:none;} .crumb a:hover{color:var(--coral);}

/* Footer -- kept on the old system, .logo/.dot still used there */
.logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces';font-weight:700;font-size:21px;text-decoration:none;color:var(--ink);}
.logo svg{flex:none;}
footer{padding:44px 0 36px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:28px;border-bottom:1px solid var(--line);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-col h5{font-family:'Space Mono';font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:12px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
.foot-col a{text-decoration:none;} .foot-col a:hover{color:var(--coral);}
.foot-note{font-size:12.5px;color:var(--ink-soft);max-width:60ch;margin-top:22px;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12.5px;color:var(--ink-soft);flex-wrap:wrap;gap:12px;}

/* Cookiemelding */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);padding:18px 0;display:none;box-shadow:0 -6px 20px rgba(0,0,0,.15);}
.cookie-banner.is-visible{display:block;}
.cookie-banner-inner{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cookie-banner p{margin:0;font-size:13.5px;color:#fff;max-width:68ch;}
.cookie-banner a{color:#fff;text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap;}
.cookie-banner .btn-legacy{font-weight:600;font-size:13.5px;padding:11px 20px;text-decoration:none;border-radius:999px;display:inline-flex;align-items:center;border:none;cursor:pointer;}
.cookie-banner .btn-accept{background:var(--coral);color:#fff;}
.cookie-banner .btn-decline{border:1px solid rgba(255,255,255,.55);color:#fff;background:none;}
.cookie-banner .btn-decline:hover{background:rgba(255,255,255,.15);}
@media (max-width:680px){.cookie-banner-inner{flex-direction:column;align-items:flex-start;}}