/* Exactly one sidebar item may read as "the page you are on".
 *
 * THE BUG, as reported twice: opening the FarmLink menu while editing a Theme
 * highlighted FarmLink, Settings AND "Herd & animals" at once. The user was
 * nowhere near the herd.
 *
 * Wagtail marks a submenu `sidebar-menu-item--active` in two different
 * situations and draws both the same way. From
 * wagtailadmin/js/sidebar.js, the SubMenuItem component:
 *
 *     l = navigationPath.startsWith(path) || activePath.startsWith(path)
 *
 * The first term is "this is the branch you are BROWSING right now"; the
 * second is "this branch contains the page you are ON". Leaves use only the
 * second term, which is why a leaf never double-highlights and a section
 * does. Nothing in a menu's own data can separate them -- this is not our
 * item names, our URLs or `is_active`, which is server-side and does not
 * drive this at all.
 *
 * What DOES separate them is already in the DOM: the branch being browsed
 * also carries `sidebar-sub-menu-item--open`, and the branch holding your
 * page does not (measured on the running server: on a Theme edit page with
 * the FarmLink menu open, Settings has `--active` alone while FarmLink and
 * "Herd & animals" have `--active --open`).
 *
 * So the accent is reserved for `--active` WITHOUT `--open`. An open branch
 * is already obvious -- its panel is on screen next to it.
 *
 * Deliberately NOT touching `.sidebar-menu-item--active .sidebar-panel`,
 * which is what slides a panel into view: the class has to keep meaning what
 * it means, and only its colour is wrong.
 */
.sidebar-menu-item--active.sidebar-sub-menu-item--open {
  background-color: transparent;
  text-shadow: none;
}

/* Keep the label readable once the accent background is gone: without this it
 * would fall back to the active-state text colour, which is chosen to sit on
 * the accent and not on the dark sidebar. */
.sidebar-menu-item--active.sidebar-sub-menu-item--open > a,
.sidebar-menu-item--active.sidebar-sub-menu-item--open > button {
  color: var(--w-color-text-label-menus-default);
}


/* ===========================================================================
 * THE MENU ON A PHONE
 *
 * Wagtail hides the whole sidebar below 700px:
 *
 *     @media (max-width: 700px) { .sidebar { display: none } }
 *
 * Measured in wagtailadmin's own stylesheet on the running server. That is
 * core behaviour and it is not about this package -- on a phone there is no
 * menu at all, for anything. The toggle still renders, so the farmer gets a
 * control that opens nothing.
 *
 * It matters more here than it would in a stock install, because this package
 * is the navigation: thirteen sections and four dozen screens hang off one
 * "FarmLink" item. So the package that added them carries the rule that keeps
 * them reachable, the same reasoning that already puts the active-state fix
 * in this file.
 *
 * WHY FULL-WIDTH PANELS RATHER THAN FLYOUTS
 * Panels are `position: fixed`, 200px wide, each level offset further right:
 * the sidebar at 0, "FarmLink" at 200, and a third level -- Sales & finance >
 * Money in -- at 400. On a 390px screen that third panel is entirely off the
 * edge, and even the second only just fits with nothing beside it. Measured
 * on the running server before changing anything.
 *
 * Stacked full-width panels suit the hardware instead: each level covers the
 * one before it, and every panel already carries an <h2> with its own name,
 * so you always know which list you are looking at.
 * =========================================================================== */

@media (max-width: 700px) {
  /* Only while the toggle says it is open. Un-hiding it unconditionally would
     put a 200px menu permanently across a phone screen. */
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    padding-inline: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 200;
  }

  /* The toggle has to stay above the menu it opened, or there is no way out. */
  .sidebar-nav-toggle {
    position: fixed;
    z-index: 300;
  }

  /* Every panel, at every depth, becomes the whole screen. `left` and `width`
     are set by Wagtail's own rules rather than inline styles, so ordinary
     specificity would do -- !important is here because these fight a
     component stylesheet that may be reordered by a future release, and a
     menu that silently slides off the edge again is worse than a loud rule. */
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-panel {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* The box INSIDE the panel keeps its own 200px, so without this the rows
     are 200px of tap target on a 390px screen -- measured: the entries read
     as full-width only because the background behind them is uniform. */
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-sub-menu-panel {
    width: 100% !important;
    max-width: none !important;
  }

  /* Breathing room for thumbs: the nested lists are the ones people actually
     tap, and 200px-wide rows are sized for a mouse. */
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-sub-menu-panel > ul > li > a,
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-sub-menu-panel > ul > li > button,
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-menu-item > a,
  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-menu-item > button {
    min-height: 3rem;
    font-size: 1rem;
  }

  .wrapper:has(.sidebar-nav-toggle--open) .sidebar-sub-menu-panel > h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-block: .75rem;
    background: var(--w-color-surface-menus);
  }


  /* The back control sidebar-mobile-back.js inserts. Styled here, next to the
     full-width panel rules that make it necessary, rather than in the script:
     the script decides when there is a way back, the stylesheet decides what
     it looks like, and neither has to be read to change the other.

     It sits above the sticky <h2> in source order and scrolls with the panel
     on purpose -- pinning both the name of the list and the way out of it
     costs a phone two rows of a short screen. */
  .farmlink-sidebar-back {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    /* Clear the toggle. It is 50px square and `position: fixed` at the top
       left corner -- measured on the running server -- so a back control
       starting at the edge has its chevron and first letters sitting under
       a button that closes the whole menu. */
    padding-inline: 3.5rem 1.25rem;
    border: 0;
    background: transparent;
    color: var(--w-color-text-label-menus-default);
    font-size: .9375rem;
    text-align: start;
    cursor: pointer;
  }

  .farmlink-sidebar-back::before {
    /* A left-pointing chevron, matching the right-pointing ones Wagtail
       already draws on every item that opens a panel. */
    content: "\2039";
    font-size: 1.5rem;
    line-height: 1;
  }

  .farmlink-sidebar-back:hover,
  .farmlink-sidebar-back:focus-visible {
    background: var(--w-color-surface-menu-item-active);
    color: var(--w-color-text-label-menus-active);
  }
}