/* =====================================================================
   BARSOL — website
   Statische HTML/CSS versie (vervangt de Hostinger builder)
   Pagina's: index.html · day.html · night.html · contact.html
   ===================================================================== */

:root{
  --ink:            #1D1E20;
  --ink-btn:        #0D141A;
  --header-bg:      #E8E8E8;
  --footer-bg:      #23212B;
  --white:          #FFFFFF;

  --font-display:   "Abhaya Libre", Georgia, serif;
  --font-body:      "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h:       120px;

  /* >>> FULL WIDTH <<< de enige marge links/rechts. Zet op 0 voor edge-to-edge. */
  --gutter:         clamp(24px, 4vw, 80px);

  --col-gap:        clamp(32px, 5vw, 96px);
  --radius:         30px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.5em; }
h1,h2,h3,h5{ margin:0; font-family:var(--font-display); font-weight:600; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--header-bg);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.header-inner{
  position:relative;
  height:var(--header-h);
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav{ display:flex; align-items:center; gap:50px; }
.nav a{ font-size:16px; font-weight:400; color:#0D141A; transition:opacity .2s; }
.nav a:hover,
.nav a[aria-current="page"]{ opacity:.55; }

.logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.logo img{ width:120px; height:auto; }

.socials{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.socials a{ color:#000; display:flex; transition:color .2s; }
.socials a:hover{ color:#3A3A3A; }
.socials svg{ width:27px; height:27px; }

.burger{
  display:none; width:44px; height:44px;
  padding:0; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.burger span{ display:block; height:2px; background:#0D141A; border-radius:2px; transition:.25s; }
body.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .burger span:nth-child(2){ opacity:0; }
body.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column;
  background:var(--header-bg);
  padding:0 var(--gutter);
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
}
.mobile-nav a{ padding:14px 0; font-size:18px; border-top:1px solid rgba(0,0,0,.08); }
body.nav-open .mobile-nav{ max-height:320px; padding-bottom:12px; }

/* =====================================================================
   HERO (homepage)
   ===================================================================== */
.hero{
  position:relative; width:100%;
  height:calc(100vh - var(--header-h));
  min-height:520px; max-height:760px;
  overflow:hidden;
}
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__content{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--gutter);
}
.hero h1{
  font-size:clamp(40px, 5vw, 64px);
  font-weight:600; line-height:1.3;
  color:var(--white); text-align:center;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* =====================================================================
   SPLIT — DAY | NIGHT, twee klikbare halve schermen
   ===================================================================== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
}
.tile{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:calc(100vh - var(--header-h));
  min-height:520px; max-height:760px;
  overflow:hidden;
  text-align:center;
  color:var(--white);
  isolation:isolate;
}
.tile__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.tile::before{
  content:""; position:absolute; inset:0;
  background:var(--ink);
  opacity:.5;
  z-index:-1;
  transition:opacity .4s ease;
}
.tile:hover .tile__img,
.tile:focus-visible .tile__img{ transform:scale(1.06); }
.tile:hover::before,
.tile:focus-visible::before{ opacity:.32; }
.tile:focus-visible{ outline:2px solid var(--white); outline-offset:-6px; }

.tile__content{ padding:var(--gutter); max-width:min(680px, 100%); }
.tile h2{
  font-size:clamp(26px, 2.9vw, 52px);
  letter-spacing:6px;
  line-height:1.25;
  margin-bottom:.5em;
  white-space:nowrap;          /* "Cosy by night" mag niet afbreken */
}
.tile h2 em{ font-style:italic; font-weight:800; }
.tile p{ font-size:18px; line-height:27px; }
.tile .fauxbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:194px; height:56px; padding:0 28px; margin-top:12px;
  border:1px solid var(--white); border-radius:28px;
  background:var(--ink-btn); color:var(--white);
  font-size:20px; font-weight:500;
  transition:background .25s, color .25s;
}
.tile:hover .fauxbtn,
.tile:focus-visible .fauxbtn{ background:var(--white); color:var(--ink-btn); }

/* =====================================================================
   FEATURE (parallaxsectie met tekst + foto's) — night.html
   ===================================================================== */
.feature{ position:relative; width:100%; overflow:hidden; isolation:isolate; }
.feature__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-attachment:fixed;
  z-index:-2;
}
.feature__overlay{
  position:absolute; inset:0;
  background:var(--ink); opacity:var(--overlay,.45);
  z-index:-1;
}
.feature__inner{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:var(--col-gap);
  padding:clamp(64px, 7vw, 110px) var(--gutter);
  width:100%;
}
.feature__text{ color:var(--white); max-width:640px; }
.feature--text-right .feature__text{ margin-left:auto; text-align:right; }
.feature h2{
  font-size:clamp(40px, 4.4vw, 72px);
  line-height:1.3; letter-spacing:10px;
  color:var(--white); margin-bottom:.5em;
}
.feature h2 em{ font-style:italic; font-weight:800; }
.feature__text p{ font-size:18px; line-height:27px; color:var(--white); }
.feature__text p:last-of-type{ margin-bottom:2em; }

.feature__gallery{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px, 1.6vw, 28px); align-items:center;
}
.feature--text-left  .feature__gallery{ justify-items:start; }
.feature--text-right .feature__gallery{ justify-items:end; }
.feature__gallery a,
.feature__gallery figure{ display:block; width:100%; max-width:400px; margin:0; border-radius:var(--radius); overflow:hidden; }
.feature__gallery img{
  width:100%; aspect-ratio:239/318; object-fit:cover;
  border-radius:var(--radius);
  transition:transform .5s ease;
}
.feature__gallery a:hover img{ transform:scale(1.04); }

/* knop */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:194px; height:56px; padding:0 28px;
  border:1px solid var(--white); border-radius:28px;
  background:var(--ink-btn); color:var(--white);
  font-size:20px; font-weight:500;
  transition:background .25s, color .25s;
}
.btn:hover{ background:var(--white); color:var(--ink-btn); }

/* =====================================================================
   BINNENPAGINA'S — day / night / contact
   ===================================================================== */

/* gecentreerde paginakop met de foto als achtergrond (zoals op de homepage) */
.page-head{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(360px, 52vh, 560px);
  padding:clamp(56px, 6vw, 96px) var(--gutter);
  text-align:center;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
}
.page-head__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:-2;
}
.page-head::before{
  content:""; position:absolute; inset:0;
  background:var(--ink);
  opacity:var(--overlay,.5);
  z-index:-1;
}
.page-head__content{ max-width:880px; }
.page-head h1{
  font-size:clamp(40px, 5vw, 64px);   /* zelfde als BARSOL op de homepage */
  font-weight:600;
  line-height:1.3;
  margin-bottom:.35em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.page-head p{ font-size:18px; line-height:27px; }
.page-head p:last-child{ margin-bottom:0; }

/* grote fotokop met tekst erin */
.page-hero{
  position:relative; width:100%;
  min-height:clamp(420px, 62vh, 640px);
  display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
}
.page-hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:var(--ink); opacity:.45; z-index:-1;
}
.page-hero__content{
  padding:clamp(56px, 6vw, 96px) var(--gutter);
  color:var(--white); max-width:900px;
}
.page-hero h1{
  font-size:clamp(38px, 4.4vw, 68px);
  line-height:1.2; letter-spacing:8px;
  margin-bottom:.4em;
}
.page-hero h1 em{ font-style:italic; font-weight:800; }
.page-hero h1 span{ display:block; letter-spacing:4px; font-size:.55em; font-style:italic; opacity:.9; }
.page-hero p{ font-size:18px; line-height:27px; margin-bottom:0; }

