/* ── Drawer backdrop & wrapper ────────────────────────────────────────────── */
.cs-drawer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
}
.cs-drawer[aria-hidden="false"] { pointer-events: auto; }

.cs-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .25s ease;
    cursor: pointer;
}
.cs-drawer[aria-hidden="false"] .cs-drawer-overlay { opacity: 1; }

/* ── Slide-in panel ───────────────────────────────────────────────────────── */
.cs-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(360px, 92vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,.2,.2,1);
    padding: 4.5rem 2rem 2rem;
    overflow-y: auto;
    font-family: var(--hk-font-family, 'Roboto', sans-serif);
    color: var(--hk-ink, #141414);
}
.cs-drawer[aria-hidden="false"] .cs-drawer-panel { transform: translateX(0); }

/* ── Close button ─────────────────────────────────────────────────────────── */
.cs-drawer-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--hk-ink, #141414);
}
.cs-drawer-close:hover { color: var(--hk-accent, #b8182f); }

/* ── Nav wrapper ──────────────────────────────────────────────────────────── */
.cs-drawer-nav {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-bottom: 1.5rem;
}

/* ── Menu list — output by wp_nav_menu() ─────────────────────────────────── */
.cs-drawer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.cs-drawer-nav-list a {
    display: block;
    padding: .6rem 0;
    color: var(--hk-ink, #141414);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .15s ease;
}
.cs-drawer-nav-list a:hover,
.cs-drawer-nav-list .current-menu-item > a,
.cs-drawer-nav-list .current-page-ancestor > a { color: var(--hk-accent, #b8182f); }

/* One level of submenus — indented, smaller */
.cs-drawer-nav-list .sub-menu {
    list-style: none;
    padding: 0 0 .25rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cs-drawer-nav-list .sub-menu a {
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .35rem 0;
}

/* ── Two-stack logic: which menu shows at which viewport ─────────────────── */
/*
   Below 980px (mobile):   show Drawer — Mobile, hide Drawer — Desktop
   At/above 980px (desktop): show Drawer — Desktop, hide Drawer — Mobile

   If only one menu has been assigned, it shows at all sizes regardless.
   If BOTH are assigned, the right one activates per viewport.
*/
@media (max-width: 979px) {
    .cs-drawer-nav--desktop { display: none; }
}
@media (min-width: 980px) {
    .cs-drawer-nav--mobile  { display: none; }
}

/* ── No-menu fallback notice ─────────────────────────────────────────────── */
.cs-drawer-notice {
    font-size: .9rem;
    color: #666;
    padding: 1rem 0;
}
.cs-drawer-notice a { color: var(--hk-accent, #b8182f); }

/* ── Body scroll lock when drawer is open ────────────────────────────────── */
body.cs-drawer-open { overflow: hidden; }

/* ── Dropdown nav in header (hk-nav-dd pattern) ─────────────────────────── */
.hk-nav-dd { position: relative; }
.hk-nav-dd-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    min-width: 200px;
    z-index: 9000;
    padding: .5rem 0;
}
.hk-nav-dd[data-open="true"] .hk-nav-dd-panel { display: block; }