/*
Theme Name: Mitsos Restaurant
Theme URI: https://mitsosrestaurant.com
Author: Kastrinakis Michalis
Description: Minimal one-page theme για το Mitsos Restaurant, Αγία Μαρίνα Χανίων.
Version: 1.0
Text Domain: mitsos
*/

:root{
  --cream:#f8f4f4;
  --blush:#bda9b2;
  --taupe:#b5a9ad;
  --slate:#858aaa;
  --ink:#2c2a30;
  --ink-soft:#5b5760;
  --max-w:1120px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:400;
}

/* NAV */
header.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:box-shadow .3s ease;
}
header.nav.scrolled{ box-shadow:0 4px 24px rgba(0,0,0,0.25); }
.nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo img{height:50px;}
nav.links{display:flex;gap:34px;align-items:center;}
nav.links a{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(248,244,244,0.8);
  transition:color .2s;
}
nav.links a:hover{color:var(--blush);}
.btn{
  display:inline-block;
  padding:11px 26px;
  border:1px solid var(--slate);
  color:var(--ink);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--slate);color:#fff;border-color:var(--slate);}
.btn.solid{background:var(--slate);color:#fff;}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);}
header.nav .btn{ color:var(--cream); border-color:rgba(248,244,244,0.4); }
header.nav .btn:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.nav-cta{display:none;}
@media(min-width:720px){ .nav-cta{display:inline-block;} }
.burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--cream);}
.lang-toggle{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--cream);
  background:transparent;
  border:1px solid rgba(248,244,244,0.4);
  border-radius:2px;
  padding:7px 11px;
  cursor:pointer;
  transition:all .2s ease;
}
.lang-toggle:hover{background:var(--cream);color:var(--ink);}

.lang-dropdown{position:relative;}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:160px;
  background:var(--ink);
  border:1px solid rgba(248,244,244,0.2);
  border-radius:4px;
  list-style:none;margin:0;padding:6px;
  display:none;
  flex-direction:column;gap:2px;
  z-index:50;
  box-shadow:0 12px 28px rgba(0,0,0,0.25);
}
.lang-dropdown.open .lang-menu{display:flex;}
.lang-menu button{
  display:flex;align-items:baseline;gap:8px;
  width:100%;
  font-family:'Jost',sans-serif;
  font-size:.74rem;
  letter-spacing:.05em;
  color:var(--cream);
  background:transparent;
  border:0;border-radius:2px;
  padding:8px 10px;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
}
.lang-menu button span{color:rgba(248,244,244,0.6);font-size:.9em;}
.lang-menu button:hover{background:rgba(248,244,244,0.12);}
.lang-menu button.active{background:rgba(248,244,244,0.18);}
.lang-menu button.active span{color:var(--cream);}

/* LIVE WEBCAM BADGE */
.live-badge{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1px solid rgba(248,244,244,0.25);
  border-radius:20px;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(248,244,244,0.8);
  background:rgba(248,244,244,0.06);
  transition:all .25s ease;
  white-space:nowrap;
}
.live-badge:hover{
  background:var(--blush);
  color:var(--ink);
  border-color:var(--blush);
}
.live-badge:hover .live-dot{ background:#fff; }
.live-dot{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:#d64545;
  box-shadow:0 0 0 0 rgba(214,69,69,0.55);
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(214,69,69,0.55); }
  70%{ box-shadow:0 0 0 7px rgba(214,69,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(214,69,69,0); }
}
@media(max-width:479px){
  .live-badge .live-full{ display:none; }
  .live-badge{ padding:8px 12px; }
}

/* MOBILE NAV */
@media(max-width:719px){
  nav.links{
    position:fixed;top:64px;left:0;right:0;bottom:0;
    background:var(--cream);
    flex-direction:column;
    justify-content:center;
    gap:28px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  nav.links.open{transform:translateX(0);}
  nav.links a{font-size:1rem;color:var(--ink-soft);}
  nav.links a:hover{color:var(--slate);}
  .burger{display:block;}
}

/* HERO */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:120px 24px 60px;
  position:relative;
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg, rgba(44,42,48,0.25), rgba(44,42,48,0.35) 60%, rgba(44,42,48,0.55)),
    url('assets/img/hero-arch-view.jpg');
  background-position:center, center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}
