/* ÓIKOS — design system. Gli stili statici stanno inline nei template (fedeli ai mockup);
   qui vivono reset, hover, responsive, overlay e form. Palette in :root per riuso. */

:root{
  --espresso:#2E1C1A;
  --espresso-dark:#241413;
  --mattone:#9C3B1B;
  --bordeaux:#5A2A2C;
  --terracotta:#E9A06A;
  --oro:#E9C9A0;
  --avorio:#F5EEE3;
  --sabbia:#E0D6C5;
  --testo:#2A2320;
  --testo-tenue:#6B5F50;
  --testo-tenue-2:#8A7E6E;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Jost',sans-serif;color:#2A2320;background:#F5EEE3;-webkit-font-smoothing:antialiased}
button{font-family:inherit}
img{max-width:100%}
.serif{font-family:'Newsreader',Georgia,serif}
a{text-decoration:none;color:inherit}
::selection{background:#9C3B1B;color:#F5EEE3}

/* nav + buttons */
.navlink{position:relative;transition:color .2s}
.navlink:hover{color:#E9A06A}
.btn{transition:transform .15s,opacity .2s}
.btn:hover{transform:translateY(-2px)}
.bar{transition:background .25s}
.menu-toggle:hover .bar{background:#E9A06A}

/* fullscreen overlay menu */
.menu-link{transition:color .25s ease}
.menu-link:hover{color:#E9A06A!important}
.soc{transition:border-color .2s,color .2s,background .2s}
.soc:hover{border-color:#E9A06A;color:#E9A06A}
.menu-overlay{
  position:fixed;inset:0;z-index:100;background:#241413;overflow-y:auto;
  display:flex;flex-direction:column;
  transition:opacity .42s ease,transform .42s ease,visibility .42s;
  opacity:0;visibility:hidden;transform:translateY(-10px);
}
.menu-overlay.is-open{opacity:1;visibility:visible;transform:translateY(0)}
body.menu-open{overflow:hidden}

/* hero media (desktop/mobile, image or video) */
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-mobile{display:none}

/* cards */
.card{transition:transform .25s}
.card:hover{transform:translateY(-4px)}

/* menu page */
.tab{transition:background .2s,color .2s,border-color .2s}
.tab-active{background:#9C3B1B!important;color:#F5EEE3!important;border-color:#9C3B1B!important}
.row:hover .dish{color:#9C3B1B}
.dish-flag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9C3B1B;border:1px solid #E0D6C5;border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle;font-family:'Jost',sans-serif;font-weight:500}

/* prenota stepper */
.step{cursor:pointer;transition:background .2s,border-color .2s}
.step:hover{border-color:#9C3B1B}

/* form fields (contatti / eventi) — stile condiviso e override per Contact Form 7 */
.fld,
.oikos-form input[type=text],
.oikos-form input[type=tel],
.oikos-form input[type=email],
.oikos-form input[type=number],
.oikos-form textarea{
  font-family:inherit;width:100%;border:1px solid #E0D6C5;background:#fff;border-radius:10px;
  padding:13px 15px;font-size:14.5px;color:#2A2320;
}
.fld::placeholder,.oikos-form input::placeholder,.oikos-form textarea::placeholder{color:#A99B89}
.fld:focus,.oikos-form input:focus,.oikos-form textarea:focus{outline:none;border-color:#9C3B1B}
.oikos-form .wpcf7-submit{
  background:#9C3B1B;color:#F5EEE3;border:none;font-size:14.5px;padding:15px;border-radius:12px;
  letter-spacing:.04em;cursor:pointer;width:100%;transition:transform .15s;
}
.oikos-form .wpcf7-submit:hover{transform:translateY(-2px)}

/* responsive — breakpoints dai mockup */
@media(max-width:768px){.hm-desktop{display:none}.hm-mobile{display:block}}
@media(max-width:760px){.menu-foot{flex-direction:column;align-items:flex-start;gap:18px}}
@media(max-width:880px){
  .grid-3{grid-template-columns:1fr!important}
  .grid-2{grid-template-columns:1fr!important}
  .split{grid-template-columns:1fr!important}
  .nav-links{display:none!important}
  .hero-h{font-size:46px!important}
  .pad-x{padding-left:22px!important;padding-right:22px!important}
  .sect{padding-top:60px!important;padding-bottom:60px!important}
  .gallery{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){.f2{grid-template-columns:1fr!important}}
@media(max-width:560px){
  .pad-x{padding-left:16px!important;padding-right:16px!important}
  .menu-toggle .lbl{display:none}
  header.hero-home{min-height:520px!important}
}