/* ============================================================
   newdgrie/default — _04_navigation.css

   Primary nav (desktop + mobile drawer), hover dropdown,
   featured-image cells.
   ============================================================ */


/* ── NAV WRAPPER ──────────────────────────────────────────── */

.dg-nav {
    grid-column: 2;
    display: flex;
    justify-content: center;
    transition: opacity var(--dg-duration-base) var(--dg-ease);
}

/* When sticky logo appears in middle column, push nav out of column 2 */
body.is-scrolled .dg-nav {
    grid-column: auto;
    justify-content: flex-end;
    margin-right: 32px;
}

/* Hide desktop nav on mobile/touch — show drawer instead.
   Pair max-width with pointer:coarse to catch Chrome iOS that
   reports vp ~1259 even on phones. Without pointer detection,
   on those devices the desktop nav would show alongside the
   hamburger button (visual duplication). */
@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {
    .dg-nav {
        display: none;          /* mobile uses drawer */
    }
}


/* ── NAV LIST ─────────────────────────────────────────────── */

.dg-nav__list {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    height: 56px;
}

body.is-scrolled .dg-nav__list { gap: 28px; }


/* ── NAV ITEM + LINK ──────────────────────────────────────── */

.dg-nav__item {
    position: relative;
}

.dg-nav__link {
    display: inline-block;
    padding: 8px 0;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    font-weight: var(--dg-weight-regular);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    text-decoration: none;
    /*transition: color var(--dg-duration-fast) var(--dg-ease);*/
    border-bottom: 1px solid transparent;
}
.dg-nav__link:hover,
.dg-nav__link[aria-expanded="true"] {
    color: var(--dg-gold);
    border-bottom-color: var(--dg-gold);
    text-decoration: none;
}

body.is-scrolled .dg-nav__link        { color: var(--dg-paper); letter-spacing: var(--dg-track-wider); }
body.is-scrolled .dg-nav__link:hover  { color: var(--dg-gold-soft); border-bottom-color: var(--dg-gold-soft); }


/* ── DROPDOWN ─────────────────────────────────────────────── */

.dg-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    min-width: 640px;
    background: var(--dg-paper);
    border: 1px solid var(--dg-line);
    box-shadow: var(--dg-shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dg-duration-fast) var(--dg-ease),
                visibility var(--dg-duration-fast) var(--dg-ease),
                transform var(--dg-duration-fast) var(--dg-ease);
    z-index: var(--dg-z-popover);
}

.dg-nav__item:hover .dg-nav__dropdown,
.dg-nav__item:focus-within .dg-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dg-nav__dropdown-inner {
    display: grid;
    grid-template-columns: 200px 200px 1fr;
    gap: 48px;
    padding: 32px 40px;
}

.dg-nav__dropdown-eyebrow {
    font-size: 10px;
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    color: var(--dg-faint);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.dg-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dg-nav__sublist a {
    font-size: 13px;
    color: var(--dg-ink);
    text-decoration: none;
    transition: color var(--dg-duration-fast) var(--dg-ease);
    display: inline-block;
    padding: 2px 0;
}
.dg-nav__sublist a:hover { color: var(--dg-gold); }


/* ── FEATURED IMAGE CELL ──────────────────────────────────── */

.dg-nav__featured {
    display: flex;
    align-items: flex-end;
    background-color: var(--dg-stone);
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    max-height: 180px;
    padding: 14px;
    color: var(--dg-paper);
    text-decoration: none;
    transition: transform var(--dg-duration-base) var(--dg-ease);
    overflow: hidden;
    position: relative;
}
.dg-nav__featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.4));
    transition: opacity var(--dg-duration-base) var(--dg-ease);
}
.dg-nav__featured:hover { color: var(--dg-paper); }

