/* ============================================================
   Outside Eats — shared site chrome
   Single stylesheet serving every page: top nav, "More" dropdown,
   footer, social icons, and the desktop/mobile responsive rules.
   Loaded LAST in <head> so it authoritatively governs these shared
   components; page-specific styles stay in each page's own <style>.
   ============================================================ */

/* ── Top nav links + "More" dropdown ── */
.nav-links{display:flex;gap:22px;align-items:center;flex:1;justify-content:center;}
.nav-link{font-family:'Source Sans 3',sans-serif;font-size:14px;color:rgba(255,255,255,0.6);white-space:nowrap;padding-bottom:2px;border-bottom:2px solid transparent;transition:all 0.15s;text-decoration:none;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;}
.nav-link:hover{color:#fff;border-bottom-color:#E8A82A;}
.nav-sep{color:rgba(255,255,255,0.3);font-size:14px;line-height:1;user-select:none;pointer-events:none;}
.nav-more{position:relative;}
.nav-more-btn{display:inline-flex;align-items:center;gap:5px;}
.nav-chevron{width:12px;height:12px;transition:transform 0.15s;}
.nav-more.open .nav-chevron{transform:rotate(180deg);}
.nav-more-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;background:#fff;border-radius:8px;box-shadow:0 8px 32px rgba(1,31,73,0.18);padding:6px 0;min-width:180px;display:none;z-index:1000;}
.nav-more.open .nav-more-menu{display:block;}
.nav-more-item{display:block;padding:8px 18px;font-family:'Source Sans 3',sans-serif;font-size:14px;color:#011f49;text-decoration:none;white-space:nowrap;text-align:left;}
.nav-more-item:hover{background:#F0F3F8;}
.nav-more-item.coming-soon{color:#bbb;pointer-events:none;}
.nav-more-item.coming-soon::after{content:' \2014 Coming Soon';font-size:11px;color:#ccc;}

/* ── Hamburger / drawer trigger: hidden on desktop ── */
.hamburger-btn{display:none;}

/* ── Drawer: scroll when taller than the viewport, header stays pinned ── */
.slide-panel{height:100dvh;}                 /* match the VISIBLE viewport (falls back to inline 100vh) */
.slide-panel-header{flex:0 0 auto;}
.slide-nav{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ── Footer ── */
footer{background:#011f49;min-height:104px;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;padding:18px 48px;font-family:'Source Sans 3',sans-serif;font-size:12px;color:rgba(255,255,255,0.45);text-align:center;}
footer a{color:rgba(255,255,255,0.45);text-decoration:underline;}
footer a:hover{color:rgba(255,255,255,0.75);}
.footer-sep{margin:0 10px;opacity:0.4;}
.footer-social{display:inline-flex;gap:14px;vertical-align:middle;}
.footer-social a{display:inline-flex;color:rgba(255,255,255,0.45);transition:color 0.15s;}
.footer-social a:hover{color:rgba(255,255,255,0.85);}
.footer-social svg{width:16px;height:16px;fill:currentColor;display:block;}

/* ── Inline video (click-to-play facade) ── */
.video-embed{cursor:pointer;display:block;}
.video-embed.is-playing{cursor:default;}
.oe-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#000;}
.oe-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.oe-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(1,31,73,0.28);transition:background 0.2s;}
.video-embed:hover .oe-play{background:rgba(1,31,73,0.12);}
.oe-play span{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,0.92);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,0.3);transition:transform 0.2s;}
.video-embed:hover .oe-play span{transform:scale(1.1);}
.oe-play svg{width:18px;height:18px;fill:#011f49;margin-left:3px;}
.video-playing{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;}
.video-playing iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
/* Expand button on narrow home-page players (YouTube hides its own fullscreen at that size).
   Opens a full-viewport overlay — real "fullscreen" on iPhone too, where the Fullscreen API
   won't run on an iframe. */
.oe-fs-btn{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;padding:0;border:0;border-radius:7px;background:rgba(1,31,73,0.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;}
.oe-fs-btn:hover{background:rgba(1,31,73,0.82);}
.oe-fs-btn svg{width:18px;height:18px;fill:currentColor;}
.oe-video-overlay{position:fixed;inset:0;z-index:12000;background:#000;display:none;align-items:center;justify-content:center;}
.oe-video-overlay.open{display:flex;}
.oe-video-overlay-inner{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;}
.oe-video-overlay-inner iframe{width:100%;height:100%;border:0;display:block;}
.oe-video-overlay-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,0.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.oe-video-overlay-close:hover{background:rgba(0,0,0,0.8);}

/* ── Account / sign-in button (injected into the nav by site.js) ── */
.oe-auth{position:relative;flex-shrink:0;margin-left:auto;}
.oe-auth-btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;padding:8px 18px;border-radius:22px;background:#E8A82A;color:#011f49;border:0;cursor:pointer;white-space:nowrap;transition:background 0.15s;}
.oe-auth-btn:hover{background:#f0b830;}
.oe-auth-btn.signed-in{background:rgba(255,255,255,0.12);color:#fff;}
.oe-auth-btn.signed-in:hover{background:rgba(255,255,255,0.22);}
.oe-auth-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:0 8px 32px rgba(1,31,73,0.18);padding:10px;min-width:200px;display:none;z-index:1001;}
.oe-auth-menu.open{display:block;}
.oe-auth-email{font-size:12px;color:#888;padding:2px 8px 8px;word-break:break-all;border-bottom:1px solid #eee;margin-bottom:6px;}
.oe-auth-signout{width:100%;text-align:left;background:none;border:0;padding:8px;font-size:14px;color:#c0392b;cursor:pointer;border-radius:6px;font-family:'Source Sans 3',sans-serif;}
.oe-auth-signout:hover{background:#fdf2f2;}
/* drawer entry (mobile, non-restaurants content pages) */
.oe-auth-drawer{border-top:1px solid #E8E8E4;margin-top:6px;padding-top:6px;}
.oe-auth-drawer-email{font-size:12px;color:#888;padding:8px 1.25rem 2px;word-break:break-all;}
.slide-nav-item.oe-auth-drawer-out{color:#c0392b;background:none;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;}

/* ── Mobile: hide horizontal nav, restore the hamburger/drawer ── */
@media (max-width: 768px){
  .nav-links{display:none;}
  .hamburger-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;}
  .oe-auth.has-drawer{display:none;}   /* mobile uses the drawer instead */
  footer{padding:16px 20px;font-size:11px;line-height:1.9;}
  .footer-sep{margin:0 5px;}
}
