/*
 * HOSTREND HEADER — RESTRUCTURED MOBILE/TABLET v3.11
 *
 * Structure:
 *   desktop  -> 3-column grid (brand / nav / actions)
 *   compact  -> single explicit flex row (brand / actions)
 *
 * The Navigation component stays a child of the Header, but in compact mode
 * becomes an inert, zero-size coordination node. Its drawer is fixed and
 * therefore cannot create a second row or disturb vertical alignment.
 */

.hr-header,
.hr-header * {
    box-sizing: border-box;
}

.hr-header {
    --hr-header-height: var(--header-height-desktop);
    --hr-header-pad: var(--header-padding-desktop);
    --hr-header-logo-height: var(--header-logo-height-desktop);
    --hr-header-top-text: var(--color-white);
    --hr-header-solid-text: var(--color-dark);
    --hr-header-surface: var(--color-white);
    --hr-header-border: var(--color-border);
    --hr-header-shadow: var(--shadow-floating);
    --hr-header-radius: var(--radius-lg);
    --header-mobile-action-reserve: 76px;

    position: relative;
    z-index: 1200;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--hr-header-top-text);
    font-family: var(--font-primary);
}

.hr-header--sticky {
    position: fixed;
    inset: 0 0 auto 0;
    transform: translateY(0);
    transition:
        transform var(--motion-normal) var(--ease-standard),
        background-color var(--motion-normal) var(--ease-standard),
        color var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
    will-change: transform, background-color, color, box-shadow;
}

.hr-header.is-scroll-hidden {
    transform: translateY(-110%);
    pointer-events: none;
}

.hr-header.is-scroll-solid {
    background: var(--hr-header-surface);
    color: var(--hr-header-solid-text);
    box-shadow: var(--hr-header-shadow);
}

.hr-header--dark-top:not(.is-scroll-solid) .hr-navigation--desktop {
    color: var(--hr-header-top-text);
}

.hr-header--light-top:not(.is-scroll-solid) {
    color: var(--hr-header-solid-text);
}

.hr-header--light-top:not(.is-scroll-solid) .hr-navigation--desktop {
    color: var(--hr-header-solid-text);
}



/* -------------------------------------------------------------------------
   LOGO ASSET PROTECTION — scoped to Hostrend brand marks
   Prevent casual image drag/save interactions without disabling normal
   pointer interaction on the logo link itself. The same <img> element is
   reused when the desktop logo swaps between white and dark variants.
   ------------------------------------------------------------------------- */
.hr-header__logo,
.hr-navigation__mobile-brand img {
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.hr-header__brand,
.hr-navigation__mobile-brand {
    -webkit-touch-callout: none;
}

/* -------------------------------------------------------------------------
   DESKTOP SHELL
   ------------------------------------------------------------------------- */

.hr-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    width: 100%;
    min-height: var(--hr-header-height);
    padding: var(--header-top-gap) var(--hr-header-pad);
    background: transparent;
}

.hr-header.is-scroll-solid .hr-header__inner {
    background: var(--hr-header-surface);
}

.hr-header__brand-zone {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    align-self: center;
}

.hr-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    height: var(--hr-header-logo-height);
    margin: 0;
    text-decoration: none;
}

.hr-header__logo {
    display: block;
    width: auto;
    height: 100%;
    max-width: 205px;
    object-fit: contain;
    flex: 0 1 auto;
}

/* Exactly one logo element is rendered; JS swaps its source per state. */
.hr-header--dark-top:not(.is-scroll-solid) .hr-header__logo {
    content: url("/media/images/logos/hostrend-full-white-logo-design.webp");
}

.hr-header.is-scroll-solid .hr-header__logo {
    content: url("/media/images/logos/hostrend-full-dark-logo-design.webp");
}

.hr-header__actions {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--header-auth-actions-gap);
    min-width: 0;
    margin: 0;
    align-self: center;
}

.hr-header__actions .host-button {
    margin: 0;
}

/* -------------------------------------------------------------------------
   TOGGLE
   ------------------------------------------------------------------------- */

