/* ============================================================
   Header (desktop + mobile) + drawer + audience menus
   - Solid gradient backgrounds (no transparency)
   - Dropdown menus are "button lists"
   - Drawer is solid gradient (no see-through)
   ============================================================ */

/* ---------- visibility by breakpoint ---------- */
.header--mobile { display: none; }

@media (max-width: 980px) {
  .header--desktop { display: none; }
  .header--mobile { display: block; }
}

/* prevent page scroll while drawer open */
html.no-scroll { overflow: hidden; }

/* ---------- header base ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 2000; /* must be above hero visuals */
  overflow: visible;

  /* solid gradient */
  background: linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%);
  border-bottom: 1px solid rgba(22, 36, 41, 0.08);
}

.header.is-scrolled {
  background: linear-gradient(180deg, #f9faff 0%, #f1f3fb 100%);
  box-shadow: 0 14px 34px rgba(22, 36, 41, 0.10);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  gap: 1rem;
  overflow: visible;
}

.header__inner--mobile { justify-content: space-between; }

/* ---------- brand ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: max-content;
  text-decoration: none;
  color: inherit;
}

.brand__logo {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(22, 36, 41, 0.10);
}

.brand__name {
  font-weight: 820;
  letter-spacing: -.02em;
}

.brand__pill {
  margin-left: .4rem;
  font-weight: 600;
  font-size: .82rem;
  color: rgba(22, 36, 41, .62);
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 36, 41, .10);
  background: #fff;
}

.brand--mini .brand__pill { display: none; }

/* ---------- desktop nav pills ---------- */
.nav {
  display: flex;
  gap: .35rem;
  align-items: center;
  padding: .35rem;
  border-radius: 999px;

  background: #ffffff;
  border: 1px solid rgba(22, 36, 41, .10);
  box-shadow: 0 10px 22px rgba(22, 36, 41, 0.06);

  overflow: visible; /* critical for dropdown menus */
}

.nav__link {
  font-weight: 700;
  color: rgba(22, 36, 41, .82);
  padding: .55rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav__link:hover {
  background: rgba(72, 17, 191, .10);
  color: var(--p1);
}

/* ---------- actions ---------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* ---------- icon button ---------- */
.iconbtn {
  appearance: none;
  border: 1px solid rgba(22, 36, 41, .12);
  background: #ffffff;
  border-radius: 14px;
  height: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 10px 22px rgba(22, 36, 41, 0.06);
}

.iconbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 17, 191, .24);
}

.iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* burger icon swap (Font Awesome) */
.header__burger { position: relative; padding: 0; }
.header__burger i { font-size: 18px; line-height: 1; display: block; }
.header__burger i:nth-child(2) { display: none; }
.header__burger.is-open i:nth-child(1) { display: none; }
.header__burger.is-open i:nth-child(2) { display: block; }

/* ============================================================
   Audience dropdowns (desktop)
   Make them "button lists" and always visible above content
   ============================================================ */

.nav--audiences { gap: .15rem; padding: .28rem; }

.navdrop { position: relative; }

.navdrop__trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  user-select: none;
}

.navdrop__chev {
  font-size: .85em;
  opacity: .75;
  transform: translateY(1px);
}

.navdrop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 290px;
  padding: .5rem;
  border-radius: 18px;

  background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
  border: 1px solid rgba(22, 36, 41, .12);
  box-shadow: 0 22px 60px rgba(22, 36, 41, .18);

  display: none;
  z-index: 3000; /* above hero */
}

/* show on hover/focus (CSS-only) */
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu,
.navdrop.is-open .navdrop__menu { /* ready for click-to-open later */
  display: block;
}

/* list buttons */
.navdrop__item {
  display: flex;
  align-items: center;
  gap: .7rem;

  width: 100%;
  padding: .78rem .85rem;
  border-radius: 16px;

  color: rgba(22, 36, 41, .88);
  text-decoration: none;

  background: #ffffff;
  border: 1px solid rgba(22, 36, 41, .10);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.navdrop__item + .navdrop__item { margin-top: .45rem; }

.navdrop__item:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 17, 191, .22);
  background: rgba(72, 17, 191, .06);
}

