/* ============================================
   Open Menus — Hamburger + Off-canvas
   ============================================ */

:root {
  --open-toggle-color: #2b2b2b;
  --open-toggle-top: 50%;
  --open-toggle-right: 16px;
  --open-toggle-left: auto;
  --open-toggle-color-open: #333333;
  --open-menu-bg: #ffffff;
  --open-overlay-bg: rgba(0, 0, 0, 0.6);
  --open-menu-text: #333333;
  --open-menu-text-secondary: #555555;
  --open-menu-hover-bg: #eceef6;
  --open-menu-active-color: #B3991A;
  --open-focus-color: #B3991A;
  --open-menu-row-bg: #ffffff;
  --open-menu-row-bg-alt: #fafafa;
  --open-menu-row-border: 1px solid #e4e4e4;
  --open-menu-speed: 0.3s;
}

/* ==========================================================================
   Toggle button reset — nuclear.
   Covers every pseudo-state so Drupal/theme styles can't leak in.
   ========================================================================== */
.open-menu-toggle,
.open-menu-toggle:link,
.open-menu-toggle:visited,
.open-menu-toggle:hover,
.open-menu-toggle:focus,
.open-menu-toggle:focus-visible,
.open-menu-toggle:focus-within,
.open-menu-toggle:active,
.open-menu-close,
.open-menu-close:link,
.open-menu-close:visited,
.open-menu-close:hover,
.open-menu-close:focus,
.open-menu-close:focus-visible,
.open-menu-close:focus-within,
.open-menu-close:active {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---- Open toggle (lives in the header) ----
   Positioned absolutely so it doesn't push the logo and main menu down.
   Vertically centred in the header via `translate` (separate from the
   `transform` property the reset above clears). */
.content-header {
  position: relative;
}

.open-menu-toggle {
  position: absolute !important;
  top: var(--open-toggle-top) !important;
  right: var(--open-toggle-right) !important;
  left: var(--open-toggle-left) !important;
  translate: 0 -50%;
  padding: 10px !important;
  cursor: pointer !important;
  color: var(--open-toggle-color) !important;
  z-index: 1100;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Keep the toggle hidden until the script has set it up, and when the script
   finds no menu links to show. Prevents an empty button from flashing. */
.open-menu-toggle[hidden],
.open-menu-toggle:not([data-once~="open-menus"]) {
  display: none !important;
}

/* ---- Close button (lives inside the off-canvas panel) ---- */
.open-menu-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  padding: 10px !important;
  cursor: pointer !important;
  color: var(--open-toggle-color-open) !important;
  z-index: 1060;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Keyboard focus ring for both buttons. Declared after the reset so it wins. */
.open-menu-toggle:focus-visible,
.open-menu-close:focus-visible {
  outline: 2px solid var(--open-focus-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ---- SVG icons ---- */
.open-icon {
  display: block;
  pointer-events: none;
  fill: none !important;
  stroke: currentColor !important;
}

/* ==========================================================================
   Off-canvas panel
   Slides with transform (GPU-friendly) and is hidden with visibility when
   closed, so its links can't be tabbed to while it's off screen.
   ========================================================================== */
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: var(--open-menu-bg);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--open-menu-speed) ease, visibility 0s linear var(--open-menu-speed);
  z-index: 1050;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.offcanvas-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--open-menu-speed) ease, visibility 0s;
}

/* ==========================================================================
   Overlay
   Uses opacity + visibility (not display) so the fade actually animates.
   ========================================================================== */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--open-overlay-bg);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--open-menu-speed) ease, visibility 0s linear var(--open-menu-speed);
  cursor: pointer;
}

.offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--open-menu-speed) ease, visibility 0s;
}

/* Stop the page behind the menu from scrolling while it's open. */
html.open-menu-is-open,
html.open-menu-is-open body {
  overflow: hidden;
}

/* ==========================================================================
   Menu content
   ========================================================================== */
.mobile-menu {
  display: none;
}

.mobile-menu.is-open {
  display: block;
}

/* ==========================================================================
   Menu link reset — full nuclear.
   Drupal base themes style bare ul/li/a aggressively. We override everything
   with high specificity + !important so nothing leaks through.
   ========================================================================== */
.offcanvas-menu .mobile-menu ul,
.offcanvas-menu .mobile-menu ul ul {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.offcanvas-menu .mobile-menu ul {
  margin-top: 52px !important;
}

.offcanvas-menu .mobile-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: var(--open-menu-row-border) !important;
}

.offcanvas-menu .mobile-menu li:last-child {
  border-bottom: none !important;
}

/* Zebra rows */
.offcanvas-menu .mobile-menu li:nth-child(odd) {
  background: var(--open-menu-row-bg) !important;
}

.offcanvas-menu .mobile-menu li:nth-child(even) {
  background: var(--open-menu-row-bg-alt) !important;
}

/* ---- Link styles ---- */
.offcanvas-menu .mobile-menu a,
.offcanvas-menu .mobile-menu a:link,
.offcanvas-menu .mobile-menu a:visited {
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--open-menu-text) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 44px;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.offcanvas-menu .mobile-menu a:hover,
.offcanvas-menu .mobile-menu a:focus,
.offcanvas-menu .mobile-menu a:active {
  background-color: var(--open-menu-hover-bg) !important;
  color: var(--open-menu-text) !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.offcanvas-menu .mobile-menu a:focus-visible {
  box-shadow: 0 0 0 2px var(--open-focus-color) inset !important;
  outline: none !important;
}

.offcanvas-menu .mobile-menu a[aria-current="page"],
.offcanvas-menu .mobile-menu a.is-active {
  color: var(--open-menu-active-color) !important;
  font-weight: 600 !important;
}

/* Nested sub-menu indent */
.offcanvas-menu .mobile-menu ul ul {
  margin-top: 0 !important;
}

.offcanvas-menu .mobile-menu ul ul a,
.offcanvas-menu .mobile-menu ul ul a:link,
.offcanvas-menu .mobile-menu ul ul a:visited {
  padding-left: 40px !important;
  font-size: 0.92rem !important;
  color: var(--open-menu-text-secondary) !important;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --open-menu-speed: 0s;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .content-header {
    position: sticky;
    top: 0;
    z-index: 300;
    width: 100%;
  }
}