/* Al Ducci's Italian Pantry — site styles
   Same look as the original site, rebuilt without tables. */

:root{
  --red:#880a0c;        /* body text */
  --link:#990000;
  --nav:#990000;
  --rule:#cb5c5f;       /* lines above/below the menu */
  --grey:#666;
  --map-border:#440506;
  --notice:#3d693a;     /* closed-for-break banner */
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:#fff;
  font:14px/1.3 cambria, palatino, georgia, serif;
  color:var(--red);
}
img{max-width:100%;height:auto;border:0;display:block}
a{color:var(--link);text-decoration:none}
a:hover,a:focus{color:var(--grey)}

.container{max-width:980px;margin:0 auto;padding:0 0 1px}

h1{font-size:2em;margin:.67em 0;text-align:center}
h2{font-size:1.5em;margin:.83em 0;text-align:center;color:#000}
h3{font-size:18px;line-height:24px;font-weight:normal;color:var(--grey);margin:1em 0}

/* ---------- Header + menu ---------- */
.title{margin:14px auto;width:585px}
.site-nav{
  border-top:3px solid var(--rule);
  border-bottom:3px solid var(--rule);
  padding:10px;
  margin-bottom:36px;
}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
}
.site-nav a{
  display:block;padding:2px 30px;
  font-size:18px;font-weight:bold;color:var(--nav);
  text-transform:uppercase;white-space:nowrap;
}
.site-nav a:hover,.site-nav a:focus{color:#000}

/* ---------- Closed-for-a-break banner (optional) ---------- */
.notice{background:var(--notice);padding:2rem;margin:0 0 20px}
.notice{text-align:center}
.notice h1{color:#fff;font-weight:normal;margin:0}
.notice hr{border:0;border-top:1px solid rgba(255,255,255,.6);width:60%;margin:1.2rem auto}
.notice p{color:#fff;font-size:20px;font-style:italic;margin:1.2rem 0 0}
.closing{font-weight:bold}

/* ---------- Home page ---------- */
.features{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:6px 0 14px;
}
.feature{padding:7px;font-size:12px}
.feature h2{font-size:16px;line-height:24px;font-weight:normal;color:var(--red);text-align:left;margin:0}
.feature img{width:100%;aspect-ratio:310/105;object-fit:cover}

.specials{padding:10px}
.specials h1 a{color:inherit}
.welcome{margin:0 auto 10px;padding:10px}

.thumbs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  justify-items:center;
}
.thumbs a{display:block;width:230px;max-width:100%}
.thumbs img{width:100%}
.thumbs-caption{text-align:center}
.gift{text-align:center;text-transform:uppercase;font-size:2.4em}

/* ---------- Gallery page ---------- */
.gallery-intro{color:#000044;text-align:left;font-size:2em}
.gallery-intro a{text-decoration:underline}
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:22px;justify-items:center;margin-bottom:30px;
}
.gallery-grid a{display:block;width:230px;max-width:100%}
.gallery-grid img{width:100%;aspect-ratio:230/173;object-fit:cover}

/* ---------- Footer: hours / address / map ---------- */
.rule{height:10px;border-bottom:3px solid var(--rule)}
.site-footer{
  display:grid;grid-template-columns:360px 220px 400px;
  align-items:start;margin-bottom:40px;
}
.site-footer .hours{padding-right:20px}
.site-footer address{font-style:normal}
.social{display:flex;align-items:center;gap:8px;margin-top:14px}
.map{border:4px solid var(--map-border);line-height:0}
.map iframe{width:100%;height:170px;border:0}

/* ---------- Lightbox (click a photo to enlarge) ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;padding:16px}
.lb.open{display:flex}
.lb-box{background:#fff;padding:15px;max-width:100%;max-height:100%;
  font:12px Arial,Helvetica,sans-serif;color:#333}
.lb-box img{border:1px solid #000;max-height:calc(100vh - 110px);width:auto}
.lb-bar{display:flex;justify-content:space-between;gap:20px;padding-top:12px}
.lb-bar button{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:#666}
.lb-bar button:hover,.lb-bar button:focus{color:#000}

/* ---------- Smaller screens ---------- */
@media (max-width:1000px){
  .container{padding:0 12px}
  .site-footer{grid-template-columns:1fr 1fr;column-gap:20px}
  .site-footer .find-us{grid-column:1 / -1}
}
@media (max-width:700px){
  .site-nav a{padding:4px 12px;font-size:16px}
  .features{grid-template-columns:1fr}
  .thumbs,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  h1{font-size:1.6em}
  .gift{font-size:1.8em}
  .site-footer{grid-template-columns:1fr}
}