/* =====================================================================
   Header, mobile menu + footer to match the new luminate.live
   (ported from luminate-website-v2 public/css/style.css + custom.css).

   Every rule here is scoped to header / .header / .menu-modal /
   .navigation-dropdown / .site-footer. The website's global dark-theme
   rules (body, h1-h6, .btn, .form-control, accordions) are deliberately
   NOT copied - they would restyle the booking pages and checkout.
   Loaded after css/optiva/*.css from includes/header.php.
   ===================================================================== */

:root {
    --lm-text: #f7f5f0;
    --lm-text-soft: #c9cdd6;
    --lm-amber: #F9C054;
    --lm-pink: #cc0066;
    --lm-pink-hot: #e40c78;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --- Header bar: solid ombre on every page, at every scroll position --- */
.header,
.header.scrolled,
.header.active,
.header.scrolled.active,
.header.internal,
.navigation-dropdown,
.navigation-dropdown.scrolled,
.menu-modal {
    background: linear-gradient(90deg, #060a18 0%, #130d33 50%, #060a18 100%) !important;
}
.header,
.header.scrolled,
.header.active,
.header.scrolled.active,
.header.internal { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }

.header .nav, .menu-modal { font-family: var(--font-body); }
.header .nav li a { font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: 0.01em; font-weight: 600; }
.header .nav li:hover,
.header .nav li:hover a { color: var(--lm-amber); }
.menu-modal a, .menu-modal .accordion-button { font-family: var(--font-body) !important; text-transform: none !important; }

/* Buy Tickets buttons in the bar + menu */
header .btn, .menu-modal .btn { font-family: var(--font-body) !important; font-weight: 700; letter-spacing: 0.01em; text-transform: none !important; }
header .btn-pink, .menu-modal .btn-pink {
    box-shadow: 0 4px 24px rgba(228, 12, 120, 0.35);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
header .btn-pink:hover, header .btn-pink:focus,
.menu-modal .btn-pink:hover, .menu-modal .btn-pink:focus {
    box-shadow: 0 4px 30px rgba(255, 204, 51, 0.45) !important;
    transform: translateY(-1px);
}

/* Keep the Luminate logo in the bar when scrolling (phones/tablets) */
@media screen and (max-width: 1200px) {
    .header.scrolled .logo { opacity: 1 !important; visibility: visible !important; width: 170px; padding-top: 16px; }
    .header.scrolled .mobile-nav.center { opacity: 0 !important; visibility: hidden !important; }
}
@media screen and (max-width: 575px) {
    .header.scrolled .logo { width: 150px; padding-top: 18px; }
}

/* Venues dropdown: logos on a white panel */
header .navigation-dropdown .row.list-items.justify-content-center {
    background: #ffffff; border-radius: 20px; padding: 26px 20px 10px; margin: 0 auto; max-width: 1100px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
header .navigation-dropdown .nav-text-feature h5 { font-family: var(--font-display); font-optical-sizing: auto; text-transform: none !important; }
header .navigation-dropdown .row.list-items.justify-content-center .nav-text-feature h5 { color: #14163a !important; font-weight: 600; }
header .navigation-dropdown .row.list-items.justify-content-center .nav-text-feature:hover h5 { color: #cc0066 !important; }
header .navigation-dropdown .row.list-items.justify-content-center .logo-holder { background: #fff; }

/* =====================================================================
   Footer
   ===================================================================== */
/* Solid (the website fades in from transparent, but booking pages are light) */
.site-footer {
    background: linear-gradient(180deg, #0b0f24 0%, #05070f 40%, #04050c 100%);
    padding: 40px 0 30px; text-align: left;
    font-family: var(--font-body); color: var(--lm-text-soft);
}
.site-footer .container { max-width: 1320px; }
.site-footer a { color: var(--lm-text); text-decoration: none; }
.site-footer a:hover { color: var(--lm-amber); }
.site-footer p, .site-footer li, .site-footer span { font-family: var(--font-body); }

/* Newsletter card */
.lf-newsletter {
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
    background: radial-gradient(ellipse at 0% 0%, rgba(204, 0, 102, 0.30) 0%, rgba(204, 0, 102, 0) 55%),
                radial-gradient(ellipse at 100% 100%, rgba(249, 192, 84, 0.14) 0%, rgba(249, 192, 84, 0) 55%),
                linear-gradient(120deg, rgba(38, 28, 84, 0.85) 0%, rgba(15, 19, 50, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; padding: 36px 44px; margin-bottom: 55px;
}
.lf-newsletter h4 {
    font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
    font-size: 30px; line-height: 36px; margin: 0 0 6px; color: var(--lm-amber) !important;
}
.lf-newsletter p { margin: 0; font-size: 16px; color: var(--lm-text-soft); }
.lf-newsletter-form { position: relative; display: flex; gap: 12px; flex: 0 0 auto; width: 100%; max-width: 560px; flex-wrap: wrap; }
.lf-newsletter-form .form-control {
    flex: 1; min-width: 0; height: 60px; border-radius: 14px; padding: 0 22px; font-size: 16px;
    background: #070a14 !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.lf-newsletter-form .form-control::placeholder { color: #8a90a0; }
.lf-newsletter-form .form-control:focus { border-color: var(--lm-amber) !important; box-shadow: 0 0 0 3px rgba(249, 192, 84, 0.2); }
.lf-newsletter-form .btn {
    height: 60px; padding: 0 34px; border-radius: 14px; font-size: 17px;
    font-family: var(--font-body) !important; font-weight: 700; letter-spacing: 0.01em; text-transform: none !important;
    box-shadow: 0 4px 24px rgba(228, 12, 120, 0.35);
}

/* Brand + link columns */
.lf-main { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px; padding-bottom: 45px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.lf-logo { width: 190px; height: auto; margin-bottom: 20px; }
.lf-brand p { font-size: 15px; line-height: 24px; max-width: 340px; color: var(--lm-text-soft); margin-bottom: 22px; }
.lf-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.lf-social a {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 18px;
}
.lf-social a:hover { border-color: var(--lm-amber); background: var(--lm-amber); color: #05070f; }
.lf-col h5 {
    font-family: var(--font-display) !important; font-style: italic; font-weight: 500 !important;
    font-size: 17px !important; text-transform: none !important; letter-spacing: 0 !important;
    margin: 4px 0 18px; color: var(--lm-amber) !important;
}
.lf-col ul { list-style: none; padding: 0; margin: 0; }
.lf-col li { margin-bottom: 12px; }
.lf-col a { font-size: 15px; font-weight: 500; }

/* Safety text + copyright */
.lf-legal { padding-top: 30px; }
.lf-legal p { font-size: 13px; line-height: 22px; color: #8a90a0; margin-bottom: 26px; }
.lf-legal p a { color: #ff7ab8 !important; text-decoration: underline; }
.lf-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #8a90a0; }
.lf-bottom-links a { color: var(--lm-text-soft); }

@media (max-width: 1199px) {
    .lf-main { grid-template-columns: repeat(4, 1fr); }
    .lf-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 0 30px; align-items: start; }
    .lf-brand .lf-logo { grid-row: span 2; }
}
@media (max-width: 767px) {
    .site-footer { padding-top: 24px; }
    .lf-newsletter { flex-direction: column; align-items: stretch; text-align: center; padding: 28px 20px; gap: 20px; margin-bottom: 40px; }
    .lf-newsletter h4 { font-size: 24px; line-height: 30px; }
    .lf-newsletter-form { max-width: none; flex-direction: column; }
    .lf-newsletter-form .form-control { flex: 0 0 auto; }
    .lf-newsletter-form .btn { width: 100%; }
    .lf-main { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .lf-brand { display: block; text-align: center; }
    .lf-brand p { margin-left: auto; margin-right: auto; }
    .lf-social { justify-content: center; }
    .lf-bottom { flex-direction: column; text-align: center; }
}