/* Dig Virtual — index.html left rail + slide-out drawer.
   Loaded ONLY by index.html, applies at every viewport size on this page
   (mobile included), replacing the shared top header entirely here.

   The drawer IS the header's new home: #site-header (where
   js/site-chrome.js fetches partials/header.html) now lives inside
   .dv-drawer-top in index.html itself, rather than at the top of <body>.
   That fetch still has to happen there — js/site-chrome.js's
   wireHeaderAuth()/wireNotifications()/etc. only run inside
   injectPartial's success path, which requires the #site-header mount to
   exist — but once injected, the block below strips the resulting
   <header> down to just the guest login link (#dv-auth-guest), which then
   behaves as ordinary drawer content needing no JS to move it around.
   The one piece that DOES still get DOM-moved (by index-sidebar.js) is the
   logged-in avatar/notifications block, onto Panel 1 — CSS alone can't put
   one element in two different places on the page. */

:root {
    /* Must match .dv-drawer's actual rendered width exactly — this same
       variable also drives #dvContentShift's translateX below. A plain
       "75vw" here (with the cap applied only via .dv-drawer's own
       max-width) let the two diverge on any viewport wider than ~725px:
       content would shift by the full uncapped 75vw while the drawer
       stopped growing at 34rem, leaving a blank gap between the end of
       the drawer and the start of the shifted content. min() keeps both
       sides of that relationship identical at every viewport width. */
    --dv-drawer-w: min(75vw, 34rem);
}

/* Wrapper elements between #site-header's original position and the
   actual login link are flattened with display:contents (they vanish
   from the box tree but their children still render, unaffected by the
   wrappers' own Tailwind classes) rather than hidden outright — hiding an
   ancestor would take #dv-auth-guest down with it regardless of its own
   display value. */
.dv-drawer-top header,
.dv-drawer-top header > div,
.dv-drawer-top header #dv-header-row,
.dv-drawer-top header nav {
    all: unset;
    display: contents;
}

/* Everything else the header carries (logo, category explore menu,
   search, the other nav links, mobile toggle buttons, the mobile menu,
   and the avatar block awaiting relocation) is explicit-listed and
   hidden — deliberately not a blanket `header *` rule, which would hide
   #dv-auth-guest right along with its own now-`contents` ancestors. */
.dv-drawer-top header a[href="/"],
.dv-drawer-top header #dv-explore-btn,
.dv-drawer-top header .dv-search-form,
.dv-drawer-top header a[href="/pricing-details.html"],
.dv-drawer-top header a[href="/upsert-resume.html"],
.dv-drawer-top header a[href="/job-search.html"],
.dv-drawer-top header a[href="/browse-listings.html?category=2oa5plxn1dj02zm"],
.dv-drawer-top header #dv-auth-user,
.dv-drawer-top header #dv-mobile-search-toggle,
.dv-drawer-top header #dv-mobile-menu-toggle,
.dv-drawer-top header #dv-mobile-search,
.dv-drawer-top header #dv-mobile-menu {
    display: none !important;
}

/* #dv-auth-guest itself: js/site-chrome.js's wireHeaderAuth() toggles a
   plain Tailwind `.hidden` class on it once it knows the auth state
   (added when logged in, since the avatar takes over at that point) — the
   :not(.hidden) guard here lets that toggle keep working instead of a
   flat `display` override permanently fighting it. */
.dv-drawer-top header #dv-auth-guest:not(.hidden) {
    all: unset;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 9999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dv-ink);
    background: var(--dv-lime);
    transition: background 0.2s ease, color 0.2s ease;
}
.dv-drawer-top header #dv-auth-guest:not(.hidden):hover {
    background: var(--dv-coral);
    color: #fff;
}

/* ============================================================
   Left rail
   ============================================================ */
