@media (max-width: 991px) {
    .hh-primary-nav {
        display: none;
    }

    .hh-primary-nav.is-open {
        display: block;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--hh-color-white);
        border-bottom: 1px solid var(--hh-color-border);
        padding: 20px;
    }

    .hh-primary-nav.is-open .hh-primary-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hh-mobile-menu-toggle {
        display: block;
    }

    .hh-footer-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 575px) {
    .hh-container {
        width: min(100% - 28px, var(--hh-container));
    }

    .hh-header-inner {
        min-height: 64px;
    }

    .hh-primary-nav.is-open {
        top: 64px;
    }
}

@media (max-width: 1199px) {
    .hh-footer-grid {
        grid-template-columns: 1.2fr 0.8fr 1fr;
        gap: 50px;
    }

    .hh-footer-contact-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .hh-footer-cta {
        padding: 46px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hh-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .hh-footer-brand-col {
        grid-column: 1 / -1;
    }

    .hh-footer-newsletter-form {
        max-width: 520px;
    }

    .hh-footer-contact-col {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .hh-footer-cta-wrap {
        padding: 45px 0 35px;
    }

    .hh-footer-cta {
        min-height: auto;
        padding: 34px 24px;
        border-radius: 20px;
        gap: 30px;
    }

    .hh-footer-cta h2 {
        font-size: 32px;
    }

    .hh-footer-cta p {
        font-size: 16px;
    }

    .hh-footer-cta-btn {
        min-width: 210px;
        min-height: 58px;
        font-size: 15px;
        padding-left: 26px;
    }

    .hh-footer-cta-btn strong {
        width: 42px;
        height: 42px;
    }

    .hh-footer-main {
        padding: 55px 0 40px;
    }

    .hh-footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .hh-footer-contact-col {
        grid-column: auto;
    }

    .hh-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .hh-footer-logo img {
        max-width: 190px;
    }

    .hh-footer-email-field {
        min-height: 58px;
    }

    .hh-footer-submit {
        width: 100%;
    }

    .hh-footer-badges img {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 1499px) {
    .hh-header-inner {
        gap: 20px;
    }

    .hh-site-logo img {
        max-width: 200px;
    }

    .hh-primary-menu {
        gap: 22px;
    }

    .hh-primary-menu > li > a {
        font-size: 13px;
    }

    .hh-header-btn {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 1299px) {
    .hh-site-logo img {
        max-width: 170px;
    }

    .hh-primary-menu {
        gap: 16px;
    }

    .hh-primary-menu > li > a {
        font-size: 12px;
    }

    .hh-header-actions {
        gap: 8px;
    }

    .hh-login-signup-wrp {
        gap: 8px;
    }

    .hh-header-btn {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 12px;
    }

    .hh-header-shortcode select,
    .hh-header-shortcode .gt_selector,
    .hh-header-shortcode button,
    .hh-header-shortcode .dropdown-toggle {
        min-height: 44px;
        font-size: 12px;
    }
}

@media (max-width: 1100px) {
    .hh-header-inner {
        min-height: 76px;
    }

    .hh-primary-nav {
        display: none;
    }

    .hh-primary-nav.is-open {
        display: block;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid var(--hh-color-border);
        border-bottom: 1px solid var(--hh-color-border);
        box-shadow: 0 18px 45px rgba(10, 45, 82, 0.12);
        padding: 18px 24px;
    }

    body.admin-bar .hh-primary-nav.is-open {
        top: 76px;
    }

    .hh-primary-nav.is-open .hh-primary-menu {
        display: block;
        width: min(100%, 720px);
        margin: 0 auto;
    }

    .hh-primary-menu > li > a {
        display: flex;
        width: 100%;
        min-height: 42px;
        font-size: 15px;
    }

    .hh-primary-menu > li > a::after {
        display: none;
    }

    .hh-primary-menu .sub-menu {
        position: static;
        display: block;
        min-width: 0;
        margin: 4px 0 10px;
        padding: 4px 0 4px 16px;
        border: 0;
        border-left: 2px solid var(--hh-color-border);
        border-radius: 0;
        box-shadow: none;
    }

    .hh-primary-menu .sub-menu .sub-menu {
        position: static;
        left: auto;
        top: auto;
    }

    .hh-mobile-menu-toggle {
        display: block;
    }
}

@media (max-width: 782px) {
    body.admin-bar .hh-site-header {
        top: 46px;
    }
}

@media (max-width: 767px) {
    .hh-header-container {
        width: min(100% - 28px, var(--hh-container));
    }

    .hh-header-inner {
        min-height: 68px;
    }

    .hh-site-logo img {
        max-width: 145px;
        max-height: 42px;
    }

    .hh-primary-nav.is-open {
        top: 68px;
    }

    .hh-header-shortcode select,
    .hh-header-shortcode .gt_selector,
    .hh-header-shortcode button,
    .hh-header-shortcode .dropdown-toggle {
        min-height: 36px;
        max-width: 115px;
        padding: 7px 28px 7px 12px;
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .hh-site-logo img {
        max-width: 120px;
    }

    .hh-header-actions {
        margin-left: auto;
    }

    .hh-login-signup-wrp {
        position: fixed;
        right: 0;
        bottom: 180px;
        z-index: 998;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .hh-header-btn {
        min-height: auto;
        margin: 4px 0;
        padding: 14px 8px;
        border-radius: 8px 0 0 8px;
        font-size: 11px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .hh-header-shortcode {
        display: flex;
    }

    .hh-mobile-menu-toggle {
        width: 32px;
    }

    .hh-mobile-menu-toggle span {
        width: 26px;
    }
}

@media (max-width: 420px) {
    .hh-site-logo img {
        max-width: 105px;
    }

    .hh-header-shortcode select,
    .hh-header-shortcode .gt_selector,
    .hh-header-shortcode button,
    .hh-header-shortcode .dropdown-toggle {
        max-width: 95px;
        font-size: 11px;
    }
}

/**
 * ==========================================================
 * FINAL MOBILE NAVIGATION
 * ==========================================================
 *
 * This must remain at the bottom of responsive.css because
 * responsive.css loads after main.css.
 */

@media (max-width: 1100px) {

    /**
     * Keep header visible while menu is open.
     */
    body.hh-mobile-nav-open .hh-site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10001 !important;
        background: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /**
     * WordPress logged-in toolbar.
     */
    body.admin-bar.hh-mobile-nav-open .hh-site-header {
        top: 32px !important;
    }

    /**
     * We no longer want a grey/dark overlay.
     *
     * The mobile menu itself fills the viewport.
     */
    .hh-mobile-menu-overlay,
    body.hh-mobile-nav-open .hh-mobile-menu-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /**
     * Mobile navigation panel.
     *
     * Fixed to viewport and always starts below header.
     */
    .hh-primary-nav,
    .hh-primary-nav.is-open {
        position: fixed !important;
        top: var(--hh-mobile-menu-top, 76px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 10000 !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding: 10px 0 40px !important;

        background: #ffffff !important;

        border: 0 !important;
        border-top: 1px solid #e6edf3 !important;

        box-shadow: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }

    /**
     * Closed.
     */
    .hh-primary-nav {
        display: block !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transform: translateY(-10px) !important;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease !important;
    }

    /**
     * Open.
     */
    .hh-primary-nav.is-open,
    body.hh-mobile-nav-open .hh-primary-nav {
        display: block !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;

        transform: translateY(0) !important;
    }

    /**
     * Prevent page behind menu from scrolling.
     */
    html.hh-mobile-nav-open,
    body.hh-mobile-nav-open {
        overflow: hidden !important;
    }

    /**
     * Menu root.
     */
    .hh-primary-nav .hh-primary-menu,
    .hh-primary-nav.is-open .hh-primary-menu {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /**
     * All menu items.
     */
    .hh-primary-menu li {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-bottom: 1px solid #e9f0f5 !important;
    }

    /**
     * Top-level links.
     */
    .hh-primary-menu > li > a {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 55px !important;

        margin: 0 !important;

        padding:
            15px
            64px
            15px
            24px !important;

        color:
            var(
                --hh-header-menu-color,
                var(--hh-color-dark)
            ) !important;

        background: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;

        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .hh-primary-menu > li > a::after {
        display: none !important;
    }

    /**
     * Desktop hover must NOT control submenus on mobile.
     */
    .hh-primary-menu li:hover > .sub-menu {
        display: none !important;
    }

    /**
     * All submenus closed by default.
     */
    .hh-primary-menu .sub-menu,
    .hh-primary-menu .sub-menu .sub-menu {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        display: none !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 5px 0 10px !important;

        background: #f5faff !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }

    /**
     * Only explicitly opened submenu is visible.
     */
    .hh-primary-menu li.is-open > .sub-menu {
        display: block !important;
    }

    /**
     * Submenu rows.
     */
    .hh-primary-menu .sub-menu li {
        border-bottom: 0 !important;
    }

    .hh-primary-menu .sub-menu a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 43px !important;

        padding:
            11px
            24px
            11px
            42px !important;

        background: transparent !important;

        color:
            var(
                --hh-header-submenu-color,
                var(--hh-color-dark)
            ) !important;

        font-size: 14px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;

        text-transform: none !important;
    }

    /**
     * Third-level items.
     */
    .hh-primary-menu .sub-menu .sub-menu a {
        padding-left: 58px !important;
    }

    /**
     * Active/open parent.
     */
    .hh-primary-menu li.is-open > a {
        color:
            var(
                --hh-header-menu-hover-color,
                var(--hh-color-primary)
            ) !important;

        background: #f7fbff !important;
    }

    /**
     * Accordion arrow button.
     */
    .hh-mobile-submenu-toggle {
        position: absolute !important;

        top: 8px !important;
        right: 16px !important;

        z-index: 5 !important;

        display: block !important;

        width: 39px !important;
        height: 39px !important;

        margin: 0 !important;
        padding: 0 !important;

        border:
            1px solid
            rgba(14, 55, 107, 0.12) !important;

        border-radius: 50% !important;

        background: #edf8ff !important;

        color:
            var(
                --hh-header-menu-color,
                var(--hh-color-dark)
            ) !important;

        appearance: none;
        -webkit-appearance: none;

        cursor: pointer !important;
    }

    /**
     * Chevron.
     */
    .hh-mobile-submenu-toggle::before {
        content: "";

        position: absolute;

        top: 50%;
        left: 50%;

        width: 8px;
        height: 8px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform:
            translate(-50%, -65%)
            rotate(45deg);

        transition:
            transform 0.2s ease;
    }

    /**
     * Chevron when open.
     */
    .hh-primary-menu
    li.is-open
    > .hh-mobile-submenu-toggle::before {
        transform:
            translate(-50%, -35%)
            rotate(-135deg);
    }

    /**
     * Hamburger must always remain above menu.
     */
    .hh-mobile-menu-toggle {
        position: relative !important;
        z-index: 10002 !important;

        display: block !important;
    }
}

/**
 * WordPress admin toolbar is 46px high on narrow screens.
 */
@media (max-width: 782px) {
    body.admin-bar.hh-mobile-nav-open .hh-site-header {
        top: 46px !important;
    }
}

/**
 * Desktop cleanup.
 */
@media (min-width: 1101px) {
    .hh-mobile-submenu-toggle {
        display: none !important;
    }

    .hh-primary-menu li.is-open > .sub-menu {
        display: none;
    }
}


/**
 * ==========================================================
 * REMOVE OLD INLINE MENU ARROW ON MOBILE
 * ==========================================================
 *
 * .hh-has-mobile-submenu is added by our main.js.
 *
 * Keep:
 * .hh-mobile-submenu-toggle
 *
 * Remove:
 * any old arrow attached to the parent <a>.
 */

@media (max-width: 1100px) {

    .hh-primary-nav
    .hh-primary-menu
    li.hh-has-mobile-submenu
    > a {
        background-image: none !important;
        background-position: initial !important;
        background-repeat: no-repeat !important;
    }

    .hh-primary-nav
    .hh-primary-menu
    li.hh-has-mobile-submenu
    > a::before,
    .hh-primary-nav
    .hh-primary-menu
    li.hh-has-mobile-submenu
    > a::after {
        content: none !important;
        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        background: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
    }
}
/**
 * Hide the original dropdown arrow ONLY on mobile.
 *
 * The new round .hh-mobile-submenu-toggle remains visible.
 */
@media (max-width: 1100px) {

    .hh-primary-menu li.hh-has-mobile-submenu > a::before,
    .hh-primary-menu li.hh-has-mobile-submenu > a::after,
    .hh-primary-menu li.menu-item-has-children > a::before,
    .hh-primary-menu li.menu-item-has-children > a::after {
        content: none !important;
        display: none !important;
    }
}