/* styles-modern.css — Modern Heritage V2 for Farm Ciccotto 
   Features: premium palette, 20px mobile padding, gallery mosaic + lightbox, cookie banner (dark), responsive
*/

:root{
  --brand-dark:#16341F; /* deep olive */
  --brand-light:#F4F1E7; /* sicilian cream */
  --accent-gold:#C8B084;
  --text-strong:#1B1B1B;
  --text-muted:#6B6B6B;
  --radius:12px;
  --max-width:1080px;
  --side-pad:20px;
  --font-serif:'Playfair Display', serif;
  --font-sans:'Inter', system-ui, sans-serif;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font-sans);color:var(--text-strong);line-height:1.6;background:#fff;margin:0}
img{display:block;max-width:100%;height:auto}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--side-pad)}

/* Typography */
h1,h2,h3{font-family:var(--font-serif);color:var(--brand-dark);margin:0 0 .6rem}
h1{font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:.4px}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.lead{color:var(--text-muted);max-width:54ch}
.muted{color:var(--text-muted)}

/* HEADER — Premium Farm Ciccotto */
.site-header{
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,0.06);
  padding:16px 0;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--brand-dark);
}

.brand-logo{
  height:54px;
  width:auto;
  object-fit:contain;
}

.brand-text{
  font-family:var(--font-serif);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:0.3px;
  color:var(--brand-dark);
}

.desktop-nav ul{
  display:flex;
  gap:1.8rem;
  list-style:none;
  margin:0;
  padding:0;
}

.desktop-nav a{
  text-decoration:none;
  font-weight:600;
  color:var(--brand-dark);
  font-size:1rem;
  transition:color .25s ease;
}

.desktop-nav a:hover{
  color:var(--accent-gold);
}
/* HERO */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.25rem;
  align-items:center;
  padding:3.25rem 0;
}

.hero-right{
  background:var(--brand-light);
  border-radius:var(--radius);
  overflow:hidden;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.cta{
  display:inline-block;
  background:var(--brand-dark);
  color:#fff;
  padding:.85rem 1.2rem;
  border-radius:10px;
  text-decoration:none;
}

/* Two-column layout */
.two-col{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:2rem;
  align-items:start;
}

.section{
  padding:2.25rem 0;
}

.product-card{
  background:#fff;
  border-radius:10px;
  padding:1rem;
  box-shadow:0 8px 20px rgba(16,24,32,0.06);
}

.btn-outline{
  display:inline-block;
  padding:.6rem .9rem;
  border-radius:8px;
  border:1px solid var(--brand-dark);
  color:var(--brand-dark);
  text-decoration:none;
}

/* Order form */
.order-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  max-width:720px;
}

.order-grid input,
.order-grid textarea{
  padding:.85rem;
  border-radius:8px;
  border:1px solid #e6e6e6;
  font-family:var(--font-sans);
}

.btn-primary{
  grid-column:1 / -1;
  padding:.9rem;
  border-radius:10px;
  border:0;
  background:var(--brand-dark);
  color:#fff;
}

/* Gallery mosaic */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.gallery-item{
  display:block;
  overflow:hidden;
  border-radius:10px;
  position:relative;
}

.gallery-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:transform .45s ease;
}

.gallery-item:hover img,
.gallery-item:focus img{
  transform:scale(1.03);
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  z-index:10000;
  padding:24px;
}

.lightbox.hidden{display:none}

.lb-close{
  position:absolute;
  top:18px;
  right:22px;
  background:transparent;
  color:#fff;
  border:0;
  font-size:28px;
  cursor:pointer;
}

.lb-caption{
  color:#fff;
  margin-top:12px;
  text-align:center;
}

.lightbox img{
  max-width:95%;
  max-height:80vh;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

/* Map & address */
.map-container{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  margin-top:1rem;
}

.address{
  margin-top:.75rem;
  color:var(--text-muted);
}

/* Footer */
footer{
  padding:2rem 0;
  text-align:center;
  color:var(--text-muted);
  border-top:1px solid rgba(0,0,0,0.05);
}

/* COOKIE BANNER */
.cookie-banner{
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  background:rgba(10,10,10,0.9);
  color:#fff;
  padding:18px;
  border-radius:12px;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.cookie-banner.hidden{display:none}

.cookie-inner p{
  margin:0;
  color:rgba(255,255,255,0.9);
}

.cookie-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.cookie-actions .btn{
  background:var(--accent-gold);
  border:0;
  padding:.6rem .85rem;
  border-radius:8px;
  cursor:pointer;
  color:#1b1b1b;
}

.cookie-actions .btn-link{
  color:#fff;
  text-decoration:underline;
  background:transparent;
  border:0;
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  left:20px;
  top:20px;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#000;
  color:#fff;
  border-radius:6px;
}

/* Responsive */
@media (max-width:980px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:1.25rem}
  .hero-right{height:300px}
  .two-col{grid-template-columns:1fr}
}

@media (max-width:520px){
  :root{--side-pad:20px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-item img{height:220px}
  header{padding:14px 0}
  .hero-right{height:220px}
  .cta{padding:.7rem 1rem}
  .order-grid{grid-template-columns:1fr}
}

/* Utilities */
.text-center{text-align:center}
.hidden{display:none}