/* =============================================================================
   site.css — Verwolf family site layout pass
   =============================================================================
   Composes verwolf.css's primitives (.vw-shell, .vw-panel, .vw-register, etc.)
   into this site's actual pages. Loaded after verwolf.css in base.html.
   Nothing here introduces new colour — only layout and a few small,
   site-specific components that the house style deliberately left open.
   ========================================================================== */


/* =============================================================================
   SHELL — masthead over one pane, at every screen size
   =============================================================================
   The house style ships a fixed left rail (.vw-shell__rail). We don't use it:
   navigation lives entirely in the slide-out menu below, so the layout is
   identical on phone, tablet and desktop rather than reflowing into a
   different shape at each breakpoint.

   Deliberately NOT inside a media query — this must override verwolf.css's
   rail-based grid at all widths. Equal specificity, later file wins.
   ========================================================================== */
.vw-shell--drawer {
  grid-template-columns: 1fr;
  grid-template-areas:
    "masthead"
    "pane";
}

/* Auth pages (login, register, password reset) centre their single panel. */
.vw-shell--auth .vw-shell__pane {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--vw-s-8);
}
@media (max-width: 60rem) {
  .vw-shell--auth .vw-shell__pane { padding-top: var(--vw-s-6); }
}


/* =============================================================================
   MASTHEAD
   ========================================================================== */

/* Menu button + wordmark, grouped so they stay together on the left. */
.vw-masthead__left {
  display: flex;
  align-items: center;
  gap: var(--vw-s-4);
  min-width: 0;                     /* lets the wordmark truncate, not overflow */
}

.vw-masthead__brand {
  display: flex;
  align-items: baseline;
  gap: var(--vw-s-4);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
/* The full wordmark, set in the display serif at every screen size — the
   masthead reads the same on a phone as on a desktop. */
.vw-masthead__name {
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}


/* =============================================================================
   HAMBURGER BUTTON
   =============================================================================
   Square and bordered to match .vw-btn. The three bars are one element plus
   its two pseudo-elements, which is what lets them animate into an X when the
   menu is open — the button always shows the action it will perform next.
   ========================================================================== */
.vw-burger {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--vw-ink);
  border-radius: var(--vw-edge);
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.vw-burger:hover { background: var(--vw-vellum-deep); }
.vw-burger:active { transform: translateY(1px); }

.vw-burger__bars {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--vw-ink);
  transition: background-color 160ms ease;
}
.vw-burger__bars::before,
.vw-burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--vw-ink);
  transition: transform 200ms ease;
}
.vw-burger__bars::before { top: -6px; }
.vw-burger__bars::after  { top: 6px; }

/* Open state: middle bar fades, outer two cross into an X. Driven off
   aria-expanded so the visual state can never disagree with what assistive
   technology is told. */
.vw-burger[aria-expanded="true"] .vw-burger__bars { background: transparent; }
.vw-burger[aria-expanded="true"] .vw-burger__bars::before {
  transform: translateY(6px) rotate(45deg);
}
.vw-burger[aria-expanded="true"] .vw-burger__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* =============================================================================
   SLIDE-OUT MENU
   ========================================================================== */

/* Dimmed backdrop. Clicking it closes the menu.
   visibility (not just opacity) matters here: a fully transparent element
   still swallows clicks across the entire page, so it has to be genuinely
   hidden while the menu is closed. */
.vw-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(23, 19, 15, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.vw-drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.vw-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  width: min(19rem, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--vw-paper);
  /* The house style's heavy black bar, turned on its side as the menu's edge. */
  border-right: 5px solid var(--vw-rule-black);
  box-shadow: var(--vw-lift-3);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms;
}
.vw-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.vw-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-4);
  padding: var(--vw-s-4) var(--vw-s-4) var(--vw-s-4) var(--vw-s-5);
  border-bottom: 5px solid var(--vw-rule-black);
}

.vw-drawer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vw-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vw-edge);
  cursor: pointer;
}
.vw-drawer__close:hover {
  background: var(--vw-vellum-deep);
  border-color: var(--vw-rule-strong);
  color: var(--vw-ink);
}

