/* Three widths share one menu tree and the existing rail geometry contract. */
.dafa-navigation-width { display: none; }
.dafa-navigation-width-menu[hidden] { display: none !important; }
@media (min-width: 1024px) {
  /* State is available in the head: paint final labels without waiting for footer JS. */
  .dafa-navigation-width-label-compact,
  [data-dafa-width-label],
  .dafa-rail-appearance [data-dafa-appearance-mode] { display: none; }
  html:not([data-dafa-nav-mode]) [data-dafa-width-label="expanded"],
  html[data-dafa-nav-mode="expanded"] [data-dafa-width-label="expanded"],
  html[data-dafa-nav-mode="compact"] [data-dafa-width-label="compact"],
  html[data-dafa-nav-mode="collapsed"] [data-dafa-width-label="collapsed"],
  html.dafa-nav-compact .dafa-navigation-width-label-compact,
  html:not([data-dafa-color-mode]) .dafa-rail-appearance [data-dafa-appearance-mode="system"],
  html[data-dafa-color-mode="system"] .dafa-rail-appearance [data-dafa-appearance-mode="system"],
  html[data-dafa-color-mode="light"] .dafa-rail-appearance [data-dafa-appearance-mode="light"],
  html[data-dafa-color-mode="dark"] .dafa-rail-appearance [data-dafa-appearance-mode="dark"] { display: inline; }
  html.dafa-nav-compact .dafa-navigation-width-label-full { display: none; }
  .dafa-navigation-width-label { white-space: nowrap; }
  .dafa-rail-appearance .footer-appearance__icon > span { line-height: 0; }

  .dafa-navigation-width { display: block; flex: 0 0 auto; }
  .dafa-navigation-width .dafa-navigation-collapse {
    width: calc(100% - 24px); min-height: 44px; padding: 10px 12px;
    font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--dafa-text);
  }
  .dafa-navigation-width .dafa-navigation-collapse:hover,
  .dafa-navigation-width .dafa-navigation-collapse[aria-expanded="true"] { color: var(--dafa-text); background: var(--dafa-surface-muted); }
  .dafa-navigation-width .dafa-collapse-context { width: 20px; height: 20px; flex: 0 0 20px; }
  .dafa-navigation-width .dafa-navigation-width-current { flex: 0 0 auto; font-size: 12px; font-weight: 400; line-height: 1.6; color: color-mix(in srgb, var(--dafa-text-soft) 60%, var(--dafa-surface)); }
  html.dafa-nav-collapsed .dafa-navigation-width .dafa-collapse-context { display: block; }
  .dafa-navigation-width-menu {
    position: fixed; z-index: 45; bottom: 12px; left: var(--dafa-rail-width);
    display: flex; flex-direction: column; gap: 2px;
    width: 196px; max-width: calc(100vw - var(--dafa-rail-width) - 16px);
    max-height: calc(100dvh - 100px); overflow-y: auto;
    padding: 5px; border: 0; border-radius: 9px;
    background: var(--dafa-surface); color: var(--dafa-text); box-shadow: 0 8px 28px rgb(0 0 0 / 14%);
  }
  .dafa-navigation-width-menu > button {
    display: flex; align-items: center; justify-content: flex-start; gap: 9px;
    width: 100%; min-height: 40px; margin: 0; padding: 0 10px;
    border: 0; border-radius: 5px; background: transparent; color: var(--dafa-text);
    font-size: 13px; font-weight: 400; text-align: left; cursor: pointer;
  }
  .dafa-navigation-width-option-icon { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.7; }
  .dafa-navigation-width-menu > button:hover,
  .dafa-navigation-width-menu > button[aria-checked="true"] { background: var(--dafa-surface-muted); }
  .dafa-navigation-width-menu > button[aria-checked="true"]::after {
    content: ""; width: 8px; height: 4px; margin-left: auto;
    border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg);
  }
  .dafa-navigation-width :is(button):focus-visible { outline: 2px solid var(--dafa-accent); outline-offset: -2px; }

  html[data-dafa-layout="sidebar"].dafa-nav-compact { --dafa-rail-width: 104px; }
  html.dafa-nav-compact #site-navigation.primary-navigation { padding-inline: 8px; }
  html.dafa-nav-compact #site-navigation > ul > li { grid-template-columns: minmax(0, 1fr); }
  html.dafa-nav-compact #site-navigation > ul > li > a { grid-column: 1; justify-content: flex-start; gap: 8px; padding-inline: 12px; white-space: nowrap; }
  html.dafa-nav-compact #site-navigation > ul > li:not(.menu-item-has-children) > a { grid-column: 1 / -1; }
  html.dafa-nav-compact #site-navigation > ul > li > a .dafa-nav-label {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; flex-shrink: 0;
  }
  html.dafa-nav-compact #site-navigation > ul > li > .submenu-toggle { display: none; }
  html.dafa-nav-collapsed .dafa-navigation-rail .dafa-brand-svg__svg { width: 40px; height: 40px; flex-basis: 40px; }
  html.dafa-nav-compact .dafa-navigation-rail .dafa-brand-svg__svg { width: 48px; height: 48px; flex-basis: 48px; }
  html.dafa-nav-compact .dafa-navigation-rail .site-branding { padding-inline: 20px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .dafa-navigation-rail > .header-actions { margin-inline: 8px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact body .dafa-navigation-rail .header-actions > .header-ai,
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-auth-controls > .header-login-link,
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-auth-controls > .header-user > .header-user__toggle,
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-auth-controls > .header-notice > .header-notice__toggle,
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-search__toggle {
    justify-content: flex-start; padding-inline: 12px; gap: 8px; font-size: 14px; white-space: nowrap; border-radius: 8px;
  }
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-auth-controls > .header-user > .header-user__toggle { height: 44px; min-height: 44px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-user__toggle .header-user__avatar { width: 20px; height: 20px; flex-basis: 20px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-user__crown { left: 24px; bottom: 5px; width: 12px; height: 12px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .header-user__crown svg { width: 9px; height: 9px; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .dafa-desktop-search-label,
  html[data-dafa-sidebar-tools].dafa-nav-compact .dafa-rail-tool-label { display: inline; }
  html[data-dafa-sidebar-tools].dafa-nav-compact .dafa-desktop-search-scope { display: none; }
  html.dafa-nav-compact .dafa-navigation-rail > .dafa-rail-appearance { margin-inline: 8px; }
  html.dafa-nav-compact .dafa-rail-appearance .footer-appearance__trigger { justify-content: flex-start; gap: 8px; padding-inline: 12px; }
  html.dafa-nav-compact .dafa-rail-appearance .footer-appearance__text { display: flex; }
  html.dafa-nav-compact .dafa-rail-appearance .footer-appearance__state { display: none; }
  html.dafa-nav-compact .dafa-navigation-width .dafa-navigation-collapse { width: calc(100% - 16px); margin-inline: 8px; padding-inline: 12px; justify-content: flex-start; gap: 8px; }
  html.dafa-nav-compact .dafa-navigation-width .dafa-navigation-width-label,
  html.dafa-nav-compact .dafa-navigation-width .dafa-navigation-width-label-compact { position: static; width: auto; height: auto; clip-path: none; overflow: visible; font-size: 14px; }
  html.dafa-nav-collapsed .dafa-navigation-width-current { display: none; }
}


/* The desktop rail and mobile drawer render the same menu states. */
.dafa-navigation-rail {
  --dafa-rail-highlight-bg: color-mix(in srgb, var(--dafa-text) 3%, var(--dafa-surface));
}
#site-navigation {
  --dafa-nav-item-interaction-bg: var(--dafa-rail-highlight-bg, color-mix(in srgb, var(--dafa-text) 3%, var(--dafa-surface)));
}
@media (min-width: 1024px) {
  #site-navigation { --dafa-nav-item-current-bg: var(--dafa-nav-item-interaction-bg); }
  html:not([data-dafa-color-scheme="dark"]) .dafa-navigation-rail {
    --dafa-rail-highlight-bg: color-mix(in srgb, var(--dafa-text) 5%, var(--dafa-surface));
  }
  html[data-dafa-sidebar-tools] body .dafa-navigation-rail > .header-actions :is(.header-login-link, .header-ai, .header-search__toggle, .header-notice__toggle),
  html[data-dafa-sidebar-tools].dafa-nav-compact body .dafa-navigation-rail > .header-actions > .header-ai,
  html[data-dafa-sidebar-tools] body .dafa-navigation-rail > :is(.dafa-rail-appearance, .dafa-navigation-width) :is(.footer-appearance__trigger, .dafa-navigation-collapse),
  .dafa-navigation-rail #site-navigation.primary-navigation .sub-menu > li.menu-item > a:any-link {
    border-radius: 10px;
  }
}
@media (min-width: 1024px) and (hover: hover) {
  html[data-dafa-sidebar-tools] body .dafa-navigation-rail > .header-actions :is(.header-login-link, .header-ai, .header-search__toggle, .header-user__toggle, .header-notice__toggle):hover,
  html[data-dafa-sidebar-tools] body .dafa-navigation-rail > :is(.dafa-rail-appearance, .dafa-navigation-width) :is(.footer-appearance__trigger, .dafa-navigation-collapse):hover {
    background: var(--dafa-rail-highlight-bg);
    color: var(--dafa-accent-strong);
  }
  html[data-dafa-sidebar-tools] body .dafa-navigation-rail > .header-actions > .header-ai:hover > .dafa-ai-icon { color: inherit; }
}
#site-navigation ul > li.menu-item {
  --dafa-nav-item-color: initial;
  --dafa-nav-item-selected-bg: initial;
  --dafa-nav-item-hover-bg: initial;
  --dafa-nav-item-bg: var(--dafa-nav-item-selected-bg, var(--dafa-nav-item-hover-bg, transparent));
}
#site-navigation ul > li.menu-item:has(> :where(a, .submenu-toggle):is(:active, :focus-visible)) {
  --dafa-nav-item-color: var(--dafa-accent-strong);
  --dafa-nav-item-hover-bg: var(--dafa-nav-item-interaction-bg);
}
@media (hover: hover) {
  #site-navigation ul > li.menu-item:has(> :where(a, .submenu-toggle):hover) {
    --dafa-nav-item-color: var(--dafa-accent-strong);
    --dafa-nav-item-hover-bg: var(--dafa-nav-item-interaction-bg);
  }
}
#site-navigation ul > li.menu-item:is(.current-menu-item, .current_page_item, .current-menu-parent, .current-menu-ancestor, .current-post-ancestor, .current-blog-ancestor, .is-rail-menu-open, :has(> a[aria-current="page"])) {
  --dafa-nav-item-color: var(--dafa-accent-strong);
  --dafa-nav-item-selected-bg: var(--dafa-nav-item-current-bg, color-mix(in srgb, var(--dafa-accent) 7%, var(--dafa-surface)));
}
#site-navigation.primary-navigation > ul > li > a,
#site-navigation.primary-navigation > ul > li > a:hover {
  color: var(--dafa-nav-item-color, var(--dafa-text));
  background: var(--dafa-nav-item-bg);
  border-radius: 10px;
}
#site-navigation.primary-navigation > ul > li > a .dafa-nav-icon { color: inherit; }
#site-navigation.primary-navigation li.menu-item > :is(a, .submenu-toggle):focus-visible {
  outline: 2px solid var(--dafa-accent);
  outline-offset: -2px;
}
#site-navigation.primary-navigation .submenu-toggle {
  background: transparent;
  color: var(--dafa-text-soft);
}
#site-navigation.primary-navigation .submenu-toggle:active { transform: none; }
#site-navigation.primary-navigation :where(li.menu-item) > .submenu-toggle { color: var(--dafa-nav-item-color, var(--dafa-text-soft)); }
#site-navigation.primary-navigation .submenu-toggle:is([aria-expanded="true"], :focus-visible, :active) { color: var(--dafa-accent-strong); }
@media (hover: hover) {
  #site-navigation.primary-navigation .submenu-toggle:hover { color: var(--dafa-accent-strong); }
}
#site-navigation.primary-navigation .submenu-toggle::after { content: none; }
#site-navigation.primary-navigation .submenu-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, calc(-50% - 2px)) rotate(45deg);
}
#site-navigation.primary-navigation .submenu-toggle[aria-expanded="true"]::before {
  transform: translate(-50%, calc(-50% + 2px)) rotate(225deg);
}
@media (prefers-reduced-motion: no-preference) {
  #site-navigation.primary-navigation .submenu-toggle::before { transition: transform 0.18s ease; }
}
@media (min-width: 1024px) {
  html:not(.dafa-nav-compact, .dafa-nav-collapsed) #site-navigation > ul > li.menu-item-has-children > a {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-inline-end: 32px;
  }
}

