@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
:root{--navy:#03152d;--red:#c81a20;--cream:#f4eee3;--paper:#fbf7ef;--ink:#101722}
*{box-sizing:border-box}
html{background:var(--cream)}
body{margin:0;color:var(--ink);background:var(--cream);font-family:Arial,Helvetica,sans-serif}
.shell{width:min(1470px,calc(100% - 74px));margin:auto}

/* Header */
.site-header{height:96px;background:var(--navy);color:white}
.nav{height:96px;display:grid;grid-template-columns:360px 1fr;align-items:center}
.main-logo{width:330px;height:92px;object-fit:contain;object-position:left center}
.nav-links{display:flex;justify-content:center;gap:70px}
.nav-links a{font-family:Oswald,Arial,sans-serif;color:white;text-decoration:none;font-weight:700;font-size:22px;letter-spacing:.5px}

/* Hero */
.hero{height:220px;background:#0a1629;position:relative;overflow:hidden;color:white}
.hero-photo{position:absolute;top:0;height:100%;object-fit:cover}
.hero-photo.bowling{left:0;width:20%}
.hero-photo.pizza{left:49%;width:22%}
.hero-photo.wings{left:65%;width:18%}
.hero-photo.burger{right:0;width:21%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,10,20,.95) 0%,rgba(2,10,20,.88) 38%,rgba(2,10,20,.28) 59%,rgba(2,10,20,.02) 100%)}
.hero-copy{position:relative;z-index:2;padding-top:22px}
.hero h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:67px;line-height:.95;letter-spacing:1px;margin:0 0 9px}
.hero-ribbon{display:inline-block;background:var(--red);font-family:Oswald,Arial,sans-serif;font-size:27px;font-style:italic;font-weight:700;padding:7px 38px 8px;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%)}
.hero-sub{font-family:Oswald,Arial,sans-serif;font-size:24px;font-weight:700;margin-top:9px;letter-spacing:1.2px}.hero-sub b{color:var(--red);padding:0 9px}