/* The scrolling middle section — long menus scroll here, not the page. */
.vw-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--vw-s-4) 0;
}

.vw-drawer__rule  { margin: var(--vw-s-4) var(--vw-s-4); }
.vw-drawer__group { display: block; padding: 0 var(--vw-s-4) var(--vw-s-2); }

.vw-drawer__foot {
  flex: none;
  padding: var(--vw-s-4) var(--vw-s-5) var(--vw-s-5);
  border-top: 1px solid var(--vw-rule);
  background: var(--vw-vellum-deep);
}
.vw-drawer__user {
  margin: var(--vw-s-1) 0 var(--vw-s-4);
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-md);
  line-height: var(--vw-lh-snug);
}

/* Menu entry for a section that doesn't exist yet. Looks like a .vw-nav item
   but isn't a link — future phases replace each one with the real thing. */
.vw-nav__soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-3);
  padding: var(--vw-s-3) var(--vw-s-4);
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--vw-ink-faint);
  opacity: 0.55;
  border-left: 3px solid transparent;
}

/* Stops the page behind the menu from scrolling while it's open. */
body.vw-menu-open { overflow: hidden; }


/* =============================================================================
   SKIP LINK — hidden until focused by keyboard
   ========================================================================== */
.vw-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--vw-s-3) var(--vw-s-4);
  background: var(--vw-delft);
  color: var(--vw-paper-bright);
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
}
.vw-skip:focus {
  left: var(--vw-s-4);
  top: var(--vw-s-4);
}


/* =============================================================================
   PAGE COMPONENTS
   ========================================================================== */

/* Dashboard feature tile: a panel that also acts as a link. */
.vw-tile {
  display: flex;
  flex-direction: column;
  gap: var(--vw-s-3);
  min-height: 8.5rem;
  text-decoration: none;
  color: inherit;
}
.vw-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vw-s-3);
}

/* =============================================================================
   DASHBOARD LAYOUT
   =============================================================================
   Two columns: a rail running the length of the left side holding the family
   register (and, for staff, invites), with everything else to its right.
   ========================================================================== */
.dash {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: var(--vw-s-7);
  align-items: start;
}

/* Sticky so it stays beside the content as the page scrolls, which is what
   makes it read as a full-length rail rather than a panel that scrolls away. */
.dash__rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vw-s-5);
  max-height: calc(100dvh - 9rem);
}

/* The register takes whatever height is left and scrolls inside itself, so a
   long member list never stretches the page — the house style's bounded-pane
   rule applied to a sidebar. */
.dash__register {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.dash__register-head { padding: var(--vw-s-5) var(--vw-s-5) var(--vw-s-3); }
.dash__register-head h4 { margin: var(--vw-s-2) 0 0; }
.dash__register-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 var(--vw-s-5) var(--vw-s-5);
}
.dash__invites { flex: none; }

/* Phones: the rail is hidden entirely and the register lives in the slide-out
   menu instead (see .vw-drawer__register). Putting a tall sidebar first on a
   narrow screen is exactly the problem that moved navigation into the menu. */
@media (max-width: 60rem) {
  .dash { grid-template-columns: 1fr; gap: var(--vw-s-5); }
  .dash__rail { display: none; }
}

/* -- Truncated register inside the slide-out menu ---------------------------
   The phone-sized counterpart to the dashboard's left rail. Capped in height
   so it can never push the account section out of reach. */
.vw-drawer__register {
  flex: none;
  padding: var(--vw-s-4) var(--vw-s-5) var(--vw-s-3);
  border-top: 1px solid var(--vw-rule);
}
.vw-drawer__register-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-3);
  margin-bottom: var(--vw-s-3);
}
.vw-drawer__members {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
  font-size: var(--vw-t-sm);
}
.vw-drawer__members li {
  padding: var(--vw-s-2) 0;
  border-bottom: 1px solid var(--vw-rule);
  line-height: var(--vw-lh-snug);
}
.vw-drawer__members li:last-child { border-bottom: 0; }