/* ============================================================
   Tool-shell layout (app-shell) — the logo, nav, and a minimal footer
   live in a left SIDEBAR on desktop (stacked at the top of the content
   on narrow). Scoped to .dw-shell / body.dw-has-shell.
   Token-driven (single base namespace) with literal fallbacks.
   NO rounded corners anywhere — square, by design.
   ============================================================ */

.dw-shell { display: block; }
.dw-shell__main { min-width: 0; }
/* Mobile top bar — hidden on desktop (the rail carries the brand there). */
.dw-shell__topbar { display: none; }

/* Sidebar — a flex column: logo (top) · nav · minimal footer (bottom). */
.dw-shell__sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid var(--rule, #e5e5e5);
}

/* Desktop: [ sidebar | content ] grid; sidebar sticky, full height. */
@media (min-width: 1025px) {
  .dw-shell { --shell-rail-w: 264px; }
  /* Fixed rail + padded content (the Claude-Design mechanism), so the rail
     can SLIDE in/out on collapse instead of hard-toggling. */
  .dw-shell__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--shell-rail-w);
    height: 100vh;
    overflow-y: auto;
    padding: 20px 14px;
    border-bottom: 0;
    border-right: 1px solid var(--rule, #e5e5e5);
    transform: translateX(0);
    transition: transform 0.22s ease;
    z-index: 30;
  }
  /* 42px top = the Claude-Design breathing room (main.page padding: 42px 40px 0)
     — content was previously jammed to the viewport top (8px). */
  .dw-shell__main {
    padding: 42px 24px 0;
    padding-left: calc(var(--shell-rail-w) + 24px);
    transition: padding-left 0.22s ease;
  }
  /* Collapsed: the rail slides out left and the content reclaims the space. */
  body.dw-shell-collapsed .dw-shell__sidebar { transform: translateX(-100%); }
  body.dw-shell-collapsed .dw-shell__main { padding-left: 24px; }
}

/* Rail-top: brand + the in-rail collapse hamburger on one vertically-centered
   row. The hairline divider lives here now (not on the logo). */
.dw-shell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule, #e5e5e5);
}
.dw-shell-logo {
  display: block;
  padding: 2px;
  min-width: 0;
}
/* In-rail collapse button — flows in the rail-top row, so it tracks the WP
   admin bar / layout instead of floating over the viewport. */
