/* KYMA header art direction: atmosphere + premium segmented navigation only. */

/* HOME stays airy: the header remains transparent in character, with only a faint brand haze. */
body:not(.scheduleOpen):not(.clipsOpen) .siteHeader{
  background:
    radial-gradient(ellipse at 35% 28%,rgba(213,168,227,.045),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08));
  border-bottom-color:transparent;
  box-shadow:inset 0 -1px 0 rgba(203,167,211,.045);
}

/* Fixed content headers keep their existing blur/geometry; only the surface and edge are refined. */
.scheduleOpen .siteHeader,
.clipsOpen .siteHeader{
  background:
    radial-gradient(ellipse at 35% 28%,rgba(213,168,227,.045),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(250,246,252,.93));
  border-bottom-color:rgba(203,167,211,.24);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.72),
    0 5px 16px rgba(96,65,108,.045);
}

/* A one-pixel static edge carries the wave idea as a curved light distribution, not a drawn wave. */
.siteHeader::after{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 35% 100%,rgba(185,120,198,.54),transparent 26%),
    radial-gradient(ellipse at 68% 100%,rgba(213,168,227,.34),transparent 24%),
    linear-gradient(90deg,transparent,rgba(203,167,211,.42) 28%,rgba(203,167,211,.24) 72%,transparent);
  opacity:.10;
}
.scheduleOpen .siteHeader::after,
.clipsOpen .siteHeader::after{opacity:.18}

/* Reuse the existing desktop segmented-navigation breakpoint and geometry. */
@media(min-width:901px){
  /* Outer rail is the only persistent raised surface. */
  .siteHeader .navMenuGroup{
    border-color:rgba(196,157,206,.28);
    background:rgba(255,255,255,.80);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      0 3px 10px rgba(73,47,82,.04);
  }

  /* Inactive segments read as text within the rail, not separate cards. */
  .siteHeader .navMenuGroup .navPill{
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    color:#75667a;
    opacity:1;
  }
  .siteHeader .navMenuGroup .navPill + .navPill{
    border-left-color:transparent;
  }

  .siteHeader .navMenuGroup .navPage:hover{
    border-color:transparent;
    background:rgba(247,238,249,.55);
    box-shadow:none;
    color:#604a66;
    transform:none;
  }

  .siteHeader .navMenuGroup .navPage:active{
    border-color:transparent;
    background:rgba(244,233,247,.58);
    box-shadow:inset 0 1px 1px rgba(96,65,108,.05);
    transform:none;
  }

  /* Active is a quiet inner surface with highlight, not a floating pill. */
  .siteHeader .navMenuGroup .navPage.active,
  .siteHeader .navMenuGroup .navPage.active:hover,
  .siteHeader .navMenuGroup .navPage.active:active{
    border-color:rgba(181,123,195,.24);
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,222,244,.88));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 2px 6px rgba(104,65,115,.055);
    color:#52365a;
    transform:none;
  }

  /* No dot, underline or short-line indicator: active state is surface-only. */
  .siteHeader .navMenuGroup .navPage::after,
  .siteHeader .navMenuGroup .navPage.active::after{
    background:transparent;
    box-shadow:none;
    opacity:0;
  }

  /* Notice is a static span in the current DOM: same rail, intentionally quieter interaction signal. */
  .siteHeader .navMenuGroup .noticePill,
  .siteHeader .navMenuGroup .noticePill:hover{
    border-color:transparent;
    border-left-color:transparent;
    background:transparent;
    box-shadow:none;
    color:#96889a;
    opacity:.64;
    transform:none;
  }

  /* Login / account stay within the family but clearly below the active navigation tier. */
  .siteHeader .accountLogin,
  .siteHeader .accountName{
    border-color:rgba(196,157,206,.28);
    background:rgba(255,255,255,.70);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
    color:#7c6b80;
    opacity:.93;
    transform:none;
  }
  .siteHeader .accountLogin:hover,
  .siteHeader .accountName:hover{
    border-color:rgba(196,157,206,.42);
    background:rgba(247,238,249,.58);
    box-shadow:0 2px 7px rgba(73,47,82,.035);
    color:#654d6b;
    opacity:1;
    transform:none;
  }
  .siteHeader .accountLogin:active,
  .siteHeader .accountName:active{
    border-color:rgba(196,157,206,.36);
    background:rgba(244,233,247,.58);
    box-shadow:inset 0 1px 1px rgba(96,65,108,.05);
    transform:none;
  }

  /* Dropdown geometry/open-close behavior remain authoritative from header-nav.css. */
  .siteHeader .accountDropdown{
    border-color:rgba(203,167,211,.36);
    background:rgba(255,255,255,.97);
    box-shadow:0 12px 28px rgba(80,49,90,.085);
  }
  .siteHeader .accountDropdown .accountAdmin,
  .siteHeader .accountDropdown .accountLogout{
    background:transparent;
    box-shadow:none;
    color:#7f6e83;
    opacity:.94;
    transform:none;
  }
  .siteHeader .accountDropdown .accountLogout{
    color:#918196;
    opacity:.86;
  }
  .siteHeader .accountDropdown .accountAdmin:hover,
  .siteHeader .accountDropdown .accountLogout:hover{
    background:rgba(247,236,250,.62);
    box-shadow:none;
    color:#63486a;
    opacity:1;
    transform:none;
  }
}