.hero img.logo{
  width:min(560px,80vw);
  margin-bottom:6px;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,0.45)) brightness(1.35) saturate(0.9);
}
.hero .est{
  font-size:.78rem;
  letter-spacing:.36em;
  color:#fff;
  text-transform:uppercase;
  margin-bottom:34px;
  text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.6);
}
.hero p.tag{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-style:italic;
  color:#fff;
  max-width:560px;
  margin-bottom:38px;
  text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 2px 22px rgba(0,0,0,0.6);
}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.hero .btn{ color:#fff; border-color:rgba(255,255,255,0.75); }
.hero .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
section{padding:110px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 60px;}
.section-head h2{font-size:clamp(2.1rem,4vw,2.9rem);margin-top:10px;color:var(--ink);}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1rem;}
.divider{
  width:40px;height:1px;background:var(--slate);margin:22px auto 0;opacity:.6;
}

/* fade in */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.reveal.show{opacity:1;transform:translateY(0);}

/* PHILOSOPHY (3-column editorial text) */
#philosophy{background:var(--cream);padding:90px 0;}
.philosophy-grid{
  display:grid;grid-template-columns:1fr;gap:48px;
  max-width:960px;margin:0 auto;
}
@media(min-width:760px){
  .philosophy-grid{grid-template-columns:repeat(3,1fr);gap:0;}
  .philosophy-item{padding:0 38px;border-left:1px solid rgba(44,42,48,0.1);}
  .philosophy-item:first-child{border-left:none;}
}
.philosophy-item{text-align:center;}
.philosophy-item h3{font-size:1.4rem;color:var(--ink);margin-bottom:14px;}
.philosophy-item p{color:var(--ink-soft);font-size:.96rem;}

/* FULL-BLEED EDITORIAL PHOTO BAND */
.photo-band{
  display:grid;grid-template-columns:1fr;
}
@media(min-width:760px){ .photo-band{grid-template-columns:repeat(3,1fr);} }
.photo-band figure{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:3/4;
}
.photo-band img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.photo-band figure:hover img{transform:scale(1.05);}

/* ABOUT */
#about{background:#fff;}
.about-grid{
  display:grid;grid-template-columns:1fr;gap:50px;align-items:center;
}
@media(min-width:860px){ .about-grid{grid-template-columns:1fr 1.1fr;gap:70px;} }
.about-visual{
  margin:0;
  border-radius:4px;
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
  background:var(--taupe);
}
.about-visual img{
  width:100%;height:100%;
  object-fit:cover;
}
.about-text h3{font-size:1.7rem;margin-bottom:18px;color:var(--ink);}
.about-text p{color:var(--ink-soft);margin-bottom:16px;font-size:1.02rem;}
.stats{display:flex;gap:44px;margin-top:34px;}
.stat b{
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem;
  display:block;
  color:var(--slate);
}
.stat span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

/* GALLERY */
#gallery{background:var(--cream);}

.gallery-cover{
  margin:0 0 30px;
  position:relative;
  border-radius:3px;
  overflow:hidden;
  aspect-ratio:16/9;
  cursor:pointer;
}
.gallery-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.gallery-cover:hover img{transform:scale(1.04);}
.gallery-cta{text-align:center;margin-bottom:0;}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin-top:0;
  transition:max-height .7s ease, opacity .6s ease, margin-top .7s ease;
}
.gallery-grid.open{
  opacity:1;
  margin-top:36px;
}
@media(min-width:640px){ .gallery-grid{grid-template-columns:repeat(4,1fr);} }
.gallery-grid figure{
  margin:0;border-radius:3px;overflow:hidden;
  aspect-ratio:1/1;
  position:relative;
  cursor:pointer;
}
.gallery-grid figure.tall{ aspect-ratio:1/1.35; }
@media(min-width:640px){
  .gallery-grid figure:nth-child(1){ grid-row:span 2; aspect-ratio:1/2.1; }
  .gallery-grid figure.tall{ aspect-ratio:1/1.35; }
}
.gallery-grid img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
  display:block;
}
.gallery-grid figure:hover img{ transform:scale(1.08); }

/* LIGHTBOX */
.lightbox{
  display:none;
  position:fixed;inset:0;
  background:rgba(20,18,22,0.94);
  z-index:200;
  align-items:center;justify-content:center;
  padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox-img{
  max-width:min(900px,86vw);
  max-height:78vh;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;top:20px;right:24px;
  background:none;border:0;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;
  opacity:.8;transition:opacity .2s ease;
}
.lightbox-close:hover{opacity:1;}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#fff;
  font-size:2.6rem;line-height:1;cursor:pointer;
  opacity:.7;transition:opacity .2s ease;
  padding:12px;
}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:8px;}
.lightbox-next{right:8px;}
@media(max-width:640px){
  .lightbox-nav{font-size:2rem;}
  .lightbox{padding:20px;}
}

