/* =====================================================================
   Austin Aquarium theme — recolors the shared Houston house style.
   The dark cream base (bg/text) stays; only the accent + primary CTA
   change. Scoped under .austin-theme so Houston is untouched.
   Accent: leaf green.  Primary CTA: golden amber.
   ===================================================================== */

.houston-site-body.austin-theme {
    --houston-teal: #46ad55;
    --houston-coral: #f59425;
    --houston-coral-hover: #e07f12;
    --houston-coral-shadow: rgba(245, 148, 37, 0.3);
    --austin-primary: #f59425;
    --austin-primary-hover: #e07f12;
}

/* Hardcoded brand-orange rules in houston_landing.css aren't token-driven,
   so override them explicitly (higher specificity wins). */
.houston-site-body.austin-theme .houston-site-logo-o {
    color: var(--austin-primary);
}

.houston-site-body.austin-theme .houston-site-btn-primary {
    background: var(--austin-primary);
    border-color: var(--austin-primary);
}

.houston-site-body.austin-theme .houston-site-btn-primary:hover,
.houston-site-body.austin-theme .houston-site-btn-primary:focus-visible {
    background: var(--austin-primary-hover);
    border-color: var(--austin-primary-hover);
}

/* Austin landing hero: use the Austin banner photo (mirrored horizontally)
   instead of the shared Houston hero image. The two-class selector outranks
   the single-class .houston-site-hero rules, including the responsive ones. */
.houston-site-body.austin-theme .houston-site-hero {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.58) 26%, rgba(0, 0, 0, 0.05) 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%),
        url("/static/images/austin/landing_banner_mirrored.webp") right center / cover no-repeat;
}

/* VIP Experiences hero: the photo fills the whole banner, text overlaid. */
.houston-events-page .houston-events-hero.austin-vip-hero {
    isolation: isolate;
}

.houston-events-page .houston-events-hero.austin-vip-hero .austin-vip-banner {
    inset: 0;
    height: 100%;
    object-fit: cover;
    position: absolute;
    width: 100%;
    z-index: -2;
}

/* Dark scrim so the light hero text stays readable over the photo. */
.houston-events-page .houston-events-hero.austin-vip-hero::before {
    background: linear-gradient(135deg, rgba(7, 38, 64, 0.78), rgba(8, 29, 48, 0.45));
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

/* Drop the decorative teal glow so it doesn't muddy the photo. */
.houston-events-page .houston-events-hero.austin-vip-hero::after {
    display: none;
}