/*
 * Header auth CTA. Load after realtor.css.
 *
 * realtor.css still treats the first .header-cta item as the old 38px search
 * icon, and replaces .icon-search with an empty absolute background image.
 * Once "Log in / Sign up free" became the first item, that 38px box let the
 * label overflow under the hamburger and left the search glyph with no box.
 */

.header .navbar {
    background-color: #00203D;
}

.header .navbar > .container > .row {
    --bs-gutter-x: 0.75rem;
    flex-wrap: nowrap;
    align-items: center;
}

.header .aip-header-logo-col {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}

.header .aip-header-tools-col {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
}

.header .header-logo,
.header .header-logo a {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.header .header-menu {
    padding-right: 0 !important;
}

.header,
.header .navbar,
.header .navbar > .container,
.header .header-menu,
.header ul.header-cta,
.header ul.header-cta > li {
    overflow: visible;
}

.header ul.header-cta {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 16px !important;
    margin: 0 !important;
}

.header ul.header-cta > li.header-cta-item,
.header ul.header-cta > li.header-cta-item:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    flex: 0 0 auto;
}

.header a.aip-auth-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 21px;
    max-height: 21px;
    padding: 0 10px;
    border: 1.5px solid #00DEFD;
    border-radius: 5px;
    background: #00203D;
    color: #00DEFD;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-decoration: none;
}

.header a.aip-auth-cta:hover,
.header a.aip-auth-cta:focus-visible {
    background: #00DEFD;
    color: #00203D;
    text-decoration: none;
}

.header ul.header-cta a.header-cta-link[aria-label="Search Icon"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #00DEFD !important;
    text-decoration: none !important;
    position: static !important;
}

.header ul.header-cta .icon-search::before,
.blog-category-listing-page .header .icon-search::before,
.blog-detail-page .header .icon-search::before {
    content: "\e937" !important;
    font-family: "iconfont" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #00DEFD !important;
    background: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
}

.header .property-menu-dropdown .property-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    flex: 0 0 auto;
}

/* Desktop header stays pinned. Below 992px .header remains position: relative. */
@media (min-width: 992px) {
    html {
        scroll-padding-top: 104px;
    }

    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
        box-shadow: 0 2px 12px rgba(0, 32, 61, 0.22);
    }

    .header .property-hamburger-menu-inner {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* 1.6s cycle: double glow, a short scale bounce, then a rest so the loop
   is still one animation the subscriber-popup script can restart. */
@keyframes aip-header-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 222, 253, 0.9), 0 0 10px 2px rgba(0, 222, 253, 0.65);
        animation-timing-function: ease-out;
    }
    15% {
        transform: scale(1.06);
        animation-timing-function: ease-in-out;
    }
    30% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 12px rgba(0, 222, 253, 0), 0 0 18px 4px rgba(0, 222, 253, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 12px rgba(0, 222, 253, 0), 0 0 18px 4px rgba(0, 222, 253, 0);
    }
}

@keyframes aip-header-pulse-sm {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 222, 253, 0.85), 0 0 8px 1px rgba(0, 222, 253, 0.6);
        animation-timing-function: ease-out;
    }
    15% {
        transform: scale(1.05);
        animation-timing-function: ease-in-out;
    }
    30% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(0, 222, 253, 0), 0 0 12px 3px rgba(0, 222, 253, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(0, 222, 253, 0), 0 0 12px 3px rgba(0, 222, 253, 0);
    }
}

.header a.aip-auth-pulse {
    animation: aip-header-pulse 1.6s linear 0.15s infinite;
    transform-origin: center;
    backface-visibility: hidden;
}

@media (max-width: 767.98px) {
    .header .header-logo img {
        width: auto !important;
        max-width: min(132px, 34vw) !important;
        height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .header .navbar > .container {
        max-width: 100% !important;
        width: 100%;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .header ul.header-cta {
        gap: 8px !important;
    }

    .header a.aip-auth-cta {
        height: 19px;
        max-height: 19px;
        padding: 0 7px;
        border-radius: 4px;
        font-size: 11px;
        letter-spacing: 0;
    }

    .header a.aip-auth-pulse {
        animation-name: aip-header-pulse-sm;
        animation-iteration-count: infinite;
    }

    .header .header-logo img {
        max-width: min(108px, 30vw) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header a.aip-auth-pulse {
        animation: none !important;
        transform: none !important;
    }
}