:root{
  --rx-green:#1a841a; --rx-text:#222; --rx-muted:#666; --rx-bg:#f7f7f7; --rx-white:#fff;
  --rx-shadow:0 8px 28px rgba(0,0,0,.08);
}

.rx-container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.rx-header{
  position:sticky; top:0; z-index:1000; background:rgba(0,0,0,.96);
  backdrop-filter:saturate(140%) blur(0px);
  box-shadow:0 2px 10px rgba(0,0,0,.06); transition:background .2s, box-shadow .2s, backdrop-filter .2s;
}
.rx-header.scrolled{
  background:rgba(0,0,0,.98);
  backdrop-filter:saturate(180%) blur(8px);
  box-shadow:0 6px 22px rgba(0,0,0,.14);
}
@media (prefers-reduced-motion: reduce){
  .rx-header, .rx-dd__menu, .rx-offcanvas__panel{ transition:none !important; }
}

.rx-header__inner{ height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Logo swap (two variants) */
.rx-logo{ display:flex; align-items:center; gap:.5rem }
.rx-logo picture{ display:block; line-height:0 }
.rx-logo__light{ display:block } /* header is dark */
.rx-logo__dark{ display:none }

.rx-logo img{ display:block; width:13rem; height:auto; }
@media (max-width:420px){ .rx-logo img{ width:11rem } }

/* Desktop Nav */
.rx-nav{display:none}
@media (min-width:992px){ .rx-nav{display:block} }

.rx-nav__list{display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0}
.rx-nav__link{
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none;
  color:#fff; font-weight:600; transition:background .2s, color .2s, transform .2s;
}
.rx-nav__link:hover{ background:#33483a; transform:translateY(-1px); }
.rx-nav__link.is-active{ color:var(--rx-green); background:#e9f6ec; }
.rx-nav__link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px; border-radius:2px;
  transform:scaleX(0); transform-origin:left; background:currentColor; opacity:.3; transition:transform .2s;
}
.rx-nav__link:hover::after{ transform:scaleX(1); }

/* Language links */
.rx-langlink .rx-flag{
  display:inline-block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.rx-lang{ letter-spacing:.3px }

/* Actions */
.rx-actions{display:flex; align-items:center; gap:12px}

/* Participate dropdown (desktop) */
.rx-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  background:#edf6ee; color:#0e6b2f; font-weight:700; padding:10px 16px; border-radius:999px;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.rx-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08) }
.rx-btn--pill{ border-radius:999px }
.rx-dd{ position:relative }
.rx-dd__chev{ display:inline-block; transition:transform .2s }
.rx-dd.is-open .rx-dd__chev{ transform:rotate(180deg) }

.rx-dd__menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:var(--rx-white);
  border-radius:12px; box-shadow:var(--rx-shadow); padding:8px; list-style:none; margin:0;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s, transform .15s; z-index:10;
}
.rx-dd.is-open .rx-dd__menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.rx-dd__menu a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--rx-text); font-weight:600;
}
.rx-dd__menu a:hover{ background:#f3f7f4; color:var(--rx-green) }

/* Burger (mobile) */
.rx-burger{
  display:inline-flex; flex-direction:column; gap:5px; width:36px; height:32px; justify-content:center;
  background:transparent; border:none; padding:0; cursor:pointer;
}
.rx-burger span{ height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
@media (min-width:992px){ .rx-burger{display:none} }

/* Animate burger to X when menu open */
.menu-open .rx-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .rx-burger span:nth-child(2){ opacity:0; }
.menu-open .rx-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Offcanvas */
.rx-offcanvas{ position:fixed; inset:0; z-index:4000; display:none }
.rx-offcanvas.is-open{ display:block }
.rx-offcanvas__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45); border:none; backdrop-filter:blur(2px); z-index:4001;
}
.rx-offcanvas__panel{
  position:absolute; right:0; top:0; height:100dvh; width:min(86vw,380px);
  background:var(--rx-white); box-shadow:var(--rx-shadow); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .25s; overflow:auto; -webkit-overflow-scrolling: touch;
  will-change: transform; z-index:4002;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0));
}
.rx-offcanvas.is-open .rx-offcanvas__panel{ transform:translateX(0) }

.rx-offcanvas__head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee;
}
.rx-offcanvas__close{
  width:36px; height:36px; border:none; border-radius:999px; background:var(--rx-green); color:#fff; font-size:22px; cursor:pointer;
}

/* Mobile nav */
.rx-mnav{ padding:12px 10px }
.rx-mnav__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px }
.rx-mnav__list a{
  display:block; padding:12px 14px; border-radius:10px; text-decoration:none; color:var(--rx-text); font-weight:600;
}
.rx-mnav__list a:hover{ background:#f0f3f1 }
.rx-mnav__list a.is-active{ background:#e9f6ec; color:var(--rx-green) }

.rx-mnav__langs a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; text-decoration:none;
  color:var(--rx-text); font-weight:600;
}
.rx-mnav__langs a:hover{ background:#f6f8f7 }

/* Mobile nested dropdown with animation */
.rx-mnav__dd{ margin-top:6px }
.rx-mnav__ddbtn{
  width:100%; text-align:left; background:#edf6ee; color:#0e6b2f; font-weight:700;
  border:none; border-radius:10px; padding:12px 14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
}
.rx-mnav__ddmenu{
  list-style:none; padding:0 0 0 8px; margin:6px 0 0; overflow:hidden;
  max-height:0; transition:max-height .25s ease; border-left:3px solid #e9f6ec;
}
.rx-mnav__ddmenu[hidden]{ display:block; } /* keep layout; visibility handled by max-height */
.rx-mnav__ddmenu a{ padding:10px 12px; display:block; border-radius:8px; }
.rx-mnav__ddmenu a:hover{ background:#f6f8f7 }

/* Social (mobile) */
.rx-offcanvas__social{ display:flex; gap:10px; padding:12px 16px 18px }
.rx-offcanvas__social a{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#f4f4f4; color:#333; text-decoration:none; font-weight:800;
}
.rx-offcanvas__social a:hover{ background:#e9f6ec; color:var(--rx-green) }

/* Focus styles (accessibility) */
.rx-nav__link:focus-visible,
.rx-btn:focus-visible,
.rx-burger:focus-visible,
.rx-offcanvas__close:focus-visible,
.rx-mnav__ddbtn:focus-visible,
.rx-mnav__list a:focus-visible{
  outline:2px solid var(--rx-green); outline-offset:2px; border-radius:10px;
}

/* Swap logo variant inside offcanvas (white background) */
.rx-offcanvas .rx-logo__light{ display:none }
.rx-offcanvas .rx-logo__dark{ display:block }

/* Optional: smaller logo inside the offcanvas head */
.rx-offcanvas .rx-logo img{ width:14rem; height:auto }