/* Section headings */
.menu-section{padding:8px 0 13px}
.section-heading{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:14px;color:#a91e24;font-family:Georgia,serif}
.section-heading:before,.section-heading:after{content:"";height:3px;background:var(--navy)}
.section-heading h2{font-size:39px;margin:0;line-height:1.15}
.section-heading span{font-size:27px;color:var(--navy)}
.section-heading:before{grid-column:1}
.section-heading span:first-child{grid-column:2}
.section-heading h2{grid-column:3}
.section-heading span:last-child{grid-column:4}
.section-heading:after{grid-column:5}
.section-heading.compact h2{font-size:34px}

/* Food cards */
.food-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.menu-card{background:var(--paper);border:1px solid #b8ac9b;border-radius:7px;overflow:hidden}
.card-title{height:35px;background:var(--navy);color:white;display:flex;align-items:center;justify-content:center;font-family:Oswald,Arial,sans-serif;font-size:20px;font-weight:700}
.card-title::first-letter{color:var(--red)}
.card-image{width:100%;height:118px;object-fit:cover;display:block}
.card-content{padding:7px 12px 12px;min-height:139px}
.menu-row{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:13px;font-weight:700;line-height:1.55}
.menu-row b{color:var(--red)}
.card-note,.drink-note{font-size:11.5px;font-style:italic;line-height:1.35;margin:9px 0 0}

/* Drinks */
.lower-grid{display:grid;grid-template-columns:2fr 1.05fr;gap:16px}
.drink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.drink-card{display:grid;grid-template-columns:88px 1fr;background:var(--paper);border:1px solid #b8ac9b;border-radius:7px;overflow:hidden;min-height:155px}
.drink-image img{width:100%;height:100%;object-fit:cover;display:block}
.drink-content{padding:7px 10px}
.card-title.inner{height:auto;background:none;color:var(--ink);justify-content:flex-start;font-size:18px;margin-bottom:4px}
.drink-note{font-size:10.5px;margin:0 0 8px;font-style:normal}
.drink-content .menu-row{font-size:11.5px;line-height:1.6}

/* Birthday */
.party-card{border:2px solid var(--red);border-radius:7px;background:#fbf7ef;display:grid;grid-template-columns:155px 1fr;align-items:center;padding:9px 15px;min-height:155px}
.party-card img{width:145px;height:145px;object-fit:cover;mix-blend-mode:multiply}
.party-copy{text-align:center}
.party-copy h2{font-family:Georgia,serif;color:#a91e24;font-size:33px;margin:0 0 7px}
.party-copy h3{font-family:Oswald,Arial,sans-serif;color:var(--navy);font-size:21px;margin:0 0 9px}
.party-copy p{font-size:13px;margin:6px}
.party-btn{display:inline-block;margin-top:3px;background:var(--red);color:white;text-decoration:none;font-weight:700;padding:7px 38px;border-radius:4px;font-size:14px}

/* Footer */
.site-footer{background:var(--navy);color:white}
.footer-main{min-height:112px;display:grid;grid-template-columns:330px 330px 1fr;gap:30px;align-items:center;padding:10px 0}
.footer-logo{width:285px;height:88px;object-fit:contain;object-position:left center}
.contact-block{font-size:13px}
.contact-block p{display:flex;gap:11px;line-height:1.45;margin:7px 0}
.hours{font-size:13px}
.hours h2{font-family:Oswald,Arial,sans-serif;color:var(--red);font-size:22px;margin:0 0 3px}
.hours>div{display:grid;grid-template-columns:200px 1fr;gap:35px;line-height:1.35}
.copyright{background:var(--red);padding:8px 0;color:white;font-size:11px}

@media(max-width:1100px){
 .nav-links{gap:30px}.food-grid{grid-template-columns:repeat(3,1fr)}
 .lower-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:260px 300px 1fr}
}
@media(max-width:760px){
 .shell{width:calc(100% - 26px)}
 .site-header,.nav{height:auto}.nav{display:block;padding:7px 0}.main-logo{height:70px;width:250px}
 .nav-links{justify-content:flex-start;gap:24px;overflow:auto;padding:6px 0}.nav-links a{font-size:16px}
 .hero{height:310px}.hero-photo.pizza,.hero-photo.wings,.hero-photo.burger{display:none}.hero-photo.bowling{width:100%}.hero-overlay{background:rgba(2,10,20,.78)}
 .hero-copy{padding-top:55px}.hero h1{font-size:48px}.hero-ribbon{font-size:18px;padding:7px 20px}.hero-sub{font-size:17px}
 .section-heading h2,.section-heading.compact h2{font-size:28px}.food-grid,.drink-grid{grid-template-columns:1fr}
 .party-card{grid-template-columns:95px 1fr}.party-card img{width:90px;height:110px}.party-copy h2{font-size:24px}.party-copy h3{font-size:16px}
 .footer-main{grid-template-columns:1fr}.hours>div{grid-template-columns:1fr 1fr;gap:15px}
}


/* Exact approved hero mockup */
.hero.hero-exact{
  height:auto;
  min-height:0;
  background:#07172b;
  overflow:hidden;
}
.hero.hero-exact img{
  position:static;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:760px){
  .hero.hero-exact{
    height:auto;
  }
  .hero.hero-exact img{
    width:100%;
    height:auto;
  }
}


/* Footer logo now uses the exact same Hometown Lanes artwork as the header */
.footer-logo{
  width:285px;
  height:88px;
  object-fit:contain;
  object-position:left center;
}


/* Clean beverage cards — matches the mockup */
.drink-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}

.drink-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:172px;
  background:var(--paper);
  border:1px solid #b8ac9b;
  border-radius:7px;
  overflow:hidden;
}

.drink-title{
  flex:0 0 35px;
  height:35px;
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  font-family:Oswald,Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}

.drink-title::first-letter{
  color:var(--red);
}

.drink-main{
  flex:1;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  min-height:137px;
}

.drink-image{
  min-height:137px;
  overflow:hidden;
  background:#e5ddd0;
}

.drink-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:137px;
  object-fit:cover;
  object-position:center;
}

.drink-content{
  min-width:0;
  padding:9px 11px 10px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.drink-note{
  margin:0 0 8px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10.5px;
  line-height:1.35;
  font-style:normal;
  color:#202733;
}

.drink-items{
  width:100%;
}

.drink-content .menu-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  font-size:11.5px;
  line-height:1.58;
  align-items:baseline;
}

.drink-content .menu-row span{
  min-width:0;
  overflow-wrap:anywhere;
}

.drink-content .menu-row b{
  color:var(--red);
  white-space:nowrap;
  text-align:right;
}

/* Keep all three beverage cards aligned at desktop size */
@media(min-width:1101px){
  .drink-card{height:172px;}
}

@media(max-width:1100px){
  .drink-card{min-height:176px;}
}

@media(max-width:760px){
  .drink-grid{grid-template-columns:1fr;}
  .drink-card{height:auto;min-height:170px;}
  .drink-main{grid-template-columns:105px minmax(0,1fr);}
}


/* Align beverage editable text directly and evenly beneath the navy banners */
.drink-main{
  grid-template-columns:82px minmax(0,1fr);
  align-items:stretch;
}

.drink-content{
  padding:6px 10px 8px;
  justify-content:flex-start;
}

.drink-note{
  margin:0 0 5px;
  line-height:1.25;
}

.drink-items{
  margin-top:0;
}

.drink-content .menu-row{
  min-height:18px;
  line-height:1.35;
  align-items:center;
  padding:0;
}

.drink-content .menu-row span,
.drink-content .menu-row b{
  line-height:1.35;
}

/* Coffee and bar cards have no introductory note, so their first editable
   menu line starts at the same visual top position beneath the banner. */
.drink-card:nth-child(2) .drink-content,
.drink-card:nth-child(3) .drink-content{
  padding-top:7px;
}

/* Keep the photo from forcing the editable text downward */
.drink-image,
.drink-image img{
  min-height:0;
  height:100%;
}


/* Make the white editable beverage panels sit flush against the blue header
   and directly beside the beverage images */
.drink-card{
  gap:0;
}

.drink-title{
  margin:0;
  border-bottom:0;
}

.drink-main{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:0;
  margin:0;
  padding:0;
  align-items:stretch;
}

.drink-image{
  margin:0;
  padding:0;
  border:0;
  align-self:stretch;
}

.drink-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0;
  padding:0;
  border:0;
}

