/*
 * PBK — semantic state tokens for the header, navigation and breadcrumbs.
 *
 * The compiled component layer (assets/dist/app.css) still carries hard-coded
 * palette values inside cascade layers. This unlayered stylesheet takes over
 * only the colour pairs of navigation states and expresses them through
 * semantic tokens. Default values reproduce the current design exactly
 * (theme.json: text = slate-900, surface-strong = slate-100, border =
 * slate-200, surface-raised = white), so the default mode does not change.
 *
 * High contrast redefines the tokens on the html element: yellow text and
 * icons on a black background, black text and icons on a yellow background.
 * Icons and chevrons inherit currentColor, so they follow automatically.
 *
 * Loaded after pbk-accessibility-preferences. No !important and no global
 * resets; selectors are kept at minimal specificity via :where().
 */

:root {
  /* Navigation items (desktop triggers/links, language switcher, mobile tree). */
  --pbk-nav-item-text: var(--pbk-color-text, #0f172a);
  --pbk-nav-item-surface: transparent;
  --pbk-nav-item-surface-active: var(--pbk-color-surface-strong, #f1f5f9);
  --pbk-nav-item-text-active: var(--pbk-color-text, #0f172a);

  /* Submenu panel. */
  --pbk-nav-panel-surface: var(--pbk-color-surface-raised, #ffffff);
  --pbk-nav-panel-border: var(--pbk-color-border, #e2e8f0);
  --pbk-nav-panel-text: var(--pbk-color-text, #0f172a);
  --pbk-nav-panel-muted: var(--color-slate-500, #64748b);

  /* Breadcrumbs. Defaults keep the original zinc palette. */
  --pbk-breadcrumbs-link: var(--color-zinc-500, #71717a);
  --pbk-breadcrumbs-link-hover: var(--color-zinc-700, #3f3f46);
  --pbk-breadcrumbs-current: var(--color-zinc-900, #18181b);
  --pbk-breadcrumbs-separator: var(--color-zinc-400, #a1a1aa);
}

/*
 * High contrast: base text tokens flip automatically through --pbk-color-*.
 * Only pairs that must invert (yellow surface + black content) and values
 * without an existing semantic token are redefined here.
 */
html[data-pbk-color-mode="high-contrast"] {
  --pbk-nav-item-surface-active: var(--pbk-color-action, #ff0);
  --pbk-nav-item-text-active: var(--pbk-color-on-action, #000);
  --pbk-nav-panel-muted: currentColor;
  --pbk-breadcrumbs-link: var(--pbk-color-text, #ff0);
  --pbk-breadcrumbs-link-hover: var(--pbk-color-text, #ff0);
  --pbk-breadcrumbs-current: var(--pbk-color-text, #ff0);
  --pbk-breadcrumbs-separator: var(--pbk-color-text, #ff0);
}

/* Desktop navigation: base, hover/focus, current/ancestor. */
:where(.cn-navigation-menu-trigger, .cn-navigation-menu-link) {
  background-color: var(--pbk-nav-item-surface);
  color: var(--pbk-nav-item-text);
}

:where(.cn-navigation-menu-trigger, .cn-navigation-menu-link):is(:hover, :focus) {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

:where(.cn-navigation-menu-link)[data-active="true"],
:where(.cn-navigation-menu-link)[aria-current="page"],
:where(.cn-navigation-menu-item.is-current) > :where(.cn-navigation-menu-link, .cn-navigation-menu-trigger),
:where(.cn-navigation-menu-item.is-current) > div > :where(.cn-navigation-menu-link, .cn-navigation-menu-trigger),
:where(.cn-navigation-menu-item.is-ancestor) > :where(.cn-navigation-menu-trigger),
:where(.cn-navigation-menu-item.is-ancestor) > div > :where(.cn-navigation-menu-trigger) {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

/*
 * Open submenu. In the default mode the open trigger keeps its current look
 * (the state overlaps with focus), so the explicit pair applies only in
 * high contrast, where an unambiguous yellow/black pair is required.
 */
html[data-pbk-color-mode="high-contrast"] :where(.cn-navigation-menu-trigger)[aria-expanded="true"] {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

/* Submenu panel surface and content. */
:where(.cn-navigation-menu-content) {
  border-color: var(--pbk-nav-panel-border);
  background-color: var(--pbk-nav-panel-surface);
  color: var(--pbk-nav-panel-text);
}

:where(.cn-navigation-menu-content) :where(.text-slate-500) {
  color: var(--pbk-nav-panel-muted);
}

/* Language switcher. */
:where(.pbk-language-switcher) :where(.pbk-language-switcher__link) {
  color: var(--pbk-nav-item-text);
}

:where(.pbk-language-switcher) :where(.pbk-language-switcher__link):is(:hover, :focus-visible) {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

/* Mobile drawer toggle and navigation tree. */
:where(.pbk-mobile-nav-toggle.kt-btn) {
  color: var(--pbk-nav-item-text);
}

:where(.cn-tree-link) {
  color: var(--pbk-nav-item-text);
}

:where(.cn-tree-link):hover {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

:where(.cn-tree-link.is-current),
:where(.cn-tree-link)[aria-current="page"] {
  background-color: var(--pbk-nav-item-surface-active);
  color: var(--pbk-nav-item-text-active);
}

:where(.cn-tree-section-label) {
  color: var(--pbk-nav-item-text);
}

html[data-pbk-color-mode="high-contrast"] :where(.cn-tree-item-icon) {
  color: currentColor;
}

/* Breadcrumbs: links, current item, separator and the home icon are driven
 * by mode tokens; icons inherit currentColor from the markup. */
:where(.pbk-breadcrumbs) {
  color: var(--pbk-breadcrumbs-link);
}

:where(.pbk-breadcrumbs__link) {
  color: var(--pbk-breadcrumbs-link);
}

:where(.pbk-breadcrumbs__link):is(:hover, :focus-visible) {
  color: var(--pbk-breadcrumbs-link-hover);
}

:where(.pbk-breadcrumbs__separator) {
  color: var(--pbk-breadcrumbs-separator);
}

:where(.pbk-breadcrumbs__current) {
  color: var(--pbk-breadcrumbs-current);
}