/* Little House of Kebobs — shared site styles
   Homepage: complete styles. Legacy Adobe Muse pages: shared header/nav
   overrides only; retain their original css/site_global.css and page CSS.
*/
:root{--green:#63ae05;--green-dark:#4d9000;--red:#b90000;--teal:#087f7b;--cream:#fffaf3;--ink:#25221e}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit}
img{max-width:100%}
/* Modern homepage header — matches the preferred index.html screenshot */
body>header{background:#050505;color:#fff}
.brand-banner{height:235px;max-width:1260px;margin:0 auto;position:relative;background:#050505;border-bottom:5px solid #e2e700;overflow:hidden}
.brand-logo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;max-width:none}
.brand-earth{position:absolute;right:12px;top:14px;width:210px;height:210px;object-fit:contain;max-width:none}
.brand-phone{position:absolute;left:5%;bottom:8px;color:white;text-decoration:none;font-family:Georgia,'Times New Roman',serif;font-size:clamp(23px,3vw,42px);font-weight:700;text-shadow:1px 2px 2px #000;z-index:2}
/* Shared green menu with a red active tab */
.site-nav{max-width:1260px;margin:auto;display:flex;flex-wrap:wrap;justify-content:stretch;background:var(--green);border-bottom:5px solid #00d9c6}
.site-nav>a{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:61px;padding:10px 15px;color:#fff;background:var(--green);border-right:2px solid #d6ea64;text-decoration:none;font-family:Georgia,'Times New Roman',serif;font-size:clamp(18px,2vw,31px);white-space:nowrap}
.site-nav>a:hover,.site-nav>a:focus-visible{background:var(--green-dark)}
.site-nav>a.active,.site-nav>a[aria-current="page"]{background:var(--red)}
/* Hide editor link from public navigation, not the admin endpoint */
.site-nav>a[href="admin/"],.site-nav>a[href="admin/index.php"]{display:none}
/* Homepage content */
body:not(:has(#page)) main{max-width:1260px;margin:0 auto}
.hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(245px,1fr);gap:36px;padding:65px 5%;background:linear-gradient(120deg,#111 0%,#282018 100%);color:#fff}
.eyebrow{color:#c9a04e;letter-spacing:.1em;text-transform:uppercase;font-size:13px;font-weight:700}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4.2vw,58px);line-height:1.12;margin:12px 0 22px}
.hero p{line-height:1.75;max-width:680px}.hero-lead{font-size:19px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.btn{display:inline-block;border:2px solid #c8a15c;border-radius:5px;padding:12px 19px;text-decoration:none;font-weight:700}
.btn-primary{background:#b51f17;color:white;border-color:#b51f17}.btn-outline{color:white}.btn-outline.dark{color:#33251a}
.hero-side{display:grid;gap:14px;align-content:center}.hero-feature{display:grid;gap:7px;padding:19px;background:rgba(255,255,255,.08);border-left:4px solid #c5a05a}.hero-feature strong{font-size:22px}.feature-icon{color:#e6b05e}
.welcome,.visit{display:grid;grid-template-columns:1.5fr 1fr;gap:35px;padding:55px 5%}.welcome h2,.visit h2,.menu-section h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,3vw,39px);margin:8px 0 18px}.welcome p,.visit p{line-height:1.7}.welcome-aside,.visit-address{background:#f6eee2;border-radius:8px;padding:28px}.welcome-aside a{color:#9c1d17;font-weight:bold}
.menu-section{padding:55px 5%;background:#fffaf4}.section-heading{display:flex;gap:24px;justify-content:space-between;align-items:end}.section-heading>p{max-width:460px;line-height:1.6}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:22px}.menu-grid>article,.menu-grid>.menu-card{min-width:0}.menu-grid img{max-width:100%;height:auto}.note{font-size:13px;color:#6a625b}
.visit{background:#fff}.visit-address{display:flex;flex-direction:column;gap:12px}.visit-address a{color:#a4211b}
body:not(:has(#page))>footer{padding:24px;text-align:center;background:#181411;color:white}
/* Adobe Muse pages: preserve all page-specific layout/content rules. */
html:has(#page) body{font-family:Arial,Helvetica,sans-serif}
html:has(#page) #page{max-width:1260px}
/* Legacy header: align phone with the homepage while leaving logo/globe imagery untouched */
html:has(#page) #u1306-4,html:has(#page) #u3586-4{z-index:200!important;pointer-events:auto}
html:has(#page) #u1306-4 p,html:has(#page) #u3586-4 p{white-space:nowrap;text-shadow:1px 2px 2px #000}
/* Nav colours across the Muse templates */
html:has(#page) nav.MenuBar a.MenuItem{background:#63ae05!important;color:#fff!important}
html:has(#page) nav.MenuBar a.MenuItem.MuseMenuActive,html:has(#page) nav.MenuBar a.MenuItem[aria-current="page"]{background:#b90000!important}
html:has(#page) nav.MenuBar a.MenuItem:hover{background:#4d9000!important}
html:has(#page) nav.MenuBar a.MenuItem.MuseMenuActive:hover{background:#a80000!important}
html:has(#page) nav.MenuBar a.MenuItem p{color:#fff!important}
/* Larger map when location page embeds a Google iframe; parent layout must also permit expansion. */
html:has(#page) iframe[src*="google.com/maps"],html:has(#page) iframe[src*="maps.google"]{border:0;max-width:100%}
@media(max-width:800px){
 .brand-banner{height:clamp(130px,24vw,205px)}
 .brand-earth{width:clamp(80px,18vw,145px);height:clamp(80px,18vw,145px);top:6px;right:5px}
 .brand-phone{font-size:clamp(18px,3.4vw,28px);bottom:5px}
 .site-nav>a{flex:1 1 33.33%;font-size:clamp(15px,3vw,22px);min-height:49px;padding:8px 5px;white-space:normal;text-align:center}
 .hero,.welcome,.visit{grid-template-columns:1fr;padding:35px 5%}.hero-side{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
 .section-heading{display:block}.menu-section{padding:35px 5%}
}
@media(max-width:460px){.site-nav>a{flex-basis:50%}.hero h1{font-size:32px}.hero-feature strong{font-size:18px}}

/* ===== Shared header for Adobe Muse pages =====
   Homepage remains the reference. All navigation is styled by style.css.
   The selectors below prevent legacy Muse CSS from repositioning the header. */
html:has(#page) body>header{display:block!important;position:relative!important;z-index:1000!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#050505!important;color:#fff!important;float:none!important;clear:both!important}
html:has(#page) body>header .brand-banner{display:block!important;position:relative!important;width:100%!important;max-width:1260px!important;height:235px!important;margin:0 auto!important;padding:0!important;background:#050505!important;border-bottom:5px solid #e2e700!important;overflow:hidden!important}
html:has(#page) body>header .brand-logo{display:block!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;margin:0!important}
html:has(#page) body>header .brand-earth{display:block!important;position:absolute!important;right:12px!important;top:14px!important;width:210px!important;height:210px!important;max-width:none!important;object-fit:contain!important;margin:0!important}
html:has(#page) body>header .brand-phone{display:block!important;position:absolute!important;left:5%!important;bottom:8px!important;top:auto!important;right:auto!important;z-index:3!important;color:#fff!important;text-decoration:none!important;font:700 clamp(23px,3vw,42px)/normal Georgia,'Times New Roman',serif!important;text-shadow:1px 2px 2px #000!important;white-space:nowrap!important;margin:0!important}
html:has(#page) body>header nav.site-nav{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;justify-content:stretch!important;position:relative!important;float:none!important;max-width:1260px!important;width:100%!important;min-height:0!important;margin:0 auto!important;padding:0!important;background:#63ae05!important;border:0!important;border-bottom:5px solid #00d9c6!important}
html:has(#page) body>header nav.site-nav>a{display:flex!important;flex:1 1 auto!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:auto!important;min-height:61px!important;height:auto!important;margin:0!important;padding:10px 15px!important;color:#fff!important;background:#63ae05!important;border:0!important;border-right:2px solid #d6ea64!important;border-radius:0!important;text-decoration:none!important;text-align:center!important;font:400 clamp(18px,2vw,31px)/normal Georgia,'Times New Roman',serif!important;white-space:nowrap!important;box-shadow:none!important;letter-spacing:normal!important;text-transform:none!important}
html:has(#page) body>header nav.site-nav>a:hover{background:#4d9000!important}
html:has(#page) body>header nav.site-nav>a[aria-current=page]{background:#b90000!important}
/* Hide duplicate Muse masthead/navigation but preserve the page content. */
html:has(#page) #page_position_content>#pu278,
html:has(#page) #page_position_content>#pu3581,
html:has(#page) #page_position_content>#pu91-3{display:none!important}
html:has(#page) .lh-mobile .lhk-unified-header,
html:has(#page) .lh-mobile .lhk-unified-nav,
html:has(#page) .lh-mobile .lh-header,
html:has(#page) .lh-mobile .lh-nav{display:none!important}
@media(max-width:800px){
 html:has(#page) body>header .brand-banner{height:clamp(130px,24vw,205px)!important}
 html:has(#page) body>header .brand-earth{width:clamp(80px,18vw,145px)!important;height:clamp(80px,18vw,145px)!important;top:6px!important;right:5px!important}
 html:has(#page) body>header .brand-phone{font-size:clamp(18px,3.4vw,28px)!important;bottom:5px!important}
 html:has(#page) body>header nav.site-nav>a{flex:1 1 33.33%!important;min-height:49px!important;font-size:clamp(15px,3vw,22px)!important;padding:8px 5px!important;white-space:normal!important}
}
@media(max-width:460px){html:has(#page) body>header nav.site-nav>a{flex-basis:50%!important}}

/* ===== FINAL UNIFIED HEADER: homepage screenshot is the reference ===== */
body > header {background:#050505!important;color:#fff!important;width:100%!important;margin:0!important;padding:0!important;position:relative!important;z-index:1000!important}
body > header .brand-banner {height:235px!important;max-width:1260px!important;width:100%!important;margin:0 auto!important;position:relative!important;background:#050505!important;overflow:hidden!important;border:0!important}
body > header .brand-logo {position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:fill!important;max-width:none!important}
body > header .brand-earth {position:absolute!important;right:12px!important;top:14px!important;width:210px!important;height:210px!important;object-fit:contain!important;max-width:none!important}
body > header .brand-phone {position:absolute!important;left:5%!important;bottom:8px!important;top:auto!important;right:auto!important;z-index:3!important;color:#fff!important;font:700 clamp(23px,3vw,42px)/1 Georgia,'Times New Roman',serif!important;text-decoration:none!important;white-space:nowrap!important}
body > header nav.site-nav {display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;width:100%!important;max-width:none!important;min-height:51px!important;height:auto!important;margin:0!important;padding:0 max(14px,calc((100vw - 1190px)/2))!important;background:#1a110f!important;border:0!important;border-top:0!important;border-bottom:0!important;box-sizing:border-box!important;position:relative!important;float:none!important}
body > header nav.site-nav > a {display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;min-height:51px!important;height:auto!important;width:auto!important;min-width:0!important;padding:12px 10px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#fff!important;text-decoration:none!important;text-align:center!important;white-space:nowrap!important;font:400 14px/1.3 Arial,Helvetica,sans-serif!important;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important}
body > header nav.site-nav > a:hover,body > header nav.site-nav > a:focus-visible {background:#38221c!important}
body > header nav.site-nav > a[aria-current=page] {background:#b90000!important;color:#fff!important}
body > header nav.site-nav > a[href='admin/'],body > header nav.site-nav > a[href='admin/index.php'] {display:inline-flex!important}
/* Remove all duplicate Adobe Muse navigation and header objects. */
html:has(#page) #page_position_content > #pu278,html:has(#page) #page_position_content > #pu3581,html:has(#page) #page_position_content > #pu91-3 {display:none!important}
html:has(#page) #page_position_content nav.MenuBar,html:has(#page) #page_position_content #menuu173 {display:none!important}
html:has(#page) .lh-mobile .lhk-unified-header,html:has(#page) .lh-mobile .lhk-unified-nav,html:has(#page) .lh-mobile .lh-header,html:has(#page) .lh-mobile .lh-nav {display:none!important}
@media(max-width:800px) {
 body > header .brand-banner {height:clamp(130px,24vw,205px)!important}
 body > header .brand-earth {width:clamp(80px,18vw,145px)!important;height:clamp(80px,18vw,145px)!important;top:6px!important;right:5px!important}
 body > header .brand-phone {font-size:clamp(18px,3.4vw,28px)!important;bottom:5px!important}
 body > header nav.site-nav {padding:0 8px!important;justify-content:center!important}
 body > header nav.site-nav > a {min-height:42px!important;padding:10px 9px!important;font-size:13px!important}
}


/* Unified navigation interaction: same hover on every page, including active tab. */
body > header nav.site-nav > a:is(:hover, :focus-visible),
body > header nav.site-nav > a[aria-current="page"]:is(:hover, :focus-visible),
body > header nav.site-nav > a.active:is(:hover, :focus-visible) {
  background: #38221c !important;
  color: #fff !important;
  text-decoration: none !important;
}
body > header nav.site-nav > a:focus-visible {
  outline: 2px solid #f4c55c !important;
  outline-offset: -3px !important;
}

/* Match the homepage's yellow divider between logo and navigation on every page. */
body > header nav.site-nav {
  border-top: 4px solid #e8df00 !important;
}

/* 2026-10-29: keep the header geometry identical between pages.
   Reserve scrollbar space, preventing the logo and phone from shifting
   when a page is shorter or longer than the viewport. */
html { scrollbar-gutter: stable; }
body > header { width:100%; font-synthesis:none; }
body > header .brand-banner {
  width:100% !important;
  max-width:1260px !important;
  height:235px !important;
  margin-inline:auto !important;
  position:relative !important;
  overflow:hidden !important;
  background:#050505 !important;
}
body > header .brand-logo {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:fill !important;
  display:block !important;
}
body > header .brand-phone {
  font-family:Georgia,'Times New Roman',serif !important;
  font-weight:700 !important;
  font-size:clamp(23px,3vw,42px) !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  font-kerning:normal !important;
  text-rendering:auto !important;
  left:5% !important;
  bottom:8px !important;
  margin:0 !important;
}
body > header nav.site-nav > a {
  font-family:Arial,Helvetica,sans-serif !important;
  font-weight:400 !important;
  font-size:14px !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
@media(max-width:800px){
  body > header .brand-banner {height:clamp(130px,24vw,205px) !important;}
  body > header .brand-phone {font-size:clamp(18px,3.4vw,28px) !important;bottom:5px !important;}
  body > header nav.site-nav > a {font-size:13px !important;}
}

/* FINAL FIX: legacy Muse page selectors had higher specificity than the
   homepage navigation, causing green, oversized, wrapping menu tabs. */
html:has(#page) body > header nav.site-nav {
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:100% !important;
  max-width:none !important;
  min-height:51px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 max(14px,calc((100vw - 1190px)/2)) !important;
  background:#1a110f !important;
  border:0 !important;
  border-top:4px solid #e8df00 !important;
  box-sizing:border-box !important;
}
html:has(#page) body > header nav.site-nav > a {
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  min-height:51px !important;
  height:auto !important;
  margin:0 !important;
  padding:12px 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  font:400 14px/1.3 Arial,Helvetica,sans-serif !important;
  box-shadow:none !important;
}
html:has(#page) body > header nav.site-nav > a[aria-current="page"] {
  background:#b90000 !important;
}
html:has(#page) body > header nav.site-nav > a:hover,
html:has(#page) body > header nav.site-nav > a:focus-visible,
html:has(#page) body > header nav.site-nav > a[aria-current="page"]:hover {
  background:#38221c !important;
}
@media(max-width:800px) {
  html:has(#page) body > header nav.site-nav {
    padding:0 8px !important;
    justify-content:center !important;
  }
  html:has(#page) body > header nav.site-nav > a {
    min-height:42px !important;
    padding:10px 9px !important;
    font-size:13px !important;
  }
  /* Legacy pages already provide a separate mobile header. Avoid duplication. */
  html:has(#page) body > header {display:none !important;}
}

/* Unified navigation hover: homepage and all interior pages. */
body > header nav.site-nav > a:hover,
body > header nav.site-nav > a:focus-visible,
body > header nav.site-nav > a[aria-current="page"]:hover,
body > header nav.site-nav > a.active:hover {
  background-color: #38221c !important;
  color: #fff !important;
  text-decoration: none !important;
}
body > header nav.site-nav > a:focus-visible {
  outline: 2px solid #f4c55c !important;
  outline-offset: -3px !important;
}


/* HOMEPAGE RESTORATION — matches the original light cream screenshot.
   These selectors only affect index.html; shared navigation remains unchanged. */
body:not(:has(#page)) {background:#f6f1e9;color:#392319;}
body:not(:has(#page)) > main {max-width:1260px;margin:0 auto;}
body:not(:has(#page)) .hero {
  width:calc(100% - 48px);max-width:1128px;margin:26px auto 38px;
  padding:54px 54px;gap:44px;
  background:linear-gradient(115deg,#fffaf2 0%,#f7e8d4 100%);
  color:#4d2819;border:1px solid #efd6b9;border-radius:22px;
  box-shadow:none;grid-template-columns:minmax(0,1.7fr) minmax(260px,.85fr);
}
body:not(:has(#page)) .hero .eyebrow {color:#a63816;font-size:13px;letter-spacing:.12em;font-weight:700;}
body:not(:has(#page)) .hero h1 {color:#562c1c;font-size:clamp(35px,4.3vw,60px);line-height:1.08;margin:12px 0 24px;}
body:not(:has(#page)) .hero p {color:#4d2819;}
body:not(:has(#page)) .hero .hero-lead {font-size:21px;line-height:1.55;}
body:not(:has(#page)) .hero .hero-side {gap:12px;}
body:not(:has(#page)) .hero .hero-feature {
  display:grid;gap:5px;padding:16px 17px;
  background:#fff;border:1px solid #efd8be;border-radius:13px;
  color:#663b24;box-shadow:none;
}
body:not(:has(#page)) .hero .hero-feature strong {color:#612b17;font-family:Georgia,'Times New Roman',serif;font-size:22px;}
body:not(:has(#page)) .hero .feature-icon {color:#b82c17;}
body:not(:has(#page)) .hero .btn-primary {background:#b42b1b;border-color:#b42b1b;color:#fff;}
body:not(:has(#page)) .hero .btn-outline {background:transparent;border-color:#b42b1b;color:#a52b1b;}
body:not(:has(#page)) .hero .btn {border-radius:8px;padding:14px 20px;}
@media(max-width:800px) {
  body:not(:has(#page)) .hero {grid-template-columns:1fr;width:calc(100% - 24px);padding:30px 24px;margin:14px auto 25px;gap:25px;}
  body:not(:has(#page)) .hero h1 {font-size:clamp(32px,7vw,46px);}
  body:not(:has(#page)) .hero .hero-lead {font-size:18px;}
}
/* Remove extra lime line on the four legacy pages */
body:has(nav.site-nav a[href="family-packages.html"][aria-current="page"]) .brand-banner,
body:has(nav.site-nav a[href="party-packages.html"][aria-current="page"]) .brand-banner,
body:has(nav.site-nav a[href="sandwiches.html"][aria-current="page"]) .brand-banner,
body:has(nav.site-nav a[href="location.html"][aria-current="page"]) .brand-banner {
    border-bottom: 0 !important;
}

/* Keep only the yellow divider */
body > header nav.site-nav {
    border-top: 4px solid #e8df00 !important;
}
/* 2026-10-29: Remove the extra lime strip on interior page mastheads.
   The prior rule depended on aria-current and only removed a border;
   this targets the shared legacy-page structure directly. */
html:has(#page) body > header .brand-banner {
  border:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
html:has(#page) body > header .brand-banner::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;right:0 !important;bottom:0 !important;
  height:7px !important;
  background:#050505 !important;
  z-index:4 !important;
  pointer-events:none !important;
}
html:has(#page) body > header nav.site-nav {
  border:0 !important;
  border-top:4px solid #e8df00 !important;
  box-shadow:none !important;
}
/* Little House of Kebobs — animated Milky Way header.
   Add this to the END of your current style.css. No HTML changes required.
   The original rotating_earth_(large).gif remains animated. */
body > header .brand-banner {
  isolation: isolate !important;
  background-color: #02030b !important;
  background-image:
    radial-gradient(ellipse 53% 34% at 47% 46%, rgba(83,75,144,.32), transparent 90%),
    radial-gradient(ellipse 32% 25% at 60% 37%, rgba(45,73,137,.27), transparent 90%),
    radial-gradient(ellipse 26% 23% at 28% 56%, rgba(105,51,111,.20), transparent 90%),
    radial-gradient(1px 1px at 9% 18%, #fff 95%, transparent),
    radial-gradient(1px 1px at 18% 66%, #d6ddff 95%, transparent),
    radial-gradient(2px 2px at 31% 19%, #fff 95%, transparent),
    radial-gradient(1px 1px at 46% 77%, #fff 95%, transparent),
    radial-gradient(1px 1px at 62% 14%, #f8e8ff 95%, transparent),
    radial-gradient(2px 2px at 77% 69%, #fff 95%, transparent),
    radial-gradient(1px 1px at 92% 31%, #e1e9ff 95%, transparent) !important;
}
body > header .brand-banner::before,
body > header .brand-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat;
}
body > header .brand-banner::before {
  background-image:
    radial-gradient(1px 1px at 12px 19px, #fff 95%, transparent),
    radial-gradient(1px 1px at 73px 58px, #a5c7ff 95%, transparent),
    radial-gradient(1.5px 1.5px at 134px 89px, #fff 95%, transparent),
    radial-gradient(1px 1px at 192px 32px, #d5caff 95%, transparent),
    radial-gradient(1px 1px at 239px 116px, #fff 95%, transparent);
  background-size: 263px 139px;
  opacity: .75;
  animation: lhk-star-twinkle 4.7s ease-in-out infinite alternate;
}
body > header .brand-banner::after {
  background-image:
    radial-gradient(1.4px 1.4px at 31px 47px, #fff 95%, transparent),
    radial-gradient(1px 1px at 107px 11px, #c8dcff 95%, transparent),
    radial-gradient(1.5px 1.5px at 158px 94px, #ffe7ca 95%, transparent),
    radial-gradient(1px 1px at 219px 69px, #fff 95%, transparent);
  background-size: 247px 127px;
  opacity: .25;
  animation: lhk-star-twinkle 3.2s ease-in-out infinite alternate-reverse;
}
/* The original logo is a PNG with a black background.
   Screen blending makes its black pixels transparent to the stars,
   while keeping the white lettering and red NORTH badge. */
body > header .brand-banner > .brand-logo {
  z-index: 2 !important;
  mix-blend-mode: screen !important;
}
body > header .brand-banner > .brand-earth {
  z-index: 3 !important;
  /* Keep the existing animated GIF; do NOT add a CSS rotation. */
}
body > header .brand-banner > .brand-phone {
  z-index: 4 !important;
}
@keyframes lhk-star-twinkle {
    0%   { opacity: 0.20; transform: scale(0.7); }
    15%  { opacity: 0.65; transform: scale(1.0); }
    30%  { opacity: 1.00; transform: scale(1.5); }
    45%  { opacity: 0.35; transform: scale(0.8); }
    60%  { opacity: 0.90; transform: scale(1.3); }
    75%  { opacity: 0.25; transform: scale(0.7); }
    90%  { opacity: 1.00; transform: scale(1.6); }
    100% { opacity: 0.20; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  body > header .brand-banner::before,
  body > header .brand-banner::after { animation: auto !important; opacity: 5.55; }
}
/* Little House of Kebobs — seamless animated globe on one continuous night sky.
   ADD to the end of your existing style.css; do not replace the entire file. */

/* Make the starry background span the entire banner, not just the logo area. */
body > header .brand-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #030511;
  background-image:
    radial-gradient(ellipse at 52% 48%, rgba(45,36,85,.42), transparent 65%),
    radial-gradient(1px 1px at 12% 20%, #fff 99%, transparent),
    radial-gradient(1px 1px at 24% 75%, #c9d8ff 99%, transparent),
    radial-gradient(1px 1px at 48% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 71% 64%, #fff 99%, transparent),
    radial-gradient(1px 1px at 89% 31%, #d7e2ff 99%, transparent);
  background-size: 100% 100%, 137px 113px, 173px 149px, 197px 181px, 229px 197px, 263px 239px;
}

/* Screen blending makes the black pixels of the existing animated GIF
   disappear into the background. No opaque rectangle or square mask. */
body > header .brand-banner .brand-earth {
  mix-blend-mode: screen !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Keep logo and telephone legible above the star background. */
body > header .brand-banner .brand-logo,
body > header .brand-banner .brand-phone {
  position: relative;
  z-index: 2;
}

/* Respect reduced-motion preference if extra star animations were added. */
@media (prefers-reduced-motion: reduce) {
  body > header .brand-banner::before,
  body > header .brand-banner::after { animation: none !important; }
}


/* FINAL: blend the animated globe into the continuous Milky Way sky.
   The source GIF contains opaque black pixels. A radial alpha mask fades
   the square edges; unlike mix-blend-mode:screen, it removes those pixels. */
body > header .brand-banner > img.brand-earth,
html:has(#page) body > header .brand-banner > img.brand-earth {
  mix-blend-mode: normal !important;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 62%, rgba(0,0,0,.94) 73%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 62%, rgba(0,0,0,.94) 73%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  background: transparent !important;
  filter: none !important;
  z-index: 3 !important;
}
/* Keep the star field visible underneath the transparent edge. */
body > header .brand-banner > .brand-logo {mix-blend-mode:screen !important; z-index:2 !important;}
body > header .brand-banner > .brand-phone {z-index:4 !important;}
/* Transparent animated Earth: add at the END of style.css. */
body > header .brand-banner .brand-earth {
  /* New file has real transparency: do not screen-blend or mask it. */
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
  z-index: 3 !important;
}
/* Little House of Kebobs: seamless animated Earth */
/* Add to the END of the existing style.css; do not replace it. */
.brand-earth,
.brand-banner img.brand-earth {
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* The existing Milky Way background remains behind the now-transparent Earth. */
/* Full-width Milky Way header */
html, body {
    margin: 0;
    padding: 0;
}

body > header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body > header .brand-banner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
    overflow: hidden;
    background-color: #02030d;
}

/* Keep logo, phone and globe centered within the wide header */
body > header .brand-logo,
body > header .brand-phone,
body > header .brand-earth {
    position: relative;
    z-index: 2;
}

/* Full-width navigation */
body > header .site-nav {
    width: auto% !important;
    max-width: none !important;
    box-sizing: border-box;
    border-top: 4px solid #e8df00 !important;
}
/*Kian*/
/* Interior pages only. Loaded AFTER style.css and Adobe Muse CSS.
   Preserve Home and Main Menu exactly as they currently are. */
@media (min-width:801px) {
 html:has(#page) body > header {display:block!important;width:100%!important;max-width:none!important;background:#02030b!important;}
 html:has(#page) body > header > .brand-banner {
   width:100%!important;max-width:none!important;margin:0!important;
   height:235px!important;position:relative!important;overflow:hidden!important;
   border:0!important;box-shadow:none!important;isolation:isolate!important;
   background-color:#02030b!important;
   background-image:radial-gradient(ellipse at 48% 55%,rgba(35,31,75,.48),transparent 75%),
    radial-gradient(1px 1px at 15% 35%,white 98%,transparent),
    radial-gradient(1px 1px at 55% 75%,#bbcaff 98%,transparent),
    radial-gradient(1px 1px at 85% 25%,white 98%,transparent)!important;
   background-size:100% 100%,137px 113px,197px 181px,263px 239px!important;
 }
 html:has(#page) body > header > .brand-banner::after {display:none!important;content:none!important;}
 html:has(#page) body > header > .brand-banner > .brand-logo {
   position:absolute!important;left:50%!important;top:0!important;
   transform:translateX(-50%)!important;width:min(1260px,100%)!important;
   height:235px!important;max-width:none!important;object-fit:fill!important;
   mix-blend-mode:screen!important;z-index:2!important;
 }
 html:has(#page) body > header > .brand-banner > .brand-earth {
   position:absolute!important;left:calc(50% + 408px)!important;right:auto!important;
   top:14px!important;width:210px!important;height:210px!important;
   object-fit:contain!important;mix-blend-mode:screen!important;
   mask-image:radial-gradient(circle,#000 60%,transparent 76%)!important;
   -webkit-mask-image:radial-gradient(circle,#000 60%,transparent 76%)!important;
   z-index:3!important;
 }
 html:has(#page) body > header > .brand-banner > .brand-phone {
   position:absolute!important;left:max(18px,calc(50% - 567px))!important;
   bottom:8px!important;top:auto!important;transform:none!important;
   font:700 clamp(23px,3vw,42px)/1 Georgia,serif!important;
   color:white!important;z-index:4!important;
 }
 html:has(#page) body > header > nav.site-nav {
   display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
   align-items:center!important;width:100%!important;max-width:none!important;
   min-height:51px!important;margin:0!important;
   padding:0 max(14px,calc((100vw - 1190px)/2))!important;
   border:0!important;border-top:4px solid #e8df00!important;
   background:#1a110f!important;box-shadow:none!important;
 }
 html:has(#page) body > header > nav.site-nav > a {
   display:inline-flex!important;flex:0 0 auto!important;min-height:51px!important;
   width:auto!important;margin:0!important;padding:12px 10px!important;
   font:400 14px/1.3 Arial,Helvetica,sans-serif!important;
   background:transparent!important;border:0!important;color:#fff!important;
   white-space:nowrap!important;text-decoration:none!important;
 }
 html:has(#page) body > header > nav.site-nav > a[aria-current="page"] {background:#b90000!important;}
 html:has(#page) body > header > nav.site-nav > a:hover {background:#38221c!important;}
}

/* ============================================================
   HOMEPAGE ONLY — wider hero and tighter section spacing
   2026-10-29. Does not change the header, navigation or Muse pages.
   ============================================================ */
@media (min-width: 801px) {
  body:not(:has(#page)) > main > .hero {
    width: calc(100% - 20px) !important;
    max-width: 1240px !important;
    margin: 14px auto 20px !important;
    padding: 35px 45px !important;
  }
  body:not(:has(#page)) > main > .welcome {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }
  body:not(:has(#page)) > main > .menu-section {
    padding-top: 25px !important;
  }
}
@media (max-width: 800px) {
  body:not(:has(#page)) > main > .hero {
    width: calc(100% - 20px) !important;
    margin: 14px auto 20px !important;
    padding: 25px 20px !important;
  }
  body:not(:has(#page)) > main > .welcome {
    padding-top: 20px !important;
    padding-bottom: 25px !important;
  }
  body:not(:has(#page)) > main > .menu-section {
    padding-top: 25px !important;
  }
}
/* Black circular numbers for the 17 homepage menu dishes */
.menu-card .menu-number,
.menu-card .dish-number,
.menu-card .item-number,
.menu-grid .menu-number,
.menu-grid .dish-number,
.menu-grid .item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: #111111;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.location-box,
.location-box:link,
.location-box:visited,
.location-box:hover,
.location-box:active {
    display: block;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #efd6b9;
    border-radius: 14px;
    color: #562c1c;
    text-decoration: none !important;
    cursor: pointer;
}

.location-box *,
.location-box:hover * {
    text-decoration: none !important;
}

.location-box strong {
    font-family: Georgia, serif;
    font-size: 24px;
}

.location-box span {
    font-size: 16px;
}

.location-star {
    display: block;
    color: #b42b1b;
    margin-bottom: 8px;
}

.location-box:hover {
    border-color: #b42b1b;
    background: #fffaf2;
}