.drink-content{
  margin:0;
  padding:7px 10px 8px;
  border:0;
  background:var(--paper);
  min-width:0;
  align-self:stretch;
}

/* Ensure there is no visual gap between header and white content area */
.drink-card .drink-main,
.drink-card .drink-content,
.drink-card .drink-image{
  border-top:0;
}

/* Align all three cards to the same top/bottom edges */
.drink-card{
  overflow:hidden;
}

.drink-card:nth-child(1) .drink-content,
.drink-card:nth-child(2) .drink-content,
.drink-card:nth-child(3) .drink-content{
  padding-top:7px;
}


/* Exact-visual refinement: dotted leaders and tighter editable menu alignment */
.menu-row{
  display:grid;
  grid-template-columns:auto minmax(12px,1fr) auto !important;
  gap:5px !important;
  align-items:baseline !important;
  line-height:1.42;
}
.menu-row::after{
  content:"";
  grid-column:2;
  border-bottom:1px dotted #606060;
  transform:translateY(-3px);
  min-width:10px;
}
.menu-row span{grid-column:1; white-space:nowrap;}
.menu-row b{grid-column:3; white-space:nowrap; color:var(--red);}

/* Beverage cards: image and editable white panel touch the navy banner exactly */
.drink-card{gap:0 !important;}
.drink-title{margin:0 !important; border-radius:0 !important;}
.drink-main{
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  grid-template-columns:92px minmax(0,1fr) !important;
}
.drink-image{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.drink-content{
  margin:0 !important;
  padding:7px 10px 8px !important;
  background:#fbf7ef !important;
  border:0 !important;
}
.drink-content .menu-row{
  line-height:1.45;
  min-height:18px;
}

/* Match the mockup's crisp cream cards and thin outlines */
.menu-card,.drink-card{
  background:#fbf7ef;
  border:1px solid #a99f92;
  box-shadow:none;
}
.card-content{padding-top:8px;}
.card-note,.drink-note{line-height:1.35;}


/* Accommodate the two added Bar Beverages rows; all prior footer/contact styling retained */
.drink-card:nth-child(3) .drink-content{
  padding-top:5px !important;
  padding-bottom:5px !important;
}
.drink-card:nth-child(3) .menu-row{
  min-height:15px !important;
  line-height:1.22 !important;
  font-size:10.8px !important;
}


/* Make Soft Drinks, Coffee & More, and Bar Beverages cards as tall as Pizza */
@media (min-width:1101px){
  .drink-grid{
    align-items:stretch !important;
  }

  .drink-card{
    height:308px !important;
    min-height:308px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .drink-title{
    flex:0 0 35px !important;
    height:35px !important;
  }

  .drink-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    align-items:stretch !important;
  }

  .drink-image{
    height:100% !important;
    min-height:0 !important;
  }

  .drink-image img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
  }

  .drink-content{
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
}


/* Requested revision: beverage cards 20% shorter than the previous 308px height */
@media (min-width:1101px){
  .drink-card{
    height:246px !important;
    min-height:246px !important;
  }
}


/* Top logo cleanup: use the logo without the duplicated Mechanicville, NY line */
.site-header .brand img,
.header-logo{
  object-fit:contain;
  object-position:left center;
}


/* Top Hometown Lanes logo: location subtitle removed */
.site-header .brand img,
.header-logo{
  object-fit:contain !important;
  object-position:left center !important;
}


/* Latest visual-match refinements */
.main-logo{
  object-fit:contain !important;
  object-position:left center !important;
}
.footer-logo{
  object-fit:contain !important;
  object-position:left center !important;
}


/* Match the supplied Hometown Lanes reference artwork */
.site-header .brand img,
.header-logo{
  object-fit:contain !important;
  object-position:left center !important;
}
.footer-logo{
  object-fit:contain !important;
  object-position:left center !important;
}
.card-image,
.drink-image img{
  object-position:center center !important;
}