/* Fullmedia header: shared visual language with the site footer. */
.pp-menu-header {
  display: block !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 8% -130%, rgb(114 207 255 / .28), transparent 36%),
    radial-gradient(circle at 92% 0%, rgb(92 114 255 / .22), transparent 30%),
    linear-gradient(112deg, #041327, #082e5e 58%, #104b94) !important;
  border-bottom: 1px solid rgb(172 222 255 / .22) !important;
  box-shadow: 0 12px 30px rgb(1 18 42 / .2) !important;
}

.pp-menu-header__inner {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  align-items: center;
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  min-height: 82px;
  margin-inline: auto;
  gap: clamp(18px, 3vw, 38px);
}

.fm-menu-brand {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.fm-menu-brand__name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1;
}

.fm-menu-brand__name::before {
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: #88d8ff;
  box-shadow: 0 0 0 6px rgb(136 216 255 / .14), 0 0 22px rgb(136 216 255 / .68);
  content: "";
}

.fm-menu-brand__name span { color: #aee5ff; }
.fm-menu-brand:hover,.fm-menu-brand:focus-visible { color: #fff; }
.fm-menu-brand:focus-visible { outline: 3px solid #9be1ff; outline-offset: 6px; border-radius: 4px; }

.pp-menu-header__spacer {
  height: 1px;
  flex: 1 1 auto;
  min-width: 20px;
  background: linear-gradient(90deg, rgb(157 215 255 / .35), transparent 85%);
}

.pp-menu-header__spacer::before,.pp-menu-header__spacer::after { display: none !important; }
.pp-menu-header__actions { gap: 10px !important; }

.pp-menu-control {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgb(187 225 255 / .25) !important;
  border-radius: 50% !important;
  background: rgb(255 255 255 / .1) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 7px 18px rgb(0 13 37 / .18) !important;
  color: #eef9ff !important;
}

.pp-menu-control:hover,.pp-menu-control:focus-visible {
  border-color: #8fdbff !important;
  background: rgb(105 196 255 / .23) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.pp-menu-user.active {
  border-color: rgb(123 234 187 / .72) !important;
  box-shadow:
    0 0 0 3px rgb(106 231 177 / .14),
    0 0 16px rgb(82 218 157 / .28),
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 7px 18px rgb(0 13 37 / .18) !important;
}
.pp-menu-user svg { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.15 !important; }
.pp-menu-desktop { border-bottom: 1px solid rgb(172 222 255 / .14); }

html[data-theme=dark] .pp-menu-header {
  background:
    radial-gradient(circle at 8% -130%, rgb(78 174 255 / .19), transparent 36%),
    radial-gradient(circle at 92% 0%, rgb(71 92 216 / .16), transparent 30%),
    linear-gradient(112deg, #020a17, #061b35 58%, #092a52) !important;
  border-bottom-color: rgb(156 213 255 / .16) !important;
  box-shadow: 0 12px 30px rgb(0 0 0 / .35) !important;
}

html[data-theme=dark] .pp-menu-control { border-color: rgb(150 208 246 / .23) !important; background: rgb(119 189 242 / .1) !important; }
html[data-theme=dark] .pp-menu-control:hover,html[data-theme=dark] .pp-menu-control:focus-visible { background: rgb(54 137 205 / .42) !important; }

@media (max-width: 575.98px) {
  .pp-menu-header__inner { min-height: 70px; gap: 14px; }
  .fm-menu-brand__name { font-size: 1.32rem; }
  .fm-menu-brand__name::before { width: 7px; height: 7px; margin-right: 8px; box-shadow: 0 0 0 4px rgb(136 216 255 / .14), 0 0 16px rgb(136 216 255 / .68); }
  .pp-menu-header__spacer { display: none; }
  .pp-menu-header__actions { margin-left: auto; gap: 7px !important; }
  .pp-menu-control { width: 40px !important; height: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-menu-control { transition: none !important; }
}
