/* ==========================================================================
   ALL STARS ENTERTAINMENT — location-page layer (28 October 2026)
   Loaded AFTER product.css on the ~1,460 service-city pages. product.css owns
   the dark-luxury theme (tokens, nav, hero, content, CTA, footer); this file
   only styles what location pages have and product pages do not: the FAQ
   accordion, the inline quote form, the nav social icons and the info cards.
   Visual only — no markup depends on it. Injected by scripts/location_reskin_v1.py.
   ========================================================================== */

/* Nav social icons (as-social-v1 markup) */
.nav-social { display: flex; gap: .55rem; align-items: center; }
.nav-social a { color: var(--text-primary); opacity: .8; transition: opacity .25s ease, color .25s ease; }
.nav-social a:hover { opacity: 1; color: var(--gold-light); }

/* Atmosphere (Jermaine, 28 October 2026: tried "a hint of purple", then "the effect
   without the purple"). Two fixed layers behind everything:
   ::before — a faint warm-gold glow, drifting over ~30s;
   ::after  — star dust in white and gold (the All Stars nod) that twinkles.
   No second hue: gold stays the one colour. */
body::before, body::after {
  content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(42% 34% at 12% 18%, rgba(212,175,55,.07), transparent 70%),
    radial-gradient(38% 32% at 88% 62%, rgba(240,208,96,.05), transparent 70%),
    radial-gradient(30% 26% at 55% 4%, rgba(212,175,55,.07), transparent 70%);
}
body::after {
  inset: 0;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(245,242,236,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 140px 90px, rgba(240,208,96,.9) 0 1px, transparent 1.6px),
    radial-gradient(circle at 210px 180px, rgba(245,242,236,.8) 0 1.3px, transparent 2px),
    radial-gradient(circle at 70px 220px, rgba(240,208,96,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 260px 40px, rgba(245,242,236,.7) 0 .8px, transparent 1.4px);
  background-size: 300px 260px;
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: asAurora 32s ease-in-out infinite alternate; will-change: transform; }
  body::after { animation: asTwinkle 6s ease-in-out infinite alternate; }
}
@keyframes asAurora {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4%,-3%,0) scale(1.08); }
}
@keyframes asTwinkle { from { opacity: .3; } to { opacity: .65; } }
/* The hero and footer were opaque black slabs; let the atmosphere through */
.post-hero {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(212,175,55,.12) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7,7,10,.55) 0%, transparent 100%) !important;
}
footer { background: linear-gradient(180deg, rgba(6,6,8,.6), rgba(6,6,8,.95)) !important; }

/* Hero photo: one real event photo per service (--as-hero is set in each page's
   head by location_reskin_v1.py). It sits on ::before under a scrim that keeps
   the gold heading readable, and drifts as you scroll where the browser has
   scroll-driven animations (Chrome, Edge, Safari 26). Elsewhere it is still. */
.post-hero {
  isolation: isolate;
  min-height: clamp(380px, 62vh, 600px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.post-hero::before {
  content: ""; position: absolute; inset: -6% 0 0; z-index: -1; background-color: #0B0B0D;
  background:
    radial-gradient(46% 38% at 50% 50%, rgba(11,11,13,.62), rgba(11,11,13,.25) 100%),
    radial-gradient(90% 80% at 50% 50%, transparent 40%, rgba(11,11,13,.7) 100%),
    linear-gradient(180deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.45) 40%, rgba(11,11,13,.92) 88%, #0B0B0D 100%),
    var(--as-hero, none) var(--as-hero-pos, 50% 40%) / var(--as-hero-size, cover) no-repeat;
  filter: saturate(.9);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .post-hero::before {
      animation: asHeroDrift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes asHeroDrift {
  from { transform: translate3d(0,0,0) scale(1.04); }
  to   { transform: translate3d(0,9%,0) scale(1.12); }
}
.post-hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.45); }

/* Scroll reveals: each section rises in as it enters the viewport. Pure CSS on
   a view() timeline, so no markup or JS changes; anything already on screen at
   load is past its range and shows at once. Unsupported browsers and
   reduced-motion users get the page fully visible. The quote form is left out
   on purpose: a filled animation keeps a stacking context around its fields. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .post-content > h2, .post-content > h3, .post-content > div[style*="overflow-x"],
    body > h2, details, body > div[style*="rgba(212,175,55,0.06)"],
    .post-cta, .hire-policy-box, .as-localvary {
      animation: asReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes asReveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Hero — a quiet entrance: heading, then the meta pills */
.post-hero::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(420px, 70%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.55), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .post-hero h1 { animation: asRise .8s cubic-bezier(.2,.8,.2,1) both; }
  .post-hero .post-meta { animation: asRise .8s cubic-bezier(.2,.8,.2,1) .12s both; }
}
/* transform only: the H1 is the LCP element, so it is never faded from 0 */
@keyframes asRise { from { transform: translateY(12px); } to { transform: none; } }

/* FAQ accordion */
details {
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 14px; margin-bottom: .75rem; overflow: hidden;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
details:hover { border-color: rgba(212,175,55,.38); }
details[open] {
  background: var(--bg-card); border-color: rgba(212,175,55,.55);
  box-shadow: 0 18px 40px -24px rgba(212,175,55,.35);
}
details summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.05rem 3.4rem 1.05rem 1.4rem; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.45;
  color: var(--text-primary); transition: color .25s ease;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(212,175,55,.4); color: var(--gold-light);
  font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; line-height: 1;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease;
}
details[open] summary::after { content: "\2212"; background: var(--gold-grad); color: #0B0B0D; border-color: transparent; }
details summary:hover { color: var(--gold-light); }
details summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 14px; }
details p, .post-content details p {
  padding: 1rem 1.4rem 1.25rem; margin: 0; font-size: .96rem; line-height: 1.75;
  color: var(--text-secondary); border-top: 1px solid rgba(212,175,55,.14);
}

/* On ~1,100 pages the FAQ heading and accordion sit after .post-content closes,
   straight under <body>. Put them on the same 820px text column. */
body > h2, body > details {
  width: calc(100% - 2 * clamp(1.25rem, 5vw, 2.5rem));
  max-width: calc(820px - 2 * clamp(1.25rem, 5vw, 2.5rem));
  margin-left: auto; margin-right: auto;
}
body > h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em;
  margin-top: clamp(2rem, 5vh, 3rem); margin-bottom: 1.1rem; color: var(--text-primary);
}
body > details:last-of-type { margin-bottom: clamp(2rem, 5vh, 3rem); }

