/*
 * 12-LandisFixedRail
 *
 * Values here are measured from production's compiled requiem_30.css so the
 * Helix rebuild matches the live RocketTheme Requiem chrome. Where a number
 * looks arbitrary it is because it is prod's number, not a preference.
 *
 *   #g-fixedside  -> #lvhc-rail
 *   .g-fixedside-logo -> .lvhc-rail-logo
 *   .g-social     -> .lvhc-rail-social
 *   #g-navigation -> #sp-header.lvhc-header
 */

/* ---- Fixed left rail ---- */
#lvhc-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4rem;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logo block: the full logo on the brand purple, filling the rail width —
 * matching prod's .g-fixedside-logo. */
#lvhc-rail .lvhc-rail-logo {
    display: block;
    width: 4rem;
    padding: 0.5rem 0;
    background: #7767b6;
    line-height: 0;
}

#lvhc-rail .lvhc-rail-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Social: stacked, half-opacity until hover — prod's exact treatment. */
#lvhc-rail .lvhc-rail-social {
    margin-top: 0.5rem;
}

#lvhc-rail .lvhc-rail-social a {
    display: block;
    padding: 1rem 0;
    color: #ffffff;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

#lvhc-rail .lvhc-rail-social a:hover,
#lvhc-rail .lvhc-rail-social a:focus-visible {
    opacity: 1;
}

/* Caption under an icon. The rail is only 4rem, so clamp it and keep it from
 * spilling past the rail edge. */
#lvhc-rail .lvhc-rail-social-text {
    display: block;
    max-width: 100%;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-top: 0.2rem;
    padding: 0 0.15rem;
    overflow-wrap: anywhere;
}

/* ---- Nav bar ---- */
#sp-header.lvhc-header {
    background: #ffffff;
    color: #5c5c5c;
    position: relative;
    z-index: 101;
}

#sp-header.lvhc-header > .container > .container-inner {
    display: flex;
    align-items: center;
    /* Never wrap the bar onto a second line — the menu scales instead. */
    flex-wrap: nowrap;
    padding: 0.5rem 0;
}

/* Menu takes the full bar and centres, as prod's .mainnav-center does. */
#sp-header.lvhc-header .lvhc-nav {
    flex: 1 1 auto;
    min-width: 0;
}

#sp-header.lvhc-header .lvhc-nav .sp-megamenu-parent {
    justify-content: center;
}

#sp-header.lvhc-header .lvhc-toggler {
    flex: 0 0 auto;
}

/* Toolbar: search + login, pinned right of the menu. White to match the menu
 * over the hero scrim; inherits dark text once the header goes sticky. */
/* Explicit visibility: Bootstrap's d-none/d-lg-flex do not apply reliably in
 * this header, so drive it from a media query instead. */
#sp-header.lvhc-header .lvhc-toolbar {
    display: none;
    flex: 0 0 auto;
    column-gap: 0.75rem;
    margin-left: 0.75rem;
}

@media (min-width: 62rem) {
    #sp-header.lvhc-header .lvhc-toolbar {
        display: flex !important;
        align-items: center;
    }
}
#sp-header.lvhc-header .lvhc-toolbar a,
#sp-header.lvhc-header .lvhc-toolbar .sp-module-title,
#sp-header.lvhc-header .lvhc-toolbar i {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
#sp-header.lvhc-header.header-sticky .lvhc-toolbar a,
#sp-header.lvhc-header.header-sticky .lvhc-toolbar i {
    color: #5c5c5c;
    text-shadow: none;
}
#sp-header.lvhc-header .lvhc-toolbar input[type="text"],
#sp-header.lvhc-header .lvhc-toolbar input[type="search"] {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    max-width: 12rem;
}
#sp-header.lvhc-header .lvhc-toolbar input::placeholder { color: rgba(255, 255, 255, 0.8); }
#sp-header.lvhc-header.header-sticky .lvhc-toolbar input[type="text"],
#sp-header.lvhc-header.header-sticky .lvhc-toolbar input[type="search"] {
    background: #ffffff;
    border-color: #d5d5d5;
    color: #5c5c5c;
}
#sp-header.lvhc-header.header-sticky .lvhc-toolbar input::placeholder { color: #8a8a8a; }

/* Header logo visibility is breakpoint-dependent:
 *  - Desktop (rail visible): the LVHC logo is baked into the hero image AND the
 *    fixed rail carries the brand, so the separate #sp-logo is redundant -> hide.
 *  - Mobile (< 48rem, rail hidden): the background is centre-cropped so the
 *    baked-in logo is off-screen and the rail is gone, leaving no brand at all.
 *    So the header logo MUST show there. */
@media (min-width: 48rem) {
    #sp-header.lvhc-header #sp-logo,
    #sp-header #sp-logo {
        display: none !important;
    }
}
@media (max-width: 47.99rem) {
    #sp-header.lvhc-header #sp-logo {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        margin-right: auto;   /* logo left, hamburger right */
    }
    #sp-header.lvhc-header #sp-logo .logo-image img,
    #sp-header.lvhc-header #sp-logo img {
        max-height: 55px;
        width: auto;
        /* White halo so the black wordmark stays legible over the hero/inner
           banner image; invisible on the white sticky header. */
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
                drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    }
}

/* The rail overlays content rather than offsetting it (prod applies no body
 * margin), but the header's own container would otherwise sit under the rail,
 * so nudge just the header clear of it on rail-capable widths. */
@media (min-width: 48rem) {
    #sp-header.lvhc-header.has-rail > .container {
        padding-left: 5rem;
    }
}

/* Prod hides the rail below 47.99rem; below that the in-bar logo takes over. */
@media (max-width: 47.99rem) {
    #lvhc-rail {
        display: none;
    }
}