/* O header permanece preto nos dois temas, como no HDA atual. */
/* Public header keeps the original dark palette in both themes. */
:root .hda-site .site-header {
  --text:#f6f6fa;
  --muted:#aaaab8;
  --line:#2c2c35;
  --raised:#1c1c24;
  --pink:#f50965;
  background:#0d0d11f5;
  color:var(--text);
  color-scheme:dark
}

:root .hda-site .site-header .btn {
  color:var(--text);
  background:var(--raised);
  border-color:var(--line)
}

:root .hda-site .site-header .btn.primary {
  background:var(--pink);
  border-color:var(--pink);
  color:white
}

:root .hda-site .site-header .btn:hover {
  background:#292933;
  border-color:#626272;
  color:var(--text)
}

:root .hda-site .site-header .btn.primary:hover {
  background:#d80958
}

:root .hda-site .site-header .icon-btn:hover {
  background:#1a1a22;
  color:white
}

/* Cada item do menu é um link. O traço rosa marca só a página aberta. */
:root .hda-site .site-header .site-nav a:not(.btn) {
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  color:var(--text);
  padding-block:6px;
  white-space:nowrap;
  transition:color .18s ease
}

:root .hda-site .site-header .site-nav a:not(.btn):hover {
  color:#ff438c
}

:root .hda-site .site-header .site-nav a:not(.btn):focus-visible {
  color:#ff438c;
  outline:2px solid #f50965;
  outline-offset:4px
}

:root .hda-site .site-header .site-nav a:not(.btn)[aria-current="page"] {
  color:#ff438c
}

:root .hda-site .site-header .site-nav a:not(.btn)::after {
  content:"";
  position:absolute;
  left:0;
  width:100%;
  bottom:-2px;
  height:2px;
  border-radius:2px;
  background:#f50965;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease
}

:root .hda-site .site-header .site-nav a:not(.btn):hover::after,
:root .hda-site .site-header .site-nav a:not(.btn):focus-visible::after {
  transform:scaleX(1);
  opacity:.55
}

:root .hda-site .site-header .site-nav a:not(.btn)[aria-current="page"]::after {
  transform:scaleX(1);
  opacity:1
}

/* No desktop o Entrar continua o CTA rosa, separado dos links. */
:root .hda-site .site-header .site-nav > .btn.primary {
  flex:0 0 auto;
  margin-left:4px
}

/* Abaixo de 760px, logo + links + Entrar deixam de caber sem aperto. */
@media (max-width:760px) {
  :root .hda-site .site-header .site-logo {
    margin-right:auto
  }

  :root .hda-site .site-header .theme-control {
    order:2
  }

  :root .hda-site .site-header .site-menu {
    order:3;
    margin-left:0
  }

  :root .hda-site .site-header .site-nav {
    max-height:calc(100dvh - 84px);
    overflow-y:auto;
    overscroll-behavior:contain
  }

  :root .hda-site .site-header .site-nav a:not(.btn) {
    padding:12px;
    white-space:normal
  }

  :root .hda-site .site-header .site-nav a:not(.btn)::after,
  :root .hda-site .site-header .site-nav a:not(.btn):hover::after,
  :root .hda-site .site-header .site-nav a:not(.btn):focus-visible::after {
    width:28px;
    left:12px;
    bottom:7px;
    transform:none;
    opacity:0
  }

  :root .hda-site .site-header .site-nav a:not(.btn)[aria-current="page"]::after {
    opacity:1
  }

  :root .hda-site .site-header .site-nav > .btn.primary {
    width:calc(100% - 24px);
    margin:8px 12px 0;
    justify-content:center
  }
}