/* ========================================================================== 
   Sidebar Flyout Menu V2
   ========================================================================== 

   QUICK CUSTOMISING GUIDE
   -----------------------
   The Visual Designer in Admin is the easiest and safest way to change:
   - colours, border thickness, padding, box gaps and corner radius
   - font weight/size, arrows, flyout width/gap and shadows
   - transition style/speed, opening/closing delay and mobile animation

   Those values become the --sfm-* variables used below. Changing a property
   such as "background: var(--sfm-background)" here will bypass its Admin
   setting, so leave variable-driven lines alone unless that is intended.

   Comments marked SAFE TO CHANGE identify useful CSS-only adjustments.
   Comments marked STRUCTURAL identify rules needed by the menu engine.
   ========================================================================== */

/* Spacing outside the complete menu box. SAFE TO CHANGE.
   First value = space above; second value = space below. */
.sfm-box {
  margin-block: 15px 10px;
}

/* Predictable sizing for every menu element. STRUCTURAL. */
.sfm,
.sfm * {
  box-sizing: border-box;
}

/* Font size and weight are controlled in the Visual Designer.
   "Theme default" font weight resolves to inherit. */
.sfm {
  font-size: var(--sfm-font-size);
  font-weight: var(--sfm-font-weight);
}

/* Removes browser bullets and default list spacing. STRUCTURAL. */
.sfm__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each category anchors its child flyout. STRUCTURAL.
   Bottom spacing is controlled by "Gap Between Boxes" in Admin. */
.sfm__item {
  position: relative;
  margin-block-end: var(--sfm-gap);
}

/* The visible category box. Most visual properties come from Admin. */
.sfm__row {
  display: flex;
  align-items: stretch;
  min-width: 0;
  color: var(--sfm-text);
  background: var(--sfm-background);
  border: var(--sfm-border-width) solid var(--sfm-border);
  border-radius: var(--sfm-radius);
  transition: background-color var(--sfm-transition-speed) ease-in-out,
              border-color var(--sfm-transition-speed) ease-in-out,
              color var(--sfm-transition-speed) ease-in-out;
}

/* Highlight colours for mouse hover, keyboard focus and current category. */
.sfm__item:hover > .sfm__row,
.sfm__item:focus-within > .sfm__row,
.sfm__item--current > .sfm__row {
  color: var(--sfm-hover-text);
  background: var(--sfm-hover-background);
}

/* Category link layout. STRUCTURAL. Padding comes from Admin. */
.sfm__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: var(--sfm-padding-y) var(--sfm-padding-x);
  color: inherit;
  text-decoration: none;
}

/* SAFE TO CHANGE if underlined menu links are preferred. */
.sfm__link:hover,
.sfm__link:focus {
  color: inherit;
  text-decoration: none;
}

/* Small triangle before each category. Gap is SAFE TO CHANGE; size is in Admin. */
.sfm__lead {
  flex: 0 0 auto;
  margin-inline-end: 0.7rem;
  color: currentColor;
  font-size: var(--sfm-arrow-size);
}

/* Allows long names to wrap without breaking the sidebar. STRUCTURAL. */
.sfm__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Accessible child-category button. Width and arrow size come from Admin. */
.sfm__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--sfm-toggle-width);
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-inline-start: var(--sfm-border-width) solid var(--sfm-border);
  border-radius: 0 var(--sfm-radius) var(--sfm-radius) 0;
  font-size: var(--sfm-arrow-size);
  cursor: pointer;
}

/* Arrow movement selected in Admin. */
.sfm__toggle > span {
  transition: transform var(--sfm-transition-speed) ease-in-out;
}

.sfm--arrow-none .sfm__toggle > span {
  transition: none;
}

.sfm--arrow-rotate .sfm__toggle[aria-expanded="true"] > span {
  transform: rotate(90deg);
}

.sfm--arrow-slide .sfm__toggle[aria-expanded="true"] > span {
  transform: translateX(3px);
}

/* Keyboard focus indicator. Colour/thickness are SAFE TO CHANGE.
   Do not remove the focus indicator completely. */
.sfm__link:focus-visible,
.sfm__toggle:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(13, 110, 253, 0.55);
  outline-offset: -2px;
}

/* Submenus are hidden until desktop/mobile rules activate them. STRUCTURAL. */
.sfm__submenu {
  display: none;
}

/* DESKTOP FLYOUT RULES
   768px must match side_flyout_menu.js. Do not change only one of them. */
