/* -----------------  constants  ----------------- */
:root{
  --cream:#e9e0d7;
  --brown:#4d4035;
  --text:#231f20;
  --serif:"Playfair Display",serif;
  --sans:"Source Sans 3",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
}
img{max-width:100%;display:block}

/* -----------------  utility  ----------------- */
.container{width:min(90rem,92%);margin-inline:auto}
.center{text-align:center}
.btn,
.btn-outline{
  display:inline-block;
  padding:.9rem 2.5rem;
  border-radius:.25rem;
  font:600 1rem var(--sans);
  cursor:pointer;
  text-decoration:none;
  transition:.25s;
}
.btn{background:var(--brown);color:#fff}
.btn:hover{opacity:.9}
.btn-outline{
  border:2px solid var(--brown);
  color:var(--brown);
  background:transparent;
}
.btn-outline:hover{background:var(--brown);color:#fff}

/* -----------------  header  ----------------- */
.site-header{
  background:var(--cream);
  padding:.75rem 0;
}
.head-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font:600 1.4rem var(--serif);
  text-decoration:none;
  color:var(--text);
}
.site-nav{
  display:flex;
  gap:2rem;
}
.site-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}
.menu-toggle{
  display:none;
  border:none;
  background:none;
  font-size:1.8rem;
  cursor:pointer;
}

/* -----------------  hero  ----------------- */
.hero{
  position:relative;
  isolation:isolate;
  height:60vh;                      /* keeps height explicit          */
  background:url("../img/assetsimgpizza-hero.jpg") /* YOUR pizza photo */
             center/cover no-repeat;
}
/* If an <img> tag is still present inside .hero, hide it */
.hero img{display:none}

.hero-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.8rem;
  background:#0006;                 /* subtle dark overlay            */
  text-align:center;
  color:#fff;
}
.hero-text h1{
  font:600 clamp(1.3rem,4vw,2.8rem) var(--serif);
  letter-spacing:.5px;
}

/* -----------------  feature  ----------------- */
.feature{
  display:flex;
  gap:3rem;
  padding:4rem 0;
  align-items:center;
}
.feature-img{flex:1}
.feature-text{flex:1}
.feature-text h2{
  font:600 clamp(2rem,5vw,3.3rem) var(--serif);
  color:var(--brown);
  margin-bottom:1rem;
}
.feature-text p{margin-bottom:1rem;font-size:1.05rem}

/* -----------------  CTA strip  -------------- */
.cta-strip{
  background:var(--brown);
  color:#fff;
  text-align:center;
  padding:2rem 1rem;
}
.cta-strip h3{font:600 clamp(1.4rem,4vw,2.4rem) var(--serif)}
.cta-strip small{display:block;margin-top:.25rem;font-size:.85rem}

/* -----------------  reviews  ---------------- */
.reviews{padding:4rem 0}
.reviews h2{
  text-align:center;
  font:600 clamp(1.8rem,4vw,2.8rem) var(--serif);
  margin-bottom:2.5rem;
}
.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:2.5rem;
  margin-bottom:2.5rem;
}
blockquote{font-size:1.05rem}
blockquote footer{margin-top:.5rem;font-size:.85rem}

/* -----------------  map + hours  ------------ */
.map-hours{
  display:flex;
  gap:3rem;
  padding:4rem 0;
}
.map iframe{width:100%;height:24rem;border:0}
.hours h2{
  font:600 clamp(1.8rem,4vw,2.8rem) var(--serif);
  margin-bottom:1.2rem;
}
.hours ul{list-style:none;margin-bottom:2rem}
.hours li{margin-bottom:.35rem}

/* -----------------  footer  ----------------- */
.site-footer{
  background:var(--brown);
  color:#fff;
  padding:3.5rem 1rem;
}
.footer-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
}
.site-footer a{color:#fff;text-decoration:none}
.brand{font:600 1.6rem var(--serif)}
.brand small{display:block;margin-top:.4rem;font-size:.8rem}

/* -----------------  RESPONSIVE -------------- */
@media (max-width:992px){
  .feature{flex-direction:column}
  .map-hours{flex-direction:column}
}
@media (max-width:768px){
  .site-nav{
    position:absolute;
    right:1rem;top:4.2rem;
    background:var(--cream);
    flex-direction:column;
    gap:1rem;
    padding:1.2rem 1.8rem;
    border:1px solid #ddd;
    transform:scale(0);
    transform-origin:top right;
    transition:.25s;
  }
  .site-nav.open{transform:scale(1)}
  .menu-toggle{display:block}
}

/* --- tiny screens --- */
@media (max-width:480px){
  .hero{height:50vh}
}