/* Four Star Pizza & Fresh Baked Subs — static clone of fourstarpizzanewcastle.com */
:root{
  --red:#bf1f35;
  --red-85:rgba(191,31,53,.8);
  --navy:#034885;
  --grey:#58585b;
  --text:#222;
  --heading:#333;
  --yellow:#f5d312;
  --sans:"Open Sans","Open Sans Fallback",Arial,Helvetica,sans-serif;
  --script:Pacifico,"Pacifico Fallback",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 16px/24px var(--sans);}
img{border:0;display:inline-block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
.wrap{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.b{height:30px}            /* blank line inside menu cards */
.desk{display:block}
.mob{display:none}

/* ---------- Header ---------- */
/* Duda grid: row padding 5px 65px; cols large-3 / large-2 / large-2 / large-5 with their gutters */
.site-header{background:#fff;position:relative;z-index:5}
.header-inner{display:flex;align-items:flex-start;padding:5px 65px;min-height:210px}
.hdr-col{flex:0 0 auto;min-height:200px}
.hdr-col1{width:25%;padding-right:1.5%}
.hdr-col2{width:16.667%;padding:0 12.25px}
.hdr-col3{width:16.667%;padding:0 .75%}
.hdr-col4{width:41.667%;padding-left:1.5%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;height:200px}
.hdr-address{margin-top:-1px;font:700 16px/24px var(--sans);color:var(--red)}
.hdr-address a,.hdr-address span{display:block;color:var(--red)}
.hdr-address span{height:22px;line-height:22px}
.hdr-logo{display:block;width:254px;height:128px;margin-top:18px}
.hdr-logo img{width:254px;height:128px;display:block}
.badge{position:relative;width:100%;max-width:200px;height:200px;display:flex;align-items:center;justify-content:center;text-align:center}
.hdr-col3 .badge{margin:0 auto}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge-text{position:relative;width:70%;font:700 14px/21px var(--sans);color:var(--grey)}
.hdr-phone{display:block;font:700 30px/45px var(--sans);color:var(--red);white-space:nowrap;margin-bottom:18px}
.main-nav{width:100%;padding-right:15px;display:flex;flex-wrap:wrap;justify-content:flex-end;text-transform:uppercase;letter-spacing:.42px}
.main-nav a{display:block;padding:12px 15px;font:400 14px/21px var(--sans);color:var(--text);white-space:nowrap}
.main-nav a.active{background:var(--red);color:#fafafa}
.nav-toggle,.hdr-phone-icon{display:none}
@media (max-width:1495px) and (min-width:1025px){
  .hdr-address{margin-top:-12px}      /* address wraps to two lines below ~1496px, as on the original */
  .main-nav{width:426px}              /* original wraps "Contact" to a 2nd row at 1440 */
}

/* floating side buttons (desktop) */
.float-actions{position:fixed;right:15px;top:30px;z-index:50;display:flex;flex-direction:column;gap:13px}
.float-actions a{width:50px;height:50px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.float-actions svg{width:22px;height:22px;fill:#fff}

/* ---------- Page body / gutters ---------- */
.gutter{background:#fff url(../img/bg-gutter.jpg) center center/cover no-repeat fixed;padding:0 65px}
.gutter > .wrap{background:#fff}
.mob-badges{display:none}

/* Hero */
.hero{background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;padding:200px 150px 50px}
.hero.home{background-image:url(../img/hero-home.jpg)}
.hero.menu{background-image:url(../img/hero-menu.jpg)}
.hero.specials{background-image:url(../img/hero-specials.jpg)}
.hero.fundraisers{background-image:url(../img/hero-fundraisers.jpg)}
.hero.contact{background-image:url(../img/hero-contact.jpg)}
.hero-panel{background:var(--red-85);padding:50px;text-align:center;color:#fff;max-width:1200px;margin:0 auto}
.hero.menu .hero-panel{padding:60px 50px}
.hero-title{font:400 30px/45px var(--script);margin:6px 0 17px}
.hero-panel p{font:400 20px/30px var(--sans)}
.hero-panel .accept{font:700 30px/45px var(--sans);margin-top:12px}
.hero-panel .accept-list{line-height:23px;margin-top:14px}
.hero-panel .btn{margin-top:14px;margin-bottom:10px}
.hero-pay{display:none}

/* Buttons */
.btn{display:inline-block;border:3px solid #fff;border-radius:5px;padding:12px 24px;font:700 20px/1.35 var(--sans);color:#fff;text-align:center}

/* Bands */
.band{padding:57px 65px 62px;text-align:center;color:#fff}
.band-grey{background:var(--grey)}
.band-navy{background:var(--navy)}
.band h1,.band h2{font:700 48px/72px var(--sans);margin:0 0 17px}
.band-navy h2{font:700 39px/58.5px var(--sans);margin:0 0 14px}
.band p{font:400 20px/30px var(--sans)}
.band > *{max-width:1200px;margin-left:auto;margin-right:auto}
.band p + p{margin-top:15px}

/* two-column feature rows */
.feature{display:flex}
.feature > *{width:50%}
.feature .txt{background:#fff;padding:50px 15px 50px 65px}
.feature .txt h2{font:700 39px/58.5px var(--sans);color:var(--heading);margin:0 0 16px}
.feature .txt p{font:400 20px/30px var(--sans);color:var(--text)}
.feature .pic{display:block;background-position:center center;background-size:cover;background-repeat:no-repeat}
.feature.row1 .txt{border-right:5px solid var(--navy);border-bottom:5px solid var(--navy)}
.feature.row1 .pic{background-image:url(../img/fresh-ingredients.jpg);min-height:550px}
.feature.row2 .txt{border-top:5px solid var(--red);border-left:5px solid var(--red);padding:50px 65px 50px 25px}
.feature.row2 .pic{background-image:url(../img/local-pizzeria.jpg);min-height:480px}

/* CTA */
.cta{background:url(../img/cta-bg.jpg) center center/cover no-repeat fixed;padding:50px 65px}
.cta-panel{background:var(--red-85);padding:50px 50px 40px;text-align:center;color:#fff;max-width:1200px;margin:0 auto}
.cta-panel h2{font:700 30px/45px var(--sans);margin:13px 0 11px}
.cta-panel.light h2{font-weight:400}
.cta-panel p{font:400 20px/30px var(--sans)}
.cta-panel p + p{margin-top:15px}
.cta-panel .btn{margin-top:14px}

/* Footer */
.footer-outer{background:#fff}
.footer-gutter{background:url(../img/bg-gutter.jpg) center center/cover no-repeat fixed;padding:0 65px}
.footer{background:var(--navy);color:#fff;text-align:center;padding:61px 0 55px;font:400 20px/30px var(--sans)}
.footer .addr b,.footer .phone{font-weight:700}
.footer .phone{display:block;margin-top:12px}
.footer .bh{margin-top:12px}
.hours{margin:16px auto 0;display:grid;grid-template-columns:156px 231px;justify-content:center;column-gap:4px;row-gap:10px;font:400 20px/30px var(--sans)}
.hours dt,.hours dd{margin:0}
.footer .hours{text-align:center}
.pay{display:flex;gap:5px;justify-content:center;margin-top:25px}
.pay img{width:51px;height:32px}
.legal{background:var(--navy);padding:20px 65px 60px;color:#fff}
.legal .wrap{max-width:1200px;padding:15px 70px;font:400 12px/18px var(--sans);text-align:center}
.legal a{font-weight:700;text-decoration:underline}

/* ---------- Menu page ---------- */
.menu-board{background:#fff;padding:15px}
.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,390px));gap:0 15px;justify-content:center;align-items:start;max-width:1200px;margin:0 auto}
.board-grid > .col > * + *{margin-top:8px}
.card{background:var(--red);color:#fff;padding:15px}
.card.navy{background:var(--navy)}
.card-title{font:700 39px/58.5px var(--sans);text-decoration:underline}
.card-title small{text-decoration:none}
.card-title small{display:block;font:400 30px/45px var(--sans)}
.board-grid > .col > .card-title + .card,.card-title + .card{margin-top:-1px}
.card p{font:400 20px/30px var(--sans)}
.card p b,.card p strong{font-weight:700}
.card p.lh23{line-height:23px}
.card .b23{height:22px}
.card h3{font:700 39px/58.5px var(--sans)}
.card.small p{font:700 16px/24px var(--sans)}
.card.small p.n{font-weight:400}
.card.small .b{height:24px}
.card.tiny p{font:700 14px/21px var(--sans)}
.card.tiny p.n{font-weight:400}
.card.tiny .b{height:21px}
.info{padding:14px 0 0 5px;font:700 20px/30px var(--sans);color:var(--text)}
.info .big-phone{display:block;font:700 31px/46.5px var(--sans);color:var(--red);margin:19px 0 26px}
.info .hours{margin:0;justify-content:start;grid-template-columns:152px 224px;font-weight:700;text-align:left;column-gap:4px}
.info .deliver{font:700 46px/69px var(--sans);color:var(--red);margin:20px 0 13px}
.info .sm{font:400 16px/24px var(--sans)}
.info .pay{justify-content:center;margin:14px 0 0}
.side .card{text-align:left}
.side{text-align:center;color:var(--text);font:400 20px/30px var(--sans)}
.side .logo{display:block;width:188px;height:95px;margin:0 auto}
.side .addr{margin-top:14px}
.side .phone{display:block;font-weight:700;color:var(--red);margin-top:21px}
.side .hours{margin:32px 0 0 5px;font:700 16px/24px var(--sans);grid-template-columns:152px 224px;row-gap:10px}
.side .deliver{font:700 46px/69px var(--sans);color:var(--red);margin-top:31px}
.side .blurb{margin-top:16px}
.side .pay{margin-top:10px}

/* ---------- Specials / fundraisers ---------- */
.section{background:#fff;padding:50px 65px}
.section-title{font:700 48px/72px var(--sans);color:var(--text);text-align:center;margin:47px 0 0}
.section-title.h2{font:700 39px/58.5px var(--sans);color:var(--heading)}
.divider{width:588px;border:0;border-top:3px solid var(--navy);margin:29px auto 0}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin:40px auto 0;max-width:1200px}
.box{border:3px solid var(--navy);padding:25px;color:var(--red)}
.box.wide{grid-column:1/-1}
.box h3{font:700 46px/69px var(--sans)}
.box h3.xl{font-size:48px;line-height:72px}
.box p{font:700 31px/46.5px var(--sans)}
.box p.p24{font-size:24px;line-height:36px}
.box p.p30{font-size:30px;line-height:45px}
.box .tax{font:700 16px/24px var(--sans);margin-left:6px}
.box p.note{font:400 20px/30px var(--sans)}
.box p.fine{font:400 16px/24px var(--sans)}
.box p.n18{font:400 18px/27px var(--sans)}
.box p.gap{margin-top:24px}
.boxes.delivery{margin-top:20px}
.inner1200{max-width:1200px;margin:0 auto}
.section.fund{padding:20px 65px 50px}
.section.fund .box{color:var(--text)}
.section.fund .box p{font:400 20px/30px var(--sans)}
.section.fund .boxes{margin-top:20px;gap:36px 20px}
.section.fund .section-title{margin-top:14px}
.section.fund .divider{margin-top:22px}
.section.fund .box a{color:var(--red);font-weight:700}
.delivery-title{margin-top:45px}

/* ---------- Contact ---------- */
.contact-info{background:#fff;padding:50px 65px}
.contact-info h2{font:700 39px/58.5px var(--sans);color:var(--text)}
.contact-info h3{font:700 25px/37.5px var(--sans);color:var(--text);margin-top:10px}
.contact-info .phone{display:block;font:700 20px/30px var(--sans);color:var(--red)}
.contact-info .pay{justify-content:flex-start;margin:10px 0 8px}
.contact-info .hours{margin:10px 0 0;justify-content:start;grid-template-columns:480px 690px;text-align:left}
.contact-info .storefront{display:block;width:139px;height:185px;margin-top:11px}

/* ---------- Mobile drawer + bottom bar (hidden on desktop) ---------- */
.drawer,.drawer-backdrop,.bottom-bar{display:none}

/* =====================================================================
   Below 1310 content width: shrink board grid
   ===================================================================== */
/* =====================================================================
   Mobile / tablet
   ===================================================================== */
@media (max-width:1024px){
  body{font-size:14px;line-height:21px}
  .desk{display:none}
  .mob{display:block}
  .b{height:24px}

  .site-header{position:sticky;top:0;z-index:40}
  .header-inner{display:block;height:86px;min-height:0;padding:0}
  .hdr-col{min-height:0}
  .hdr-col1{width:auto;padding:0}
  .hdr-address,.hdr-col2,.hdr-col3,.hdr-col4{display:none}
  .hdr-logo{position:absolute;left:50%;top:10px;margin:0 0 0 -65px;width:130px;height:66px}
  .hdr-logo img{width:130px;height:66px}
  .nav-toggle{display:block;position:absolute;left:20px;top:29px;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;position:absolute;left:0;width:26px;height:3px;background:var(--red);border-radius:1px;content:""}
  .nav-toggle span{top:12px}
  .nav-toggle span::before{top:-8px}
  .nav-toggle span::after{top:8px}
  .hdr-phone-icon{display:flex;position:absolute;right:25px;top:33px;width:20px;height:20px}
  .hdr-phone-icon svg{width:20px;height:20px;fill:var(--red)}
  .float-actions{display:none}

  .drawer{display:block;position:fixed;top:0;left:0;bottom:0;width:292px;background:#fff;z-index:60;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;padding-top:111px;text-transform:uppercase;letter-spacing:.42px}
  .drawer a{display:block;width:197px;margin:0 auto;padding:12px 0;text-align:center;font:400 14px/21px var(--sans);color:var(--text)}
  .drawer a.active{background:var(--red);color:#fff}
  .drawer-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border:0;background:none;font-size:26px;line-height:30px;color:var(--text);cursor:pointer}
  .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
  body.nav-open .drawer{transform:none}
  body.nav-open .drawer-backdrop{opacity:1;pointer-events:auto}

  .gutter,.footer-gutter{padding:0 15px}
  .gutter{background-size:cover}
  .gutter > .wrap{background:transparent}
  .mob-badges{display:flex;flex-direction:column;align-items:center;gap:15px;padding:15px 0 15px}
  .mob-badges .badge,.mob-badges .badge + .badge{width:200px;height:200px}
  .mob-badges .badge{width:200px}
  .mob-badges .badge .badge-text{width:160px;font:700 16px/24px var(--sans)}

  .hero{padding:75px 15px 15px}
  .hero-panel,.hero.menu .hero-panel{padding:15px;text-align:left}
  .hero-title{font:400 20px/30px var(--script);margin:7px 0 11px}
  .hero-panel p{font:400 16px/24px var(--sans)}
  .hero-panel p + p{margin-top:2px}
  .hero-panel .accept{font:700 24px/36px var(--sans);text-align:center;margin-top:10px}
  .hero-panel .accept-list{line-height:18.4px;margin-top:13px}
  .hero-pay{display:flex;justify-content:flex-start;margin-top:17px}
  .hero-panel .btn{margin:13px 0 10px}
  .btn{padding:8px 34px;font:700 16px/24px var(--sans)}

  .band{padding:27px 15px 26px;text-align:left}
  .band h1,.band h2,.band-navy h2{font:700 35px/52.5px var(--sans);margin:0 0 16px}
  .band-navy h2{font:700 26px/39px var(--sans);margin:0 0 15px}
  .band p{font:400 16px/24px var(--sans)}

  .feature{flex-direction:column}
  .feature > *{width:100%}
  .feature .txt,.feature.row2 .txt{padding:30px 14px 30px 28px}
  .feature .txt h2{font:700 26px/39px var(--sans);margin:0 0 15px}
  .feature .txt p{font:400 16px/24px var(--sans)}
  .feature.row1 .pic{background-image:url(../img/fresh-ingredients-640.jpg);min-height:300px}
  .feature.row2 .pic{background-image:url(../img/local-pizzeria-640.jpg);min-height:300px}

  .cta{padding:15px}
  .cta-panel{padding:10px 10px 15px;text-align:left}
  .cta-panel h2{font:700 20px/30px var(--sans);margin:12px 0 12px}
  .cta-panel.light h2{font-weight:400}
  .cta-panel p{font:400 16px/24px var(--sans)}
  .cta-panel .btn{margin-top:13px}

  .footer-gutter{padding:0 15px 15px}
  .footer{padding:26px 15px 26px;font:400 16px/24px var(--sans)}
  .footer .phone{margin-top:12px}
  .footer .bh{margin-top:12px}
  .hours{grid-template-columns:132px 195px;column-gap:3px;row-gap:10px;font:400 14px/21px var(--sans);margin-top:11px}
  .pay{margin-top:10px}
  .legal{padding:20px 15px 60px}
  .legal .wrap{padding:0}

  /* menu */
  .menu-board{padding:0 15px}
  .board-grid{grid-template-columns:1fr;gap:0}
  .board-grid > .col > * + *{margin-top:8px}
  .card{padding:10px}
  .card-title{font:700 26px/39px var(--sans)}
  .card-title small{font:400 14px/21px var(--sans)}
  .card p{font:400 16px/24px var(--sans)}
  .card h3{font:700 31px/46.5px var(--sans)}
  .info{padding:11px 0 0;font:700 16px/24px var(--sans)}
  .info .big-phone{font:700 16px/24px var(--sans);margin:12px 0 13px}
  .info .hours{grid-template-columns:132px 195px;font:700 16px/24px var(--sans);margin:0}
  .info .deliver{font:700 37px/55.5px var(--sans);margin:12px 0 15px}
  .info .sm{font:400 14px/21px var(--sans)}
  .info .pay{margin:13px 0 8px}
  .side{font:400 16px/24px var(--sans);text-align:left}
  .side .logo{width:100%;height:auto;margin:0}
  .side .addr{margin-top:11px}
  .side .phone{margin-top:12px}
  .side .hours{margin:11px 0 0;grid-template-columns:132px 195px;font:700 16px/24px var(--sans)}
  .side .deliver{font:700 37px/55.5px var(--sans);margin-top:12px}
  .side .blurb{margin-top:12px}
  .side .pay{margin:10px 0 8px}

  /* specials / fundraisers */
  .section,.section.fund{padding:15px}
  .section-title{font:700 35px/52.5px var(--sans);text-align:left;margin:12px 0 0}
  .section-title.h2{font:700 26px/39px var(--sans)}
  .section.fund .section-title{text-align:center}
  .divider{width:100%;margin-top:14px}
  .boxes,.section.fund .boxes{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .box{padding:10px}
  .box h3,.box h3.xl{font:700 35px/52.5px var(--sans)}
  .box h3.xl{font-size:38px;line-height:57px}
  .box p{font:700 25px/37.5px var(--sans)}
  .box p.p24{font:700 35px/52.5px var(--sans)}
  .box p.p30{font:700 24px/36px var(--sans)}
  .box .tax{font:700 14px/21px var(--sans)}
  .box p.note{font:400 16px/24px var(--sans)}
  .box p.fine,.box p.n18{font:400 14px/21px var(--sans)}
  .box p.gap{margin-top:8px}
  .section.fund .box p{font:400 16px/24px var(--sans)}
  .delivery-title{margin-top:30px}

  /* contact */
  .contact-info{padding:15px}
  .contact-info h2{font:700 31px/46.5px var(--sans)}
  .contact-info h3{font:700 20px/30px var(--sans);margin-top:12px}
  .contact-info .phone{font:700 16px/24px var(--sans)}
  .contact-info .hours{grid-template-columns:132px 195px;font:400 14px/21px var(--sans);margin-top:9px}
  .contact-info .storefront{width:172px;height:229px;margin-top:9px}

  /* bottom bar */
  .bottom-bar{display:flex;position:fixed;left:20px;right:20px;bottom:12px;z-index:45;gap:16px;align-items:center}
  .bottom-bar a{height:51px;background:var(--red);color:#fff;border-radius:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .bottom-bar a.round{width:51px;flex:0 0 51px}
  .bottom-bar a.pill{flex:1;font:700 20px/24px var(--sans)}
  .bottom-bar svg{width:20px;height:20px;fill:#fff}
}
@media (max-width:359px){
  .hours,.info .hours,.side .hours,.contact-info .hours{grid-template-columns:40% 60%}
}