/* Kerckeplein / Bistro Texel — static site
   Faithful rebuild of the live Joomla template (jooswatch v3.5), responsive-improved.
   Fonts: Ubuntu (body), PT Sans Narrow (headings). */

/* ---------- Tokens ---------- */
:root{
  --red:#ca212a;
  --red-dark:#a2080c;
  --red-text:#de242e;
  --dark:#434242;
  --mint:#eef7f5;
  --content:#ffffff;
  --side:320px;
  --gap:20px;
  --maxw:1170px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:15px;line-height:1.7;color:#333;
  background:#2b2b2b url("../img/background.jpg") center center / cover no-repeat fixed;
}
img{max-width:100%;height:auto;border:0;}
a{color:var(--red-text);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,.brand-sub,.menu a{font-family:"PT Sans Narrow","Ubuntu",sans-serif;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 12px 40px;}

/* ---------- Header / slideshow ---------- */
.header{
  position:relative;width:100%;height:225px;overflow:hidden;
  background:#111;margin-top:0;
}
.slides{position:absolute;inset:0;}
.slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.4s ease-in-out;
}
.slides img.is-active{opacity:1;}
.slide-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(162,8,12,.72);color:#fff;font-size:20px;line-height:44px;
  text-align:center;z-index:5;transition:background .2s;
}
.slide-btn:hover{background:var(--red-dark);}
.slide-prev{left:12px;}
.slide-next{right:12px;}
.logo{
  position:absolute;left:0;bottom:0;z-index:6;
  width:var(--side);max-width:70%;
  background:rgba(238,247,245,.9);
  padding:14px 22px;
}
.logo img{display:block;width:auto;max-height:96px;margin:0;}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr);
  grid-template-areas:"nav content" "address content";
  grid-template-rows:auto 1fr;
  column-gap:var(--gap);
  align-items:start;
}
.side-nav{grid-area:nav;}
.side-address{grid-area:address;margin-top:var(--gap);}
.content{grid-area:content;}

/* ---------- Language switcher (rebuilt, works on all sizes) ---------- */
.lang{
  display:flex;gap:8px;margin:18px 0 12px;
}
.lang a{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border:1px solid var(--red);border-radius:4px;
  background:var(--red);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.5px;text-decoration:none;transition:all .15s;
}
.lang a:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;}
.lang a.active{background:var(--mint);border-color:var(--red);color:var(--red-text);}
.lang a.active:hover{background:var(--mint);color:var(--red-text);}
.lang .flag{width:20px;height:14px;border-radius:2px;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);}

/* ---------- Nav bar / hamburger (mobile only; transparent on desktop) ---------- */
.nav-bar{display:contents;}
.nav-toggle{display:none;}

/* ---------- Menu ---------- */
.menu{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0;}
.menu a{
  display:block;background:var(--red);color:#fff;
  text-transform:uppercase;font-size:19px;letter-spacing:.5px;
  padding:13px 22px;text-decoration:none;transition:background .15s;
}
.menu a:hover{background:var(--red-dark);text-decoration:none;}
.menu a.active{background:var(--mint);color:var(--red-text);}

/* ---------- Address block ---------- */
.address{background:var(--dark);color:#fff;}
.address h3{
  margin:0;padding:16px 22px;font-size:22px;font-weight:400;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.address .body{padding:16px 22px;font-size:14px;}
.address a{color:#fff;text-decoration:underline;}
.address p{margin:0 0 10px;}

/* ---------- Content panel ---------- */
.content{background:var(--content);}
.content-inner{padding:50px;}
.content h1{
  font-size:30px;font-weight:400;text-transform:uppercase;color:var(--dark);
  margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid #eee;line-height:1.2;
}
.content h2{
  font-size:23px;font-weight:400;text-transform:uppercase;color:var(--dark);
  margin:26px 0 8px;line-height:1.2;
}
.content p{margin:0 0 14px;}
.content a{color:var(--red-text);}
.content a:hover{color:var(--red-dark);}

/* PDF / call-to-action link */
.btn-pdf{
  display:inline-block;background:var(--red);color:#fff !important;
  padding:11px 20px;border-radius:4px;text-transform:uppercase;
  font-family:"PT Sans Narrow",sans-serif;font-size:18px;letter-spacing:.5px;
  text-decoration:none !important;transition:background .15s;
}
.btn-pdf:hover{background:var(--red-dark);}

/* Google map */
.map-embed{position:relative;width:100%;max-width:600px;aspect-ratio:600/450;margin:6px 0 4px;}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Footer ---------- */
.footer{
  max-width:var(--maxw);margin:22px auto 0;padding:14px 12px;
  color:#eee;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.footer a{color:#fff;text-decoration:underline;}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:"nav" "content" "address";
    grid-template-rows:auto auto auto;
  }
  .side-address{margin-top:var(--gap);}
  .logo{width:auto;max-width:60%;}
  .content-inner{padding:30px;}

  /* --- Sticky hamburger bar --- */
  .side-nav{
    position:sticky;top:0;z-index:300;
    margin:0 -12px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.22);
  }
  .nav-bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 12px;
  }
  .lang{margin:0;}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:48px;height:40px;padding:0 11px;border:0;border-radius:4px;
    background:var(--red);cursor:pointer;flex:0 0 auto;
  }
  .nav-toggle:hover{background:var(--red-dark);}
  .nav-toggle span{display:block;height:3px;width:100%;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s;}
  .side-nav.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .side-nav.open .nav-toggle span:nth-child(2){opacity:0;}
  .side-nav.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* --- Collapsible dropdown menu --- */
  .menu{
    flex-direction:column;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .side-nav.open .menu{max-height:70vh;border-top:1px solid #e6e6e6;}
  .menu a{
    border-radius:0;text-align:left;padding:15px 16px;font-size:20px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .menu li:last-child a{border-bottom:0;}
  .menu a.active{background:var(--mint);color:var(--red-text);}
}

@media (max-width:600px){
  .header{height:160px;}
  .logo{padding:9px 14px;max-width:66%;}
  .logo img{max-height:64px;}
  .content-inner{padding:20px;}
  .content h1{font-size:26px;}
  .content h2{font-size:21px;}
  .slide-btn{width:38px;height:38px;line-height:38px;font-size:17px;}
}