/*
 * F-004 drawer.css — Mobile drawer visual chrome.
 *
 * The drawer ITSELF is rendered by our child-side
 * template-parts/header/drawer_menu.php (which adds role/aria/data-feature
 * attributes). Arkhe's own .p-drawer CSS handles the slide-in animation.
 * This file adds:
 *   - Typography / tap-target corrections for dense drawer link lists
 *   - Verified-trust mini-block at the bottom (rendered by
 *     arkhe_end_drawer_body)
 *   - prefers-reduced-motion guard for the slide-in transition
 *   - desktop hide (display:none @ >= 1024px) so drawer chrome doesn't
 *     consume paint time outside mobile viewports
 */

/* ----------------------------------------------------------------------
 * Drawer link typography + tap target.
 * -------------------------------------------------------------------- */
.p-drawer .c-drawerNav a {
    color: var(--tk-color-ink);
    font-size: var(--tk-fs-md);
    font-weight: var(--tk-fw-medium);
    text-decoration: none;
    padding: 14px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--tk-color-border);
    line-height: var(--tk-lh-snug);
}

.p-drawer .c-drawerNav a:hover,
.p-drawer .c-drawerNav a:focus-visible {
    background: var(--tk-color-bg-subtle);
    color: var(--tk-color-primary);
    outline: 2px solid var(--tk-color-primary);
    outline-offset: -2px;
}

/* Close button tap target. */
.p-drawer__close {
    min-height: 48px;
    min-width: 48px;
    color: var(--tk-color-ink);
    font-weight: var(--tk-fw-bold);
    font-size: var(--tk-fs-sm);
    padding: 12px 16px;
    border: 1px solid var(--tk-color-border);
    background: var(--tk-color-bg);
    border-radius: var(--tk-radius-md);
    margin: 16px auto;
    cursor: pointer;
}

.p-drawer__close:hover,
.p-drawer__close:focus-visible {
    background: var(--tk-color-bg-subtle);
    color: var(--tk-color-primary);
    outline: 2px solid var(--tk-color-primary);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------
 * Drawer trust strip (rendered by arkhe_end_drawer_body hook).
 * -------------------------------------------------------------------- */
.c-drawerTrust {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--tk-color-bg-subtle);
    border-top: 1px solid var(--tk-color-border);
    border-bottom: 1px solid var(--tk-color-border);
    color: var(--tk-color-ink-muted);
    font-size: var(--tk-fs-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c-drawerTrust__link {
    color: var(--tk-color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--tk-fw-bold);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.c-drawerTrust__link:hover,
.c-drawerTrust__link:focus-visible {
    color: var(--tk-color-primary-hover);
}

/* ----------------------------------------------------------------------
 * Drawer visual state — we drive aria-hidden/body.is-drawerOpen via
 * drawer.js so CSS can key off both attributes.
 * -------------------------------------------------------------------- */
.p-drawer[aria-hidden="false"] {
    /* Allow pointer events and focus when open (Arkhe toggles visibility
     * via its own class pattern, but aria-hidden is our source of truth). */
    pointer-events: auto;
}

/* ----------------------------------------------------------------------
 * Reduced-motion guard — spec AC-10(g) / F-003 carryover.
 * drawer.js already branches on matchMedia, but we also hard-cut any
 * CSS transitions targeting .p-drawer.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .p-drawer,
    .p-drawer__inner,
    .p-drawer__body {
        transition: none !important;
        animation: none !important;
    }
}

/* ----------------------------------------------------------------------
 * Desktop — drawer chrome is irrelevant; hide to save paint.
 * Arkhe.show_drawer_pc = false already prevents JS wiring, but belt +
 * braces via CSS too (CSS media query, NOT UA sniffing — NG-11 safe).
 * -------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .p-drawer {
        display: none;
    }
}