/* GiustoGusto Celico — v2 additions for index.html / menu.html
   Scoped: only touches .v2-* classes, never bare element selectors,
   so it cannot interfere with the existing Bootstrap template below it. */

.v2-header{
  --v2-bg-alt:#171819; --v2-gold:#e4c590; --v2-white:#ffffff; --v2-gray:#a7a7a7;
  --v2-border:rgba(228,197,144,0.25); --v2-green:#25D366;
  background:var(--v2-bg-alt);
  border-bottom:1px solid var(--v2-border);
  font-family:'DM Sans', Arial, sans-serif;
}
.v2-header *{box-sizing:border-box;}
.v2-header .v2-container{max-width:1180px;margin:0 auto;padding:0 30px;}
.v2-header .v2-top-bar{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:6px;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--v2-gray);}
.v2-header .v2-top-bar .v2-top-links{display:flex;gap:22px;flex-wrap:wrap;}
.v2-header .v2-top-bar a{color:var(--v2-gray);text-decoration:none;}
.v2-header .v2-top-bar a:hover{color:var(--v2-white);}
.v2-header .v2-nav-row{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:22px;flex-wrap:wrap;gap:18px;}
.v2-header .v2-nav-row img{height:42px;width:auto;display:block;}
.v2-nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;font-family:'DM Sans', Arial, sans-serif;}
.v2-nav a{color:var(--v2-white,#fff);text-decoration:none;}
.v2-nav a:hover{color:var(--v2-gold,#e4c590);}
.v2-nav a.v2-active{color:var(--v2-gold,#e4c590);}

/* Mobile hamburger menu — same pattern as the 4 new-style pages
   (site-v2.css .nav-toggle/.site-nav): logo + top info bar stay visible,
   the link row hides behind a 3-line icon on phones. */
.v2-nav-toggle{display:none;}
@media (max-width: 780px){
  .v2-nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;padding:0;background:none;border:1px solid rgba(228,197,144,0.25);
    border-radius:2px;cursor:pointer;
  }
  .v2-nav-toggle span{display:block;width:20px;height:2px;background:#e4c590;transition:transform .25s ease, opacity .25s ease;}
  .v2-nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .v2-nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .v2-nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .v2-nav{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;order:3;
    background:var(--v2-bg-alt,#171819);border-top:1px solid rgba(228,197,144,0.25);}
  .v2-nav.is-open{display:flex;}
  .v2-nav a{width:100%;padding:14px 4px;border-bottom:1px solid rgba(228,197,144,0.25);}
}

/* Scroll-to-top button */
.scroll-top-btn{
  position:fixed;right:24px;bottom:24px;z-index:998;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#171819;border:1px solid #e4c590;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.scroll-top-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:#e4c590;}
.scroll-top-btn:hover svg path{stroke:#0e0d0b;}
@media (max-width: 780px){
  .scroll-top-btn{
    right:auto;left:16px;bottom:76px;
    width:44px;height:44px;
  }
}

/* Footer */
.v2-footer{padding:64px 0 30px;background:#0e0d0b;font-family:'DM Sans', Arial, sans-serif;color:#a7a7a7;}
.v2-footer *{box-sizing:border-box;color:#a7a7a7;}
.v2-footer .v2-container{max-width:1180px;margin:0 auto;padding:0 30px;}
.v2-footer .v2-footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:38px;border-bottom:1px solid rgba(228,197,144,0.25);}
.v2-footer .v2-footer-col-brand img{height:36px;}
.v2-footer .v2-footer-tagline{font-family:'Forum',serif;font-style:italic;color:#e4c590;font-size:15px;margin-top:12px;}
.v2-footer .v2-footer-divider{width:40px;height:1px;background:rgba(228,197,144,0.25);margin:16px 0;}
.v2-footer p{margin:0;line-height:1.75em;color:#a7a7a7;}
.v2-footer a{color:#e4c590;text-decoration:none;}
.v2-footer a:hover{color:#ffffff;}
.v2-footer .v2-footer-col-title{color:#e4c590;margin-bottom:16px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.15em;}
.v2-footer .v2-footer-links{display:flex;flex-direction:column;gap:10px;}
.v2-footer .v2-footer-links a{color:#ffffff;}
.v2-footer .v2-footer-links a:hover{color:#e4c590;}
.v2-footer .v2-footer-contact-line{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:14px;}
.v2-footer .v2-footer-contact-line svg{flex-shrink:0;margin-top:2px;}
.v2-footer .v2-footer-social{display:flex;gap:10px;}
.v2-footer .v2-footer-social-icon{width:38px;height:38px;border:1px solid rgba(228,197,144,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease, background .2s ease;}
.v2-footer .v2-footer-social-icon:hover{border-color:#e4c590;background:rgba(228,197,144,0.08);}
.v2-footer .v2-footer-bottom{padding-top:26px;font-size:13px;color:#a7a7a7;text-align:center;letter-spacing:0.02em;}
@media (max-width: 900px){
  .v2-footer .v2-footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .v2-footer .v2-footer-cols{grid-template-columns:1fr;}
}

/* Page-title (h1) responsive scale-down — the 64px inline size set by
   build_legacy.py is fine on desktop/tablet, but needs to shrink on phones
   just like it already does on the 4 new-style pages (site-v2.css). Only
   !important can override an inline style, and only font-size is touched. */
@media (max-width: 780px){
  h1{font-size:38px !important;}
}

/* Mobile contact bar + WhatsApp FAB */
.v2-mobile-contact-bar{display:none;}
.v2-mobile-contact-fab{display:none;}
@media (max-width: 780px){
  .v2-mobile-contact-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;
    height:60px;background:#171819;
    border-top:1px solid rgba(228,197,144,0.25);
    box-shadow:0 -2px 10px rgba(0,0,0,0.35);
  }
  .v2-mobile-contact-bar a{flex:1;display:flex;align-items:center;justify-content:center;}
  .v2-mobile-contact-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:76px;z-index:9999;
    width:54px;height:54px;border-radius:50%;background:#25D366;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
  body{padding-bottom:64px;}
}

/* Menu page hero — same auto-height photo-hero pattern used on the 4
   new-style pages (site-v2.css .hero-photo): padding instead of a fixed
   height, so it never clips content on narrow phones, and the same 70px
   top padding as every other hero on the site. Replaces the old Bootstrap
   .inner-banner + Ken Burns zoom, which is no longer used anywhere. */
.v2-hero-photo{position:relative;overflow:hidden;padding:70px 0 50px;min-height:460px;display:flex;align-items:center;}
.v2-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.v2-hero-photo .v2-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(14,13,11,0.92) 0%, rgba(14,13,11,0.55) 45%, rgba(14,13,11,0.25) 100%);}
.v2-hero-photo .v2-container{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 30px;}
.v2-hero-photo .v2-subtitle{text-transform:uppercase;font-weight:700;color:#e4c590;font-size:13px;letter-spacing:0.2em;font-family:'DM Sans', Arial, sans-serif;}
.v2-hero-photo h1{font-family:'Forum',serif;font-weight:400;margin:18px 0 0;color:#fff;max-width:900px;}

/* Solid gold CTA button — same look as the .btn.btn-solid buttons used on
   the 4 new-style pages (site-v2.css), e.g. "Chiama per organizzare" on
   eventi-feste.html. Used here for the "Guarda il menu" buttons in the
   home banner slider, replacing the thin outline .theme-btn.btn-style-two. */
.v2-btn-solid{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 34px;
  background:#e4c590;border:1px solid #e4c590;color:#0e0d0b;
  font-family:'DM Sans', Arial, sans-serif;font-weight:700;font-size:14px;
  letter-spacing:0.05em;text-transform:uppercase;border-radius:2px;
  white-space:nowrap;transition:all .25s ease;
}
.v2-btn-solid:hover{background:transparent;color:#e4c590;}

/* Home banner slide with slider-7.jpg ("Le nostre Specialità" — chef
   drizzling balsamic on the pinsa): slider-7.jpg is 1880x950, very wide.
   On a phone, background-size:cover only shows ~30% of that width, so no
   background-position value can fit both the pinsa and the chef's hand —
   they're too far apart. -80% (and even 100%) just pushed the whole image
   out of frame, showing nothing. Fix: swap in a dedicated, tighter portrait
   crop (slider-7-mobile.jpg, cropped straight from the source) instead of
   repositioning the wide desktop image. !important is needed to beat the
   inline background-image set on the element. Matched by URL, not
   nth-child, because Swiper's loop mode clones/reorders slides in the DOM. */
@media (max-width: 767px){
  .banner-section .image-layer[style*="slider-7.jpg"]{
    background-image: url(../images/main-slider/slider-7-mobile.jpg) !important;
    background-position: center center;
  }
}