/* rcd-header.css — styles for the reusable app header (templates/partials/
   rcd-header.html). Self-contained, prefixed .rcdh*, dark identity. Falls back
   gracefully if the host page's design tokens (--bg-2, --cyan-bright, ...) are
   absent by pairing every token with a literal fallback. */

.rcdh {
  position: sticky; top: 0; z-index: 900;
  border-bottom: 1px solid var(--line, rgba(150,180,255,.14));
  background: color-mix(in srgb, var(--bg-2, #0c1024) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding-top: env(safe-area-inset-top, 0px);
}
.rcdh__inner {
  display: flex; align-items: center; gap: 12px; height: 62px;
}
.rcdh__spacer { flex: 1 1 auto; }

/* logo / brand = home button */
.rcdh__brand {
  display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none;
  font-family: var(--tech, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700; letter-spacing: .02em; font-size: 17px; flex: none;
  color: var(--ink, #eaf2ff);
}
.rcdh__brand-dot { color: var(--cyan-bright, #6ad7ff); }
.rcdh__brand-tld { color: var(--muted, #8da0c8); }
.rcdh__brand:hover .rcdh__brand-main { color: var(--cyan-bright, #6ad7ff); }

/* icon buttons (hamburger + avatar) */
.rcdh__iconbtn, .rcdh__avatarbtn {
  display: inline-grid; place-items: center; cursor: pointer; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line, rgba(150,180,255,.16));
  background: var(--surface, rgba(12,16,36,.55));
  color: var(--ink, #eaf2ff); transition: border-color .16s, box-shadow .2s, background .16s;
  -webkit-tap-highlight-color: transparent; overflow: hidden; padding: 0;
}
.rcdh__iconbtn:hover, .rcdh__avatarbtn:hover,
.rcdh__iconbtn[aria-expanded="true"], .rcdh__avatarbtn[aria-expanded="true"] {
  border-color: var(--line-bright, rgba(150,180,255,.4));
  box-shadow: var(--glow-sm, 0 0 16px rgba(106,215,255,.25));
  color: var(--cyan-bright, #6ad7ff);
}
.rcdh__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.rcdh__avatar-ini {
  font-family: var(--tech, 'Space Grotesk', sans-serif); font-weight: 700; font-size: 17px;
  color: var(--cyan-bright, #6ad7ff);
}

.rcdh__menuwrap { position: relative; flex: none; }

/* dropdown shell (shared by nav + user menus) */
.rcdh__dropdown {
  position: absolute; top: calc(100% + 10px); z-index: 20;
  min-width: 232px; padding: 8px;
  border: 1px solid var(--line-bright, rgba(150,180,255,.4)); border-radius: 14px;
  background: var(--bg-2, #0c1024);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.rcdh__dropdown[hidden] { display: none; }
.rcdh__navdd { inset-inline-start: 0; }
.rcdh__userdd { inset-inline-end: 0; }

/* site-nav items */
.rcdh__navitem {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 11px 12px; border-radius: 10px;
  color: var(--ink-2, #c4d2ee); font-size: 15px;
  font-family: var(--tech, 'Space Grotesk', sans-serif);
}
.rcdh__navitem:hover { background: rgba(106,215,255,.10); color: var(--cyan-bright, #6ad7ff); }
.rcdh__navitem-ic { font-size: 17px; line-height: 1; width: 20px; text-align: center; }

/* user menu */
.rcdh__u-head { padding: 6px 10px 10px; border-bottom: 1px solid var(--line, rgba(150,180,255,.14)); margin-bottom: 6px; }
.rcdh__u-name { font-size: 15px; color: var(--ink, #eaf2ff); }
.rcdh__u-group { padding: 8px 6px; }
.rcdh__u-group + .rcdh__u-group { border-top: 1px solid var(--line, rgba(150,180,255,.10)); }
.rcdh__u-label {
  font-family: var(--tech, sans-serif); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted, #8da0c8); padding: 0 6px 8px;
}
.rcdh__seg { display: flex; gap: 6px; }
.rcdh__seg-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; padding: 10px 8px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--line, rgba(150,180,255,.16));
  background: var(--surface, rgba(12,16,36,.55)); color: var(--ink-2, #c4d2ee);
  font-family: var(--tech, sans-serif); transition: .14s;
}
.rcdh__seg-btn:hover { border-color: var(--line-bright, rgba(150,180,255,.4)); color: var(--ink, #eaf2ff); }
.rcdh__seg-btn.is-on {
  border-color: var(--line-bright, rgba(150,180,255,.5)); color: var(--cyan-bright, #6ad7ff);
  background: rgba(106,215,255,.12); box-shadow: var(--glow-sm, 0 0 16px rgba(106,215,255,.25));
}
.rcdh__langs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rcdh__lang {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--ink-2, #c4d2ee);
  font-family: var(--tech, sans-serif);
}
.rcdh__lang b { color: var(--muted, #8da0c8); font-size: 12px; }
.rcdh__lang:hover { background: rgba(106,215,255,.10); color: var(--cyan-bright, #6ad7ff); }
.rcdh__lang.is-on { background: rgba(106,215,255,.14); color: var(--cyan-bright, #6ad7ff); }
.rcdh__lang.is-on b { color: var(--cyan-bright, #6ad7ff); }
.rcdh__u-links { display: flex; flex-direction: column; gap: 2px; }
.rcdh__u-link {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 11px 10px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2, #c4d2ee);
  font-family: var(--tech, sans-serif);
}
.rcdh__u-link:hover { background: rgba(106,215,255,.10); color: var(--cyan-bright, #6ad7ff); }
.rcdh__u-link--muted { color: var(--muted, #8da0c8); }
.rcdh__u-link--cta {
  justify-content: center; margin-top: 4px; font-weight: 700; color: #04121f;
  background: linear-gradient(180deg, var(--cyan-bright, #6ad7ff), var(--cyan, #35b9e6));
  box-shadow: var(--glow-sm, 0 0 16px rgba(106,215,255,.25));
}
.rcdh__u-link--cta:hover { color: #04121f; filter: brightness(1.06); }

[dir="rtl"] .rcdh__navitem-ic { text-align: center; }

/* ---- nav-J (2026-07-26): site-wide application of this header -------------
   The nav dropdown now carries the FULL site nav (public + role sections), so
   it must scroll instead of running off a phone screen. Print: no chrome. */
.rcdh__dropdown { max-height: min(74vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.rcdh__navdd { max-width: min(86vw, 320px); }
@media print { .rcdh { display: none !important; } }

/* Injected onto legacy hand-rolled pages whose own CSS defines .wrap with its
   own padding: keep the header row itself comfortable regardless. */
.rcdh__inner { padding-inline: 16px; box-sizing: border-box; }
.rcdh__inner.wrap { max-width: 1180px; margin-inline: auto; }

/* PWA install button (optional, hdr.show_pwa_install) sits in the header row. */
.rcdh__install {
  display: none; align-items: center; gap: 6px; cursor: pointer; flex: none;
  height: 42px; padding: 0 12px; border-radius: 12px; font-size: 13px;
  border: 1px solid var(--line, rgba(150,180,255,.16));
  background: var(--surface, rgba(12,16,36,.55)); color: var(--ink-2, #c4d2ee);
  font-family: var(--tech, sans-serif);
}
.rcdh__install:hover { border-color: var(--line-bright, rgba(150,180,255,.4)); color: var(--cyan-bright, #6ad7ff); }
.rcdh__install.is-ready { display: inline-flex; }
@media (max-width: 560px) { .rcdh__install span { display: none; } }

/* ---- APPEARANCE: light ("dawn") variant ------------------------------------
   The header is dark by default (brand identity). When rlp-theme.js puts
   [data-theme="dawn"] on <html> (the Light choice in the user menu) the bar
   follows the page instead of staying a dark stripe on a light document. */
html[data-theme="dawn"] .rcdh {
  background: rgba(247,250,254,.9);
  border-bottom-color: rgba(20,50,110,.16);
}
html[data-theme="dawn"] .rcdh__brand { color: #0c1530; }
html[data-theme="dawn"] .rcdh__brand-tld { color: #46557a; }
html[data-theme="dawn"] .rcdh__iconbtn,
html[data-theme="dawn"] .rcdh__avatarbtn,
html[data-theme="dawn"] .rcdh__install,
html[data-theme="dawn"] .rcdh__seg-btn {
  background: #fff; border-color: rgba(20,50,110,.18); color: #0c1530;
}
html[data-theme="dawn"] .rcdh__dropdown {
  background: #fff; border-color: rgba(20,50,110,.2);
  box-shadow: 0 18px 44px rgba(12,21,48,.16);
}
html[data-theme="dawn"] .rcdh__navitem,
html[data-theme="dawn"] .rcdh__u-link,
html[data-theme="dawn"] .rcdh__lang { color: #23324f; }
html[data-theme="dawn"] .rcdh__u-name { color: #0c1530; }
html[data-theme="dawn"] .rcdh__u-label,
html[data-theme="dawn"] .rcdh__lang b { color: #5b6b8f; }
html[data-theme="dawn"] .rcdh__navitem:hover,
html[data-theme="dawn"] .rcdh__u-link:hover,
html[data-theme="dawn"] .rcdh__lang:hover,
html[data-theme="dawn"] .rcdh__lang.is-on { background: rgba(45,74,124,.1); color: #14508c; }
html[data-theme="dawn"] .rcdh__u-link--cta { color: #04121f; }