.navdrop__icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22, 36, 41, .10);
  background: rgba(72, 17, 191, .08);
  color: var(--p1);
  flex: 0 0 auto;
}

.navdrop__icon i {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}

.navdrop__itemTitle {
  font-weight: 760;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* on touch screens: disable hover popover (so it doesn’t glitch) */
@media (hover: none) and (pointer: coarse) {
  .navdrop__menu { display: none !important; }
}

/* ============================================================
   Drawer (mobile menu)
   Solid gradient, no transparency. Smooth open/close.
   ============================================================ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 5000;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer__backdrop {
  position: fixed;
  inset: 0;

  /* dim background (can be a subtle gradient too) */
  background: radial-gradient(1200px 900px at 20% 0%, rgba(72,17,191,.22), rgba(10,12,18,.58));
  border: 0;
  cursor: pointer;

  z-index: 5001;
}

/* panel */
.drawer__panel {
  position: fixed;
  right: 10px;
  top: 10px;
  width: min(420px, calc(100% - 20px));
  height: calc(100% - 20px);

  border-radius: 24px;

  /* solid gradient, no blur, no transparency */
  background: linear-gradient(180deg, #fbfcff 0%, #f2f4ff 55%, #ffffff 100%);
  border: 1px solid rgba(22, 36, 41, .12);
  box-shadow: 0 28px 70px rgba(22, 36, 41, .22);

  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  transform: translateX(14px) translateY(0);
  transition: transform .18s ease;

  z-index: 5002;
}

.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* audience buttons (mobile) */
.drawer__audiences {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.drawer__pill {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: .85rem .9rem;
  border-radius: 18px;
  border: 1px solid rgba(22, 36, 41, .12);
  background: #ffffff;

  font-weight: 760;
  color: rgba(22, 36, 41, .82);
  text-decoration: none;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.drawer__pill i { width: 18px; text-align: center; opacity: .92; }

.drawer__pill:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 17, 191, .22);
  background: rgba(72, 17, 191, .06);
}

/* section links */
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.drawer__link {
  padding: .9rem .95rem;
  border-radius: 18px;
  border: 1px solid rgba(22, 36, 41, .12);
  background: #ffffff;

  font-weight: 760;
  color: rgba(22, 36, 41, .78);
  display: flex;
  align-items: center;
  gap: .65rem;

  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.drawer__link i { width: 18px; text-align: center; opacity: .9; }

.drawer__link:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 17, 191, .22);
  background: rgba(72, 17, 191, .06);
}

/* actions */
.drawer__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.drawer__actions .btn i { margin-right: .45rem; }

.drawer__hint {
  margin-top: auto;
  color: rgba(22, 36, 41, .64);
  font-weight: 650;
}

/* full-screen panel on very small */
@media (max-width: 560px) {
  .drawer__panel {
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding:
      calc(1rem + env(safe-area-inset-top, 0px))
      1rem
      calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}
/* ============================================================
   Mobile audience accordion (drawer)
   ============================================================ */

.mgroup { display: grid; gap: .5rem; }

/* make pill a real button (same look as before) */
.drawer__pill{
  width: 100%;
  text-align: left;
  justify-content: space-between;
}

.drawer__pillLeft{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.drawer__chev{
  transition: transform .16s ease;
  opacity: .85;
}

.mgroup.is-open .drawer__chev{
  transform: rotate(180deg);
}

/* sub list */
.drawer__sub{
  display: grid;
  gap: .45rem;
  padding-left: .1rem;
}

/* sub item buttons rendered from tools.js */
.drawer__subLink{
  display:flex;
  align-items:center;
  gap:.65rem;

  padding: .82rem .9rem;
  margin-left: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(22, 36, 41, .12);
  background: #ffffff;

  font-weight: 700;
  color: rgba(22, 36, 41, .80);
  text-decoration: none;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.drawer__subLink i{
  width: 18px;
  text-align: center;
  opacity: .92;
}

.drawer__subLink:hover{
  transform: translateY(-1px);
  border-color: rgba(72, 17, 191, .22);
  background: rgba(72, 17, 191, .06);
}