/* MENU */
#menu{background:var(--cream);}
.menu-chips{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin:0 0 64px;
}
.menu-chip{
  padding:9px 22px;
  border:1px solid var(--slate);
  border-radius:30px;
  background:transparent;
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  transition:all .2s ease;
}
.menu-chip:hover, .menu-chip.active{
  background:var(--slate);color:#fff;border-color:var(--slate);
}
.menu-grid{
  display:grid;grid-template-columns:1fr;gap:54px;
}
@media(min-width:720px){ .menu-grid{grid-template-columns:1fr 1fr;gap:54px 70px;} }
.menu-grid.single{
  grid-template-columns:1fr;max-width:560px;margin:0 auto;
}
.menu-cat h3{
  font-size:1.5rem;
  color:var(--slate);
  margin-bottom:22px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(133,138,170,0.25);
}
.dish{display:flex;justify-content:space-between;gap:14px;margin-bottom:20px;}
.dish-name{font-size:1.02rem;color:var(--ink);}
.dish-desc{font-size:.86rem;color:var(--ink-soft);margin-top:3px;}
.dish-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
  color:var(--ink-soft);
  white-space:nowrap;
  padding-top:1px;
}
.menu-note{
  text-align:center;font-size:.78rem;color:var(--ink-soft);
  max-width:520px;margin:60px auto 0;opacity:.8;
}

/* LOCATION */
#location{background:#fff;}
.loc-grid{display:grid;grid-template-columns:1fr;gap:0;border-radius:4px;overflow:hidden;}
@media(min-width:860px){ .loc-grid{grid-template-columns:1fr 1fr;} }
.loc-info{
  background:var(--ink);
  color:var(--cream);
  padding:60px 50px;
  display:flex;flex-direction:column;justify-content:center;
  gap:30px;
}
.loc-info h3{font-size:1.8rem;color:#fff;}
.loc-block .eyebrow{color:var(--blush);margin-bottom:6px;}
.loc-block p, .loc-block a{font-size:1rem;color:rgba(248,244,244,0.88);}
.loc-block a:hover{color:var(--blush);}
.map{min-height:340px;}
.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.15);}

/* CONTACT / FOOTER */
#contact{background:linear-gradient(160deg, var(--slate), #6f7492);color:#fff;text-align:center;}
#contact .section-head p{color:rgba(255,255,255,0.85);}
#contact h2{color:#fff;}
.contact-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
#contact .btn{border-color:rgba(255,255,255,0.6);color:#fff;}
#contact .btn:hover{background:#fff;color:var(--ink);border-color:#fff;}
.social-row{display:flex;gap:22px;justify-content:center;margin-top:44px;}
.social-row a{
  width:42px;height:42px;border:1px solid rgba(255,255,255,0.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:all .2s;
}
.social-row a:hover{background:#fff;color:var(--slate);}

/* CAREERS */
#careers{background:var(--cream);padding:90px 0;}
.form-banner{
  max-width:640px;margin:0 auto 36px;padding:14px 20px;
  border-radius:2px;text-align:center;font-size:.92rem;
}
.form-banner.ok{background:rgba(133,138,170,0.14);color:var(--ink);border:1px solid var(--slate);}
.form-banner.error{background:rgba(197,90,90,0.1);color:#a44848;border:1px solid rgba(164,72,72,0.4);}
.careers-form{
  max-width:760px;margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:30px 40px;
}
@media(min-width:640px){ .careers-form{grid-template-columns:1fr 1fr;} }
.field{display:flex;flex-direction:column;}
.field label{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;
}
.field input, .field select{
  font-family:'Jost',sans-serif;font-size:1rem;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--taupe);
  padding:8px 2px;outline:none;transition:border-color .2s;
}
.field input:focus, .field select:focus{border-color:var(--slate);}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b5760' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:20px;
}
.field-file{grid-column:1 / -1;}
.file-drop{
  position:relative;border:1px dashed var(--taupe);border-radius:2px;
  padding:22px;display:flex;align-items:center;justify-content:center;
  text-align:center;transition:border-color .2s;
}
.file-drop:hover{border-color:var(--slate);}
.file-drop input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.file-name{font-size:.9rem;color:var(--ink-soft);pointer-events:none;}
.careers-form .btn{
  grid-column:1 / -1;justify-self:center;margin-top:6px;
  font-family:'Jost',sans-serif;cursor:pointer;
}

footer.site-footer{
  background:var(--ink);color:rgba(248,244,244,0.55);
  padding:36px 0;text-align:center;font-size:.78rem;
  letter-spacing:.04em;
}
footer.site-footer img{height:40px;margin:0 auto 14px;opacity:.7;}