/* dikkebirdpics Homepage — Cinematic Dark theme */
/* Gegenereerd vanuit HTML-prototype (New page design options) — pas vrij aan */

:root { --accent: #7AAFC8; --dark: #080808; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--dark); color:#fff; font-family:'Barlow',sans-serif; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }

/* ── GUARD: geen Kadence-themaheader op de cinematic homepage ──
   De template laadt get_header() niet, maar mocht de Kadence-header
   toch ergens worden ingevoegd (plugin/cache), dan verbergen we 'm.
   Ook de WP-admin-bar offset uitzetten zodat de hero echt full-screen
   tegen de bovenkant zit. */
body.dbp-cinematic-page #masthead,
body.dbp-cinematic-page .site-header,
body.dbp-cinematic-page header#site-header,
body.dbp-cinematic-page .kadence-header { display:none !important; }
html.dbp-cinematic-page,
body.dbp-cinematic-page { margin-top:0 !important; padding-top:0 !important; }
body.dbp-cinematic-page.admin-bar { margin-top:0 !important; }
@media screen and (max-width:600px){
  body.dbp-cinematic-page.admin-bar { margin-top:0 !important; }
}

/* ── HERO ───────────────────────────────────────────────── */
.hero { position:relative; height:100vh; min-height:720px; overflow:hidden; }
.hero-stack { position:absolute; inset:0; }
.hero-stack img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease; }
.hero-stack img.active { opacity:1; }
.hero-stack img.nav-preview { z-index:1; }
.hero-overlay { position:absolute; inset:0; z-index:2;
  background: linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 30%),
              linear-gradient(to top,rgba(8,8,8,1) 0%,transparent 52%); }
nav.site-nav { position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center; padding:28px 64px; }
.nav-logo { height:38px; object-fit:contain; filter:brightness(0) invert(1); display:block; }
.nav-links { display:flex; list-style:none; gap:40px; }
.nav-links a { font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.68); transition:color .25s; }
.nav-links a:hover { color:var(--accent); }
.nav-extras { display:flex; gap:24px; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.36); }
.hero-content { position:absolute; bottom:230px; left:64px; z-index:5; -webkit-user-select:none; user-select:none; }
.hero-logo-mark { height:34px; object-fit:contain; object-position:left;
  filter:brightness(0) invert(1); opacity:.78; display:block; margin-bottom:18px; }
.hero-eyebrow { font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:500;
  color:var(--accent); margin-bottom:16px; transition:color 1.6s ease; }
.hero-title { font-family:'Playfair Display',serif; font-size:clamp(64px,6.8vw,98px);
  font-weight:900; line-height:.88; letter-spacing:-.02em; margin-bottom:24px; }
.hero-title em { font-style:italic; color:var(--accent); transition:color 1.6s ease; }
.hero-tagline { font-size:15px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.75; max-width:380px; }
.hero-dots { position:absolute; bottom:234px; right:64px; z-index:5; display:flex; gap:9px; align-items:center; }
.dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22);
  cursor:pointer; border:none; padding:0; transition:background .5s, transform .3s; }
.dot.active { background:var(--accent); transform:scale(1.45); transition:background 1.6s ease, transform .3s; }
.hero-progress { position:absolute; bottom:212px; left:0; right:0; height:2px;
  z-index:6; background:rgba(255,255,255,.07); overflow:hidden; }
.hero-progress-fill { height:100%; background:var(--accent); width:0%; transition:background 1.6s ease; }
@keyframes fill-bar { from{width:0%} to{width:100%} }
.hero-progress-fill.running { animation:fill-bar 10s linear forwards; }
.hero-cards { position:absolute; bottom:0; left:0; right:0; height:212px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#1a1a1a; z-index:5; }
.hero-card { position:relative; overflow:hidden; padding:30px 44px;
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; background:rgba(255,255,255,.038); }
.hero-card.card-gold { background:var(--accent); transition:background 1.6s ease; }
.card-photo-bg { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.card-photo-bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .7s ease; }
.card-photo-bg::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.58); }
.hero-card:hover .card-photo-bg { opacity:1; }
.hero-card:hover .card-photo-bg img { transform:scale(1); }
.card-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.card-title { font-family:'Playfair Display',serif; font-size:25px; font-weight:700; margin-bottom:7px; }
.hero-card.card-gold .card-title { color:#080808; }
.hero-card.card-gold:hover .card-title { color:#fff; }
.card-desc { font-size:13px; line-height:1.6; color:rgba(255,255,255,.34); }
.hero-card.card-gold .card-desc { color:rgba(0,0,0,.5); }
.hero-card.card-gold:hover .card-desc { color:rgba(255,255,255,.6); }
.card-count { display:flex; gap:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--accent); transition:color 1.6s ease; }
.hero-card.card-gold .card-count { color:rgba(0,0,0,.44); }
.hero-card.card-gold:hover .card-count { color:var(--accent); transition:none; }

/* ── SHARED ─────────────────────────────────────────────── */
.section { padding:96px 64px; background:#0a0a0a; }
.sec-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.sec-eyebrow { font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--accent); margin-bottom:10px; transition:color 1.6s ease; }
.sec-title { font-family:'Playfair Display',serif; font-size:40px; font-weight:700; line-height:1.1; }
.sec-sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:6px; }
.sec-cta { font-size:12px; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  color:var(--accent); transition:color 1.6s ease, opacity .2s;
  border-bottom:1px solid rgba(200,168,75,.3); padding-bottom:3px; }
