/* ============================================================
   Just Limos — shared site ribbon (banner + icon nav)
   SINGLE SOURCE OF TRUTH. Edit here and every page that mounts
   #jl-ribbon (homepage + all city/tour pages) updates.
   Injected by /js/site-ribbon.js.
   ============================================================ */

/* ---- Banner block (logo + neon One-Minute-Quote box) ---- */
.justlimos-banner{display:flex;flex-direction:column;align-items:center;padding:12px 16px;font-family:'Arial',sans-serif;background-color:#000;position:relative}
.justlimos-banner *{box-sizing:border-box}
.justlimos-banner .logo-drive-container{display:flex;justify-content:center;align-items:center;background-color:#000;padding:0 10px;border-radius:8px;box-shadow:0 0 20px rgba(255,255,255,.05);margin-bottom:9px}
.justlimos-banner .logo-drive{max-width:min(210px,54vw);height:auto;display:block;filter:brightness(1.2) contrast(1.3)}
.justlimos-banner .led-glow{text-decoration:none;display:flex;justify-content:center;width:100%}
/* quote-pill-v2 (Mike: header ate too much room): one glowing line, whole pill
   clickable; neon cycle kept but the halo tightened from 25px/10px to 14px/3px
   so it doesn't need a big clear zone around it */
.justlimos-banner .quote-box{display:flex;align-items:center;justify-content:center;gap:9px;padding:9px 24px;border-radius:999px;background:#1a1a2e;color:#fff;box-shadow:0 0 14px 3px #ff00ff;animation:jlNeonPulse 12s infinite linear;max-width:96%;transition:transform .2s ease-in-out}
.justlimos-banner .quote-box:hover{transform:scale(1.04)}
.justlimos-banner .quote-title{font-size:16px;font-weight:bold;color:#ffcc00;white-space:nowrap;line-height:1.35}
.justlimos-banner .quote-cta{font-size:12.5px;color:#fff;white-space:nowrap;line-height:1.35}
.justlimos-banner .qp-sep{color:rgba(255,255,255,.35);font-weight:700}
.justlimos-banner .click-bounce{color:orange;font-weight:bold;font-size:15px;display:inline-block;animation:jlClickHop 1.5s ease-in-out infinite}
@keyframes jlClickHop{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.justlimos-banner .quote-subtext{font-size:12px;color:#ccc;white-space:nowrap;line-height:1.35}
@keyframes jlNeonPulse{
  0%{box-shadow:0 0 14px 3px #ff00ff}
  16%{box-shadow:0 0 14px 3px #00ffff}
  33%{box-shadow:0 0 14px 3px #00ff66}
  50%{box-shadow:0 0 14px 3px #ffcc00}
  66%{box-shadow:0 0 14px 3px #ff6600}
  83%{box-shadow:0 0 14px 3px #ff0066}
  100%{box-shadow:0 0 14px 3px #ff00ff}
}
/* three tracks — pill | logo | phone — sized so they can never overlap */
.justlimos-banner .banner-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:100%;max-width:1200px;margin:0 auto 6px}
.justlimos-banner .banner-call{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(249,140,10,.55);color:#ffc84d;text-decoration:none;font-weight:800;padding:10px 18px;border-radius:999px;font-size:.95rem;white-space:nowrap;box-shadow:none}
.justlimos-banner .banner-contact{display:none}
.justlimos-banner .banner-call:hover{background:linear-gradient(135deg,#f59e0b,#f97316);border-color:transparent;color:#111;box-shadow:0 4px 18px rgba(245,158,11,.35)}
.justlimos-banner .banner-kicker{grid-column:1;justify-self:start;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ec4899;border:1px solid rgba(236,72,153,.35);background:rgba(236,72,153,.08);padding:7px 14px;border-radius:999px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.justlimos-banner .logo-link{grid-column:2}
@media(max-width:1150px){.justlimos-banner .banner-kicker{letter-spacing:.06em;font-size:.66rem}}
@media(max-width:980px){.justlimos-banner .banner-kicker{display:none}.justlimos-banner .banner-top{grid-template-columns:1fr auto 1fr}}
@media(max-width:680px){.justlimos-banner .banner-call{display:none}
  .justlimos-banner .banner-top{position:relative}
  .justlimos-banner .logo-drive{max-width:min(175px,44vw)}  /* logo-trim-v1: clears the contact pill */
  .justlimos-banner .banner-contact{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;border:1px solid rgba(236,72,153,.5);background:rgba(236,72,153,.12);color:#ff9ec7;font-weight:800;font-size:.58rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;white-space:nowrap;line-height:1}
  .justlimos-banner .banner-contact img{width:16px;height:16px}
  .justlimos-banner .banner-contact.bc-top{top:0;transform:none}
  /* pill keeps to one line on phones: ✨ One-Minute Quote · ⏱ Ready in 60s → */
  .justlimos-banner .quote-cta,.justlimos-banner .qp-s1{display:none}
  .justlimos-banner .quote-box{gap:7px;padding:8px 16px}
  .justlimos-banner .quote-title{font-size:14.5px}
  .justlimos-banner .quote-subtext{font-size:11.5px}}

/* ---- Ribbon nav — glossy ribbon like the SyranFleet portal ---- */
.site-nav{position:relative;z-index:300;display:flex;gap:4px;justify-content:center;align-items:stretch;flex-wrap:wrap;padding:12px 14px 10px;background:linear-gradient(180deg,rgba(96,60,158,.5),rgba(30,20,60,.94));border-top:1px solid rgba(139,92,246,.28);border-bottom:1px solid rgba(236,72,153,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -16px 28px rgba(0,0,0,.32),0 8px 26px rgba(0,0,0,.38);font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.site-nav::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% -35%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%)}
.site-nav .mi{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:84px;padding:10px 8px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.09);color:rgba(255,255,255,.85);text-decoration:none;font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;text-align:center;line-height:1.25;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
.site-nav .mi::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.24),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none;transition:left .5s ease}
.site-nav .mi:hover::after{left:130%}
.site-nav .mi img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 9px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(139,92,246,.4));transition:transform .18s ease,filter .18s ease}
.site-nav .mi img.ico-fleet{width:66px;height:46px;margin:-3px 0}
.site-nav .mi img.ico-home{width:54px;height:57px;margin:-8px 0}
.site-nav .mi img.ico-cake{width:52px;height:52px;margin:-6px 0}
.site-nav .mi:hover{background:linear-gradient(180deg,rgba(236,72,153,.17),rgba(139,92,246,.1));border-color:rgba(236,72,153,.55);color:#fff;box-shadow:0 0 18px rgba(236,72,153,.32),inset 0 1px 0 rgba(255,255,255,.16)}
.site-nav .mi:hover img{transform:translateY(-3px) scale(1.1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(236,72,153,.6))}
.site-nav .mi.now{border-color:rgba(249,140,10,.8);background:linear-gradient(180deg,rgba(249,140,10,.2),rgba(249,140,10,.06));box-shadow:0 0 18px rgba(249,140,10,.4),inset 0 1px 0 rgba(255,255,255,.2);color:#fff}
.site-nav .mi .zap{font-size:34px;line-height:40px;height:40px;filter:drop-shadow(0 0 10px rgba(245,158,11,.75));transition:transform .18s ease}
.site-nav .mi:hover .zap{transform:translateY(-3px) scale(1.1)}
.site-nav .mi.go{color:rgba(255,255,255,.85)}
.site-nav .mi.go .zap{filter:none}
.site-nav .mi.go:hover{border-color:rgba(245,158,11,.7);background:rgba(245,158,11,.1);color:#ffd97a}
.site-nav .mi.go:hover .zap{filter:drop-shadow(0 0 10px rgba(245,158,11,.75))}
.site-nav .caret{font-size:.62rem;opacity:.7}
.site-nav .dd{position:relative;display:flex}
.site-nav .dd-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:4px;background:linear-gradient(180deg,rgba(22,17,36,.99),rgba(10,10,18,.99));border:1px solid rgba(236,72,153,.5);border-radius:14px;padding:8px;min-width:216px;z-index:70;box-shadow:0 14px 40px rgba(0,0,0,.65),0 0 24px rgba(139,92,246,.28),inset 0 1px 0 rgba(255,255,255,.08);max-height:min(72vh,680px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.site-nav .dd-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.site-nav .dd.open .dd-menu{display:flex}
@media(hover:hover){.site-nav .dd:hover .dd-menu{display:flex}}
.site-nav .dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.8);text-decoration:none;font-weight:700;font-size:.9rem;border:1px solid transparent;white-space:nowrap}
.site-nav .dd-menu a img{width:24px;height:24px;object-fit:contain}
.site-nav .dd-menu a:hover{color:#fff;border-color:rgba(236,72,153,.45);background:rgba(236,72,153,.1)}
.site-nav .dd-menu a.show-mobile{display:none}
.site-nav .mob-only{display:none}
/* about-under-contact-v1: contact-dd drops on desktop hover too (old desktop
   display:none!important suppressor removed; About lives in this menu now) */
/* fleet-menu: Our Fleet dropdown grouped by size */
.site-nav .dd-menu.fleet-menu{flex-flow:row wrap;width:470px;max-width:min(470px,92vw)}
.site-nav .dd-menu.fleet-menu .dm-h{display:flex;align-items:center;gap:10px;flex:1 1 100%;color:#fbaa1d;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:12px 12px 4px;margin-top:4px}
.site-nav .dd-menu.fleet-menu .dm-h::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(251,170,29,.5),rgba(251,170,29,0))}
.site-nav .dd-menu.fleet-menu a{flex:1 1 46%;font-size:.85rem}
/* tours-menu: Tours & Events dropdown grouped by theme (jl-tours-dd-v1) —
   keep in sync with NAV_CSS in tools/build-fleet-pages.mjs */
.site-nav .dd-menu.tours-menu{flex-flow:row wrap;width:460px;max-width:min(460px,92vw)}
.site-nav .dd-menu.tours-menu .dm-h{display:flex;align-items:center;gap:10px;flex:1 1 100%;color:#fbaa1d;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;padding:12px 12px 4px;margin-top:4px}
.site-nav .dd-menu.tours-menu .dm-h::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(251,170,29,.5),rgba(251,170,29,0))}
.site-nav .dd-menu.tours-menu a{flex:1 1 46%;font-size:.85rem}
.site-nav .dd-menu a .ic{font-size:1.15rem;line-height:1;width:24px;text-align:center;flex:0 0 auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(236,72,153,.25))}
/* ic-raven: force the bird to Ravens purple on every platform (grayscale+sepia
   neutralizes the OS bird color first — bare hue-rotate gave orange on Windows) */
.site-nav .dd-menu a .ic-raven{filter:grayscale(1) sepia(1) hue-rotate(212deg) saturate(2.6) brightness(.9) drop-shadow(0 2px 5px rgba(0,0,0,.55)) drop-shadow(0 0 7px rgba(139,92,246,.6))}
@media(max-width:680px){
  /* one dynamic row — every visible tile flexes to share the width evenly, no wrap */
  .site-nav{flex-wrap:nowrap;justify-content:center;padding:10px 5px 8px;gap:3px;position:relative}
  .site-nav .mi{min-width:0;flex:1 1 0;max-width:none;font-size:.56rem;gap:5px;padding:9px 2px 7px;letter-spacing:.02em}
  .site-nav .mi img{width:30px;height:30px}
  .site-nav .mi img.ico-fleet{width:45px;height:32px;margin:-1px 0}
  .site-nav .mi img.ico-home{width:36px;height:38px;margin:-4px 0}
  .site-nav .mi img.ico-cake{width:38px;height:38px;margin:-4px 0}
  .site-nav .mi.go{display:none}   /* Quote Now lives in the One-Minute-Quote box + sticky bar on phones */
  .site-nav .mi.hide-mobile{display:none}
  .site-nav .dd{display:flex;position:static;flex:1 1 0;max-width:none}
  .site-nav .dd .mi{flex:1;max-width:none;min-width:0}
  .site-nav .dd-menu{position:absolute;left:6px;right:6px;top:calc(100% + 6px);transform:none;width:auto;min-width:0;max-width:none;max-height:70vh;overflow-y:auto}
  .site-nav .dd-menu a.show-mobile{display:flex}
  .site-nav .mob-only{display:inline}
  .site-nav .dd.contact-dd.open .dd-menu{display:flex!important}
  .site-nav .dd-menu.fleet-menu{width:auto;max-width:none;left:6px;right:6px;max-height:70vh;overflow-y:auto}
  .site-nav .dd-menu.fleet-menu a{flex:1 1 45%}
  .site-nav .dd-menu.tours-menu{width:auto;max-width:none;left:6px;right:6px;max-height:70vh;overflow-y:auto}
  .site-nav .dd-menu.tours-menu a{flex:1 1 45%}
  /* contact-banner-v1: Contact lives in the header on phones — tile hidden */
  .site-nav .contact-dd{display:none}
  .site-nav .contact-dd .mi > span{display:none}
}