/* ============================================================================
   assets/css/dswd-sidebar-responsive.css — the menu below 992px

   Pairs with dswd-sidebar-responsive.js. Three sidebars, one behaviour:

     ≥ 992px   permanent column; the burger is hidden and the desktop
               icon-collapse control is the one that matters.
     ≤ 992px   off-canvas drawer over a backdrop; the burger appears in the
               header; the collapse control is hidden.

   The drawer is 86vw capped at 320px. A full-width drawer hides the backdrop,
   and the backdrop is the affordance that tells a first-time user the menu is
   dismissible.
   ========================================================================= */

/* ── The burger ────────────────────────────────────────────────────────── */
.dswd-burger{
  display:none;                       /* shown by the media query only */
  align-items:center; justify-content:center;
  width:42px; height:42px; min-width:42px;
  border-radius:12px;
  border:1px solid var(--border, #dde5ef);
  background:#fff; color:var(--dswd-blue-deep, #0b2545);
  font-size:16px; cursor:pointer; flex:0 0 auto;
  transition:background .16s, transform .16s;
}
.dswd-burger:hover{ background:var(--dswd-blue-tint, #eef3fb); }
.dswd-burger:active{ transform:scale(.94); }
.dswd-burger:focus-visible{ outline:3px solid #8fb4ff; outline-offset:2px; }
.dswd-burger.floating{
  position:fixed; top:14px; left:14px; z-index:1100;
  box-shadow:0 8px 24px rgba(11,37,69,.18);
}

/* ── The backdrop ──────────────────────────────────────────────────────── */
.dswd-scrim{
  position:fixed; inset:0; z-index:1070;
  background:rgba(6,20,40,.48);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.dswd-scrim.show{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion:reduce){
  .dswd-scrim{ transition:none; }
}

/* Never let the backdrop show on the desktop, whatever state JS left behind. */
@media (min-width:993px){
  .dswd-scrim{ display:none !important; }
  .dswd-burger{ display:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Drawer mode
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:992px){

  .dswd-burger{ display:inline-flex !important; }

  /* Collapsing an off-canvas drawer to icons is meaningless — hide the
     desktop control rather than leaving a dead button in the drawer. */
  .dswd-collapse-btn{ display:none !important; }

  .dswd-sidebar,
  .citizen-sidebar,
  .mod-sidebar,
  aside.sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:min(86vw, 320px) !important;
    max-width:320px;
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:1080;
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    box-shadow:none;
    /* The desktop collapse must not leak into the drawer. */
    padding-left:0; padding-right:0;
  }
  @media (prefers-reduced-motion:reduce){
    .dswd-sidebar, .citizen-sidebar, .mod-sidebar, aside.sidebar{ transition:none; }
  }

  .dswd-sidebar.open,
  .citizen-sidebar.open,
  .mod-sidebar.open,
  aside.sidebar.open{
    transform:none;
    box-shadow:6px 0 40px rgba(6,20,40,.30);
  }

  /* Labels always visible in the drawer, even if the desktop state was
     "collapsed" when the window was narrowed. */
  html.dswd-nav-collapsed .dswd-sidebar,
  html.dswd-nav-collapsed .citizen-sidebar,
  html.dswd-nav-collapsed .mod-sidebar{
    width:min(86vw, 320px) !important;
  }
  html.dswd-nav-collapsed .dswd-sidebar a,
  html.dswd-nav-collapsed .dswd-sidebar .dswd-grouphead,
  html.dswd-nav-collapsed .citizen-sidebar a,
  html.dswd-nav-collapsed .mod-sidebar a{
    font-size:revert !important;
  }
  html.dswd-nav-collapsed .dswd-sidebar .dswd-sb-search,
  html.dswd-nav-collapsed .dswd-sidebar .dswd-userbox,
  html.dswd-nav-collapsed .dswd-sidebar .nav-section,
  html.dswd-nav-collapsed .dswd-sidebar .dswd-progs{
    display:revert !important; opacity:1 !important;
  }

  /* The content takes the full width back. */
  .main-wrap, .main-content, .citizen-main, .mod-main, .content-wrap{
    margin-left:0 !important;
    width:100% !important;
  }
  .page-foot{ margin-left:0 !important; }

  /* Body scroll lock while the drawer is open. */
  html.dswd-drawer-open,
  html.dswd-drawer-open body{
    overflow:hidden;
    touch-action:none;
  }

  /* Tap targets inside the drawer. */
  .dswd-sidebar .dswd-link,
  .dswd-sidebar .dswd-grouphead,
  .dswd-sidebar .dswd-sub a,
  .citizen-sidebar a,
  .mod-sidebar a{
    min-height:46px;
  }

  /* The header gets the burger first, then the title. */
  .topbar, .citizen-topbar, .mod-topbar{
    gap:12px;
    padding-left:14px !important; padding-right:14px !important;
  }
  .topbar-left h1{ font-size:17px !important; }
  .topbar-left h1 .tb-ico{ width:34px; height:34px; font-size:14px; }
  .topbar-left p, .crumb{ font-size:11.5px !important; }
  .topbar-right{ gap:7px; }
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width:575px){
  .dswd-sidebar, .citizen-sidebar, .mod-sidebar, aside.sidebar{
    width:min(92vw, 300px) !important;
  }
  .topbar-left h1{ font-size:15.5px !important; }
  .topbar-left h1 .tb-ico{ width:30px; height:30px; font-size:12.5px; }
  /* The account name is the first thing to go; the avatar still identifies
     who is signed in. */
  .tb-user .nm, .tb-user .rl{ display:none; }
  .tb-user{ padding:5px; }
  .content{ padding:16px 14px 44px !important; }

  /* Four buttons and the avatar do not fit beside a title on a phone. The
     row did not wrap, so the account button — the way to sign out — was
     pushed past the right edge and clipped on every page whose own styles
     did not happen to set flex-wrap (the intake page did; the dashboard and
     the programme pages did not). Let the cluster wrap under itself, and let
     the title give up width instead of the buttons. */
  .topbar-left{ min-width:0; flex:1 1 auto; }
  .topbar-left h1{ overflow-wrap:anywhere; }
  .topbar-right{ flex-wrap:wrap; justify-content:flex-end; flex:0 1 auto; max-width:52%; }
}

/* ── Landscape phones: short viewports ─────────────────────────────────── */
@media (max-height:460px) and (max-width:992px){
  .dswd-sidebar .dswd-progs,
  .dswd-sidebar .nav-progs-label,
  .dswd-sidebar .u-org{ display:none; }
  .dswd-sidebar .dswd-userbox{ padding-top:8px; padding-bottom:8px; }
}