.hr-header__menu-toggle {
    display: none;
    flex: 0 0 var(--header-mobile-menu-size);
    align-items: center;
    justify-content: center;
    width: var(--header-mobile-menu-size);
    min-width: var(--header-mobile-menu-size);
    height: var(--header-mobile-menu-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hr-header__toggle-icon,
.hr-header__close-icon {
    width: var(--header-mobile-icon-size);
    height: var(--header-mobile-icon-size);
    color: currentColor;
    flex: 0 0 auto;
}

.hr-header__toggle-icon *,
.hr-header__close-icon * {
    vector-effect: non-scaling-stroke;
}

.hr-header__mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--mega-menu-mobile-backdrop-z-index);
    display: block;
    background: var(--mega-menu-mobile-backdrop-surface);
    -webkit-backdrop-filter: blur(var(--mega-menu-mobile-backdrop-blur)) saturate(var(--mega-menu-mobile-backdrop-saturate));
    backdrop-filter: blur(var(--mega-menu-mobile-backdrop-blur)) saturate(var(--mega-menu-mobile-backdrop-saturate));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mega-menu-mobile-backdrop-transition-duration) var(--mega-menu-mobile-backdrop-transition-ease), visibility var(--mega-menu-mobile-backdrop-transition-duration) var(--mega-menu-mobile-backdrop-transition-ease);
}

.hr-header.is-mobile-open .hr-header__mobile-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* -------------------------------------------------------------------------
   NAVIGATION COORDINATION NODE
   ------------------------------------------------------------------------- */

.hr-header__inner > .hr-navigation {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    min-height: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hr-header__responsive-nav-measure {
    position: absolute !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   COMPACT/TABLET/MOBILE SHELL

   One explicit flex row. The navigation node is visually inert and the drawer
   is fixed. This guarantees Toggle + Logo + Account share one center line.
   ------------------------------------------------------------------------- */

.hr-header.is-nav-compact .hr-header__inner,
.hr-header .hr-header__inner[data-compact-layout="true"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--hr-header-height);
    padding-inline: var(--hr-header-pad);
}

.hr-header.is-nav-compact .hr-header__brand-zone {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - var(--header-mobile-action-reserve));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--header-brand-control-gap);
    margin: 0;
    align-self: center;}

.hr-header.is-nav-compact .hr-header__menu-toggle {
    display: inline-flex;
    align-self: center;
}

.hr-header.is-nav-compact .hr-header__brand {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: var(--header-logo-height-mobile);
    max-width: 100%;
    margin: 0;
}

.hr-header.is-nav-compact .hr-header__logo {
    width: auto;
    height: var(--header-logo-height-mobile);
    max-width: min(160px, calc(100vw - var(--header-mobile-action-reserve) - var(--header-mobile-menu-size) - 8px));
    flex: 0 1 auto;
}

.hr-header.is-nav-compact .hr-header__actions {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    align-self: center;
}

.hr-header.is-nav-compact .hr-header__actions .hr-header__signup {
    display: none !important;
}

.hr-header.is-nav-compact .hr-header__actions .hr-header__login,
.hr-header.is-nav-compact .hr-header__actions .hr-header__account {
    min-height: var(--header-mobile-action-height);
    height: var(--header-mobile-action-height);
    padding-inline: var(--header-mobile-action-padding);
    font-size: var(--header-mobile-action-font-size);
    line-height: 1;
    margin: 0;
    align-self: center;
    flex: 0 0 auto;
}

