/* ==========================================================
   στῆς Άννας — κύριο φύλλο στυλ
   Τα χρώματα και τα μεγέθη ελέγχονται από τις μεταβλητές
   στο :root. Αλλάζοντας μία τιμή εκεί, αλλάζει παντού.
   ========================================================== */

:root{
  --beige:#F3E7D6;
  --paper:#FBF4E8;
  --ink:#3A2420;
  --ink-soft:#6B5147;
  --gold:#A9762E;
  --gold-dark:#6E4A1C;
  --sea:#2F4C50;
  --line:rgba(58,36,32,.18);

  --frame-w:72px;        /* πάχος κορνίζας σε οθόνη */
  --bar-h:112px;         /* υπολογίζεται αυτόματα από τη JS */

  --display:"GFS Didot","EB Garamond",Georgia,serif;
  --body:"Alegreya Sans","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--beige);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.75;
  padding:calc(var(--frame-w) + var(--bar-h)) var(--frame-w) var(--frame-w);
}

/* ---------- κορνίζα ---------- */
#frame-base{
  position:fixed;inset:0;z-index:98;pointer-events:none;
  border:var(--frame-w) solid transparent;
  background:linear-gradient(135deg,#7A5320,#C29347 22%,#8A5E24 48%,#C79A4E 74%,#7A5320) border-box;
  -webkit-mask:linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box;
          mask:linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box;
  -webkit-mask-composite:xor;mask-composite:exclude;
}
#frame{
  position:fixed;inset:0;z-index:99;pointer-events:none;
  border:var(--frame-w) solid transparent;
  border-image:url("../img/frame.webp") 74 round;
}
#frame-in{
  position:fixed;z-index:97;pointer-events:none;inset:var(--frame-w);
  box-shadow:0 0 0 1px rgba(110,74,28,.35), 0 0 22px rgba(58,36,32,.10) inset;
}

/* ---------- σταθερή μπάρα ---------- */
#bar{
  position:fixed;z-index:96;
  top:var(--frame-w);left:var(--frame-w);right:var(--frame-w);
  background:var(--beige);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 20px 14px;gap:6px 10px;
}
#logo{grid-column:1;justify-self:start;width:104px;height:auto;display:block}
#right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:12px}
#lang{display:flex;gap:6px;font-size:.85rem}
#lang a{display:flex;align-items:center;gap:5px}
.flag{width:19px;height:13px;display:block;border:1px solid rgba(58,36,32,.35);
  border-radius:1px;opacity:.55;transition:opacity .2s}
#lang a.on .flag{opacity:1}
#lang a:hover .flag{opacity:.85}
#lang a{
  color:var(--ink-soft);text-decoration:none;padding:3px 6px;
  border-bottom:1px solid transparent
}
#lang a.on{color:var(--ink);border-bottom-color:var(--gold)}
#burger{display:none;background:none;border:0;cursor:pointer;padding:6px 2px}
#burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;
  transition:transform .25s, opacity .2s}
#burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

nav{
  grid-column:1 / -1;grid-row:2;justify-self:center;
  display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:center;
  font-size:.95rem;letter-spacing:.04em;margin-top:10px
}
nav a{color:var(--ink-soft);text-decoration:none;padding:3px 2px;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}
nav a.on{color:var(--ink);border-bottom-color:var(--gold)}

/* ---------- τυπογραφία ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.15}
h2{font-size:clamp(1.35rem,4vw,1.9rem);line-height:1.25}
p{margin:0 0 1.1em}
a{color:var(--sea)}
.wrap{max-width:64ch;margin:0 auto;padding:0 22px}
.wide{max-width:900px}
.lead{font-family:var(--display);font-size:clamp(1.1rem,3.2vw,1.35rem);line-height:1.6;color:var(--ink-soft)}
.rule{width:60px;height:1px;background:var(--gold);border:0;margin:32px auto}
.ctr{text-align:center}
main{padding:26px 0 50px}

/* ---------- αρχική ---------- */
.hero-ph{margin:30px auto 0;max-width:760px;padding:0 22px}
.hero-ph img{width:100%;height:auto;display:block;border:1px solid rgba(110,74,28,.45)}
.rating{margin:30px auto 0;display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;font-size:.95rem;color:var(--ink-soft)}
.rating b{font-family:var(--display);font-size:1.5rem;color:var(--ink);font-weight:400;line-height:1}
.stars{color:var(--gold);letter-spacing:2px}
.rating a{color:var(--ink-soft)}
.info{margin:30px auto 0;max-width:520px;background:var(--paper);
  border:1px solid var(--line);padding:20px 24px;text-align:center;font-size:.98rem}
.info div{padding:7px 0}
.info div + div{border-top:1px solid var(--line)}
.social{margin-top:14px;display:flex;gap:18px;justify-content:center;font-size:.9rem}
.social a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.social a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.btn{display:inline-block;margin:6px 5px 0;padding:12px 26px;background:var(--sea);
  color:var(--paper);text-decoration:none;font-size:.95rem;letter-spacing:.04em;
  border:0;cursor:pointer;font-family:var(--body)}
