/* ═══════════════════════════════════════════════════════════════
   HRHS Marketplace — Header & Footer
   Colors come from --hrhs-hdr-* which HRHS_Chrome prints inline
   from the Header & Footer settings, so admin changes take effect
   without editing this file.
═══════════════════════════════════════════════════════════════ */

.hrhs-chrome-active { margin: 0; }
.hrhs-shell { background: var(--hrhs-light-bg, #F4F6F9); min-height: 60vh; }
.hrhs-shell > .hrhs-page { padding-top: 0; }

/* ─── Header shell ──────────────────────────────────────────── */
.hrhs-hdr {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--hrhs-hdr-bg, #032333);
    color: var(--hrhs-hdr-text, #fff);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 6px 24px rgba(3,35,51,.28);
}
.hrhs-hdr__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    height: 74px;
    display: flex;
    align-items: center;
    gap: 28px;
}

/* ─── Logo ──────────────────────────────────────────────────── */
.hrhs-hdr__logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1.05;
}
.hrhs-hdr__logo:hover { text-decoration: none; }
.hrhs-hdr__logo img { max-height: 42px; width: auto; }
.hrhs-hdr__logo-mark {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--hrhs-hdr-accent, #0BFF84);
}
.hrhs-hdr__logo-tag {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .72;
    margin-top: 2px;
}

/* ─── Nav ───────────────────────────────────────────────────── */
.hrhs-hdr__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.hrhs-hdr__item { position: relative; }
.hrhs-hdr__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .88;
    padding: 10px 13px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.hrhs-hdr__link:hover,
.hrhs-hdr__link[aria-expanded="true"] {
    opacity: 1;
    color: var(--hrhs-hdr-accent, #0BFF84);
    background: rgba(255,255,255,.06);
    text-decoration: none;
}
.hrhs-hdr__link svg { transition: transform .2s ease; }
.hrhs-hdr__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.hrhs-hdr__msg { position: relative; }
.hrhs-hdr__badge {
    background: var(--hrhs-hdr-accent, #0BFF84);
    color: #032333;
    font-size: .66rem;
    font-weight: 800;
    border-radius: 99px;
    padding: 1px 6px;
    min-width: 17px;
    text-align: center;
}

/* ─── Right side ────────────────────────────────────────────── */
.hrhs-hdr__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}
.hrhs-hdr__cta {
    background: var(--hrhs-hdr-accent, #0BFF84);
    color: #032333;
    font-size: .875rem;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 99px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.hrhs-hdr__cta:hover {
    text-decoration: none;
    color: #032333;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11,255,132,.35);
}
.hrhs-hdr__signin {
    font-size: .875rem;
    font-weight: 600;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .85;
    text-decoration: none;
    white-space: nowrap;
}
.hrhs-hdr__signin:hover { opacity: 1; color: var(--hrhs-hdr-accent, #0BFF84); text-decoration: none; }

/* ─── Account switcher ───────────────────────────────────────
   Its own color and its own slot. A member holding both account
   types needs to see which one they are acting as without opening
   anything. */
.hrhs-hdr__switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--hrhs-hdr-accent, #0BFF84);
    text-decoration: none;
    padding: 8px 15px;
    border: 1.5px solid rgba(11,255,132,.35);
    border-radius: 999px;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.hrhs-hdr__switch:hover {
    background: rgba(11,255,132,.12);
    border-color: var(--hrhs-hdr-accent, #0BFF84);
    color: var(--hrhs-hdr-accent, #0BFF84);
    text-decoration: none;
}
.hrhs-hdr__switch svg { flex-shrink: 0; }

/* ─── Avatar trigger ─────────────────────────────────────────── */
.hrhs-hdr__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 3px 6px 3px 3px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--hrhs-hdr-text, #fff);
    transition: background .15s ease;
}
.hrhs-hdr__avatar:hover,
.hrhs-hdr__avatar[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.hrhs-hdr__avatar img {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25); display: block;
}
.hrhs-hdr__avatar-initials {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hrhs-hdr-accent, #0BFF84); color: #032333;
    font-weight: 800; font-size: .95rem;
}
/* Unread indicator, so the avatar carries a reason to open it. */
.hrhs-hdr__avatar-dot {
    position: absolute; top: 2px; right: 18px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ff4d4f; border: 2px solid var(--hrhs-hdr-bg, #032333);
}
.hrhs-hdr__avatar svg { transition: transform .2s ease; }
.hrhs-hdr__avatar[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ─── Account dropdown ──────────────────────────────────────── */
.hrhs-hdr__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 268px;
    max-width: min(268px, calc(100vw - 24px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 52px rgba(3,35,51,.28);
    padding: 0;
    z-index: 600;
    overflow: hidden;
}
.hrhs-dd__head { padding: 15px 17px 13px; border-bottom: 1px solid #EEF2F6; }
.hrhs-dd__name { font-size: .95rem; font-weight: 700; color: #032333; line-height: 1.3; }
.hrhs-dd__mode {
    font-size: .76rem; color: #6B7280; margin-top: 3px;
    display: flex; align-items: center; gap: 7px;
}
.hrhs-dd__badge {
    font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: #F1F5F9; color: #6B7280; border-radius: 999px; padding: 2px 8px;
}
.hrhs-dd__badge.is-pro { background: #E6FFF4; color: #0d6e3a; text-transform: none; letter-spacing: 0; }

.hrhs-dd__group { padding: 6px; border-bottom: 1px solid #EEF2F6; }
.hrhs-dd__group:last-child { border-bottom: 0; }
.hrhs-dd__group--feature { background: #FAFBFD; }
.hrhs-dd__label {
    display: flex; align-items: center; gap: 8px;
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #94A3B8; padding: 7px 11px 5px;
}
.hrhs-hdr__dropdown a {
    display: block;
    font-size: .875rem;
    color: #374151;
    padding: 9px 11px;
    border-radius: 8px;
    text-decoration: none;
}
.hrhs-hdr__dropdown a:hover { background: #F4F6F9; color: #032333; text-decoration: none; }
.hrhs-dd__row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.hrhs-dd__count {
    background: #ff4d4f; color: #fff; font-size: .68rem; font-weight: 800;
    border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.hrhs-dd__switch { color: #0d6e3a !important; font-weight: 700; }
.hrhs-dd__switch:hover { background: #E6FFF4 !important; }

/* Single upgrade row — one destination, one link. */
.hrhs-dd__upgrade {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 11px !important;
}
.hrhs-dd__upgrade strong { display: block; color: #032333; font-size: .875rem; }
.hrhs-dd__upgrade-sub { display: block; font-size: .76rem; color: #6B7280; margin-top: 2px; }
.hrhs-dd__upgrade:hover { background: #E6FFF4 !important; }

/* ─── Mega menu ─────────────────────────────────────────────── */
.hrhs-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--hrhs-hdr-bg, #032333);
    border-top: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 22px 50px rgba(3,35,51,.4);
    animation: hrhsMegaIn .16s ease-out;
}
@keyframes hrhsMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hrhs-mega { animation: none; } }

.hrhs-mega__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 34px 28px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1.15fr;
    gap: 0;
}
.hrhs-mega__panel { padding: 0 34px; border-left: 1px solid rgba(255,255,255,.1); }
.hrhs-mega__panel:first-child { padding-left: 0; border-left: 0; }
.hrhs-mega__panel--cta {
    background: rgba(255,255,255,.055);
    border-radius: 14px;
    padding: 26px 28px;
    margin-left: 24px;
    border-left: 0;
}
.hrhs-mega__eyebrow {
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--hrhs-hdr-accent, #0BFF84);
    margin-bottom: 12px;
}
.hrhs-mega__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.hrhs-mega__title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hrhs-hdr-text, #fff);
    margin: 0;
}
.hrhs-mega__panel--cta .hrhs-mega__title { font-size: 1.08rem; line-height: 1.35; }
.hrhs-mega__viewall {
    font-size: .8rem;
    font-weight: 600;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .8;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.hrhs-mega__viewall:hover { opacity: 1; color: var(--hrhs-hdr-accent, #0BFF84); }

.hrhs-mega__links { list-style: none; margin: 0; padding: 0; }
.hrhs-mega__panel--columns .hrhs-mega__links { columns: 2; column-gap: 34px; }
.hrhs-mega__links li { break-inside: avoid; }
.hrhs-mega__links a {
    display: block;
    font-size: .89rem;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .82;
    padding: 6px 0;
    text-decoration: none;
    transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
.hrhs-mega__links a:hover {
    opacity: 1;
    color: var(--hrhs-hdr-accent, #0BFF84);
    text-decoration: none;
    transform: translateX(3px);
}
.hrhs-mega__text {
    font-size: .86rem;
    line-height: 1.65;
    color: var(--hrhs-hdr-text, #fff);
    opacity: .78;
    margin: 0 0 20px;
}
.hrhs-mega__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--hrhs-hdr-accent, #0BFF84);
    text-decoration: none;
}
.hrhs-mega__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Burger ────────────────────────────────────────────────── */
.hrhs-hdr__burger {
    display: none;
    margin-left: auto;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
}
.hrhs-hdr__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hrhs-hdr-text, #fff);
    border-radius: 2px;
}
.hrhs-hdr__burger span + span { margin-top: 5px; }

/* ─── Footer ────────────────────────────────────────────────── */
.hrhs-ftr {
    background: var(--hrhs-hdr-bg, #032333);
    color: var(--hrhs-hdr-text, #fff);
    font-family: 'Inter', -apple-system, sans-serif;
    padding: 54px 0 0;
}
.hrhs-ftr__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px 44px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.hrhs-ftr__logo {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--hrhs-hdr-accent, #0BFF84);
    margin-bottom: 12px;
}
.hrhs-ftr__blurb { font-size: .86rem; line-height: 1.7; opacity: .72; max-width: 34ch; margin: 0; }
/* Legal note. Quieter and narrower than the blurb above it: it has to be
   present and findable, not competing with the link columns for attention. */
.hrhs-ftr__disclaimer {
    font-size: .74rem;
    line-height: 1.65;
    opacity: .48;
    max-width: 38ch;
    margin: 14px 0 0;
}
.hrhs-ftr__col h4 {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .58;
    margin: 0 0 14px;
}
.hrhs-ftr__col ul { list-style: none; margin: 0; padding: 0; }
.hrhs-ftr__col li { margin-bottom: 8px; }
.hrhs-ftr__col a { font-size: .86rem; color: var(--hrhs-hdr-text, #fff); opacity: .78; text-decoration: none; }
.hrhs-ftr__col a:hover { opacity: 1; color: var(--hrhs-hdr-accent, #0BFF84); text-decoration: none; }
.hrhs-ftr__base {
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 20px 28px;
    text-align: center;
    font-size: .78rem;
    opacity: .58;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 1120px) {
    .hrhs-mega__inner { grid-template-columns: 1.6fr 1fr 1.1fr; padding: 28px 22px 32px; }
    .hrhs-mega__panel { padding: 0 22px; }
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWER

   The old mobile menu unfolded the desktop header in place: the nav
   became a column, and opening "Hire a Pro" expanded a 22-item mega
   panel underneath it, pushing everything else off screen. On a phone
   that is not a menu, it is a page.

   This is a two-level drawer instead. Level one lists the sections,
   each a full-width row with a chevron; tapping one slides that
   section in from the right as its own screen with a Back row. Only
   one level is visible at a time, so the list is always short enough
   to scan and the label at the top always says where you are.

   Rows are 56px with 1.05rem labels — Apple and Google both put the
   minimum comfortable touch target at 44px, and a directory is used
   one-handed, often outdoors, often by someone over fifty.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .hrhs-hdr__burger { display: block; }
    .hrhs-hdr__inner { height: 64px; padding: 0 18px; gap: 14px; }

    .hrhs-hdr__nav,
    .hrhs-hdr__right { display: none; }

    /* The drawer is a fixed sheet, not part of the header's flow — so
       the page behind it does not reflow when it opens, and the panels
       can slide without the header growing. */
    .hrhs-hdr.is-open .hrhs-drawer { display: block; }

    .hrhs-drawer {
        display: none;
        position: fixed;
        top: 64px; left: 0; right: 0; bottom: 0;
        background: var(--hrhs-hdr-bg, #032333);
        z-index: 9998;
        overflow: hidden;
    }

    /* Each level is a full sheet stacked in the same space. Level one
       sits at 0; a level pushed open slides in from the right. */
    .hrhs-drawer__level {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--hrhs-hdr-bg, #032333);
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        visibility: hidden;
    }
    .hrhs-drawer__level--root { transform: translateX(0); visibility: visible; }
    /* Root slides left rather than vanishing, so the two levels read as
       one surface moving instead of two screens swapping. */
    .hrhs-drawer.is-deep .hrhs-drawer__level--root { transform: translateX(-28%); visibility: visible; }
    .hrhs-drawer__level.is-active { transform: translateX(0); visibility: visible; }

    .hrhs-drawer__inner { padding: 8px 0 40px; }

    /* ─── Rows ─────────────────────────────────────────────────── */
    .hrhs-drawer__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        padding: 0 20px;
        background: none;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        color: #fff;
        font-family: inherit;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -.01em;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .hrhs-drawer__row:active { background: rgba(255,255,255,.06); }
    .hrhs-drawer__row svg { flex-shrink: 0; opacity: .55; }

    /* Secondary rows: the actual destinations, one weight down from the
       section headings that lead to them. */
    .hrhs-drawer__row--sub { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.88); }

    .hrhs-drawer__back {
        display: flex; align-items: center; gap: 10px;
        width: 100%; min-height: 52px; padding: 0 20px;
        background: rgba(255,255,255,.04);
        border: 0; border-bottom: 1px solid rgba(255,255,255,.1);
        color: var(--hrhs-hdr-accent, #0BFF84);
        font-family: inherit; font-size: .82rem; font-weight: 800;
        letter-spacing: .1em; text-transform: uppercase;
        cursor: pointer; text-align: left;
    }
    .hrhs-drawer__heading {
        padding: 20px 20px 10px;
        font-size: 1.35rem; font-weight: 800; color: #fff;
        letter-spacing: -.02em;
    }
    .hrhs-drawer__eyebrow {
        padding: 18px 20px 6px;
        font-size: .72rem; font-weight: 800;
        letter-spacing: .14em; text-transform: uppercase;
        color: var(--hrhs-hdr-accent, #0BFF84);
    }
    .hrhs-drawer__viewall {
        display: block; padding: 16px 20px;
        color: var(--hrhs-hdr-accent, #0BFF84);
        font-size: .95rem; font-weight: 700; text-decoration: none;
    }

    /* ─── Actions, pinned to the bottom of level one ───────────── */
    .hrhs-drawer__actions {
        padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
        display: flex; flex-direction: column; gap: 12px;
        border-top: 1px solid rgba(255,255,255,.1);
        margin-top: 10px;
    }
    .hrhs-drawer__actions .hrhs-hdr__cta,
    .hrhs-drawer__actions .hrhs-hdr__signin,
    .hrhs-drawer__actions .hrhs-hdr__switch {
        display: flex; align-items: center; justify-content: center;
        min-height: 52px; width: 100%;
        font-size: 1.02rem; text-align: center;
    }
    .hrhs-drawer__meta {
        display: flex; align-items: center; gap: 12px;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    /* Nothing behind the drawer should scroll while it is open. */
    body.hrhs-drawer-open { overflow: hidden; }

    .hrhs-mega { display: none; }
    .hrhs-ftr__inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 560px) {
    .hrhs-mega__panel--columns .hrhs-mega__links { columns: 1; }
    .hrhs-ftr__inner { grid-template-columns: 1fr; }
}

/* ─── Keyboard focus ─────────────────────────────────────────────
   Every interactive element in the header must show where keyboard
   focus is. :focus-visible keeps the ring off mouse clicks. */
.hrhs-hdr a:focus-visible,
.hrhs-hdr button:focus-visible,
.hrhs-mega a:focus-visible,
.hrhs-ftr a:focus-visible {
    outline: 2px solid var(--hrhs-hdr-accent, #0BFF84);
    outline-offset: 3px;
    border-radius: 4px;
}