.dv-rail {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--dv-rail-w);
    z-index: 70;
    background: #fff;
    border-right: 1px solid rgba(21, 21, 21, 0.1);
}
.dv-rail-logo {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-lr;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--dv-ink);
    text-decoration: none;
    white-space: nowrap;
}
.dv-rail-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dv-ink);
}
.dv-rail-bars {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dv-rail-bars span:not(.dv-rail-arrow) {
    width: 2px;
    height: 18px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
/* The "►" next to the hamburger bars — a small hint that the toggle
   opens a drawer sliding in from this edge. Sized/centred to sit on
   the same optical baseline as the bars beside it, in every view
   (desktop browser, mobile browser, installed PWA) since it's plain
   flex layout with no viewport-specific rules needed. */
/* Drawn as a solid box clipped to a triangle, not the "►" glyph (a
   font's triangle character has a lot of empty padding baked into its
   own em-box, so it never matches the bars' visual weight) and not a
   border-drawn triangle either — that technique builds the shape out of
   overlapping border corners, and Chromium's border-corner
   anti-aliasing/sub-pixel snapping on Android renders those edges
   measurably smaller than the same CSS produces in WebKit on iOS,
   which is exactly the iPhone-fine/Android-off mismatch this replaces.
   clip-path instead fills an ordinary background:currentColor box —
   the same fill mechanism the three bars themselves use — then clips
   it, so the arrow rasterizes through the identical code path as the
   bars on every engine (Chromium/Android, WebKit/iOS, desktop) rather
   than a separate, inconsistently-rendered border algorithm. */
.dv-rail-arrow {
    width: 8px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.dv-rail-close {
    display: none;
    font-size: 22px;
}

/* ============================================================
   Drawer
   ============================================================ */
.dv-drawer {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--dv-drawer-w);
    background: var(--dv-ink);
    color: #fff;
    z-index: 60;
    padding: 2rem 2rem 2rem calc(var(--dv-rail-w) + 2rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
}
.dv-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.dv-drawer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}
.dv-drawer-top a {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}
.dv-drawer-top a:hover {
    color: var(--dv-lime);
}

.dv-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dv-drawer-nav-link {
    all: unset;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: #fff;
    cursor: pointer;
    line-height: 1.2;
    transition: color 0.2s ease;
}
.dv-drawer-nav-link:hover,
.dv-drawer-nav-link:focus-visible {
    color: var(--dv-lime);
}

.dv-drawer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}
.dv-drawer-social {
    display: flex;
    gap: 0.6rem;
}
.dv-drawer-social a {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: background 0.2s ease;
}
.dv-drawer-social a:hover {
    background: var(--dv-coral);
}

.dv-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
    display: none;
}
.dv-drawer-backdrop.is-open {
    display: block;
}

/* ============================================================
   Content shift (the drawer pushes everything else right, leaving
   ~25% of Panel 1 peeking on the right edge — per spec, 100% -
   --dv-drawer-w)
   ============================================================ */
#dvContentShift {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.dv-drawer-open #dvContentShift {
    transform: translateX(var(--dv-drawer-w));
}

/* Every top-level page's main content carries a permanent margin-left
   (var(--dv-rail-w)) to clear the fixed left rail while the drawer is
   closed. Once the drawer opens, #dvContentShift above is already
   translated right by the drawer's full width — so that margin-left,
   left in place, adds an extra rail-width of dead space between the
   drawer's right edge and where the content actually starts (the white
   gap). Cancel it only while the drawer is open; it's still needed the
   rest of the time. Higher specificity than each page's own rule (and
   its own small-screen media-query restatement of the same value), so
   this wins regardless of source order across every stylesheet. */
body.dv-drawer-open #dvHOuter,
body.dv-drawer-open .dv-about-main,
body.dv-drawer-open .dv-pricing-main,
body.dv-drawer-open .dv-contact-main,
body.dv-drawer-open .dv-login-main,
body.dv-drawer-open .dv-upgrade-main {
    margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dv-drawer,
    #dvContentShift {
        transition: none;
    }
}

/* ============================================================
   Rail-open state (toggle icon swap)
   ============================================================ */
body.dv-drawer-open .dv-rail-bars {
    display: none;
}
body.dv-drawer-open .dv-rail-close {
    display: block;
}
body.dv-drawer-open .dv-rail {
    background: var(--dv-ink);
    border-right-color: rgba(255, 255, 255, 0.1);
}
body.dv-drawer-open .dv-rail-logo,
body.dv-drawer-open .dv-rail-toggle {
    color: #fff;
}

/* ============================================================
   Panel 1 avatar slot (moved out of the old header)
   ============================================================ */
.dv-panel1-avatar-slot {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .dv-panel1-avatar-slot {
        top: 2rem;
        right: 2rem;
    }
}