.btn:hover{background:#26403f}
.btn.ghost{background:none;color:var(--sea);border:1px solid var(--sea)}
.btn.ghost:hover{background:rgba(47,76,80,.08)}

/* ---------- χάρτης ---------- */
.map{margin:26px auto 0;max-width:760px;padding:0 22px}
.map iframe{width:100%;height:340px;display:block;border:1px solid rgba(110,74,28,.45)}
@media(max-width:640px){.map iframe{height:260px}}

/* ---------- μενού ---------- */
.cat{margin:46px 0 14px;text-align:center;color:var(--gold-dark);
  font-size:clamp(1.1rem,3.4vw,1.4rem);letter-spacing:.06em}
.dish{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px dotted var(--line)}
.dish .n{flex:0 1 auto;max-width:78%}
.dish .d{flex:1 1 auto;height:1px}
.dish .p{flex:0 0 auto;font-family:var(--display);color:var(--gold-dark);white-space:nowrap}
.dish small{display:block;color:var(--ink-soft);font-size:.85rem;line-height:1.45}
.dish.cover{border-top:1px dotted var(--line);margin-top:26px}
.note{margin-top:26px;font-size:.85rem;color:var(--ink-soft);text-align:center}

/* ---------- γκαλερί ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:28px}
.grid figure{margin:0;cursor:zoom-in}
.grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1px solid var(--line);transition:opacity .2s}
.grid figure:hover img{opacity:.85}
.grid figcaption{font-size:.82rem;color:var(--ink-soft);padding-top:5px}
#box{position:fixed;inset:0;z-index:200;background:rgba(30,18,14,.92);
  display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out}
#box.on{display:flex}
#box img{max-width:100%;max-height:90vh;border:1px solid rgba(201,154,78,.6)}

/* ---------- φόρμα κράτησης ---------- */
form{max-width:430px;margin:24px auto 0}
label{display:block;margin:14px 0 4px;font-size:.88rem;color:var(--ink-soft)}
input,select,textarea{width:100%;padding:11px 12px;font-family:var(--body);font-size:1rem;
  background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.msg{margin-top:18px;padding:14px;background:var(--paper);border-left:3px solid var(--gold);display:none}
.msg.on{display:block}
.msg.err{border-left-color:#9C3B2A}

footer{text-align:center;font-size:.85rem;color:var(--ink-soft);
  padding:28px 20px 0;border-top:1px solid var(--line);margin-top:46px}

/* ---------- κινητό ---------- */
/* Στο κινητό η κορνίζα ΔΕΝ είναι καρφωμένη στην οθόνη: γίνεται
   κανονικό πλαίσιο του σώματος της σελίδας και σκρολάρει μαζί με
   το περιεχόμενο. Έτσι δεν χοροπηδάει όταν κρύβεται η μπάρα
   διευθύνσεων του browser. */
@media(max-width:640px){
  :root{--frame-w:22px}
  html{background:var(--beige)}
  body{
    font-size:16px;
    padding:0;
    border:var(--frame-w) solid transparent;
    border-image:url("../img/frame.webp") 74 round;
    /* το μπεζ γεμίζει το εσωτερικό, το χρυσό μόνο τη ζώνη της κορνίζας */
    background:
      linear-gradient(var(--beige),var(--beige)) padding-box,
      linear-gradient(135deg,#7A5320,#C29347 22%,#8A5E24 48%,#C79A4E 74%,#7A5320) border-box;
  }
  #frame,#frame-base,#frame-in{display:none}

  #bar{
    position:sticky;top:0;left:auto;right:auto;
    padding:10px 14px 12px;
  }
  #logo{width:70px}
  #burger{display:block}

  /* ---- πτυσσόμενο πάνελ κάτω από τις παύλες ---- */
  nav{
    position:absolute;top:100%;right:14px;left:auto;
    width:min(62vw,230px);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:6px 0;
    background:var(--paper);
    border:1px solid rgba(169,118,46,.5);
    box-shadow:0 14px 30px -14px rgba(58,36,32,.55);
    display:none;
    transform-origin:top right;
    animation:pop .22s ease-out both;
  }
  nav.open{display:flex}
  @keyframes pop{
    from{opacity:0;transform:scale(.94) translateY(-6px)}
    to{opacity:1;transform:none}
  }

  nav a{
    font-family:var(--display);
    font-size:1.15rem;
    color:var(--ink);
    padding:11px 18px;
    border-bottom:0;
  }
  nav a + a{border-top:1px solid rgba(58,36,32,.10)}
  nav a.on{color:var(--gold-dark)}
  nav a.on::before{content:"";}

  @media (prefers-reduced-motion:reduce){
    nav{animation:none}
  }

  main{padding:20px 0 40px}
  footer{padding-bottom:10px}
  .dish .n{max-width:70%}
}

body.noscroll{overflow:hidden}