/* Mahina shared navigation, approved review revision 2 — 2026-09-08.
   35.2px × 0.8 = 28.16px; #78787b blended 20% toward white = #939395.
   Retain the previous 42.24px line box, 8px item padding and 2px grid gap.
   Only the navigation dialog is marked by the companion script. */

html body [data-mahina-navigation-overlay],
html body .overlay.mahina-menu-overlay[data-mahina-navigation-overlay] {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  overscroll-behavior: contain;
}

html body [data-mahina-navigation-panel],
html body .mahina-menu-panel.nav-drawer[data-mahina-navigation-panel] {
  --mahina-navigation-previous-size: clamp(20px, 3.36vw, 35.2px);
  box-sizing: border-box !important;
  /* Legacy drawers can retain a flex/grid gap. The three panel regions use
     their own explicit spacing below, never an additional inherited gap. */
  display: block !important;
  gap: 0 !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100svh - 44px) !important;
  max-height: calc(100dvh - 44px) !important;
  margin: 0 !important;
  padding: 20px clamp(22px, 4vw, 42px) !important;
  border-radius: 28px !important;
  overflow-x: hidden !important;
  /* Normally the whole panel fits. Retain real scrolling for zoom, unusually
     short screens or translated labels that genuinely need more room. */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  transition: opacity 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-head] {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 42px !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-list] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  text-align: center !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-list] > :is(a, button) {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #939395 !important;
  font-family: inherit !important;
  font-size: calc(var(--mahina-navigation-previous-size) * 0.8) !important;
  font-weight: 300 !important;
  line-height: calc(var(--mahina-navigation-previous-size) * 1.2) !important;
  letter-spacing: calc(var(--mahina-navigation-previous-size) * -0.04) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer;
  transform: none !important;
  transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-list] > :is(a, button):is(:hover, :focus-visible, :active) {
  color: #333333 !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  transform: none !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-list] > :is(a, button):is(.is-current, [aria-current="page"]) {
  color: #242424 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transform: none !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-list] > :is(a, button):focus-visible {
  outline: 1px solid #333333 !important;
  outline-offset: -3px !important;
  border-radius: 8px !important;
}

html body [data-mahina-navigation-panel] [data-mahina-navigation-foot] {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  gap: 8px 22px !important;
}

/* MENU uses the exact MAIN/BEST/JOURNAL SVG, preserving the original button
   and its click handler. Desktop labels retain the site's localized wording. */
html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] .mahina-header-menu-glyph {
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}

html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] .mahina-header-menu-glyph::before,
html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] .mahina-header-menu-glyph::after {
  content: none !important;
}

html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] .mahina-header-menu-glyph > svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  flex: none !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (min-width: 761px) {
  html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] {
    min-width: 72px !important;
    gap: 9px !important;
  }

  html body .mahina-header-menu-trigger[data-mahina-navigation-trigger] > .mahina-header-menu-label {
    display: inline !important;
  }
}

@media (max-width: 760px) {
  html body [data-mahina-navigation-overlay],
  html body .overlay.mahina-menu-overlay[data-mahina-navigation-overlay] {
    padding: 16px !important;
  }

  html body [data-mahina-navigation-panel],
  html body .mahina-menu-panel.nav-drawer[data-mahina-navigation-panel] {
    max-height: calc(100svh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 16px 22px !important;
    border-radius: 22px !important;
  }

  html body [data-mahina-navigation-panel] [data-mahina-navigation-list] {
    padding: 12px 0 !important;
  }
}

@media (max-height: 710px) {
  html body [data-mahina-navigation-overlay],
  html body .overlay.mahina-menu-overlay[data-mahina-navigation-overlay] {
    padding: 12px !important;
  }

  html body [data-mahina-navigation-panel],
  html body .mahina-menu-panel.nav-drawer[data-mahina-navigation-panel] {
    max-height: calc(100svh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding-block: 12px !important;
  }

  html body [data-mahina-navigation-panel] [data-mahina-navigation-list] {
    padding-block: 8px !important;
  }

  /* A short desktop viewport needs slightly smaller hit-row padding, not
     clipped links. The normal-height approved row spacing stays unchanged. */
  html body [data-mahina-navigation-panel] [data-mahina-navigation-list] > :is(a, button) {
    padding-block: 4px !important;
    padding-block: clamp(4px, calc(10dvh - 60px), 8px) !important;
  }

  html body [data-mahina-navigation-panel] [data-mahina-navigation-foot] {
    padding-top: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body [data-mahina-navigation-overlay],
  html body [data-mahina-navigation-overlay] > *,
  html body [data-mahina-navigation-panel],
  html body [data-mahina-navigation-panel] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Revision B: at the homepage top the logo uses the same resting cursor as
   its surrounding header. Its link and keyboard focus ring remain intact. */
html body .site-header a.brand-link[data-mahina-home-at-top],
html body .site-header a.brand-link[data-mahina-home-at-top] * {
  cursor: default !important;
}

html body .site-header a.brand-link[data-mahina-home-at-top]:is(:hover, :active) {
  opacity: 1 !important;
  filter: none !important;
  scale: 1 !important;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (forced-colors: none) {
  html body .site-header a.brand-link[data-mahina-home-at-top],
  html body .site-header a.brand-link[data-mahina-home-at-top] * {
    cursor: url("/assets/mahina-cursor-native-v1.svg") 3 2, auto !important;
  }
}

/* MAP's charcoal cap includes shared navigation. Other sites keep the
   previously approved active-link color and weight. */
html:has(#heroTitle[data-i18n="heroTitle"]) body [data-mahina-navigation-panel]
  [data-mahina-navigation-list] > :is(a, button):is(.is-current, [aria-current="page"]) {
  color: #333333 !important;
}