/*
 * NYC LUX RIDE — static top utility bar + floating contact buttons.
 *
 * The markup these rules style (#nlr-topbar, #nlr-fab-stack) lives OUTSIDE #root,
 * so React hydration never reconciles it away. These rules also nudge the
 * React-rendered fixed header + main down to make room for the bar, and hide the
 * now-duplicate nav "Call" block if React re-renders it at runtime.
 * Gold token #d4af37 and hover #f0dc9f are the site's existing accents.
 */

:root {
  --nlr-gold: #d4af37;
  --nlr-gold-soft: #f0dc9f;
  --nlr-ink: #060606;   /* matches header bg-[#060606] */
  --nlr-bar-h: 38px;
}

/* ---------- Top utility bar (fixed, above the main header) ---------- */
#nlr-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nlr-bar-h);
  z-index: 60;               /* above header (z-50), below cookie/mobile widgets */
  background: var(--nlr-ink);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  color: #d8d8d8;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
#nlr-topbar .nlr-topbar-inner {
  max-width: 80rem;          /* matches header max-w-7xl */
  height: 100%;
  margin: 0 auto;
  padding: 0 1rem;           /* matches header px-4 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 1024px) {
  #nlr-topbar .nlr-topbar-inner { padding: 0 2rem; }  /* matches header lg:px-8 */
}
#nlr-topbar .nlr-tb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #d8d8d8;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}
#nlr-topbar .nlr-tb-link:hover,
#nlr-topbar .nlr-tb-link:focus-visible {
  color: var(--nlr-gold-soft);
}
#nlr-topbar .nlr-tb-link svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}
/* Mobile sizing tier (<=480px): shrink just enough that BOTH full labels
   (phone + info@nycluxride.com) fit one row with room to spare. At 390px the row
   totals ~280px of content inside ~366px available, so no wrap/overflow. */
@media (max-width: 480px) {
  #nlr-topbar .nlr-topbar-inner { padding: 0 0.75rem; gap: 0.5rem; }
  #nlr-topbar .nlr-tb-link { font-size: 13px; gap: 6px; }
  #nlr-topbar .nlr-tb-link svg { width: 16px; height: 16px; }
}
/* Below 360px only: collapse email to icon-only (mailto: still works); phone keeps text */
@media (max-width: 359px) {
  #nlr-topbar .nlr-tb-email .nlr-tb-email-text { display: none; }
}

/* ---------- Make room: push the fixed header + main below the bar ---------- */
#root header.fixed.top-0 { top: var(--nlr-bar-h); }
#root main.flex-grow { padding-top: calc(5rem + var(--nlr-bar-h)); }        /* was pt-20 */
@media (min-width: 1024px) {
  #root main.flex-grow { padding-top: calc(4rem + var(--nlr-bar-h)); }      /* was lg:pt-16 */
}

/* Hide the duplicate nav "Call" number if React re-renders it (number now lives
   only in the top bar). Social icons in the same cluster are untouched. */
#root .phone-sparkle-wrap { display: none !important; }

/* Hide the phone rendered under the mobile "PREMIUM LUXURY RIDES!" tagline
   (React component with this exact aria-label; client-only, so not in the SSR HTML).
   It duplicates the top utility bar's number. The tagline <span> is a sibling and
   stays; the top bar, mobile bottom-bar Call tab, hamburger, and footer phone links
   all use different aria-labels and are untouched. display:none also drops its
   mt-1, so the tagline block leaves no awkward gap. */
#root a[aria-label="Call +1 (646) 775-0556"] { display: none !important; }

/* ---------- Floating contact buttons (side edges, vertically centered) ---------- */
/* Two independent edge buttons — Call on the left, WhatsApp on the right — shown at
   ALL breakpoints. They sit at the vertical middle of the viewport, so they never
   collide with the bottom-anchored cookie banner (z-70) or mobile tab bar (z-90).
   The wrapper only groups the markup; each button positions itself fixed. */
