/* ethar-web/public/styles/header.css
 *
 * Site header overrides for the xwui site header component.
 */

/* The header's `position: sticky` lives on the inner .xwui-bar-site-header,
   but its custom-element HOST (<xwui-bar-site-header>) was a static ~90px box -
   so the sticky was trapped inside that short host and scrolled away after
   ~90px. Make the HOST itself sticky so the bar pins to the viewport top for
   the entire scroll. */
xwui-bar-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.xwui-bar-site-header {
  /* Pull the bar up 30px so it sits flush against the very top of the page
   * (otherwise html/body's default margin leaves a hairline gap above it). */
  margin-top: -30px;

  --xwui-bar-site-header-max-width: none;
  --xwui-bar-site-header-px: clamp(1.25rem, 4vw, 3rem);
  --ethar-header-stops: #02100e 0%, #0a2e29 38%, #335c52 72%, #8aa39b 100%;
  --bg-app: linear-gradient(to left, var(--ethar-header-stops));
  --text-primary: #fff;
  --text-secondary: color-mix(in srgb, #fff 88%, transparent);
  --role-surface-fg: #fff;
  --bg-hover: color-mix(in srgb, #fff 12%, transparent);
  --border-light: transparent;
  --bg-elevated: var(--bg-app);
}

html[dir="ltr"] .xwui-bar-site-header {
  --bg-app: linear-gradient(to right, var(--ethar-header-stops));
}

html[data-theme="ethar-dark"] .xwui-bar-site-header,
html[data-theme="dark"] .xwui-bar-site-header,
html[data-theme="night"] .xwui-bar-site-header {
  --ethar-header-ink: #040918;
  --ethar-header-warm: #d8a16d;
  --ethar-header-stops:
    var(--ethar-header-ink) 0%, #050917 10%, #080c18 15%, #0c101c 20%, #10121c 25%, #17171f 30%,
    #1f1b22 35%, #282226 40%, #302829 45%, #3a2f2f 50%, #463833 55%, #534138 60%, #60493d 65%,
    #6f5443 70%, #7f5e49 75%, #8f6952 80%, #a27658 85%, #b58361 90%, #c99069 95%,
    var(--ethar-header-warm) 100%;
}

html[dir="rtl"] .xwui-bar-site-header,
html[dir="rtl"] .xwui-bar-site-header__inner {
  direction: rtl;
}

/* Bar inset: 20px above, 0px below - overrides the component's symmetric
 * padding so the brand wordmark sits with breathing room at the top while
 * the bar's bottom edge sits flush against the page content beneath it. */
.xwui-bar-site-header .xwui-bar-site-header__inner {
  padding-top: 20px;
  padding-bottom: 0;
}

.xwui-bar-site-header .xwui-bar-site-header__link {
  font-weight: 600;
  /* Larger nav labels in both languages, per brand direction. */
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
}

/* English (LTR) labels are uppercase + longer, so they read bigger than the
 * Arabic ones - dial them down a notch so the bar stays balanced. */
html[dir="ltr"] .xwui-bar-site-header .xwui-bar-site-header__link {
  font-size: clamp(0.9rem, 1.05vw, 1.12rem);
}

.xwui-bar-site-header .xwui-bar-site-header__link:hover,
.xwui-bar-site-header .xwui-bar-site-header__link.is-active {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.55em;
  text-decoration-thickness: 1px;
}

.xwui-bar-site-header .xwui-bar-site-header__drawer,
.xwui-bar-site-header .xwui-bar-site-header__dropdown {
  background: var(--bg-app);
}

.xwui-bar-site-header .xwui-bar-site-header__scrim {
  background: color-mix(in srgb, #02100e 55%, transparent);
}