/* gewone tekstsectie */
.section{ padding:clamp(56px, 6vw, 96px) var(--gutter); }
.section--tint{ background:#F4F3F1; }
.section--dark{ background:var(--footer-bg); color:var(--white); }
.section__head{ margin-bottom:clamp(28px, 3vw, 48px); }
.section h2{
  font-size:clamp(32px, 3.4vw, 56px);
  letter-spacing:8px; line-height:1.25;
}
.section h2 em{ font-style:italic; font-weight:800; }
.section h2 span{ display:block; font-size:.5em; letter-spacing:3px; font-style:italic; opacity:.75; }
.section > p{ max-width:760px; }
.section--center{ text-align:center; }
.section--center > p{ margin-left:auto; margin-right:auto; }

/* menukaart als afbeelding */
.menucard{
  max-width:900px; margin:0 auto;
  border-radius:16px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.menucard img{ width:100%; height:auto; }

/* fotoalbum — 3 rijen van 4, liggende rechthoeken (7:5, dus 419,86 x 300) */
.album{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px, 1.4vw, 24px);
}
.album img{
  width:100%;
  height:auto;              /* negeert het height-attribuut in de HTML */
  aspect-ratio:7/5;
  object-fit:cover;
  border-radius:12px;
  transition:transform .5s ease;
}
.album figure{ margin:0; overflow:hidden; border-radius:16px; }
.album figure:hover img{ transform:scale(1.05); }

/* contact */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--col-gap); align-items:center;
}
.contact-grid img{ width:100%; border-radius:16px; object-fit:cover; }
.contact-block h3{ font-size:26px; margin-bottom:.3em; }
.contact-block + .contact-block{ margin-top:32px; }
.contact-block a{ text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{
  background:var(--footer-bg); color:var(--white);
  padding:clamp(40px, 4vw, 56px) var(--gutter) 32px;
}
.footer__inner{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.footer__col h5{ font-size:32px; font-weight:600; margin-bottom:1em; }
.footer__col a,
.footer__col p{ display:block; font-size:16px; font-weight:400; margin:0 0 6px; }
.footer__col a:hover{ text-decoration:underline; }
.footer__col--right{ text-align:right; }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-top:clamp(32px, 4vw, 56px);
}
.footer__bottom p{ margin:0; font-size:14px; }
.footer__bottom a:hover{ text-decoration:underline; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .feature h2,
  .tile h2,
  .page-hero h1,
  .section h2{ letter-spacing:6px; }
}

@media (max-width:900px){
  :root{ --header-h:110px; }

  .nav{ display:none; }
  .burger{ display:flex; }
  .mobile-nav{ display:flex; }
  .logo{ position:static; transform:none; }
  .logo img{ width:100px; }
  .socials{ margin-left:0; }

  /* twee halve schermen worden twee volle blokken onder elkaar */
  .split{ grid-template-columns:1fr; }
  .tile{ height:auto; min-height:60vh; max-height:none; }

  .feature__inner{ grid-template-columns:1fr; gap:40px; }
  .feature--text-right .feature__text{ margin-left:0; text-align:left; order:1; }
  .feature--text-right .feature__gallery{ order:2; justify-items:stretch; }
  .feature__text{ max-width:none; }
  .feature__gallery a,
  .feature__gallery figure{ max-width:none; }
  .feature__bg{ background-attachment:scroll; }

  .album{ grid-template-columns:repeat(2, 1fr); }

  .contact-grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__col--right{ text-align:left; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:560px){
  .socials svg{ width:24px; height:24px; }
  .feature h2,
  .tile h2,
  .page-hero h1,
  .section h2{ letter-spacing:4px; }
  .btn{ width:100%; }
  .album{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .feature__bg{ background-attachment:scroll; }
  .tile__img,
  .album img,
  .feature__gallery img{ transition:none; }
}