/* Inline quote form (as-form-v1 markup carries inline styles, hence !important) */
#quote {
  background: linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,.02)), rgba(26,24,32,.88) !important;
  border: 1px solid rgba(212,175,55,.32) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,.05), 0 30px 60px -30px rgba(0,0,0,.85);
  scroll-margin-top: 90px;
}
#quote h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
#quote input:not([type=hidden]), #quote select, #quote textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(245,242,236,.14) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  min-height: 48px; min-width: 0;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#quote input::placeholder, #quote textarea::placeholder { color: var(--text-muted); }
#quote input:focus, #quote select:focus, #quote textarea:focus {
  outline: none; border-color: var(--gold) !important;
  background: rgba(212,175,55,.06) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}
#quote input[type=date] { color-scheme: dark; }
#quote select option { background: var(--surface); color: var(--text-primary); }
#quote button[type=submit] {
  background: var(--gold-grad) !important; color: #0B0B0D !important;
  border-radius: var(--radius-pill) !important; min-height: 52px;
  font-family: var(--font-display); font-weight: 600 !important;
  box-shadow: 0 12px 28px -12px rgba(212,175,55,.6);
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
#quote button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(212,175,55,.75); }
#quote button[type=submit]:disabled { opacity: .6; cursor: progress; transform: none; }
#quote label { font-family: var(--font-display); }

/* Info cards: trust strip, cross-service and nearby blocks share one inline recipe */
div[style*="rgba(212,175,55,0.06)"] { border-radius: 14px !important; }
.post-content a:focus-visible, .post-cta a:focus-visible, nav a:focus-visible, footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* The LED pages' "Hire Policy" card names Playfair inline; Playfair is no longer
   loaded, so map it to the display face rather than a generic serif */
[style*="Playfair"] { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.01em; }
/* ...and that card's inline background is the old navy-to-purple gradient (the
   only legacy hue left in any page body); bring it onto the charcoal card */
.hire-policy-box {
  background: linear-gradient(135deg, rgba(26,24,32,.94) 0%, rgba(20,19,24,.88) 100%) !important;
  border-width: 1px !important; border-radius: 1.5rem !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,.06), 0 30px 60px -30px rgba(0,0,0,.85) !important;
}
@media (max-width: 560px) { .hire-policy-box { padding: 26px 20px !important; } }

/* Price tables (city hubs) */
.post-content table th { font-family: var(--font-display); font-weight: 600; }
.post-content table tr:first-child { background: var(--gold-grad) !important; }

/* Below the 800px card width, body-level cards keep the 16px house gutter
   instead of running into the screen edge (the trust strip sits inside the
   already-padded .post-content, so it is left alone) */
@media (max-width: 860px) {
  #quote, body > div[style*="rgba(212,175,55,0.06)"], .post-cta {
    margin-left: 16px !important; margin-right: 16px !important;
  }
}
/* The local-variant paragraph lines up with the .post-content text column */
.as-localvary { max-width: 820px !important; padding: 0 clamp(1.25rem, 5vw, 2.5rem) !important; }
.as-localvary p { font-size: 1.02rem; }

/* Phone sticky bar (as-mobile-cta-v1): it already carries WhatsApp, so the
   floating bubble goes (one fixed control per action), and the labels stay on one line */
@media (max-width: 768px) {
  body:has(.sticky-mobile-cta) .whatsapp-btn { display: none !important; }
  .sticky-mobile-cta {
    background: rgba(11,11,13,.9) !important; border-top: 1px solid var(--border-subtle);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .sticky-mobile-cta a { font-family: var(--font-display); font-weight: 600 !important; font-size: .9rem !important; white-space: nowrap; border-radius: var(--radius-pill) !important; }
  .sticky-mobile-cta-btn { background: var(--gold-grad) !important; color: #0B0B0D !important; }
}

/* Phone: two-column form rows stack, so a date picker never pushes the card wide */
@media (max-width: 560px) {
  #quote { padding: 26px 18px !important; border-radius: 1.2rem !important; }
  #quote form div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  details summary { padding-left: 1.1rem; }
  details p { padding-left: 1.1rem; padding-right: 1.1rem; }
}