/* HOSTREND NAVIGATION COMPONENT v3.5 — primary navigation shell */
.hr-navigation { min-width: 0; margin: 0; padding: 0; }
.hr-navigation__mobile-drawer, .hr-navigation__mobile-auth { display: none; }
.hr-navigation--desktop { grid-column: 2; display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; white-space: nowrap; justify-self: center; }
.hr-navigation__list { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--navigation-list-gap); width: max-content; min-width: 100%; max-width: none; margin: 0; padding: 0; list-style: none; }
.hr-navigation__list::before { display: none !important; content: none !important; }
.hr-navigation__item { position: relative; z-index: 1; }
.hr-navigation__link, .hr-navigation__trigger { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; height: var(--navigation-item-min-height); min-height: var(--navigation-item-min-height); padding: 0 var(--navigation-item-padding-inline); border: 1px solid transparent; border-radius: var(--navigation-item-radius); background: transparent; color: currentColor; font-family: var(--font-primary); font-size: var(--font-nav); font-weight: var(--font-weight-medium); line-height: var(--line-nav); letter-spacing: var(--tracking-normal); text-decoration: none; white-space: nowrap; cursor: pointer; }
.hr-navigation__link:focus-visible, .hr-navigation__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hr-header.is-nav-compact .hr-navigation--desktop { display: none !important; }

.hr-header.is-nav-compact .hr-navigation__mobile-drawer { position: fixed; top: 0; left: 0; z-index: var(--mega-menu-mobile-drawer-z-index); width: var(--mega-menu-mobile-drawer-width-tablet); max-width: var(--mega-menu-mobile-drawer-max-width); min-width: 0; height: 100dvh; display: flex !important; flex-direction: column; overflow: hidden; background: var(--mega-menu-mobile-drawer-surface); color: var(--color-dark); box-shadow: var(--mega-menu-mobile-drawer-shadow); transform: translateX(-105%); transition: transform var(--mega-menu-mobile-drawer-transition-duration) var(--mega-menu-mobile-drawer-transition-ease); }
.hr-navigation__mobile-drawer:not(.is-open) { pointer-events: none; visibility: hidden; }
.hr-navigation__mobile-drawer.is-open { transform: translateX(0); pointer-events: auto; visibility: visible; }
/* Tablet/compact specificity fix: the closed-state selector above is intentionally overridden here. */
.hr-header.is-nav-compact .hr-navigation__mobile-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.hr-header.is-nav-compact .hr-navigation__mobile-content { display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--mega-menu-mobile-content-padding-top) var(--mega-menu-mobile-content-padding-inline) var(--mega-menu-mobile-content-padding-bottom); overflow-y: auto; }
.hr-header.is-nav-compact .hr-navigation__mobile-link { width: 100%; min-height: var(--mega-menu-mobile-nav-item-height); display: flex; align-items: center; justify-content: flex-start; padding: 0 var(--mega-menu-mobile-nav-item-padding-inline); border: 0; border-radius: var(--mega-menu-mobile-nav-item-radius); background: transparent; color: var(--color-dark); font-family: var(--font-primary); font-size: var(--mega-menu-mobile-nav-item-size); line-height: var(--mega-menu-mobile-nav-item-line); font-weight: var(--mega-menu-mobile-nav-item-weight); text-align: left; text-decoration: none; cursor: pointer; }
.hr-header.is-nav-compact .hr-navigation__mobile-link .hr-navigation__mobile-chevron {
    margin-left: auto;
    margin-right: var(--mega-menu-mobile-nav-chevron-end-inset);
    width: var(--mega-menu-mobile-nav-chevron-box-size);
    height: var(--mega-menu-mobile-nav-chevron-box-size);
    flex: 0 0 var(--mega-menu-mobile-nav-chevron-box-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    pointer-events: none;
}
.hr-header.is-nav-compact .hr-navigation__mobile-link .hr-navigation__mobile-chevron .host-icon {
    width: var(--mega-menu-mobile-nav-chevron-size);
    height: var(--mega-menu-mobile-nav-chevron-size);
    margin: 0;
    transform: rotate(-90deg);
    color: currentColor;
    transition: transform var(--motion-fast) var(--ease-standard);
}
.hr-header.is-nav-compact .hr-navigation__mobile-link--expand[aria-expanded="true"] .hr-navigation__mobile-chevron .host-icon { transform: translateX(1px) rotate(-90deg); }
.hr-header.is-nav-compact .hr-navigation__mobile-drawer-head { min-height: var(--mega-menu-mobile-drawer-head-height); padding: 0 var(--mega-menu-mobile-drawer-head-padding-inline); display: flex; align-items: center; justify-content: flex-end; border-bottom: 0; flex: 0 0 auto; }
.hr-header.is-nav-compact .hr-navigation__mobile-brand { display: none !important; }
.hr-header.is-nav-compact .hr-navigation__mobile-close { width: var(--mega-menu-mobile-close-size); height: var(--mega-menu-mobile-close-size); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-dark); cursor: pointer; }
.hr-header.is-nav-compact .hr-navigation__mobile-close svg { width: var(--mega-menu-mobile-close-icon-size); height: var(--mega-menu-mobile-close-icon-size); color: currentColor; }
.hr-header.is-nav-compact .hr-navigation__mobile-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hr-header.is-nav-compact .hr-navigation__mobile-auth { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--mega-menu-mobile-auth-gap); padding: var(--mega-menu-mobile-auth-padding); border-top: var(--mega-menu-mobile-auth-border-width) solid var(--mega-menu-mobile-auth-border); }
.hr-header.is-nav-compact .hr-navigation__mobile-auth .host-button { width: 100%; }
.hr-header.is-nav-compact .hr-navigation__mobile-auth .hr-header__login { order: 1; color: var(--mega-menu-mobile-login-text); background: var(--mega-menu-mobile-login-bg); border-color: var(--mega-menu-mobile-login-border); box-shadow: var(--mega-menu-mobile-login-shadow); }
.hr-header.is-nav-compact .hr-navigation__mobile-auth .hr-header__signup { order: 2; color: var(--mega-menu-mobile-signup-text); background: var(--mega-menu-mobile-signup-bg); border-color: var(--mega-menu-mobile-signup-border); box-shadow: var(--mega-menu-mobile-signup-shadow); }

