/*
Theme Name: Osteria Ostile Theme
Description: Tema WordPress per ristorante one-page con design moderno e gestione completa da backend
Version: 1.0
Author: Custom Theme
*/

:root{
  --bg:#0b0b0b;--muted:#121212;--text:#f4f4f4;--sub:#c9c9c9;--brand:#e7c59d;--brand-2:#b38b5e;--line:rgba(255,255,255,.08);
  --radius:18px;--shadow:0 10px 30px rgba(0,0,0,.25);
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);padding:.8rem 1.1rem;border-radius:999px;background:#1a1a1a}
.btn.primary{background:var(--brand);color:#1a1a1a;border-color:transparent;font-weight:600}
.btn.ghost{background:transparent}

/* NAV */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;background:rgba(11,11,11,.45);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem}
.brand{font-family:"Playfair Display",serif;font-size:1.2rem;letter-spacing:.5px}
.links{display:none;gap:1.2rem}
.links a{opacity:.85}
.links a:hover{opacity:1}
@media (min-width: 860px){.links{display:flex}}

/* HERO */
.hero{position:relative;height:92vh;display:grid;place-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.25) 40%,rgba(0,0,0,.85))}
.hero .content{position:relative;text-align:left;z-index:1}
.title{font-family:"Playfair Display",serif;font-size:clamp(36px,6vw,68px);line-height:1.05}
.subtitle{color:var(--sub);font-size:clamp(16px,2.3vw,20px);max-width:52ch}
.cta{margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* SECTION */
section{padding:86px 0;border-top:1px solid var(--line)}
.section-title{font-family:"Playfair Display",serif;font-size:clamp(28px,3.8vw,44px);margin:0 0 .6rem}
.muted{color:var(--sub)}
.grid{display:grid;gap:24px}
@media (min-width: 900px){.grid.cols-2{grid-template-columns:1.05fr 1fr}}
@media (min-width: 900px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--muted);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card .p{padding:20px}

/* MENU CARDS */
.menu-grid{display:grid;gap:18px}
@media (min-width: 820px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.menu-item{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#141414,#101010)}
.menu-item .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px}
.price{opacity:.85;white-space:nowrap}

/* GALLERY */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width: 820px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery img{height:240px;object-fit:cover;border-radius:14px}

/* MAP + HOURS */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:8px 0}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:34px 0;color:#d8d8d8}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Parallax utility */
.parallax{will-change:transform}

/* Simple input styling */
.input{background:#181818;border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:12px;outline:none}
.input:focus{border-color:#ffffff33}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .parallax{transform:none!important}
}

/* WordPress specific classes */
.wp-block-group{margin:0}
.wp-block-image{margin:0}
.alignnone{margin:5px 20px 20px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}

/* LIGHTBOX STYLES */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
    z-index: 10;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev:disabled,
.lightbox-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10;
}

/* Gallery image cursor */
.gallery-image {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.gallery-image:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* Mobile responsiveness for lightbox */
@media (max-width: 768px) {
    .lightbox-container {
        padding: 10px;
    }
    
    .lightbox-image {
        max-width: 95%;
        max-height: 85%;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-counter {
        bottom: 10px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .lightbox {
        transition: none;
    }
    
    .gallery-image {
        transition: none;
    }
    
    .gallery-image:hover {
        transform: none;
    }
}