#nlr-fab-stack { display: contents; }
#nlr-fab-stack .nlr-fab {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;                 /* above page content, BELOW the nav menu (z-50) so an
                                  open Services/Locations dropdown is never covered */
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
#nlr-fab-stack .nlr-fab:hover,
#nlr-fab-stack .nlr-fab:focus-visible {
  transform: translateY(-50%) scale(1.06);   /* keep vertical centering */
  filter: brightness(1.08);
}
/* Call float removed — only the green WhatsApp float remains */
#nlr-fab-stack .nlr-fab-call { display: none !important; }
/* Surviving WhatsApp float: standard bottom-right single-FAB placement */
#nlr-fab-stack .nlr-fab-wa {
  left: auto;
  right: 16px;
  top: auto;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: none;                 /* drop the mid-right translateY(-50%) centering */
  background: #25D366;             /* WhatsApp brand green */
}
#nlr-fab-stack .nlr-fab-wa svg { width: 32px; height: 32px; fill: #fff; }
#nlr-fab-stack .nlr-fab-wa:hover,
#nlr-fab-stack .nlr-fab-wa:focus-visible { transform: scale(1.06); }  /* no translateY now */
/* On mobile, clear the bottom tab bar (~63px tall, z-90) instead of sitting behind it */
@media (max-width: 767px) {
  #nlr-fab-stack .nlr-fab-wa { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  #nlr-fab-stack .nlr-fab { transition: none; }
}

/* ---------- Desktop hero crop fix ---------- */
/* The app sheet crops the hero to a fixed 360px on desktop (object-position 62%),
   cutting the fleet off the bottom. Give it a bounded taller height biased low so
   the full car band shows from laptop widths up to ultrawide, without going full
   height:auto (which would push the Book Now CTA below the fold).
   #root .hero-image (0,1,1,0) beats the app sheet's .hero-image (0,0,1,0), and this
   sheet loads after app.css — no !important needed. */
@media (min-width: 1024px) {
  #root .hero-image {
    height: 56vh;
    min-height: 420px;
    object-fit: cover;
    object-position: center 82%;   /* biases the crop to the fleet, sacrifices sky */
  }
}

/* ---------- Tighten spacing around the homepage "Arrive in Style" card ---------- */
/* Only margin/padding of the card — image, text, and button sizes are untouched.
   #root .home-content (0,1,1,0) beats the app sheet's .home-content (0,0,1,0);
   longhands keep the shorthand's auto horizontal centering + 1.5rem side padding. */
#root .home-content {
  margin-top: 1.25rem;      /* was 2.5rem — halves the hero->card gap */
  margin-bottom: 1.5rem;    /* was 2.5rem */
  padding-top: 1.25rem;     /* was 2rem */
  padding-bottom: 1.25rem;  /* was 2rem */
}

/* ---------- Interior-page spacing (contact / faq / about, services, locations) ----------
   The dominant dead-space driver is min-height:100vh on these section shells, not padding.
   Drop the floor to 60vh (NOT auto — the footer is already a sticky footer via the
   min-h-screen + flex-grow main + mt-auto footer, so it stays pinned; 60vh just keeps the
   gradient filling most of the viewport instead of leaving flat-dark below it) and trim
   the top/bottom padding. Horizontal padding is left intact. All are plain-class selectors
   (0,0,1,0); #root .x (0,1,1,0) wins and this sheet loads after app.css — no !important. */
#root .lux-page-shell        { min-height: 60vh; padding-top: 3.5rem; padding-bottom: 3.5rem; }
#root .services-section      { min-height: 60vh; padding-top: 3.5rem; padding-bottom: 3.5rem; }
#root .service-location-page { min-height: 60vh; padding-top: 3.5rem; }

/* === NLR INJECTED SECTIONS (services + WC band) START === */
/* Injected by assets/homepage-sections.js. #nlr-wc-top is the slim World Cup band placed at
   the top of .home-content (above the "Arrive in Style" headline); #nlr-injected is the
   services block placed before the fleet section. Everything scoped so nothing leaks. */

/* (1) Slim World Cup band — standalone strip at the top of .home-content, above the headline */
#nlr-wc-top {
  margin: 0 0 1.5rem;          /* sits above the headline without crowding it */
}
#nlr-wc-top .nlr-wc-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 10px 16px;
  text-align: center;
  background: rgba(9, 9, 9, 0.6);
  border: 1px solid rgba(240, 220, 159, 0.3);
  border-radius: 12px;
}
#nlr-wc-top .nlr-wc-msg {
  flex: 1 1 340px;
  min-width: 220px;
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #e9e2cf;
}
#nlr-wc-top .nlr-wc-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 10px;
}
#nlr-wc-top .nlr-btn-book,
#nlr-wc-top .nlr-wc-actions .nlr-btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 9999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: filter 0.2s ease;
}
#nlr-wc-top .nlr-btn-book:hover,
#nlr-wc-top .nlr-wc-actions .nlr-btn-wa:hover { filter: brightness(1.08); }
#nlr-wc-top .nlr-btn-book { background: #f0dc9f; color: #0b0b0b; }
#nlr-wc-top .nlr-wc-actions .nlr-btn-wa { background: #25D366; color: #fff; }

