/*
 * Redbook accessibility fixes (WCAG 2.2 AA) for the sidebar and Themify's page chrome, with
 * assets/js/a11y.js. Loaded before Themify's concatenated stylesheet (which includes style.css),
 * so rules that override style.css carry an id to win on specificity, not order.
 */

/* A collapsed sidebar is only moved off-screen by style.css. Hidden once the slide-out ends,
   shown at once when it opens. a11y.js also makes it inert: Themify shows open submenus with
   visibility: visible, which would override this for them. */
#spa-wrapper.collapsed #spa-sidebar {
  visibility: hidden;
  transition: transform 0.3s ease, width 0.2s ease, visibility 0s linear 0.3s;
}

/* The tab's arrow pointed away from where the panel moves (› while open); it now points the
   way a tap will move it. */
#spa-wrapper:not(.collapsed) #sidebar-toggle .toggle-icon { transform: rotate(180deg); }
#spa-wrapper.collapsed #sidebar-toggle .toggle-icon { transform: none; }

/* Phones (style.css's breakpoint). The menu tab sits over the page's left edge, so it is
   narrower and the content keeps clear of it; at 320px the open sidebar fits the screen. */
@media (max-width: 768px) {
  #spa-wrapper #sidebar-toggle { width: 24px; height: 44px; padding: 0; }
  #spa-wrapper #spa-content { padding-left: 8px; }
  #spa-wrapper #spa-sidebar { width: min(300px, calc(100vw - 40px)); }
}

/* Sidebar search. Below Themify's mobile menu point (600px here) its header search moves into a
   menu this site never shows, which left phones with no site search (WCAG 1.4.10). Shown only
   then, keyed to Themify's own body class. */
#spa-sidebar .spa-sidebar-search { display: none; }
body.mobile_menu_active #spa-sidebar .spa-sidebar-search { display: block; margin: 0 0 20px; }
#spa-sidebar .spa-sidebar-search label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #ffffff; }
#spa-sidebar .spa-sidebar-search__row { display: flex; gap: 8px; }
#spa-sidebar .spa-sidebar-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  font-size: 16px; /* 16px or more, or iOS zooms in on focus */
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
}
#spa-sidebar .spa-sidebar-search button {
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #2c2a29;
  background: #d3bc8d;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
#spa-sidebar .spa-sidebar-search :is(input, button):focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* The fixed sidebar is 100vh plus its padding, so it starts 40px above the viewport, and at the
   top of the page Themify's header covers its first 73px. Focus scrolled into it would stop out
   of sight there (WCAG 2.4.11); this keeps it below. Nothing moves at rest. */
@media (min-width: 769px) {
  #spa-sidebar { scroll-padding-top: 125px; }
}

/* Submenu toggle (a11y.js): sits in the same grid cell as the link, over the arrow that the
   footer script's pointer handler used, so the link keeps its size and wrapping. */
#spa-sidebar .has-submenu-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
#spa-sidebar .has-submenu-toggle > a,
#spa-sidebar .has-submenu-toggle > .spa-submenu-toggle {
  grid-row: 1;
  grid-column: 1;
}
#spa-sidebar .has-submenu-toggle > .sub-menu { grid-row: 2; }
#spa-sidebar .has-submenu-toggle > a::after { content: none; }

#spa-sidebar .spa-submenu-toggle {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: stretch;
  width: 30px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
/* The arrow style.css drew on the link. */
#spa-sidebar .spa-submenu-toggle::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.3s ease;
}
#spa-sidebar .spa-submenu-toggle[aria-expanded="true"]::before { transform: translateY(-50%) rotate(90deg); }
#spa-sidebar .spa-submenu-toggle:hover { background: #444444; }
#spa-sidebar .spa-submenu-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Themify's back-to-top link is faded out at the top of the page but stayed focusable. */
.back-top.back-top-hide { visibility: hidden; }
/* Its link has no box of its own (the arrow is drawn around it), so the round button shows the
   focus: a white ring inside a dark one, visible on light and dark backgrounds (WCAG 2.4.7).
   Themify sets the button's shadow under an id, hence the :is(). */
:is(#footer, #pagewrap) .back-top-float:has(a:focus-visible) {
  outline: 3px solid #2c2a29;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #ffffff;
}

/* style.css turns on smooth scrolling for everyone. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #spa-wrapper.collapsed #spa-sidebar { transition: visibility 0s; }
}