/* TWF butterfly cursor — desktop only (fine pointer + hover).
   The native cursor is hidden over plain surfaces and a butterfly follows the
   mouse; over clickable elements the native pointer (hand) returns so links and
   buttons still read as clickable. A white halo + dark shadow keeps it visible
   on any background, and over the orange navbar the butterfly flips to white. */
@media (hover: hover) and (pointer: fine) {
  html.twf-cursor, html.twf-cursor * { cursor: none; }

  /* Clickable things keep the system hand so affordance is preserved. */
  html.twf-cursor a,
  html.twf-cursor button,
  html.twf-cursor .btn,
  html.twf-cursor input:not([type=text]):not([type=number]):not([type=email]):not([type=password]):not([type=search]),
  html.twf-cursor select,
  html.twf-cursor summary,
  html.twf-cursor label[for],
  html.twf-cursor [role=button],
  html.twf-cursor [onclick],
  html.twf-cursor .nav-link,
  html.twf-cursor .dropdown-item,
  html.twf-cursor [data-bs-toggle] { cursor: pointer; }

  /* Text fields keep the I-beam. */
  html.twf-cursor input[type=text],
  html.twf-cursor input[type=number],
  html.twf-cursor input[type=email],
  html.twf-cursor input[type=password],
  html.twf-cursor input[type=search],
  html.twf-cursor textarea { cursor: text; }

  #twf-cursor {
    position: fixed; left: 0; top: 0; width: 26px; height: 26px;
    z-index: 2147483647; pointer-events: none; will-change: transform;
    transform: translate(-1000px, -1000px);
    transition: opacity .12s ease;
    filter: drop-shadow(0 0 1.4px rgba(255,255,255,.95))
            drop-shadow(0 1px 2px rgba(0,0,0,.4));
  }
  #twf-cursor svg { display: block; width: 100%; height: 100%; }
  #twf-cursor path { fill: #F39C12; transition: fill .12s ease; }
  #twf-cursor.is-hidden { opacity: 0; }
  /* On the orange navbar the brand-orange butterfly would vanish — go white. */
  #twf-cursor.on-brand path { fill: #ffffff; }
}

/* ============================================================================
   Layout shell — align the navbar with <main> and kill horizontal overflow.
   The orange bar spans the full viewport (background edge-to-edge), but its
   inner content shares the SAME centered 1040px column as <main> (see base.html
   `main { max-width:1040px; padding:0 18px }`), so the brand lines up with the
   page content instead of hugging the viewport gutter on wide screens.
   ========================================================================== */

/* Safety net: never produce a horizontal scrollbar. `clip` (not `hidden`) does
   NOT create a scroll container, so the navbar's `position:sticky` keeps working. */
html { overflow-x: clip; }

.navbar.twf .twf-navshell {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 18px;   /* matches <main>'s 18px gutter — brand aligns with content */
  width: 100%;
}

/* When the bar is expanded inline (≥lg), let the menu wrap to a second row if it
   would otherwise exceed the column — `.nav-link{white-space:nowrap}` keeps each
   label intact, and wrapping (rather than overflowing) prevents a page scroll. */
@media (min-width: 992px) {
  .navbar.twf .navbar-collapse { min-width: 0; }
  .navbar.twf .navbar-nav { flex-wrap: wrap; }
}