@media (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-drawer { position: fixed; top: 0; left: 0; z-index: var(--mega-menu-mobile-drawer-z-index); width: var(--mega-menu-mobile-drawer-width-tablet); max-width: var(--mega-menu-mobile-drawer-max-width); min-width: 0; height: 100dvh; display: flex !important; flex-direction: column; overflow: hidden; background: var(--mega-menu-mobile-drawer-surface); color: var(--color-dark); box-shadow: var(--mega-menu-mobile-drawer-shadow); transform: translateX(-105%); transition: transform var(--mega-menu-mobile-drawer-transition-duration) var(--mega-menu-mobile-drawer-transition-ease); }
}
/* -------------------------------------------------------------------------
   TABLET — CANVA-STYLE LEFT NAVIGATION DRAWER (768–1023px)
   Desktop navigation remains locked above this breakpoint.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-header__menu-toggle {
        width: var(--header-tablet-menu-button-size);
        min-width: var(--header-tablet-menu-button-size);
        height: var(--header-tablet-menu-button-size);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        transition: background-color var(--header-tablet-menu-hover-duration) var(--ease-standard),
                    border-color var(--header-tablet-menu-hover-duration) var(--ease-standard),
                    opacity var(--header-tablet-menu-opacity-duration) var(--ease-standard),
                    transform var(--header-tablet-menu-press-duration) var(--ease-standard);
    }

    .hr-header .hr-header__menu-toggle:hover {
        background: var(--header-tablet-menu-hover-surface);
        border-color: var(--header-tablet-menu-hover-border);
    }

    .hr-header .hr-header__menu-toggle:active {
        transform: var(--header-tablet-menu-active-transform);
    }

    .hr-header .hr-header__toggle-icon,
    .hr-header .hr-header__close-icon {
        width: var(--header-tablet-menu-icon-size);
        height: var(--header-tablet-menu-icon-size);
        transition: opacity var(--header-tablet-menu-opacity-duration) var(--ease-standard),
                    transform var(--header-tablet-menu-hover-duration) var(--ease-standard);
    }

    .hr-header .hr-navigation__mobile-drawer {
        width: var(--mega-menu-tablet-drawer-width);
        max-width: var(--mega-menu-tablet-drawer-width);
        min-height: 100dvh;
        border-inline-end: var(--border-width-subtle) solid var(--border-glass);
        box-shadow: var(--shadow-overlay);
        transition: transform var(--header-tablet-drawer-transition-duration) var(--header-tablet-drawer-transition-ease),
                    visibility var(--header-tablet-drawer-transition-duration) var(--ease-standard);
    }

    .hr-header .hr-navigation__mobile-drawer-head {
        min-height: var(--mega-menu-tablet-drawer-head-height);
        padding: 0 var(--mega-menu-tablet-drawer-padding-inline);
        justify-content: flex-end;
    }

    .hr-header .hr-navigation__mobile-content {
        padding-top: var(--mega-menu-tablet-content-padding-top);
        padding-right: var(--mega-menu-tablet-content-padding-inline);
        padding-bottom: var(--mega-menu-tablet-content-padding-bottom);
        padding-left: var(--mega-menu-tablet-content-padding-inline);
        gap: var(--mega-menu-tablet-nav-item-gap);
    }

    .hr-header .hr-navigation__mobile-link {
        width: 100%;
        min-height: var(--mega-menu-tablet-nav-item-height);
        height: var(--mega-menu-tablet-nav-item-height);
        padding-inline: 0;
        border-radius: var(--mega-menu-tablet-nav-item-radius);
        font-size: var(--mega-menu-tablet-nav-item-size);
        line-height: 1;
    }

    /* Tablet nav actions use the same reusable Header Button Component states
       as the desktop header; only the available width changes. */
    .hr-header .hr-navigation__mobile-auth {
        gap: var(--mega-menu-tablet-auth-gap);
        padding: 10px 12px 12px;
        border-top: 0;
    }

    .hr-header .hr-navigation__mobile-auth .host-button {
        width: 100%;
        min-height: var(--mega-menu-tablet-auth-button-height);
        height: var(--mega-menu-tablet-auth-button-height);
        padding-inline: var(--button-padding-sm);
        border-radius: var(--button-radius);
        font-size: var(--font-button-small);
        line-height: var(--line-button);
        flex: 0 0 auto;
    }

    .hr-header .hr-navigation__mobile-auth .hr-header__login {
        color: var(--button-color-header-login-text);
        background: var(--button-color-header-login-bg);
        border-color: var(--button-border-header-login);
        box-shadow: var(--button-shadow-none);
        -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
        backdrop-filter: blur(var(--button-header-auth-blur));
    }

    .hr-header .hr-navigation__mobile-auth .hr-header__signup {
        color: var(--button-color-header-signup-text);
        background: var(--button-color-header-signup-bg);
        border-color: var(--button-border-header-signup);
        box-shadow: var(--button-shadow-none);
        -webkit-backdrop-filter: blur(var(--button-header-auth-blur));
        backdrop-filter: blur(var(--button-header-auth-blur));
    }

    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron {
        margin-left: auto;
        margin-right: var(--mega-menu-tablet-nav-chevron-end-inset);
        width: var(--mega-menu-tablet-nav-chevron-box-size);
        height: var(--mega-menu-tablet-nav-chevron-box-size);
        flex: 0 0 var(--mega-menu-tablet-nav-chevron-box-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron .host-icon {
        width: var(--mega-menu-tablet-nav-chevron-size);
        height: var(--mega-menu-tablet-nav-chevron-size);
        margin: 0;
        transform: rotate(-90deg);
    }
}

@media (max-width: 599px) {
    .hr-header.is-nav-compact .hr-navigation__mobile-drawer { width: var(--mega-menu-mobile-drawer-width-mobile); max-width: var(--mega-menu-mobile-drawer-width-mobile); }
    .hr-header.is-nav-compact .hr-navigation__mobile-drawer-head { min-height: var(--mega-menu-mobile-drawer-head-height-mobile); }
    .hr-header.is-nav-compact .hr-navigation__mobile-content { padding-inline: var(--mega-menu-mobile-content-padding-inline-mobile); }
    .hr-header.is-nav-compact .hr-navigation__mobile-link { min-height: var(--mega-menu-mobile-nav-item-height-mobile); font-size: var(--mega-menu-mobile-nav-item-size-mobile); }
}
@media (prefers-reduced-motion: reduce) { .hr-navigation__link, .hr-navigation__trigger, .hr-navigation__list::before, .hr-navigation__mobile-drawer { transition: none !important; } }


/* -------------------------------------------------------------------------
   V42 COMPACT DRAWER LAYOUT — structural fixes only.
   Desktop V35 remains untouched. These rules apply only at <=1023px.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .hr-header .hr-navigation__mobile-drawer-head {
        flex: 0 0 var(--mega-menu-tablet-drawer-head-height);
    }

    .hr-header .hr-navigation__mobile-link {
        flex: 0 0 auto;
    }

    .hr-header .hr-navigation__mobile-auth {
        flex: 0 0 auto;
        width: 100%;
        margin: 0;
        padding: 8px var(--mega-menu-tablet-auth-side-padding) var(--mega-menu-tablet-auth-bottom-padding);
        gap: var(--mega-menu-tablet-auth-gap);
        border-top: 0;
        background: var(--mega-menu-mobile-drawer-surface);
    }

    .hr-header .hr-navigation__mobile-auth .host-button {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-drawer {
        width: var(--mega-menu-tablet-drawer-width);
        max-width: var(--mega-menu-tablet-drawer-width);
        top: 0;
        bottom: 0;
        height: 100dvh;
    }

    .hr-header .hr-navigation__mobile-drawer-head {
        min-height: var(--mega-menu-tablet-drawer-head-height);
        height: var(--mega-menu-tablet-drawer-head-height);
        padding-inline: var(--mega-menu-tablet-drawer-padding-inline);
    }

    .hr-header .hr-navigation__mobile-drawer-head .hr-navigation__mobile-close {
        transform: translateY(var(--mega-menu-tablet-close-offset-y));
    }

    .hr-header .hr-navigation__mobile-content {
        padding: 0 var(--mega-menu-tablet-content-padding-inline) var(--mega-menu-tablet-content-padding-bottom);
    }

    .hr-header .hr-navigation__mobile-link {
        min-height: var(--mega-menu-tablet-nav-item-height);
        height: var(--mega-menu-tablet-nav-item-height);
        padding-inline: var(--mega-menu-tablet-nav-item-padding-inline);
        border-radius: var(--mega-menu-tablet-nav-item-radius);
    }

    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron {
        margin-left: auto;
        margin-right: var(--mega-menu-tablet-nav-chevron-end-inset);
        width: var(--mega-menu-tablet-nav-chevron-box-size);
        height: var(--mega-menu-tablet-nav-chevron-box-size);
        flex: 0 0 var(--mega-menu-tablet-nav-chevron-box-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron .host-icon {
        width: var(--mega-menu-tablet-nav-chevron-size);
        height: var(--mega-menu-tablet-nav-chevron-size);
        margin: 0;
        transform: rotate(-90deg);
    }
}

/* V53 MOBILE DRAWER AUTH — keep reusable Header Button Component hover states
   visible on the white drawer instead of falling back to the header-dark white
   hover surface. */
@media (max-width: 767px) {
    .hr-header .hr-navigation__mobile-auth {
        --button-color-header-login-hover-bg: var(--color-primary-hover);
        --button-color-header-login-hover-text: var(--color-white);
        --button-border-header-login-hover: var(--color-primary-hover);
        --button-color-header-login-active-bg: var(--color-primary-active);
        --button-color-header-login-active-text: var(--color-white);
        --button-border-header-login-active: var(--color-primary-active);

        --button-color-header-signup-hover-bg: var(--color-hover-surface);
        --button-color-header-signup-hover-text: var(--color-primary);
        --button-border-header-signup-hover: var(--color-primary);
        --button-color-header-signup-active-bg: var(--color-active-surface);
        --button-color-header-signup-active-text: var(--color-primary-active);
        --button-border-header-signup-active: var(--color-primary-active);
    }
}

@media (max-width: 767px) {
    /* Mobile uses the same side-reveal width token so the blurred page strip is visible. */
    .hr-header .hr-navigation__mobile-drawer {
        width: var(--mega-menu-mobile-drawer-width-mobile);
        max-width: var(--mega-menu-mobile-drawer-width-mobile);
    }

    .hr-header .hr-navigation__mobile-drawer-head {
        min-height: 44px;
        height: 44px;
        padding-inline: 12px;
    }

    .hr-header .hr-navigation__mobile-content {
        padding: 0 12px 8px;
    }

    .hr-header .hr-navigation__mobile-link {
        min-height: 40px;
        height: 40px;
        padding-inline: 0;
        font-size: var(--mega-menu-tablet-nav-item-size);
        border-radius: 0;
    }

    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron {
        margin-left: auto;
        margin-right: var(--mega-menu-tablet-nav-chevron-end-inset);
        width: var(--mega-menu-tablet-nav-chevron-box-size);
        height: var(--mega-menu-tablet-nav-chevron-box-size);
        flex: 0 0 var(--mega-menu-tablet-nav-chevron-box-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron .host-icon {
        width: var(--mega-menu-tablet-nav-chevron-size);
        height: var(--mega-menu-tablet-nav-chevron-size);
        margin: 0;
        transform: rotate(-90deg);
    }

    .hr-header .hr-navigation__mobile-auth {
        padding: 8px 12px 12px;
        gap: 6px;
    }
}

/* V47 TABLET — align labels and chevrons to the drawer edges. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-link {
        padding-inline: 0;
    }
    .hr-header .hr-navigation__mobile-link > span:first-child {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .hr-header .hr-navigation__mobile-link .hr-navigation__mobile-chevron {
        margin-left: auto;
        margin-right: var(--mega-menu-tablet-nav-chevron-end-inset);
    }
}

/* -------------------------------------------------------------------------
   V50 TABLET DRAWER AUTH — use the existing Button Component states without
   allowing the header-dark hover surface to turn the white drawer white.
   The markup remains host_button(); only the component's existing tokens are
   contextually remapped for the light tablet drawer.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-auth {
        /* Login keeps the reusable header-login component but receives the
           standard primary hover treatment on the white drawer surface. */
        --button-color-header-login-hover-bg: var(--color-primary-hover);
        --button-color-header-login-hover-text: var(--color-white);
        --button-border-header-login-hover: var(--color-primary-hover);
        --button-color-header-login-active-bg: var(--color-primary-active);
        --button-color-header-login-active-text: var(--color-white);
        --button-border-header-login-active: var(--color-primary-active);

        /* Signup keeps the reusable header-signup component but uses the
           light/global outline hover surface so it never disappears into
           the white drawer. */
        --button-color-header-signup-hover-bg: var(--color-hover-surface);
        --button-color-header-signup-hover-text: var(--color-primary);
        --button-border-header-signup-hover: var(--color-primary);
        --button-color-header-signup-active-bg: var(--color-active-surface);
        --button-color-header-signup-active-text: var(--color-primary-active);
        --button-border-header-signup-active: var(--color-primary-active);
    }
}