.dw-shell__collapse {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule, #e5e5e5);
  background: var(--bg, #ffffff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
}
.dw-shell__collapse:hover { background: var(--bg-2, #f3f3f3); color: var(--rubric, #710500); }
.dw-shell__collapse:focus-visible { outline: 2px solid var(--rubric, #710500); outline-offset: 2px; }
.dw-shell-logo img,
.dw-shell-logo .custom-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 40px;
}

/* Vertical nav — SQUARE. Active item = a left accent rail + tinted fill
   (no rounded corners, no asymmetric borders). */
.dw-shell-nav__list { list-style: none; margin: 0; padding: 0; }
.dw-shell-nav__list li { margin: 0; }
/* Essays years render as a compact 2-column grid (Claude-Design rail). */
.dw-shell-nav__group--years .dw-shell-nav__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
/* External "Mehr" links carry a quiet ↗ marker pushed to the right. */
.dw-shell-nav__ext { margin-left: auto; display: inline-flex; align-items: center; color: var(--rubric, #710500); }
.dw-shell-nav__ext svg { width: 11px; height: 11px; }
.dw-shell-nav__list a {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.3;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dw-shell-nav__list a:hover,
.dw-shell-nav__list a:focus {
  background: var(--bg-2, #f3f3f3);
  color: var(--rubric, #710500);
  text-decoration: none;
}
.dw-shell-nav__list a:focus-visible {
  outline: 2px solid var(--rubric, #710500);
  outline-offset: -2px;
}
.dw-shell-nav__list .current-menu-item > a,
.dw-shell-nav__list .current_page_item > a,
.dw-shell-nav__list .current-menu-parent > a {
  background: var(--rubric-tint, rgb(113 5 0 / 0.10));
  color: var(--rubric, #710500);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--rubric, #710500);
}
@media (prefers-reduced-motion: reduce) {
  .dw-shell-nav__list a { transition: none; }
}

/* Contextual submenu — the active section's items, expanded inline beneath
   its rail item (e.g. Catechism → its prayers/lessons). Background-change
   feedback, no border-lines (general rule). */
.dw-shell-subnav {
  list-style: none;
  margin: 1px 0 6px;
  padding: 0 0 0 12px;
}
.dw-shell-subnav li { margin: 0; }
.dw-shell-subnav a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-mute, #6a6a6a);
}
.dw-shell-subnav a:hover,
.dw-shell-subnav a:focus { background: var(--bg-2, #f3f3f3); color: var(--ink, #1a1a1a); text-decoration: none; }
.dw-shell-subnav a.is-current {
  background: var(--rubric-tint, rgb(113 5 0 / 0.10));
  color: var(--rubric, #710500);
  font-weight: 600;
}
/* The section above the current leaf (e.g. "Basic Prayers"): a quiet header. */
.dw-shell-subnav a.is-ancestor { color: var(--ink, #1a1a1a); font-weight: 600; }
/* Deeper level (the section's items) — indent a touch more. */
.dw-shell-subnav--nested { padding-left: 12px; margin: 1px 0 4px; }

/* Sidebar nav groups (e.g. Essays-by-year + secondary links on dushanwegner.com). */
.dw-shell-nav__group + .dw-shell-nav__group { margin-top: 18px; }
.dw-shell-nav__label {
  display: block;
  padding: 0 12px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute, #6a6a6a);
}

/* Minimal sidebar footer — pinned to the bottom of the sidebar column. */
.dw-shell-foot {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.8rem;
  color: var(--ink-mute, #6a6a6a);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dw-shell-foot__copy { display: block; }

/* ============================================================
   Shared rail control — segmented toggle (Appearance light/dark/auto).
   The canonical light/dark "lightswitch" for any dwtheme site; opt in via
   the `dwtheme_appearance_toggle` filter. Mirrors the LP rail control look
   so both sites share one segmented-control vocabulary. (LP still ships its
   own .lp-mode-toggle for now — slated to migrate onto this.)
   ============================================================ */
.dw-rail-ctl__lab {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 2px 5px;
}
.dw-mode-toggle {
  display: flex;
  width: 100%;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--bg);
}
.dw-mode-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  font-family: var(--font-sans, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.4;
}
.dw-mode-toggle button:first-child { border-left: 0; }
.dw-mode-toggle button:hover { color: var(--ink); }
.dw-mode-toggle button .ico { font-size: 12px; line-height: 1; }
.dw-mode-toggle button.is-active {
  background: var(--rubric);
  color: #fff;
}

/* ============================================================
   Sidebar toggle — collapse on desktop, off-canvas drawer on narrow.
   ============================================================ */
.dw-shell__toggle {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1050;
  width: 40px;
  height: 40px;
  /* Floating re-open button — hidden by default; shown only when the rail is
     collapsed (desktop) or the drawer is closed (narrow). The in-rail
     .dw-shell__collapse handles closing. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule, #e5e5e5);
  background: var(--bg, #ffffff);
  color: var(--ink, #1a1a1a);
  cursor: pointer;
}
.dw-shell__toggle:hover { background: var(--bg-2, #f3f3f3); color: var(--rubric, #710500); }
.dw-shell__toggle:focus-visible { outline: 2px solid var(--rubric, #710500); outline-offset: 2px; }
.dw-shell__toggle-icon { position: relative; }
.dw-shell__toggle-icon,
.dw-shell__toggle-icon::before,
.dw-shell__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.dw-shell__toggle-icon::before,
.dw-shell__toggle-icon::after { content: ""; position: absolute; left: 0; }
.dw-shell__toggle-icon::before { top: -5px; }
.dw-shell__toggle-icon::after { top: 5px; }

.dw-shell__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 1040; }
.dw-shell__backdrop[hidden] { display: none; }

/* Narrow (<992): the sidebar is an off-canvas drawer (slides in from the left). */
@media (max-width: 1024px) {
  .dw-shell__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg, #ffffff);
    border-bottom: 0;
    border-right: 1px solid var(--rule, #e5e5e5);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 1045;
  }
  body.dw-shell-drawer-open .dw-shell__sidebar { transform: translateX(0); }
  /* Mobile top bar: brand (left) + hamburger (right), sticky at the top —
     the rail's conceptual twin on narrow. Opens the off-canvas drawer. */
  .dw-shell__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1030;   /* below the backdrop (1040) so the open drawer covers it */
    padding: 9px 14px;
    background: var(--bg, #ffffff);
    border-bottom: 1px solid var(--rule, #e5e5e5);
    transition: opacity 0.22s ease;
  }
  .dw-shell__topbar .dw-shell-logo { padding: 0; }
  .dw-shell__topbar .dw-shell-logo img,
  .dw-shell__topbar .dw-shell-logo .custom-logo { max-height: 34px; }
  /* Fade the WHOLE top bar (brand + its hamburger) out as the drawer opens,
     back in on close — riding the drawer's slide. The drawer carries its own
     close control + scrim, so the bar isn't needed while open. */
  body.dw-shell-drawer-open .dw-shell__topbar { opacity: 0; pointer-events: none; }
  /* The top-bar hamburger replaces the floating toggle on narrow. */
  .dw-shell__toggle { display: none !important; }
  /* The sticky top bar already sits in flow above the content; add a small
     breath below it (the design's 64px is for a FIXED bar — ours is sticky). */
  .dw-shell__main { padding-top: 16px; }
}

/* Desktop (>=992): collapsible; no backdrop. */
/* WP admin bar: it's fixed (32px ≥783px, 46px below) and WordPress only bumps
   the document with html{margin-top}, which fixed/sticky elements don't inherit.
   So offset the fixed rail, the sticky top bar, and the floating button by the
   bar height when logged in — the standard admin-bar pattern. */
body.admin-bar .dw-shell__sidebar { top: 32px; height: calc(100vh - 32px); }
body.admin-bar .dw-shell__toggle { top: calc(8px + 32px); }
@media screen and (min-width: 783px) and (max-width: 1024px) {
  body.admin-bar .dw-shell__topbar { top: 32px; }
}
@media screen and (max-width: 782px) {
  body.admin-bar .dw-shell__sidebar { top: 46px; height: calc(100vh - 46px); }
  body.admin-bar .dw-shell__toggle { top: calc(8px + 46px); }
}

@media (min-width: 1025px) {
  /* The floating re-open button appears only when the rail is collapsed. */
  body.dw-shell-collapsed .dw-shell__toggle { display: inline-flex; }
  .dw-shell__backdrop { display: none !important; }

  /* Desktop: the in-rail collapse control is a SUBTLE small icon, not a boxed
     button — the large drawer-sized hamburger only belongs in drawer mode. */
  .dw-shell__collapse {
    width: 22px;
    height: 22px;
    border-color: transparent;
    background: transparent;
    color: var(--ink-mute, #9a9aa3);
    opacity: 0.4;
    transition: opacity 0.12s ease, color 0.12s ease;
  }
  .dw-shell__collapse:hover {
    background: transparent;
    color: var(--rubric, #710500);
    opacity: 1;
  }
  .dw-shell__collapse .dw-shell__toggle-icon,
  .dw-shell__collapse .dw-shell__toggle-icon::before,
  .dw-shell__collapse .dw-shell__toggle-icon::after {
    width: 15px;
  }
  .dw-shell__collapse .dw-shell__toggle-icon::before { top: -4px; }
  .dw-shell__collapse .dw-shell__toggle-icon::after { top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-shell__sidebar { transition: none; }
}