.dg-nav__featured-label {
    position: relative;
    font-family: var(--dg-font-serif);
    font-size: 14px;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dg-nav__featured-arrow {
    transition: transform var(--dg-duration-fast) var(--dg-ease);
}
.dg-nav__featured:hover .dg-nav__featured-arrow {
    transform: translateX(4px);
}


/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER
   ════════════════════════════════════════════════════════════ */

.dg-drawer {
    position: fixed;
    top: 0; bottom: 0; right: 0;
    width: 100vw;
    max-width: 100vw;
    background: var(--dg-ink);
    color: var(--dg-paper);
    padding: 0;
    z-index: var(--dg-z-modal);
    transform: translateX(100%);
    transition: transform var(--dg-duration-base) var(--dg-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.dg-drawer.is-open { transform: translateX(0); }


/* ── Drawer head ── */

.dg-drawer__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dg-drawer__close {
    background: transparent;
    border: 0;
    color: var(--dg-paper);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: -8px;
}

.dg-drawer__brand {
    font-family: var(--dg-font-serif);
    font-size: 16px;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    color: var(--dg-paper);
    text-decoration: none;
    text-align: center;
}

.dg-drawer__spacer { width: 24px; }


/* ── Drawer nav ── */

.dg-drawer__nav .dg-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 16px 0;
}
.dg-drawer__nav .dg-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dg-drawer__nav .dg-nav__link {
    color: var(--dg-paper);
    padding: 18px 24px;
    font-size: 14px;
    letter-spacing: var(--dg-track-wider);
    border: 0;
    width: 100%;
    display: block;
}
.dg-drawer__nav .dg-nav__link:hover {
    color: var(--dg-gold-soft);
    border: 0;
    background: rgba(255, 255, 255, 0.04);
}

/* Hide dropdowns inside drawer (we use accordion-style if needed later) */
.dg-drawer__nav .dg-nav__dropdown { display: none; }


/* ── Drawer utility footer ── */

.dg-drawer__util {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 11px;
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
}
.dg-drawer__util a {
    color: var(--dg-paper);
    text-decoration: none;
    opacity: 0.85;
}
.dg-drawer__util a:hover { color: var(--dg-gold-soft); opacity: 1; }
.dg-drawer__util .dg-langswitch__item        { color: rgba(255, 255, 255, 0.6); }
.dg-drawer__util .dg-langswitch__item.is-current { color: var(--dg-paper); }
.dg-drawer__util .dg-langswitch__item + .dg-langswitch__item::before { color: rgba(255, 255, 255, 0.2); }


/* ── Drawer overlay ── */

.dg-drawer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--dg-z-modal) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dg-duration-base) var(--dg-ease),
                visibility var(--dg-duration-base) var(--dg-ease);
}
.dg-drawer__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Lock body scroll when drawer open */
body.dg-drawer-open {
    overflow: hidden;
}



/* Desktop: drawer is a side panel, not fullscreen.
   Use (pointer: fine) AND min-width to ensure touch devices
   that misreport viewport (Chrome iOS vp 1259) stay fullscreen. */
