/* ===== ROOT THEME VARIABLES ===== */
  /* Defines brand colors used throughout Bub's at the Ballpark menu page */
  :root{--gold:#F5B800;--red:#C0272D;--dark:#1A1008;}

  /* ===== GLOBAL RESET ===== */
  /* Ensures consistent box sizing and removes default browser spacing */
  *{margin:0;padding:0;box-sizing:border-box;}

  /* ===== PAGE OVERFLOW CONTROL ===== */
  /* Prevents horizontal clipping and accidental side scrolling on mobile devices */
  html,body{max-width:100%;overflow-x:hidden;}

  /* ===== BODY BASE STYLES ===== */
  /* Applies primary typography, page background, and default foreground color */
  body{font-family:'Barlow',sans-serif;background:#1a1008;color:#fff;}

  /* ===== NAVIGATION BAR ===== */
  /* Sticky desktop navigation with centered logo and balanced left/right links */
  nav{background:#1a1008;position:sticky;top:0;z-index:1000;height:100px;border-bottom:1px solid rgba(255,255,255,0.07);}

  /* ===== NAVIGATION WRAPPER ===== */
  /* Three-column grid keeps links close to the centered logo */
  .nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%;padding:0 36px;max-width:1600px;margin:0 auto;}

  /* ===== LEFT NAVIGATION LINKS ===== */
  /* Aligns primary food and event navigation links toward the center logo */
  .nav-left{display:flex;align-items:center;justify-content:flex-end;gap:22px;list-style:none;padding-right:22px;}

  /* ===== RIGHT NAVIGATION LINKS ===== */
  /* Aligns secondary navigation and ordering link toward the center logo */
  .nav-right{display:flex;align-items:center;justify-content:flex-start;gap:22px;list-style:none;padding-left:22px;}

  /* ===== DESKTOP NAVIGATION LINK TYPOGRAPHY ===== */
  /* Uses condensed uppercase lettering for a sports-bar menu aesthetic */
  .nav-left a,.nav-right a{color:rgba(255,255,255,0.85);text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;}

  /* ===== DESKTOP NAVIGATION LINK HOVER STATE ===== */
  /* Highlights interactive navigation links with Bub's gold */
  .nav-left a:hover,.nav-right a:hover{color:var(--gold);}

  /* ===== ORDER NAVIGATION BUTTON ===== */
  /* Adds outlined emphasis to the order call-to-action in the nav */
  .nav-order a{border:2px solid var(--gold);color:var(--gold)!important;padding:5px 10px;}

  /* ===== NAVIGATION LOGO IMAGE ===== */
  /* Maintains consistent desktop logo height */
  .nav-logo img{height:80px;display:block;}

  /* ===== NAVIGATION SOCIAL WRAPPER ===== */
  /* Groups right-side navigation, social icons, and mobile toggle */
  .nav-social-wrap{display:flex;align-items:center;gap:12px;}

  /* ===== NAVIGATION SOCIAL ICON LIST ===== */
  /* Displays social icons inline on desktop */
  .nav-social{display:flex;gap:8px;}

  /* ===== NAVIGATION SOCIAL ICON LINKS ===== */
  /* Creates accessible icon hit targets with muted default color */
  .nav-social a{color:rgba(255,255,255,0.6);text-decoration:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}

  /* ===== NAVIGATION SOCIAL SVG ICONS ===== */
  /* Ensures consistent social icon sizing */
  .nav-social svg{width:13px;height:13px;fill:currentColor;}

  /* ===== MOBILE MENU BUTTON ===== */
  /* Hidden by default and shown at mobile breakpoints */
  .mob-btn{display:none;background:none;border:none;cursor:pointer;padding:4px;}

  /* ===== MOBILE MENU BUTTON LINES ===== */
  /* Creates hamburger icon bars */
  .mob-btn span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;}

  /* ===== MOBILE NAVIGATION PANEL ===== */
  /* Collapsible mobile menu shown via JavaScript */
  .mob-nav{display:none;background:#1a1008;padding:16px 20px;border-top:1px solid rgba(255,255,255,0.1);}

  /* ===== MOBILE NAVIGATION LINKS ===== */
  /* Mobile-friendly stacked links with adequate tap spacing */
  .mob-nav a{display:block;color:rgba(255,255,255,0.85);text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.07);}

  /* ===== MOBILE NAVIGATION LAST LINK ===== */
  /* Removes final divider for visual polish */
  .mob-nav a:last-child{border-bottom:none;}

  /* ===== MOBILE NAVIGATION HOVER STATE ===== */
  /* Highlights mobile nav interactions with Bub's gold */
  .mob-nav a:hover{color:var(--gold);}

  /* ===== MOBILE BOTTOM ACTION BAR ===== */
  /* Fixed mobile conversion bar for ordering, parties, and catering */
  .mob-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8888;background:#1a1008;border-top:2px solid var(--gold);}

  /* ===== MOBILE BOTTOM ACTION BAR INNER ===== */
  /* Splits bottom CTAs into equal-width buttons */
  .mob-bar-inner{display:flex;}

  /* ===== MOBILE BOTTOM ACTION LINKS ===== */
  /* Provides large, high-contrast tap targets on mobile */
  .mob-bar a{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 4px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;color:#fff;border-right:1px solid rgba(255,255,255,0.1);}

  /* ===== MOBILE BOTTOM ACTION LAST LINK ===== */
  /* Removes border on the final bottom-bar button */
  .mob-bar a:last-child{border-right:none;}

  /* ===== MOBILE BOTTOM ORDER BUTTON ===== */
  /* Uses brand red to emphasize online ordering */
  .mob-bar a:first-child{background:#C0272D;}

  /* ===== MOBILE BOTTOM PARTIES BUTTON ===== */
  /* Uses brand gold to draw attention to events and parties */
  .mob-bar a:nth-child(2){color:var(--gold);}

  /* ===== MOBILE NAVIGATION BREAKPOINT ===== */
  /* Switches desktop nav to mobile layout and reserves space for bottom action bar */
  @media(max-width:900px){nav{height:80px;}.nav-left,.nav-right,.nav-social{display:none!important;}.mob-btn{display:block;}.mob-bar{display:block;}body{padding-bottom:54px;}.nav-wrap{grid-template-columns:1fr auto auto;padding:0 16px;}}

  /* ===== HERO SECTION ===== */
  /* Main menu introduction with background imagery and mobile-safe padding */
  .hero{position:relative;height:400px;overflow:hidden;display:flex;align-items:flex-end;padding:0 0 52px 60px;}

  /* ===== HERO BACKGROUND IMAGE ===== */
  /* Full-bleed restaurant image used behind the headline */
  .hero-bg{position:absolute;inset:0;background-image:url('https://static.spotapps.co/spots/8e/bae6735f804be0b7f8945cbe62ea61/:original');background-size:cover;background-position:center;}

  /* ===== HERO BACKGROUND OVERLAY ===== */
  /* Dark gradient improves text contrast across image backgrounds */
  .hero-ov{position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.3) 70%);}

  /* ===== HERO CONTENT CONTAINER ===== */
  /* Keeps headline and CTAs above background layers */
  .hero-c{position:relative;z-index:2;padding-top:20px;}

  /* ===== HERO EYEBROW TEXT ===== */
  /* Gold uppercase label above the primary headline */
  .hero-c span{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;}

  /* ===== HERO HEADLINE ===== */
  /* Large responsive title with safe line-height for compact mobile displays */
  .hero-c h1{font-family:'Oswald',sans-serif;font-size:clamp(42px,7vw,80px);font-weight:700;text-transform:uppercase;color:#fff;line-height:0.9;margin-bottom:14px;}

  /* ===== HERO HEADLINE EMPHASIS ===== */
  /* Highlights the menu keyword in brand gold */
  .hero-c h1 em{color:var(--gold);font-style:normal;}

  /* ===== HERO DESCRIPTION ===== */
  /* Short supporting copy with readable contrast and width */
  .hero-c p{font-size:16px;color:rgba(255,255,255,0.8);max-width:380px;line-height:1.6;margin-bottom:22px;}

  /* ===== HERO BUTTON GROUP ===== */
  /* Flexible CTA row that wraps cleanly on smaller screens */
  .hero-btns{display:flex;gap:10px;flex-wrap:wrap;}

  /* ===== HERO BUTTON BASE ===== */
  /* Shared typography and spacing for hero CTAs */
  .hero-btns a{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;padding:11px 20px;}

  /* ===== RED CTA BUTTON ===== */
  /* Primary order action using Bub's red */
  .btn-r{background:#C0272D;color:#fff;}

  /* ===== GOLD CTA BUTTON ===== */
  /* Secondary highlighted action using Bub's gold */
  .btn-g{background:var(--gold);color:#1a1008;}

  /* ===== OUTLINE CTA BUTTON ===== */
  /* Optional transparent outlined button style */
  .btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);padding:9px 18px!important;}

  /* ===== HERO MOBILE BREAKPOINT ===== */
  /* Reduces hero height and guarantees minimum mobile side padding */
  @media(max-width:900px){.hero{height:320px;padding:0 16px 32px 20px;}.hero-btns a{font-size:12px;padding:9px 14px;}}

  /* ===== MENU TABS ===== */
  /* Sticky horizontally scrollable category tabs for fast menu filtering */
  .tabs{background:#111008;border-bottom:2px solid rgba(245,184,0,0.2);display:flex;overflow-x:auto;scrollbar-width:none;position:sticky;top:80px;z-index:100;}

  /* ===== MENU TABS SCROLLBAR ===== */
  /* Hides webkit scrollbar while preserving horizontal scrolling */
  .tabs::-webkit-scrollbar{display:none;}

  /* ===== MENU TAB BUTTON ===== */
  /* Category filter button styling with active underline state */
  .tab{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5);padding:15px 18px;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;border-top:none;border-left:none;border-right:none;transition:all 0.2s;}

  /* ===== ACTIVE MENU TAB ===== */
  /* Highlights the currently selected food category */
  .tab.active{color:var(--gold);border-bottom-color:var(--gold);}

  /* ===== MENU TABS MOBILE BREAKPOINT ===== */
  /* Tightens tab spacing while maintaining tappable controls */
  @media(max-width:900px){.tab{padding:12px 12px;font-size:12px;}}

  /* ===== MENU CONTENT WRAPPER ===== */
  /* Provides responsive page padding and bottom spacing for fixed mobile bar */
  .wrap{padding:0 60px 80px;}

  /* ===== MENU SECTION PANEL ===== */
  /* Hidden by default until selected through tabs */
  .sec{display:none;padding-top:36px;}

  /* ===== ACTIVE MENU SECTION PANEL ===== */
  /* Displays selected category content */
  .sec.active{display:block;}

  /* ===== MENU SECTION HEADING ===== */
  /* Large category headline with responsive sizing */
  .sec-h{font-family:'Oswald',sans-serif;font-size:clamp(24px,4vw,40px);font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:28px;}

  /* ===== MENU GROUP TITLE ===== */
  /* Small uppercase divider for category groups in full menu view */
  .grp-t{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:14px;}

  /* ===== MENU GROUP BLOCK ===== */
  /* Provides spacing between full-menu category groups */
  .grp{margin-bottom:36px;}

  /* ===== MENU ITEM GRID ===== */
  /* Responsive card grid that adapts from multiple columns to one column */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}

  /* ===== MENU ITEM CARD ===== */
  /* Compact horizontal menu item card with image, description, and price */
  .card{background:#2a1c10;border:1px solid rgba(255,255,255,0.07);border-radius:5px;overflow:hidden;display:flex;}

  /* ===== MENU ITEM CARD HOVER ===== */
  /* Adds subtle gold border on hover to communicate interactivity */
  .card:hover{border-color:rgba(245,184,0,0.25);}

  /* ===== MENU ITEM IMAGE ===== */
  /* Fixed thumbnail sizing for menu item photos */
  .card img{width:100px;min-height:100px;object-fit:cover;flex-shrink:0;}

  /* ===== MENU ITEM IMAGE PLACEHOLDER ===== */
  /* Emoji fallback for menu items without photos */
  .card-ph{width:100px;min-height:100px;background:#1a1008;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;}

  /* ===== MENU ITEM CARD BODY ===== */
  /* Vertical card content layout with price anchored beneath copy */
  .card-b{padding:12px 14px;flex:1;display:flex;flex-direction:column;justify-content:space-between;}

  /* ===== MENU ITEM NAME ===== */
  /* Bold condensed item title */
  .card-n{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:4px;}

  /* ===== MENU ITEM DESCRIPTION ===== */
  /* Compact readable description with muted contrast */
  .card-d{font-size:12px;color:rgba(255,255,255,0.55);line-height:1.5;flex:1;margin-bottom:8px;}

  /* ===== MENU ITEM PRICE ===== */
  /* Gold Oswald price styling for quick scanning */
  .card-p{font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;color:var(--gold);}

  /* ===== MENU CONTENT MOBILE BREAKPOINT ===== */
  /* Ensures safe mobile padding and single-column menu layout */
  @media(max-width:900px){.wrap{padding:0 16px 80px;}.grid{grid-template-columns:1fr;}}

  /* ===== FOOTER MAIN AREA ===== */
  /* Three-column desktop footer with location, logo, and contact info */
  .foot{background:#0e0a06;padding:36px 60px;display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;}

  /* ===== FOOTER HEADING TEXT ===== */
  /* Gold uppercase labels for footer information groups */
  .foot-l h5,.foot-r h5{font-family:'Oswald',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;color:var(--gold);letter-spacing:0.1em;margin-bottom:5px;}

  /* ===== FOOTER BODY TEXT ===== */
  /* Muted footer information styling */
  .foot-l,.foot-r{font-family:'Barlow',sans-serif;font-size:13px;color:rgba(255,255,255,0.65);line-height:2;}

  /* ===== FOOTER RIGHT COLUMN ===== */
  /* Right-aligns contact information on desktop */
  .foot-r{text-align:right;}

  /* ===== FOOTER CONTACT LINKS ===== */
  /* Keeps phone and email visually consistent with footer text */
  .foot-r a{color:rgba(255,255,255,0.65);text-decoration:none;}

  /* ===== FOOTER LOGO IMAGE ===== */
  /* Maintains a strong centered brand mark in the footer */
  .foot-logo img{height:100px;display:block;}

  /* ===== FOOTER COPYRIGHT BAR ===== */
  /* Slim copyright strip beneath primary footer content */
  .foot-copy{background:#0e0a06;border-top:1px solid rgba(255,255,255,0.07);padding:10px 60px;text-align:center;font-size:11px;color:rgba(255,255,255,0.3);font-family:'Barlow',sans-serif;}

  /* ===== FOOTER MOBILE BREAKPOINT ===== */
  /* Stacks footer columns and maintains safe mobile padding */
  @media(max-width:900px){.foot{grid-template-columns:1fr;text-align:center;padding:24px 20px;}.foot-r{text-align:center;}.foot-logo img{margin:0 auto;}.foot-copy{padding:10px 20px;}}

  /* ===== CHAT BUBBLE MESSAGE ===== */
  /* Floating chatbot welcome bubble with dark brand styling */
  #bc-bubble{position:fixed;bottom:135px;right:16px;z-index:9999;max-width:240px;background:#1a1008;color:#fff;border-radius:16px 16px 0 16px;padding:14px 32px 14px 14px;font-size:13px;line-height:1.6;box-shadow:0 4px 20px rgba(0,0,0,0.5);display:none;}

  /* ===== CHAT BUBBLE CLOSE BUTTON ===== */
  /* Small close control inside the welcome bubble */
  #bc-bubble button{position:absolute;top:5px;right:7px;background:none;border:none;color:rgba(255,255,255,0.5);font-size:14px;cursor:pointer;}

  /* ===== CHAT LAUNCH BUTTON ===== */
  /* Fixed chatbot launcher positioned above mobile action area */
  #bc-btn{position:fixed;bottom:24px;right:16px;z-index:9999;cursor:pointer;}

  /* ===== CHAT LAUNCH IMAGE ===== */
  /* Branded chatbot image with drop shadow */
  #bc-btn img{width:100px;height:100px;object-fit:contain;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));}

  /* ===== CHAT MODAL CONTAINER ===== */
  /* Embedded chatbot modal with gold border and rounded corners */
  #bc-modal{display:none;position:fixed;bottom:135px;right:16px;width:320px;height:480px;z-index:9998;border-radius:14px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.5);border:2px solid #F5B800;}

  /* ===== CHAT MODAL CLOSE BUTTON ===== */
  /* Circular close button over the chatbot iframe */
  #bc-modal button{position:absolute;top:7px;right:9px;z-index:9999;background:rgba(0,0,0,0.55);border:none;color:#fff;font-size:14px;cursor:pointer;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

  /* ===== CHAT MODAL IFRAME ===== */
  /* Full-size embedded assistant viewport */
  #bc-modal iframe{width:100%;height:100%;border:none;}