/* DALOO's OWN override sheet. NOT part of Nagish Li and not covered by its licence.
   ------------------------------------------------------------------------------
   Why this file exists: nl_color accepts only a fixed list of colour NAMES
   (blue|red|green|purple|yellow|pink|gray|brown|orange|turquoise|black). It does
   not accept a hex value, so the brand terracotta #e8714c cannot be passed as
   configuration. We therefore select the nearest supported name, "orange", and
   repaint it here.

   Specificity note, and it is load-bearing: every rule the widget injects is
   !important, and it injects its <style> into a <nagishli> element appended to
   <body>, i.e. AFTER this stylesheet in document order. Matching its specificity
   would therefore lose. Each selector below adds a leading `html` (and `html body`
   where the widget's own selector starts at an id) purely to outrank it. Do not
   "tidy" the leading element away.

   Scope is deliberately narrow: the widget's own chrome only. Nothing here touches
   the host page, and nothing here touches the user's own colour choices, which the
   widget applies to <body> through a different mechanism. */

:root {
  --daloo-a11y-primary: #e8714c;  /* brand terracotta */
  --daloo-a11y-light: #f0855f;    /* hover / active */
  --daloo-a11y-dark: #cf5b38;     /* inset shadow */
  --daloo-a11y-track: #eee;       /* unchanged from the widget */
}

/* The dropdown toggles that make up the visible bar. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle {
  background: var(--daloo-a11y-primary) !important;
  box-shadow: 0 1px 0 var(--daloo-a11y-light) inset, 0 -1px 0 var(--daloo-a11y-dark) inset !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle:hover,
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-toggle:focus {
  background: var(--daloo-a11y-light) !important;
}

/* Menu item separators. The widget also READS this colour back off the last item
   (border-bottom-color) and reuses it as the heading colour inside its modals, so
   overriding it here is what carries the brand into the "אודות" and statement
   panels as well. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown > .nl-dropdown-menu > li > div,
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange > .nl-dropdown:last-child > .nl-dropdown-menu > li:last-child > div {
  border-color: var(--daloo-a11y-primary) !important;
}

/* Scrollbars inside the bar and inside the modal overlay. */
html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange::-webkit-scrollbar-thumb,
html body #NagishLiOverlayContent.orange::-webkit-scrollbar-thumb {
  background: var(--daloo-a11y-primary) !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange::-webkit-scrollbar-thumb:active,
html body #NagishLiOverlayContent.orange::-webkit-scrollbar-thumb:active {
  background: var(--daloo-a11y-light) !important;
}

html nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus.orange,
html body #NagishLiOverlayContent.orange {
  scrollbar-color: var(--daloo-a11y-primary) var(--daloo-a11y-track) !important;
}