.sec-cta:hover { opacity:.72; }

/* ── HIGHLIGHTS GRID ────────────────────────────────────── */
.photo-grid { columns:3; column-gap:4px; }
.photo-item { break-inside:avoid; margin-bottom:4px; overflow:hidden; }
.photo-item img { width:100%; display:block; transition:transform .65s cubic-bezier(.25,.46,.45,.94); }
.photo-item:hover img { transform:scale(1.04); }

/* ── CATEGORIES ─────────────────────────────────────────── */
.section-categories { background:#060606; padding:0 0 40px; }
.cat-header { padding:96px 64px 48px; display:flex; justify-content:space-between; align-items:flex-end; }
.cat-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.cat-item { position:relative; overflow:hidden; aspect-ratio:3/4; display:block;
  cursor:pointer; background:#111; }
.cat-item img { width:100%; height:100%; object-fit:cover; object-position:center 20%;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s ease; }
.cat-item:hover img { transform:scale(1.1); filter:brightness(.6); }
.cat-label { position:absolute; bottom:0; left:0; right:0;
  padding:26px 8px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);
  font-size:10px; font-weight:500; letter-spacing:.04em;
  color:rgba(255,255,255,.8); text-align:center; transition:color .3s; }
.cat-item:hover .cat-label { color:var(--accent); }

/* ── BIRD TRIPS MAP ──────────────────────────────────────── */
.section-map { background:#080808; padding:0; }
.map-header { padding:96px 64px 40px; display:flex; justify-content:space-between; align-items:flex-end; }
.map-svg-wrap { position:relative; width:100%; background:#0a0d0e; }
#tripMap { width:100%; display:block; max-height:460px; }
.ocean { fill:#0c1215; }
.land { fill:#1a1e1a; stroke:rgba(255,255,255,.07); stroke-width:.5; }
.grid-line { stroke:rgba(255,255,255,.04); stroke-width:.5; fill:none; }
.route-path { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:0; stroke-dashoffset:0; transition:stroke 1.6s ease; opacity:.75; }
.dest-dot { fill:var(--accent); transition:fill 1.6s ease; cursor:pointer; }
.dest-ring { fill:none; stroke:var(--accent); stroke-width:1.5; transition:stroke 1.6s ease; }
.dest-label { fill:rgba(255,255,255,.75); font-family:'Barlow',sans-serif; font-size:11px; letter-spacing:.05em; pointer-events:none; }
.dest-year-txt { fill:rgba(255,255,255,.35); font-family:'Barlow',sans-serif; font-size:9px; pointer-events:none; }
.home-dot { fill:#fff; }
.home-ring { fill:none; stroke:rgba(255,255,255,.28); stroke-width:1; }
.home-label { fill:rgba(255,255,255,.5); font-family:'Barlow',sans-serif; font-size:10px; letter-spacing:.1em; }
.travel-dot { transition:fill 1.6s ease; }
@keyframes pulse-ring { from{r:6; opacity:.8} to{r:20; opacity:0} }
.dest-group { opacity:0; transition:opacity .4s ease; }
.dest-group.in { opacity:1; }
.pulse { animation:pulse-ring 2.4s ease-out infinite; }

/* ── TRIPS TIMELINE ──────────────────────────────────────── */
.trips-timeline { display:grid; grid-template-columns:repeat(7,1fr);
  gap:1px; background:rgba(255,255,255,.06); }
.trip-card { padding:28px 24px; background:#090909;
  border-top:2px solid transparent; transition:border-color .3s, background .3s; cursor:pointer; }
.trip-card:hover { border-top-color:var(--accent); background:rgba(255,255,255,.02); }
.trip-date-tag { font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); transition:color 1.6s ease; margin-bottom:9px; font-weight:600; }
.trip-dest { font-family:'Playfair Display',serif; font-size:15px; font-weight:700;
  line-height:1.2; margin-bottom:5px; }
.trip-country { font-size:11px; color:rgba(255,255,255,.35); letter-spacing:.04em; margin-bottom:10px; }
.trip-species { font-size:10.5px; color:rgba(255,255,255,.25); line-height:1.7; }
.trip-arrow { display:inline-block; margin-top:14px; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  transition:color 1.6s ease; opacity:.6; }
.trip-card:hover .trip-arrow { opacity:1; }
.trip-num { font-size:28px; font-weight:700; color:rgba(255,255,255,.06);
  font-family:'Playfair Display',serif; float:right; line-height:1; margin-top:-2px; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer { padding:44px 64px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; justify-content:space-between; align-items:center; background:var(--dark); }
.footer-logo { height:30px; filter:brightness(0) invert(1); opacity:.5; }
.footer-links { display:flex; gap:32px; list-style:none; }
.footer-links a { font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.32); transition:color .2s; }
.footer-links a:hover { color:rgba(255,255,255,.65); }
.footer-copy { font-size:11px; color:rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════
   MOBIEL / TABLET — alleen actief onder de breekpunten hieronder.
   De DESKTOP-versie blijft 100% ongewijzigd: niets hierboven is
   aangepast, dit zijn uitsluitend @media-overrides voor smalle schermen.
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger-knop: standaard verborgen (desktop), pas zichtbaar op mobiel.
   Staat hier buiten de media-query zodat 'ie op desktop gegarandeerd weg is. */
.nav-toggle { display:none; }

/* ── TABLET / kleine laptop (≤ 900px) ─────────────────────────── */
@media (max-width:900px){
  /* Nav: logo + hamburger, links worden uitklapmenu */
  nav.site-nav { padding:20px 28px; flex-wrap:wrap; }
  .nav-extras { display:none; }                 /* Shop/Insta verhuizen naar uitklapmenu */
  .nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
    margin-left:auto; z-index:12; }
  .nav-toggle span { display:block; width:26px; height:2px; background:#fff;
    transition:transform .3s ease, opacity .3s ease; }
  .site-nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .site-nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* Uitklapmenu: standaard ingeklapt, opent bij .nav-open.
     Open menu krijgt dekkende donkere achtergrond, anders zijn de
     witte links onleesbaar over een lichte hero-foto. */
  .site-nav.nav-open { background:rgba(8,8,8,.96); }
  .nav-links { flex-basis:100%; flex-direction:column; gap:0; align-items:flex-start;
    max-height:0; overflow:hidden; transition:max-height .4s ease; }
  .site-nav.nav-open .nav-links { max-height:60vh; margin-top:14px; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:14px 2px; font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.85); }

  /* Hero: flex-kolom zodat de (statische) kaarten naar de ONDERKANT
     van de hero zakken i.p.v. bovenaan over de titel te vallen.
     Alle andere hero-elementen zijn absolute en doen niet mee in de flow.
     100svh = kleine viewport-hoogte, voorkomt springen door de adresbalk
     (oudere browsers negeren svh en houden de 100vh van desktop). */
  .hero { min-height:600px; height:100svh;
    display:flex; flex-direction:column; justify-content:flex-end; }
  .hero-content { bottom:auto; top:34%; transform:translateY(-50%); left:28px; right:28px; }
  .hero-title { font-size:clamp(52px,16vw,72px); }
  .hero-tagline { max-width:none; }
  .hero-tagline br { display:none; }
  /* Dots + progressbar: op touch onbruikbaar klein / visuele ruis — verbergen.
     De slideshow draait gewoon door. */
  .hero-dots { display:none; }
  .hero-progress { display:none; }

  /* Hero-kaarten: van 3 kolommen naar 1 gestapeld, automatische hoogte.
     Dekkende achtergrond zodat de hero-foto er niet doorheen schijnt
     (.card-gold behoudt zijn accentkleur door hogere specificiteit). */
  .hero-cards { position:static; height:auto; grid-template-columns:1fr; gap:1px; }
  .hero-card { padding:20px 28px; min-height:96px; background:#0f0f0f; }
  /* Kaarttitels erven elders #111 (vrijwel zwart) — zonder hover-foto is dat
     op mobiel onleesbaar op de donkere kaart. Gold-kaart blijft zwart-op-goud. */
  .hero-card .card-title { color:#fff; }
  .hero-card.card-gold .card-title { color:#080808; }

  /* Secties: minder padding */
  .section { padding:64px 28px; }
  .sec-header, .cat-header, .map-header { flex-direction:column; align-items:flex-start; gap:14px; }
  .sec-title { font-size:30px; }

  /* Highlights-grid: 3 → 2 kolommen */
  .photo-grid { columns:2; }

  /* Categorie-grid: 8 → 2 kolommen (keuze Kevin) */
  .cat-header { padding:64px 28px 32px; }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .cat-label { font-size:12px; padding:30px 8px 12px; }

  /* Bird-trips kaart: blijft, schaalt mee (keuze Kevin) */
  .map-header { padding:64px 28px 28px; }
  #tripMap { max-height:none; }                 /* viewBox schaalt vanzelf mee met breedte */

  /* Trips-timeline: 7 kolommen → 2 */
  .trips-timeline { grid-template-columns:repeat(2,1fr); }

  /* Footer: gestapeld + gecentreerd */
  footer { flex-direction:column; gap:22px; text-align:center; padding:36px 28px; }
  .footer-links { flex-wrap:wrap; justify-content:center; gap:18px 24px; }
}

/* ── TELEFOON (≤ 560px) — verdere verfijning ──────────────────── */
@media (max-width:560px){
  .hero-content { left:22px; right:22px; }
  .hero-title { font-size:clamp(46px,17vw,62px); }
  .hero-eyebrow { font-size:10px; }
  .photo-grid { columns:1; }                     /* op telefoon 1 kolom = grotere foto's */
  .trips-timeline { grid-template-columns:1fr; } /* 1 trip per rij */
  .nav-logo { height:32px; }
}