/* ============================================================
   Rhino Thai Boxing Gym — Elementor Pro Overrides
   ------------------------------------------------------------
   Only styles that Elementor CANNOT handle natively, plus a thin
   bridge that maps Elementor's default button/heading classes onto
   the Rhino Design System tokens (tokens.css) so Theme Builder
   templates and Pro Popups inherit the brand look. Colors, fonts,
   and most spacing should still be set in Elementor Site Settings;
   these rules cover what Site Settings can't express.
   ============================================================ */

/* ==========================================================================
   Theme Builder header — fixed, transparent-over-hero, solid on scroll
   (Elementor can't do: fixed position on the header wrapper, hiding the
   sticky spacer, or the transparent→black scroll transition timing)
   ========================================================================== */
.elementor-location-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: transparent !important;
}

/* Hide the spacer Elementor creates for sticky headers */
.elementor-sticky__spacer { display: none !important; }

/* Scrolled state — solid combat-black (Req 13.3) */
.elementor-sticky--active {
    background: var(--atmo0) !important;
    box-shadow: var(--shadow-nav) !important;
}

/* Transition transparent ↔ black within 300ms (Req 13.3) */
.elementor-sticky--effects {
    transition: background-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease !important;
}

/* ==========================================================================
   Buttons — pill shape + Rhino accents
   (bridges Elementor's default .elementor-button to the Design System)
   ========================================================================== */
.elementor-button,
.elementor-button-link {
    border-radius: var(--radius-pill) !important;   /* always pill-shaped (Req 2.6) */
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-body);
    font-weight: 700;
    transition: background-color 200ms ease, color 200ms ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease !important;
}

/* Primary CTA: orange bg / black text (Req 2.7) */
.elementor-button:not(.rhino-cta-red) {
    background-color: var(--brand);
    color: #000;
}
.elementor-button:not(.rhino-cta-red):hover {
    background-color: var(--brand-vivid);   /* vivid orange on hover (Req 2.10) */
    color: #000;
}

/* Add the rhino-cta-glow class to the single primary CTA in a section (Req 2.8) */
.elementor-button.rhino-cta-glow:hover { box-shadow: var(--glow) !important; }

/* Urgent "Book Now" CTA: combat red bg / white text (Req 2.9).
   Apply the rhino-cta-red class to the button in Elementor. */
.elementor-button.rhino-cta-red {
    background-color: var(--red);
    color: #fff;
}
.elementor-button.rhino-cta-red:hover {
    background-color: var(--red-bright);
    color: #fff;
}

/* ==========================================================================
   Headings — Anton ALL-CAPS display type
   ========================================================================== */
.elementor-heading-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
}

/* ==========================================================================
   Dropdown menu — animation & shadow
   (Elementor can't do: transform animation on dropdown appear)
   ========================================================================== */
.elementor-nav-menu--dropdown {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    background: var(--atmo2) !important;
    box-shadow: var(--shadow-dropdown) !important;
    margin-top: 8px !important;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base) ease, transform var(--dur-base) ease, visibility var(--dur-base) ease !important;
    visibility: hidden;
}
.elementor-nav-menu--main li:hover > .elementor-nav-menu--dropdown,
.elementor-nav-menu--main li:focus-within > .elementor-nav-menu--dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* ==========================================================================
   Elementor Pro Popup — booking modal surface
   (matches the card-surface modal from the prototype)
   ========================================================================== */
.elementor-popup-modal .dialog-widget-content {
    background: var(--atmo2) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
}