/* (2) Services block — before the fleet section */
#nlr-injected {
  box-sizing: border-box;
  width: 94%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.5rem 0 1.5rem;   /* matches the site's compacted section spacing */
}
#nlr-injected .nlr-services { text-align: center; }
#nlr-injected .nlr-services-title {
  margin: 0 0 1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0dc9f;
}
#nlr-injected .nlr-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  text-align: left;
}
#nlr-injected .nlr-service-card {
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(240, 220, 159, 0.25);
  border-radius: 14px;
}
#nlr-injected .nlr-service-name {
  margin: 0 0 0.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0dc9f;
}
#nlr-injected .nlr-service-blurb {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d1d5db;
}
@media (max-width: 600px) {
  #nlr-injected .nlr-services-grid { grid-template-columns: 1fr; }
  #nlr-wc-top .nlr-wc-msg { flex-basis: 100%; }
}

/* (3) Partner / affiliation strip — below the fleet section, above the footer. Self-hosted
   logos sit on white "chips" so dark/colored-text marks stay legible on the dark section. */
#nlr-partners {
  box-sizing: border-box;
  width: 100%;
  padding: 2.5rem 1rem 3rem;    /* compact default (mobile/tablet); desktop widens the band below */
  background: #060606;          /* consistent with the header/footer dark */
}
#nlr-partners .nlr-partners-title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0dc9f;
}
#nlr-partners .nlr-partners-row {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* keeps every wrapped row centered at all widths */
  gap: 16px;                 /* compact multi-row wrap on mobile; desktop overrides below */
}
#nlr-partners .nlr-partner-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
#nlr-partners .nlr-partner-chip img {
  display: block;
  height: 44px;
  max-height: 44px;
  width: auto;
  object-fit: contain;      /* never distort aspect ratio */
}

/* Desktop (>=768px): center the chips as TWO balanced rows — 5 on top (NLA first),
   4 below — using width math instead of nth-child hacks. Each chip takes a flex-basis
   of one fifth of the row minus the column gap, so exactly 5 fit per row and the 6th
   is forced to wrap, centered: 9 -> 5+4. The split re-derives automatically if the
   logo count ever changes (10 -> 5+5, 7 -> 5+2, ...). Taller vertical band for a
   lower-half, breathing-room feel; roomier uniform chips; logos stay height-capped so
   aspect ratios are preserved. */
@media (min-width: 768px) {
  #nlr-partners { padding: 4.5rem 1.5rem 5rem; }
  #nlr-partners .nlr-partners-row {
    max-width: 1040px;
    column-gap: 24px;
    row-gap: 28px;
  }
  #nlr-partners .nlr-partner-chip {
    flex: 0 0 calc(20% - 20px);   /* 5*(20%-20px) + 4*24px = 100%-4px -> 5 fit; a 6th overflows and wraps */
    max-width: calc(20% - 20px);
    padding: 16px 20px;
    min-height: 84px;             /* uniform chip height across both rows */
  }
  #nlr-partners .nlr-partner-chip img {
    height: 52px;
    max-height: 52px;
  }
}

/* Mobile (<600px): keep the current compact flex-wrap (4+4+1), centered, with tidy gaps. */
@media (max-width: 600px) {
  #nlr-partners { padding: 2rem 0.75rem 2.5rem; }
  #nlr-partners .nlr-partners-row { gap: 14px; }
  #nlr-partners .nlr-partner-chip { padding: 10px 14px; }
  #nlr-partners .nlr-partner-chip img { height: 36px; max-height: 36px; }
}

/* Mobile (<768px): stack the chips as a single centered column — one logo chip per row
   (client request). This block is placed AFTER the compact-wrap block above, so at <=600px
   it wins by source order; and it sits BELOW the min-width:768px desktop block, which it
   never overlaps, so the 5+4 desktop layout is untouched. box-sizing:border-box keeps the
   chip's padding+border inside its width, so min(320px, 86vw) can't cause overflow at 390px
   (86vw + the 1rem section side padding still clears the viewport). Gaps stay a tight 14px so
   the taller stack reads as intentional rhythm, not one-logo-per-screen dead bands. */
@media (max-width: 767px) {
  #nlr-partners { padding: 2.25rem 1rem 2.5rem; }
  #nlr-partners .nlr-partners-row {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
  }
  #nlr-partners .nlr-partner-chip {
    box-sizing: border-box;
    width: min(320px, 86vw);
    max-width: min(320px, 86vw);
    flex: 0 0 auto;
    padding: 12px 16px;
  }
  #nlr-partners .nlr-partner-chip img {
    height: 64px;
    max-height: 64px;
  }
}
/* === NLR INJECTED SECTIONS END === */