.hr-header.is-nav-compact .hr-header__inner > .hr-navigation {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: block;
    overflow: visible;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hr-header.is-nav-compact .hr-navigation--desktop {
    display: none !important;
}

.hr-header.is-nav-compact .hr-navigation__mobile-drawer {
    display: flex !important;
}

/* -------------------------------------------------------------------------
   TABLET
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   DESKTOP FULL-BLEED CONTENT BOUNDARY

   The header remains full-bleed and the three-column desktop grid spans the
   available viewport width. This keeps the brand on the left boundary, the
   navigation mathematically centered, and the actions on the right boundary
   at every desktop zoom level. Tablet/mobile continue to use their existing
   compact shell below.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .hr-header > .hr-header__inner {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        box-sizing: border-box;
    }

    .hr-header.is-scroll-solid > .hr-header__inner {
        background: transparent;
    }
}

@media (max-width: 1023px) {
    .hr-header.is-nav-compact,
    .hr-header {
        --hr-header-height: var(--header-height-tablet);
        --hr-header-pad: var(--header-padding-tablet);
        --hr-header-logo-height: var(--header-logo-height-mobile);
    }

    .hr-header .hr-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: var(--hr-header-height);
        padding-inline: var(--hr-header-pad);
    }

    .hr-header .hr-navigation--desktop {
        display: none !important;
    }

    .hr-header .hr-header__inner > .hr-navigation {
        position: absolute;
        inset: 50% auto auto 50%;
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: block;
        overflow: visible;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .hr-header .hr-header__brand-zone {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - var(--header-mobile-action-reserve));
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--header-brand-control-gap);
        margin: 0;
        align-self: center;
    }

    .hr-header .hr-header__menu-toggle {
        display: inline-flex;
        align-self: center;
    }

    .hr-header .hr-header__brand {
        display: inline-flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        height: var(--header-logo-height-mobile);
        max-width: calc(100% - var(--header-mobile-action-reserve) - var(--header-mobile-menu-size));
        margin: 0;
    }

    .hr-header .hr-header__logo {
        height: var(--header-logo-height-mobile);
        width: auto;
        max-width: min(160px, calc(100vw - var(--header-mobile-action-reserve) - var(--header-mobile-menu-size) - 8px));
    }

    .hr-header .hr-header__actions {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2);
        min-width: 0;
        margin: 0;
        align-self: center;
    }

    .hr-header .hr-header__actions .hr-header__signup {
        display: none !important;
    }

    .hr-header .hr-header__actions .hr-header__login,
    .hr-header .hr-header__actions .hr-header__account {
        min-height: var(--header-mobile-action-height);
        height: var(--header-mobile-action-height);
        padding-inline: var(--header-mobile-action-padding);
        font-size: var(--header-mobile-action-font-size);
        line-height: 1;
        margin: 0;
        align-self: center;
        flex: 0 0 auto;
    }
}

/* -------------------------------------------------------------------------
   TABLET TOGGLE REFINEMENT — 32px hit area / 24px icon
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-header__menu-toggle {
        width: var(--header-mobile-menu-size);
        min-width: var(--header-mobile-menu-size);
        height: var(--header-mobile-menu-size);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        transition: background-color var(--header-tablet-menu-hover-duration) linear, border-color var(--header-tablet-menu-hover-duration) linear, box-shadow var(--header-tablet-menu-hover-duration) linear, transform var(--header-tablet-menu-press-duration) ease;
    }

    .hr-header .hr-header__toggle-icon {
        width: var(--header-tablet-menu-icon-size);
        height: var(--header-tablet-menu-icon-size);
        opacity: 1;
        transition: opacity var(--header-tablet-menu-opacity-duration) ease-in-out;
    }

    .hr-header .hr-header__menu-toggle:hover,
    .hr-header .hr-header__menu-toggle:focus-visible {
        background: var(--navigation-hover-surface-on-dark);
        border-color: var(--navigation-hover-border-on-dark);
        box-shadow: none;
        outline: none;
    }

    .hr-header .hr-header__menu-toggle:hover .hr-header__toggle-icon,
    .hr-header .hr-header__menu-toggle:focus-visible .hr-header__toggle-icon {
        opacity: .85;
    }

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

    .hr-header .hr-header__menu-toggle.is-pressing {
        background: var(--header-tablet-menu-press-surface);
        border-color: var(--header-tablet-menu-press-border);
        transform: var(--header-tablet-menu-active-transform);
    }

    .hr-header .hr-header__menu-toggle.is-pressing .hr-header__toggle-icon {
        opacity: .78;
        transform: scale(var(--header-tablet-menu-press-icon-scale));
    }
}

/* -------------------------------------------------------------------------
   PHONE
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .hr-header,
    .hr-header.is-nav-compact {
        --hr-header-height: var(--header-height-mobile);
        --hr-header-pad: var(--header-padding-mobile);
        --hr-header-logo-height: var(--header-logo-height-mobile);
    }

    .hr-header .hr-header__brand-zone {
        gap: var(--header-brand-control-gap);
    }

    .hr-header .hr-header__logo {
        max-width: min(152px, calc(100vw - var(--header-mobile-action-reserve) - var(--header-mobile-menu-size) - 6px));
    }
}

@media (max-width: 360px) {
    .hr-header {
        --header-mobile-action-reserve: 68px;
        --header-mobile-menu-size: 32px;
        --header-mobile-icon-size: 18px;
    }

    .hr-header .hr-header__actions .hr-header__login,
    .hr-header .hr-header__actions .hr-header__account {
        padding-inline: 14px;
    }
}

/* -------------------------------------------------------------------------
   TABLET DRAWER / BACKDROP REFINEMENT — V38
   The header area remains clear. The page area beside the drawer is blurred
   from below the header, matching the requested Canva-style behavior.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-header__mobile-backdrop,
    body.hostrend-menu-open .hr-header__mobile-backdrop {
        top: var(--header-height-tablet);
        right: 0;
        bottom: 0;
        left: 0;
    }

    .hr-header .hr-navigation__mobile-drawer {
        top: 0;
        bottom: 0;
        width: var(--mega-menu-tablet-drawer-width);
        max-width: var(--mega-menu-tablet-drawer-width);
    }

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

    .hr-header .hr-navigation__mobile-content {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* -------------------------------------------------------------------------
   HEADER AUTH STATE
   The reusable Button Component owns the auth button visual states.
   No header-level Sign up recoloring is applied here.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hr-header,
    .hr-header--sticky,
    .hr-header__mobile-backdrop {
        transition: none !important;
    }
}

body.hostrend-menu-open {
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   TABLET V39 — CANVA-STYLE DRAWER/BACKDROP FINAL REFINEMENT
   Desktop V35 remains unchanged; these rules are tablet-only.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-header__mobile-backdrop,
    body.hostrend-menu-open .hr-header__mobile-backdrop {
        top: var(--header-height-tablet);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--mega-menu-mobile-backdrop-z-index);
        background: var(--mega-menu-mobile-backdrop-surface);
        -webkit-backdrop-filter: blur(var(--mega-menu-tablet-backdrop-blur)) saturate(110%);
        backdrop-filter: blur(var(--mega-menu-tablet-backdrop-blur)) saturate(110%);
    }

    .hr-header .hr-navigation__mobile-drawer {
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--mega-menu-tablet-drawer-width);
        max-width: var(--mega-menu-tablet-drawer-width);
        height: 100dvh;
        border-inline-end: var(--border-width-subtle) solid var(--border-glass);
        box-shadow: var(--mega-menu-mobile-drawer-shadow);
    }

    .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-content-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: var(--mega-menu-tablet-content-padding-top) var(--mega-menu-tablet-content-padding-inline) var(--mega-menu-tablet-content-padding-bottom);
        gap: 0;
    }

    .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 .host-icon {
        width: 14px;
        height: 14px;
        margin-left: 6px;
    }

    .hr-header .hr-navigation__mobile-auth {
        padding: 12px;
        gap: 8px;
        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);
    }
}


/* -------------------------------------------------------------------------
   V42 COMPACT BACKDROP + DRAWER REFINEMENT
   The backdrop is intentionally moved to <body> in compact mode so it can
   blur the page beside the drawer without being trapped by the header's
   isolated stacking context. The header band itself stays crisp.
   ------------------------------------------------------------------------- */
body > .hr-header__mobile-backdrop {
    position: fixed;
    top: var(--mega-menu-compact-backdrop-top, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--mega-menu-mobile-backdrop-z-index);
    display: block;
    background: var(--mega-menu-mobile-backdrop-surface);
    -webkit-backdrop-filter: blur(var(--mega-menu-tablet-backdrop-blur)) saturate(110%);
    backdrop-filter: blur(var(--mega-menu-tablet-backdrop-blur)) saturate(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mega-menu-mobile-backdrop-transition-duration) var(--mega-menu-mobile-backdrop-transition-ease),
                visibility var(--mega-menu-mobile-backdrop-transition-duration) var(--mega-menu-mobile-backdrop-transition-ease);
}

body.hostrend-menu-open > .hr-header__mobile-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-drawer {
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        height: 100dvh;
    }

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

    .hr-header .hr-navigation__mobile-drawer-head .hr-navigation__mobile-close {
        margin-left: auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-header__mobile-backdrop {
        display: none;
    }
}


/* -------------------------------------------------------------------------
   V42 — RELEASE THE COMPACT NAV COORDINATION NODE
   A transformed parent creates a containing block for fixed descendants.
   Remove that transform in compact mode so the drawer can truly anchor to
   the viewport at top:0 instead of inheriting the header's vertical offset.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hr-header.is-nav-compact .hr-header__inner > .hr-navigation {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: block;
        overflow: visible;
        transform: none;
        pointer-events: none;
    }

    .hr-header.is-nav-compact .hr-navigation__mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
    }
}

/* -------------------------------------------------------------------------
   V47 TABLET — CANVA POSITION REFINEMENT (768–1023px ONLY)
   Desktop V35 baseline remains locked.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hr-header .hr-navigation__mobile-drawer {
        top: var(--mega-menu-tablet-drawer-top);
        bottom: 0;
        height: calc(100dvh - var(--mega-menu-tablet-drawer-top));
        width: var(--mega-menu-tablet-drawer-width);
        max-width: var(--mega-menu-tablet-drawer-width);
    }

    .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 {
        width: 32px;
        height: 32px;
        transform: none;
        margin-left: auto;
    }

    .hr-header .hr-navigation__mobile-content {
        padding: var(--mega-menu-tablet-content-padding-top)
                 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: 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);
    }

    .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);
    }

    .hr-header .hr-navigation__mobile-auth {
        padding: 8px var(--mega-menu-tablet-auth-side-padding) var(--mega-menu-tablet-auth-bottom-padding);
        gap: var(--mega-menu-tablet-auth-gap);
    }
}