/* ======================================================================
   Blackbird Coffee & Energy — Mobile / Responsive Stylesheet
   ----------------------------------------------------------------------
   Load this AFTER each page's own <style> block (i.e. the <link> tag
   should sit below the inline styles in <head>) so these rules win on
   the cascade without needing !important. This one file is shared by
   all 9 pages — upload it to the same folder as the HTML files.

   Breakpoints used:
     1180px — navigation switches to the hamburger menu (the nav links
              and Order Ahead button no longer fit in one row above
              this width, even on laptops/tablets)
     900px  — matches the breakpoint already used inside each page for
              its own two/three-column sections
     680px  — phone-width layout: remaining multi-column grids collapse,
              section padding and headline sizes scale down
     420px  — small-phone fine tuning
   ====================================================================== */

/* ----------------------------------------------------------------------
   NAV — hamburger menu
   ---------------------------------------------------------------------- */
.bb-nav-toggle-input{display:none;}
.bb-nav-toggle-label{
  display:none;
  order:4;
  flex-direction:column;
  justify-content:space-between;
  width:26px;height:18px;
  cursor:pointer;
  flex-shrink:0;
  margin-left:4px;
}
.bb-nav-toggle-label span{
  display:block;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
  transition:transform 0.2s ease,opacity 0.2s ease;
}
.bb-nav-logo{order:1;}
.bb-nav-links{order:2;}
.bb-nav-cta{order:3;}

@media (max-width:1180px){
  .bb-nav{padding:0 20px;gap:12px;flex-wrap:wrap;}
  .bb-nav-toggle-label{display:flex;}
  .bb-nav-links{
    display:none;
    order:5;
    width:100%;
    flex-direction:column;
    gap:0;
    background:#0a0a0a;
    position:absolute;
    top:100%;left:0;right:0;
    padding:8px 20px 18px;
    border-top:1px solid #222;
    box-shadow:0 16px 28px rgba(0,0,0,0.45);
  }
  .bb-nav-toggle-input:checked ~ .bb-nav-links{display:flex;}
  .bb-nav-links a{
    padding:13px 2px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    font-size:13px;
  }
  .bb-nav-links a:last-child{border-bottom:none;}
  .bb-nav-cta{padding:9px 14px;font-size:10px;white-space:nowrap;}
  .bb-nav-wm strong{font-size:20px;}
  .bb-nav-wm span{font-size:14px;}
}
@media (max-width:420px){
  .bb-nav{padding:0 14px;}
  .bb-nav-cta{display:none;}
}

/* ----------------------------------------------------------------------
   HERO (home page)
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .bb-hero-left{padding:32px 24px;}
  .bb-h1{font-size:36px;}
}
@media (max-width:680px){
  .bb-h1{font-size:30px;}
  .bb-tag{font-size:9px;}
  .bb-btns{flex-direction:column;}
  .bb-btns a{text-align:center;}
}

/* ----------------------------------------------------------------------
   NAV CARDS ("Navigate" / Everything you need) — home page
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .bb-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .bb-grid{grid-template-columns:1fr;}
}

/* ----------------------------------------------------------------------
   FAN FAVORITES — home page
   .bb-mi needs min-width:0 at all sizes: CSS grid items default to a
   min-width based on their content, which is wider than a 4-up column
   can offer once the viewport drops below ~1180px — without this the
   grid blows out past the right edge of the page.
   ---------------------------------------------------------------------- */
.bb-mi{min-width:0;}
@media (max-width:900px){
  .bb-mgrid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .bb-mgrid{grid-template-columns:1fr;}
  .bb-mi:hover{transform:none;}
}

/* ----------------------------------------------------------------------
   ADD-ONS grid (Menu page + home page full-menu preview)
   ---------------------------------------------------------------------- */
@media (max-width:420px){
  .bb-addons{grid-template-columns:1fr;}
}

/* ----------------------------------------------------------------------
   FULL MENU 3-column layout — the home page's own copy of this section
   never had a mobile override (only the standalone Menu page did), so
   it was overflowing the viewport on every phone width.
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .bb-menu-cols{grid-template-columns:1fr;}
}

/* ----------------------------------------------------------------------
   SECTION PADDING — shared section wrappers across pages
   ---------------------------------------------------------------------- */
@media (max-width:680px){
  .bb-cards,.bb-favs,.bb-rewards{padding:44px 20px;}
  .bb-full-menu{padding:48px 20px;}
  .bb-order{padding:36px 24px;flex-direction:column;text-align:center;}
  .fw-hero{padding:48px 24px;}
  .fw-body{padding:44px 20px;}
  .fw-notify{padding:36px 24px;}
  .cs-wrap{padding:56px 20px;min-height:0;}
  .mn-hero{padding:40px 24px;}
  .mn-hero h1{font-size:28px;}
  .bb-full-menu-hd h2,.sh2{font-size:26px;}
  .bb-cards-hd h2,.bb-favs-hd h2{font-size:26px;}
}

/* ----------------------------------------------------------------------
   FOOTER — every page
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .bb-ftop{grid-template-columns:1fr 1fr;row-gap:28px;}
}
@media (max-width:560px){
  .bb-footer{padding:40px 24px 20px;}
  .bb-ftop{grid-template-columns:1fr;row-gap:28px;}
  .bb-fbot{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* ----------------------------------------------------------------------
   REWARDS PAGE
   ---------------------------------------------------------------------- */
@media (max-width:1100px){
  .rw-hero-inner{grid-template-columns:1fr;gap:32px;text-align:center;}
}
@media (max-width:900px){
  .rw-explainer-inner{grid-template-columns:1fr;gap:32px;}
  .rw-perks-grid{grid-template-columns:repeat(2,1fr);}
  .rw-steps{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .rw-perks-grid{grid-template-columns:1fr;}
  .rw-tbl-hd,.rw-tbl-row{grid-template-columns:1.3fr 1fr 1fr;gap:4px;padding-left:16px;padding-right:16px;}
  .rw-tbl-hd span,.rw-tbl-row *{font-size:11px;}
}
@media (max-width:680px){
  .bb-ri{grid-template-columns:1fr;gap:28px;}
}

/* ----------------------------------------------------------------------
   LOCATION PAGE
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .loc-info{grid-template-columns:1fr;padding:44px 24px;gap:28px;}
}

/* ----------------------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr;}
}

/* ----------------------------------------------------------------------
   GIFT CARDS PAGE (and any other page using fw-hero-grid)
   ---------------------------------------------------------------------- */
@media (max-width:900px){
  .fw-hero-grid{grid-template-columns:1fr;gap:28px;}
}

/* ----------------------------------------------------------------------
   HAPPY HOUR PAGE
   ---------------------------------------------------------------------- */
@media (max-width:680px){
  .hh-hero{padding:22px 20px 18px;}
  .hh-title{font-size:30px;}
  .hh-off{font-size:40px;}
}

/* ----------------------------------------------------------------------
   GENERAL — prevent any residual horizontal overflow
   ---------------------------------------------------------------------- */
@media (max-width:680px){
  html,body{overflow-x:hidden;}
}