/* ============================================================
   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)}
/* jl-mini-eq-v2 — tiny animated equalizer beside the logo (Mike, borrowed from
   the MyDesiDJ hero). v2: slower (2.2-3s cycles vs 1.1s) and EQ-like — 7 bands
   on three different motion patterns and amplitudes instead of one synced hop.
   FIXED width/height box so it can never shift the banner (CLS-safe); only the
   bars animate inside it. Pure CSS, no JS. */
.justlimos-banner .jl-mini-eq{display:inline-flex;align-items:flex-end;gap:2px;height:26px;width:92px;margin-right:12px;flex-shrink:0}
.justlimos-banner .jl-mini-eq i{flex:1;border-radius:2px 2px 0 0}
.justlimos-banner .jl-mini-eq i:nth-child(1){background:linear-gradient(180deg,#ff00cc,#7a00ff);animation:jlEqLow 1.5s ease-in-out infinite}
.justlimos-banner .jl-mini-eq i:nth-child(2){background:linear-gradient(180deg,#ff00cc,#f59e0b);animation:jlEqMid 1.3s ease-in-out infinite;animation-delay:-.5s}
.justlimos-banner .jl-mini-eq i:nth-child(3){background:linear-gradient(180deg,#ffcc00,#ff6600);animation:jlEqLow 1.7s ease-in-out infinite;animation-delay:-.9s}
.justlimos-banner .jl-mini-eq i:nth-child(4){background:linear-gradient(180deg,#00ffd5,#002bff);animation:jlEqMid 1.4s ease-in-out infinite;animation-delay:-.2s}
.justlimos-banner .jl-mini-eq i:nth-child(5){background:linear-gradient(180deg,#ff0066,#7a00ff);animation:jlEqHigh 1.3s ease-in-out infinite;animation-delay:-.7s}
.justlimos-banner .jl-mini-eq i:nth-child(6){background:linear-gradient(180deg,#00ff66,#00ffd5);animation:jlEqMid 1.6s ease-in-out infinite;animation-delay:-1.1s}
.justlimos-banner .jl-mini-eq i:nth-child(7){background:linear-gradient(180deg,#f59e0b,#ff00cc);animation:jlEqHigh 1.7s ease-in-out infinite;animation-delay:-.4s}
.justlimos-banner .jl-mini-eq i:nth-child(8){background:linear-gradient(180deg,#7a00ff,#ff00cc);animation:jlEqMid 1.35s ease-in-out infinite;animation-delay:-.85s}
.justlimos-banner .jl-mini-eq i:nth-child(9){background:linear-gradient(180deg,#00ffd5,#00ff66);animation:jlEqLow 1.55s ease-in-out infinite;animation-delay:-.3s}
.justlimos-banner .jl-mini-eq i:nth-child(10){background:linear-gradient(180deg,#ffcc00,#ff0066);animation:jlEqHigh 1.45s ease-in-out infinite;animation-delay:-1s}
.justlimos-banner .jl-mini-eq i:nth-child(11){background:linear-gradient(180deg,#002bff,#00ffd5);animation:jlEqMid 1.65s ease-in-out infinite;animation-delay:-.6s}
.justlimos-banner .jl-mini-eq i:nth-child(12){background:linear-gradient(180deg,#ff6600,#ffcc00);animation:jlEqHigh 1.5s ease-in-out infinite;animation-delay:-1.3s}
/* Bass bands swing tall, mids wander, highs flicker lower — reads like a
   spectrum instead of a bounce */
@keyframes jlEqLow{0%,100%{height:55%}20%{height:92%}45%{height:65%}65%{height:100%}85%{height:72%}}
@keyframes jlEqMid{0%,100%{height:35%}25%{height:70%}50%{height:44%}75%{height:82%}}
@keyframes jlEqHigh{0%,100%{height:18%}30%{height:48%}55%{height:26%}80%{height:60%}}
/* ≤680px: same row, just slimmer — EQ leads the wordmark and shrinks. The
   lockup is nudged left by half the EQ width so the WORDMARK stays visually
   centered and the right side keeps its clearance from the contact pill. */
@media(max-width:680px){
  .justlimos-banner .jl-mini-eq{height:18px;width:50px;margin-right:8px}
  .justlimos-banner .logo-link{transform:translateX(-42px)}
}
@media(max-width:400px){
  .justlimos-banner .jl-mini-eq{width:40px;margin-right:6px}
  .justlimos-banner .logo-link{transform:translateX(-34px)}
}
@media(prefers-reduced-motion:reduce){.justlimos-banner .jl-mini-eq i{animation:none!important;height:55%}}
.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}
}