@media (min-width: 1025px) and (pointer: fine) {
    .dg-drawer {
        width: min(360px, 86vw);
        max-width: none;
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER — FULL SCREEN ON PHONE

   On phones (≤480px), the drawer covers the whole viewport
   and uses much larger type so the menu reads like a deliberate
   transition rather than a side panel. Same idea as the
   Suitsupply / Bottega / Hermès mobile experience.
   ════════════════════════════════════════════════════════════ */

/* ── DRAWER FULLSCREEN STYLES (base — applies always) ──
   Centered layout, doubled font sizes — feels like a
   deliberate transition, not a side panel. */

.dg-drawer__head {
    padding: 22px 24px;
    min-height: 92px;
    align-items: center;
}

.dg-drawer__close {
    font-size: 36px;
    padding: 12px 16px;
    margin-left: -16px;
    line-height: 1;
    min-width: 60px;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dg-drawer__brand {
    font-size: 36px;
    letter-spacing: 0.18em;
    padding-left: 0.18em;
}

.dg-drawer__spacer { width: 60px; }

/* NAV: centered, large, generous spacing */
.dg-drawer__nav .dg-nav__list {
    padding: 56px 0 32px;
    text-align: center;
    align-items: center;
}
.dg-drawer__nav .dg-nav__item {
    width: 100%;
    text-align: center;
    border-bottom: 0;     /* drop the dividers — center layout looks cleaner without */
}
.dg-drawer__nav .dg-nav__link {
    padding: 18px 28px;
    font-size: 18px;       /* below logo (36px) — proper hierarchy */
    letter-spacing: 0.18em;
    font-weight: var(--dg-weight-regular);
    text-align: center;
    display: block;
    width: 100%;
}

/* UTILITY FOOTER: centered, smaller than nav */
.dg-drawer__util {
    padding: 36px 28px 44px;
    gap: 22px;
    font-size: 16px;       /* below nav links (24px) — clear hierarchy */
    letter-spacing: 0.18em;
    text-align: center;
    align-items: center;
}

.dg-drawer__util a {
    text-align: center;
    width: 100%;
    display: block;
    padding: 8px 0;
}

.dg-drawer__util .dg-langswitch {
    gap: 20px;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    display: inline-flex;
    width: auto;
    margin: 0 auto;
}
.dg-drawer__util .dg-langswitch__item {
    font-size: 16px;
    white-space: nowrap;
}
.dg-drawer__util .dg-langswitch__item a {
    width: auto;
    display: inline;
    padding: 0;
}
.dg-drawer__util .dg-langswitch__item + .dg-langswitch__item::before {
    margin-right: 20px;
    font-size: 16px;
}

/* Higher specificity to win against _05_footer.css general
   .dg-footer__social rules. We scope by .dg-drawer to make
   sure these only apply inside the drawer. */
/* ── DRAWER SOCIAL ICONS ────────────────────────────────────
   The drawer markup uses .dg-drawer__social (not .dg-footer__social
   which is for the page footer). Style social circles big enough
   to feel substantial in a fullscreen mobile menu — they're a
   visual anchor at the bottom of the drawer. */

.dg-drawer__social {
    display: flex;
    gap: 22px;
    margin-top: 28px;
    justify-content: center;
    align-items: center;
}

.dg-drawer__social a {
    width: 60px;
    height: 60px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--dg-duration-fast) var(--dg-ease),
                border-color var(--dg-duration-fast) var(--dg-ease),
                background var(--dg-duration-fast) var(--dg-ease);
}

.dg-drawer__social a:hover {
    color: var(--dg-ink);
    background: var(--dg-paper);
    border-color: var(--dg-paper);
}

/* SVG inside drawer social — override hardcoded width/height
   attributes in the markup (16x16) which would otherwise win
   over CSS at attribute-presentation level. */
.dg-drawer__social a svg {
    width: 26px;
    height: 26px;
}


/* On desktop (≥1025px AND mouse pointer), revert drawer to
   compact side panel sizing. The (pointer: fine) check ensures
   Chrome iOS vp 1259 stays in mobile XXL mode. */
@media (min-width: 1025px) and (pointer: fine) {
    .dg-drawer__head {
        padding: 16px 20px;
        min-height: auto;
    }
    .dg-drawer__close {
        font-size: 24px;
        padding: 4px 8px;
        margin-left: -8px;
        min-width: auto;
        min-height: auto;
    }
    .dg-drawer__brand {
        font-size: 16px;
        letter-spacing: 0.3em;
        padding-left: 0.3em;
    }
    .dg-drawer__spacer { width: 24px; }

    .dg-drawer__nav .dg-nav__list {
        padding: 16px 0;
        text-align: left;
        align-items: stretch;
    }
    .dg-drawer__nav .dg-nav__item {
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .dg-drawer__nav .dg-nav__link {
        padding: 18px 24px;
        font-size: 14px;
        letter-spacing: var(--dg-track-wider);
        text-align: left;
    }

    .dg-drawer__util {
        padding: 24px;
        gap: 16px;
        font-size: 11px;
        letter-spacing: var(--dg-track-wider);
        text-align: left;
        align-items: stretch;
    }
    .dg-drawer__util a {
        text-align: left;
        padding: 0;
    }
    .dg-drawer__util .dg-langswitch {
        justify-content: flex-start;
        gap: 10px;
    }
    .dg-drawer__util .dg-langswitch__item {
        font-size: 11px;
    }
    .dg-drawer__util .dg-langswitch__item + .dg-langswitch__item::before {
        margin-right: 10px;
        font-size: 11px;
    }
    .dg-drawer__social {
        justify-content: flex-start;
        gap: 12px;
        margin-top: 4px;
    }
    .dg-drawer__social a {
        width: 36px;
        height: 36px;
        border-width: 1px;
    }
    .dg-drawer__social a svg {
        width: 18px;
        height: 18px;
    }
}

/* ─────────────────────────────────────────────────────────
   DG-P12 — HELP dropdown in primary nav (DESKTOP)
   Reuses .dg-acct-dd from header (click-open + same JS).
   When .dg-acct-dd is placed INSIDE .dg-nav (HELP menu in
   primary navigation), the trigger should look like a nav-
   link rather than a utility link. This block scopes the
   typography to that context only — Account dropdown in
   the utility bar is untouched.
   ───────────────────────────────────────────────────────── */

.dg-nav .dg-acct-dd {
    display: inline-flex;
    align-items: center;
}

.dg-nav .dg-acct-dd__trigger {
    display: inline-block;
    padding: 8px 0;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    font-weight: var(--dg-weight-regular);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    text-decoration: none;
    /* transition: color var(--dg-duration-fast) var(--dg-ease); */
    border-bottom: 1px solid transparent;
}

.dg-nav .dg-acct-dd__chev {
    font-size: 10px;
    margin-left: 6px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.dg-nav .dg-acct-dd__trigger[aria-expanded="true"] .dg-acct-dd__chev {
    transform: rotate(180deg);
}

.dg-nav .dg-acct-dd__menu {
    left: 0;
    right: auto;
    margin-top: 8px;
}


/* ─────────────────────────────────────────────────────────
   DG-P12 — HELP in DRAWER (MOBILE) — always-expanded section
   ────────────────────────────────────────────────────────
   The drawer renders the SAME topmenu.phtml as desktop, so
   the HELP markup also appears inside .dg-drawer__nav.

   IMPORTANT: The default mobile media query in _03_header.css
   sets `.dg-acct-dd { display: none }` on screens ≤ 1023px
   (because the utility-bar Account dropdown is irrelevant on
   mobile — drawer takes over). We need to UN-hide HELP that
   lives inside the drawer, while keeping that rule's effect
   on any .dg-acct-dd outside the drawer (i.e. the Account one
   in the utility bar).

   Behavior on mobile:
     - HELP label is rendered as a section header (not a button)
     - chevron is hidden
     - sub-items (How to Order / FAQ) are always visible inline
     - click toggles do nothing (pointer-events: none on trigger)
   ───────────────────────────────────────────────────────── */

/* 1. Un-hide HELP inside drawer (defeats the mobile display:none) */
.dg-drawer__nav .dg-acct-dd {
    display: block !important;
    width: 100%;
    /* Inherit divider line from .dg-nav__item parent */
}

/* 2. Trigger styled as a static section label */
.dg-drawer__nav .dg-acct-dd__trigger {
    display: block;
    width: 100%;
    padding: 18px 4px 8px;
    background: transparent;
    border: 0;
    text-align: center;          /* match the centered SUITS/PANTS rhythm */
    cursor: default;
    pointer-events: none;        /* not clickable — purely decorative */
    color: var(--dg-paper, #fff);
    font-family: var(--dg-font-serif, Georgia, serif);
    font-size: 22px;              /* smaller than main nav (28px) — reads as label */
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.55;                /* dimmer — clearly a label, not a link */
}

/* 3. Hide chevron on mobile (no toggle behavior) */
.dg-drawer__nav .dg-acct-dd__chev {
    display: none !important;
}

/* 4. Menu — always visible inline, no card, no positioning */
.dg-drawer__nav .dg-acct-dd__menu {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    /* Override any default text-align from .dg-acct-dd__menu */
    text-align: center !important;
}

/* 5. Sub-items — clean centered list, smaller than main nav */
.dg-drawer__nav .dg-acct-dd__item {
    display: block;
    padding: 12px 4px;
    color: var(--dg-paper, #fff);
    background: transparent;     /* override default menu-item bg */
    font-family: var(--dg-font-serif, Georgia, serif);
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    opacity: 0.85;
    border: 0;                   /* no per-item borders */
    transition: opacity 0.15s, color 0.15s;
}

.dg-drawer__nav .dg-acct-dd__item:hover,
.dg-drawer__nav .dg-acct-dd__item:focus {
    opacity: 1;
    color: var(--dg-gold, #b08d57);
    background: transparent;
}

/* 6. The wrapping <li> already has a border-bottom from
   .dg-drawer__nav .dg-nav__item rules. Keep that, but remove
   the divider visual between HELP label and its sub-items
   (they're one logical section). */
.dg-drawer__nav .dg-nav__item:has(> .dg-acct-dd) {
    padding-bottom: 4px;
}