/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Drawer Component
   ────────────────────────────────────────────────────────────────────
   Slide-in panel from screen edge. Used for secondary navigation, side
   forms, contextual details (a11y/health/seo drawers in CMS editor).

   USAGE
     <div class="pf-drawer-overlay" data-pf-drawer-open>
       <div class="pf-drawer-overlay__backdrop" data-pf-drawer-close></div>
       <aside class="pf-drawer pf-drawer--right" role="dialog"
              aria-modal="true" aria-labelledby="drawer-title">
         <header class="pf-drawer__header">
           <h2 id="drawer-title" class="pf-drawer__title">Drawer title</h2>
           <button class="pf-drawer__close" data-pf-drawer-close aria-label="Close">
             <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
               <path d="M3 3l10 10M3 13L13 3" stroke="currentColor" stroke-width="2"/>
             </svg>
           </button>
         </header>
         <div class="pf-drawer__body">
           Drawer content.
         </div>
         <footer class="pf-drawer__footer">
           <button class="pf-button pf-button--ghost" data-pf-drawer-close>Cancel</button>
           <button class="pf-button">Apply</button>
         </footer>
       </aside>
     </div>

     <!-- Sides -->
     <aside class="pf-drawer pf-drawer--left">…</aside>
     <aside class="pf-drawer pf-drawer--top">…</aside>
     <aside class="pf-drawer pf-drawer--bottom">…</aside>

     <!-- Sizes -->
     <aside class="pf-drawer pf-drawer--right pf-drawer--sm">…</aside>
     <aside class="pf-drawer pf-drawer--right pf-drawer--lg">…</aside>

   ACCESSIBILITY
     • role="dialog" + aria-modal="true" required
     • aria-labelledby points to drawer title
     • Focus moves into drawer on open (JS responsibility)
     • Esc key closes drawer (JS responsibility)
     • Focus trap while open (JS responsibility)
     • Backdrop click closes (data-pf-drawer-close)
     • Returns focus to trigger element on close (JS responsibility)

   Version: 1.0.0
   Last revised: 2026-05-10
   ──────────────────────────────────────────────────────────────────── */

/* ─── Block: .pf-drawer-overlay (positioning + backdrop wrapper) ── */

.pf-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--pf-drawer-z-index);
    display: flex;
    pointer-events: none; /* So body content stays clickable when overlay hidden */
}

.pf-drawer-overlay[data-pf-drawer-open] {
    pointer-events: auto;
}

.pf-drawer-overlay[hidden] { display: none; }

/* ─── Element: __backdrop (full-screen scrim) ────────────────── */

.pf-drawer-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--pf-drawer-backdrop);
    opacity: 0;
    transition: opacity var(--pf-motion-duration-base) var(--pf-motion-ease-out);
    cursor: pointer;
}

.pf-drawer-overlay[data-pf-drawer-open] .pf-drawer-overlay__backdrop {
    opacity: 1;
}

/* ─── Block: .pf-drawer (panel itself) ────────────────────────── */

.pf-drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pf-drawer-bg);
    color: var(--pf-drawer-fg);
    box-shadow: var(--pf-drawer-shadow);
    overflow: hidden;
    /* Default — right side */
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    margin-inline-start: auto; /* Push to right edge */
    transform: translateX(100%);
    transition: transform var(--pf-motion-duration-base) var(--pf-motion-ease-out);
}

.pf-drawer-overlay[data-pf-drawer-open] .pf-drawer {
    transform: translateX(0);
}

/* ─── Modifiers: --right / --left / --top / --bottom ────────── */

.pf-drawer--right {
    /* Default behaviour — already encoded above */
    margin-inline-start: auto;
}

.pf-drawer--left {
    margin-inline-end: auto;
    margin-inline-start: 0;
    transform: translateX(-100%);
}

.pf-drawer-overlay[data-pf-drawer-open] .pf-drawer--left {
    transform: translateX(0);
}

.pf-drawer--top {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 80vh;
    margin: 0;
    transform: translateY(-100%);
}

.pf-drawer-overlay[data-pf-drawer-open] .pf-drawer--top {
    transform: translateY(0);
}

.pf-drawer--bottom {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 80vh;
    margin: auto 0 0 0;
    transform: translateY(100%);
}

.pf-drawer-overlay[data-pf-drawer-open] .pf-drawer--bottom {
    transform: translateY(0);
}

/* ─── Sizes ──────────────────────────────────────────────────── */

.pf-drawer--sm { width: 320px; }
.pf-drawer--md { width: 420px; } /* default */
.pf-drawer--lg { width: 560px; }
.pf-drawer--xl { width: 720px; }
.pf-drawer--full { width: 100vw; }

/* ─── Element: __header ──────────────────────────────────────── */

.pf-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pf-space-3);
    padding: var(--pf-drawer-padding);
    padding-bottom: var(--pf-space-3);
    border-bottom: 1px solid var(--pf-drawer-border);
    flex-shrink: 0;
}

.pf-drawer__title {
    margin: 0;
    font-size: var(--pf-text-size-lg);
    font-weight: var(--pf-text-weight-semibold);
    color: var(--pf-color-text-primary);
    line-height: var(--pf-text-leading-snug);
}

.pf-drawer__subtitle {
    margin: var(--pf-space-1) 0 0;
    font-size: var(--pf-text-size-sm);
    color: var(--pf-color-text-secondary);
    line-height: var(--pf-text-leading-normal);
}

.pf-drawer__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: var(--pf-color-text-secondary);
    border: 1px solid transparent;
    border-radius: var(--pf-radius-sm);
    cursor: pointer;
    transition: background var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

.pf-drawer__close:hover,
.pf-drawer__close:focus-visible {
    background: var(--pf-color-surface-hover);
    color: var(--pf-color-text-primary);
}

.pf-drawer__close:focus-visible {
    outline: none;
    box-shadow: var(--pf-focus-ring);
}

/* ─── Element: __body (scrolling content area) ──────────────── */

.pf-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--pf-drawer-padding);
    padding-top: var(--pf-space-4);
    padding-bottom: var(--pf-space-4);
}

.pf-drawer__body > :first-child { margin-top: 0; }
.pf-drawer__body > :last-child  { margin-bottom: 0; }

/* ─── Element: __footer (sticky actions at bottom) ──────────── */

.pf-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pf-space-2);
    padding: var(--pf-drawer-padding);
    padding-top: var(--pf-space-3);
    padding-bottom: var(--pf-space-3);
    border-top: 1px solid var(--pf-drawer-border);
    background: var(--pf-drawer-bg);
    flex-shrink: 0;
}

/* ─── Reduced-motion respect ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pf-drawer-overlay__backdrop,
    .pf-drawer {
        transition: none;
    }
}