@media (min-width: 768px) {
  .sfm__submenu {
    --sfm-slide-x: -10px;
    --sfm-scale-origin: left top;
    display: block;
    position: absolute;
    z-index: 1000;
    top: 0;
    width: max(100%, var(--sfm-submenu-width));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity, transform, visibility;
    transition-duration: var(--sfm-transition-speed), var(--sfm-transition-speed), 0s;
    transition-timing-function: ease, ease, linear;
    transition-delay: 0s, 0s, var(--sfm-transition-speed);
  }

  /* Default direction follows the sidebar; forced direction overrides it. */
  .sfm--direction-automatic.sfm--left .sfm__submenu,
  .sfm--direction-right .sfm__submenu {
    right: auto;
    left: calc(100% + var(--sfm-flyout-gap));
  }

  .sfm--direction-automatic.sfm--right .sfm__submenu,
  .sfm--direction-left .sfm__submenu {
    --sfm-slide-x: 10px;
    --sfm-scale-origin: right top;
    right: calc(100% + var(--sfm-flyout-gap));
    left: auto;
  }

  /* Automatic viewport-edge correction. STRUCTURAL. */
  .sfm .sfm__item--opens-left > .sfm__submenu {
    --sfm-slide-x: 10px;
    --sfm-scale-origin: right top;
    right: calc(100% + var(--sfm-flyout-gap));
    left: auto;
  }

  .sfm .sfm__item--opens-right > .sfm__submenu {
    --sfm-slide-x: -10px;
    --sfm-scale-origin: left top;
    right: auto;
    left: calc(100% + var(--sfm-flyout-gap));
  }

  /* Transition starting states. */
  .sfm--transition-none .sfm__submenu,
  .sfm--transition-fade .sfm__submenu {
    transform: none;
  }

  .sfm--transition-none .sfm__submenu {
    transition: none;
  }

  .sfm--transition-slide .sfm__submenu {
    opacity: 1;
    transform: translateX(var(--sfm-slide-x));
  }

  .sfm--transition-fade-and-slide .sfm__submenu {
    transform: translateX(var(--sfm-slide-x));
  }

  .sfm--transition-scale-gently .sfm__submenu {
    transform: scale(0.96);
    transform-origin: var(--sfm-scale-origin);
  }

  /* JavaScript supplies hover delay; :hover remains as a no-JS fallback. */
  .sfm:not(.sfm--enhanced) .sfm__item--parent:hover > .sfm__submenu,
  .sfm__item--parent:focus-within > .sfm__submenu,
  .sfm__item--open > .sfm__submenu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  /* Desktop shadows selected in Admin. Values are SAFE TO CHANGE. */
  .sfm-box--shadow-subtle .sfm__submenu {
    filter: drop-shadow(0 0.35rem 0.35rem rgba(0, 0, 0, 0.16));
  }

  .sfm-box--shadow-strong .sfm__submenu {
    filter: drop-shadow(0 0.6rem 0.65rem rgba(0, 0, 0, 0.28));
  }
}

/* MOBILE/SMALL-SCREEN ACCORDION RULES
   767.98px pairs with the 768px JavaScript/desktop breakpoint. */
@media (max-width: 767.98px) {
  .sfm__submenu {
    position: static;
    width: 100%;
    padding-block-start: var(--sfm-gap);
    padding-inline-start: 1rem; /* Child-level indentation: SAFE TO CHANGE. */
  }

  /* No-animation option. */
  .sfm--mobile-none .sfm__item--open > .sfm__submenu {
    display: block;
  }

  /* Animated accordions use a grid row so height remains fully responsive. */
  .sfm--mobile-slide .sfm__submenu,
  .sfm--mobile-fade-and-slide .sfm__submenu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 1;
    pointer-events: none;
    transition: grid-template-rows var(--sfm-transition-speed) ease,
                opacity var(--sfm-transition-speed) ease,
                visibility 0s linear var(--sfm-transition-speed);
  }

  .sfm--mobile-fade-and-slide .sfm__submenu {
    opacity: 0;
  }

  .sfm--mobile-slide .sfm__item--open > .sfm__submenu,
  .sfm--mobile-fade-and-slide .sfm__item--open > .sfm__submenu {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .sfm--mobile-slide .sfm__submenu > .sfm__list,
  .sfm--mobile-fade-and-slide .sfm__submenu > .sfm__list {
    min-height: 0;
    overflow: hidden;
  }
}

/* Accessibility: remove movement when the visitor requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sfm__row,
  .sfm__toggle > span,
  .sfm__submenu {
    transition: none;
  }
}