/* ════════════════════════════════════════════════════════════════
   RJ shared chrome — header + footer used on EVERY page.
   Markup lives in partials/rj-header.php and partials/rj-footer.php.
   Self-contained tokens (mirrors Home-2026 / dark-skin palette).
   ════════════════════════════════════════════════════════════════ */
:root {
  --rjc-ink: #eef0ff;
  --rjc-muted: #9aa0b8;
  --rjc-dim: #6b7190;
  --rjc-line: rgba(255, 255, 255, .08);
  --rjc-glass: rgba(255, 255, 255, .04);
  --rjc-bg: #04050c;
  --rjc-bg2: #070918;
  --rjc-font-d: "Space Grotesk", sans-serif;
  --rjc-font-b: "Inter", sans-serif;
}

/* ── Header ───────────────────────────────────────────────────── */
.rj-nav { position: fixed; inset: 0 0 auto; z-index: 100000; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; font-family: var(--rjc-font-b); }
.rj-nav.scrolled, .rj-nav.open { background: rgba(4, 5, 12, .82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-color: var(--rjc-line); }
.rj-nav-in { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.rj-logo { display: inline-flex; align-items: center; }
.rj-logo img { height: 46px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }

.rj-menu { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 14px; font-weight: 500; }
.rj-menu li { position: relative; list-style: none; }
.rj-menu a { display: block; padding: 8px 11px; color: var(--rjc-muted); text-decoration: none; border-radius: 9px; transition: color .25s, background .25s; white-space: nowrap; }
.rj-menu a:hover, .rj-menu a:focus-visible { color: var(--rjc-ink); background: var(--rjc-glass); }
.rj-menu .menu-item-has-children > a::after { content: " ▾"; font-size: 11px; color: var(--rjc-dim); }
.rj-menu .sub-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; margin: 0; padding: 8px; list-style: none; min-width: 230px; background: rgba(7, 9, 24, .96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--rjc-line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
/* Invisible bridge over the 6px gap so the pointer never "leaves" while
   travelling from the menu item into the dropdown. */
.rj-menu .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.rj-menu li:hover > .sub-menu, .rj-menu li:focus-within > .sub-menu { display: block; }
.rj-menu .sub-menu a { padding: 8px 12px; border-radius: 8px; white-space: normal; }

.rj-nav-cta { font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 99px; background: var(--rjc-glass); border: 1px solid var(--rjc-line); color: var(--rjc-ink); text-decoration: none; transition: .3s; white-space: nowrap; }
.rj-nav-cta:hover { border-color: rgba(168, 85, 247, .6); box-shadow: 0 0 22px rgba(168, 85, 247, .25); color: var(--rjc-ink); }

.rj-burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--rjc-line); border-radius: 11px; background: var(--rjc-glass); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.rj-burger span { width: 18px; height: 2px; background: var(--rjc-ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.rj-nav.open .rj-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rj-nav.open .rj-burger span:nth-child(2) { opacity: 0; }
.rj-nav.open .rj-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rj-subtoggle { display: none; }
@media (max-width: 980px) {
  .rj-menu { display: none; }
  .rj-burger { display: flex; }
  .rj-nav-cta { display: none; }
  .rj-nav.open .rj-menu { display: block; position: fixed; top: 75px; left: 0; right: 0; margin: 0; padding: 14px 18px 26px; background: rgba(4, 5, 12, .97); border-bottom: 1px solid var(--rjc-line); max-height: calc(100vh - 75px); overflow: auto; }
  .rj-nav.open .rj-menu a { padding: 11px 12px; font-size: 15px; }
  /* Accordion: submenus collapsed until their toggle is tapped. */
  .rj-menu .menu-item-has-children { position: relative; }
  .rj-menu .menu-item-has-children > a { padding-right: 56px; }
  .rj-menu .menu-item-has-children > a::after { content: none; }
  .rj-subtoggle { display: flex; position: absolute; top: 3px; right: 2px; width: 40px; height: 40px; align-items: center; justify-content: center; background: var(--rjc-glass); border: 1px solid var(--rjc-line); border-radius: 10px; color: var(--rjc-muted); font-size: 15px; cursor: pointer; transition: transform .25s, color .25s; }
  .rj-menu li.rj-open > .rj-subtoggle { transform: rotate(180deg); color: var(--rjc-ink); }
  .rj-nav.open .rj-menu .sub-menu { display: none; position: static; margin: 0 0 6px 12px; padding: 0; background: none; border: none; box-shadow: none; min-width: 0; }
  .rj-nav.open .rj-menu li.rj-open > .sub-menu { display: block; }
}
@media (max-width: 480px) {
  .rj-nav-in { padding: 10px 16px; gap: 14px; }
  .rj-logo img { height: 38px; }
}
body.admin-bar .rj-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rj-nav { top: 46px; } }

/* ── Footer ───────────────────────────────────────────────────── */
.rj-footer { border-top: 1px solid var(--rjc-line); padding: 64px 0 40px; background: var(--rjc-bg2); font-family: var(--rjc-font-b); }
.rj-foot-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.rj-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.rj-footer .rj-logo img { height: 56px; }
.rj-foot-brand p { color: var(--rjc-muted); font-size: 14px; margin: 14px 0 0; max-width: 300px; line-height: 1.7; }
.rj-foot-col h4 { font-family: var(--rjc-font-d); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rjc-dim); margin: 0 0 18px; }
.rj-foot-col a { display: block; color: var(--rjc-muted); font-size: 14px; padding: 5px 0; text-decoration: none; transition: color .25s; }
.rj-foot-col a:hover { color: var(--rjc-ink); }
.rj-foot-bottom { border-top: 1px solid var(--rjc-line); padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--rjc-dim); font-size: 13px; }
.rj-foot-bottom a { color: var(--rjc-dim); text-decoration: none; }
.rj-foot-bottom a:hover { color: var(--rjc-ink); }
@media (max-width: 760px) { .rj-foot-grid { grid-template-columns: 1fr 1fr; } }

/* Note: hiding Avada's own header/footer and the content top-padding on
   inner pages is handled by dark-skin.css (which does not load on the
   Home-2026 template). This file is chrome-only. */