/**
 * Mobile Sticky Header for realatrends.com
 * Active only at viewport < 768px. Hidden by default; .rt-sticky-header--visible
 * is added by sticky-header.js once the user scrolls past the threshold.
 */

/* Default state on every viewport: hidden, positioned off-screen.
   This prevents the unstyled markup from appearing at page bottom on desktop. */
.rt-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: none;            /* hidden on desktop entirely */
    z-index: 9999;
}

/* Mobile: enable the bar, but keep it translated off-screen until JS reveals it. */
@media (max-width: 767.98px) {
    .rt-sticky-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        background: #014157;  /* brand blue */
        color: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
        transform: translateY(-100%);
        transition: transform 0.3s ease-out;
        will-change: transform;
    }

    .rt-sticky-header--visible {
        transform: translateY(0);
    }

    /* When the sticky bar is showing and the theme opens its menu drawer,
       dock the drawer directly below the bar instead of letting it appear at
       its original (off-screen) absolute position. Only activates while the
       sticky bar is visible — at the top of the page the menu still opens
       from the original site header normally. */
    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show {
        position: fixed !important;
        top: 54px !important;          /* directly below the 54px-tall sticky bar */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        z-index: 9998 !important;       /* below the bar (9999) but above page content */
        max-height: calc(100vh - 54px) !important;
        overflow-y: auto !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
        /* Override theme's slide-in animation transform — that was pushing the
           menu down by ~43px even with top: 54px set. */
        transform: none !important;
        -webkit-transform: none !important;
        animation: none !important;
    }

    /* Menu items inside the docked drawer — make them feel like a proper mobile menu */
    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show > li > a {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        color: #014157 !important;
    }

    /* Submenus (Properties, About Us, Resources): full-width, matching font.
       Don't force display — the theme uses slideToggle() to show/hide. */
    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show ul.sub-menu {
        width: 100% !important;
        max-width: 100% !important;
        background: #f7f7f7 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show ul.sub-menu > li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
        background: transparent !important;
    }

    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show ul.sub-menu > li > a {
        display: block !important;
        padding: 14px 20px 14px 40px !important;   /* extra left padding = visual nesting indent */
        font-size: 16px !important;
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-weight: 400 !important;
        color: #014157 !important;
        text-decoration: none !important;
        line-height: 1.3 !important;
    }

    /* Every LI in the menu becomes its own positioning context so its caret
       indicator can be absolute-positioned relative to that LI's own row —
       not relative to some ancestor LI several rows up. Without this, a caret
       inside a deeply-nested LI floats up to the right edge of its top-level
       ancestor and visually appears on the wrong row, causing the tap to
       trigger the wrong submenu. */
    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show li {
        position: relative !important;
    }

    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show li > .rh_menu__indicator {
        position: absolute !important;
        right: 20px !important;
        top: 0 !important;
        height: 54px !important;        /* main row height = 16px*1.3 + 16px*2 padding ≈ 53 */
        line-height: 54px !important;
        transform: none !important;
        margin: 0 !important;
        cursor: pointer;
        padding: 0 8px;
        z-index: 1;
    }

    /* Submenu carets get a shorter row height to match their slimmer rows. */
    body.rt-bar-visible ul.rh_menu__responsive.rh_menu__responsive_show ul.sub-menu li > .rh_menu__indicator {
        height: 48px !important;
        line-height: 48px !important;
    }

    /* Brand block: R + stacked text. Whole block is the home link. */
    .rt-sticky-header__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        text-decoration: none;
        flex: 1 1 auto;
        min-width: 0;
    }
    .rt-sticky-header__brand:hover,
    .rt-sticky-header__brand:focus {
        color: #fff;
        text-decoration: none;
    }
    .rt-sticky-header__brand:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
        border-radius: 2px;
    }

    /* Centered text column between R and hamburger */
    .rt-sticky-header__brand-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 1 auto;
        line-height: 1.1;
    }
    .rt-sticky-header__brand-name {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #fff;
    }
    .rt-sticky-header__brand-sub {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 2px;
    }

    /* R medallion: outlined white circle, white serif italic R */
    .rt-sticky-header__medallion {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1.5px solid #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: Georgia, "Times New Roman", serif;
        font-style: italic;
        font-weight: 700;
        font-size: 22px;
        line-height: 1;
        color: #fff;
    }

    /* Hamburger: three white bars, 36px tap target */
    .rt-sticky-header__hamburger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: transparent;
        border: 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
    .rt-sticky-header__hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
        transform-origin: center;
    }

    /* Animate to an X when the menu drawer is open. */
    .rt-sticky-header--menu-open .rt-sticky-header__hamburger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .rt-sticky-header--menu-open .rt-sticky-header__hamburger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .rt-sticky-header--menu-open .rt-sticky-header__hamburger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
    .rt-sticky-header__hamburger:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
}

/* Respect users who prefer reduced motion: snap, don't slide */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .rt-sticky-header {
        transition: none;
    }
}