/* Inline lists and rail flyouts share the same title-only menu rows. */
#site-navigation.primary-navigation > ul > li:not(.is-rail-menu-open) > .sub-menu {
  margin: 0 0 0 22px;
  padding: 4px 0 8px 12px;
  border-inline-start: 0;
}
#site-navigation.primary-navigation .sub-menu > li.menu-item > a:any-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--dafa-nav-item-color, var(--dafa-text));
  background: var(--dafa-nav-item-bg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#site-navigation.primary-navigation .sub-menu .dafa-mega-card__title { font: inherit; }
#site-navigation.primary-navigation .sub-menu .dafa-mega-card__desc { display: none; }

/* The drawer keeps its brand and appearance controls outside the scrolling list. */
#site-navigation > .dafa-drawer-brand,
.dafa-drawer-appearance { display: none; }
@media (max-width: 1023px) {
  #site-navigation.primary-navigation { display: flex; flex-direction: column; overflow: hidden; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  #site-navigation > .dafa-drawer-brand {
    display: inline-flex; flex: 0 0 auto; align-self: flex-start; align-items: center;
    min-height: 52px; margin-bottom: 12px; padding: 0 4px;
  }
  #site-navigation > .dafa-drawer-brand .dafa-brand-svg__copy { display: flex; }
  #site-navigation > .dafa-drawer-brand:focus-visible { outline: 2px solid var(--dafa-accent); outline-offset: -2px; }
  #site-navigation > ul { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--dafa-border) transparent; }
  #site-navigation > ul > li { margin-bottom: 4px; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; }
  #site-navigation > ul > li > a { padding-inline: 14px 46px; }
  #site-navigation > .dafa-drawer-appearance {
    display: block; flex: 0 0 auto; margin: 8px 0 0; padding: 0;
    border: 0; border-radius: 0; background: transparent;
  }
  .dafa-drawer-appearance .mobile-color-mode__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .dafa-drawer-appearance .mobile-color-mode__options {
    position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%; gap: 0; padding: 2px; border: 0;
    border-radius: 12px; background: color-mix(in srgb, var(--dafa-surface-muted) 50%, var(--dafa-surface)); box-shadow: none;
  }
  .dafa-drawer-appearance .mobile-color-mode__option {
    min-height: 44px; gap: 6px; padding: 0 8px; border: 0; border-radius: 10px;
    color: var(--dafa-text-soft); background: transparent; font-size: 13px; font-weight: 500; line-height: 1;
  }
  .dafa-drawer-appearance .mobile-color-mode__option svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .dafa-drawer-appearance .mobile-color-mode__option:active { transform: none; }
  html[data-dafa-color-mode="light"] .dafa-drawer-appearance [data-dafa-color-mode="light"],
  html[data-dafa-color-mode="dark"] .dafa-drawer-appearance [data-dafa-color-mode="dark"],
  html[data-dafa-color-mode="system"] .dafa-drawer-appearance [data-dafa-color-mode="system"] {
    color: var(--dafa-text); background: var(--dafa-surface-muted); font-weight: 500;
  }
}
