/* VELAEA Index mobile account header
   Contract: logo -> theme -> language -> notification -> account/status -> menu. */
@media (max-width: 980px) {
  body.index-page .site-header .container.nav-wrap,
  body.index-page .site-header .nav-wrap {
    width: min(100% - 12px, 1180px) !important;
    grid-template-columns: minmax(44px, 1fr) 38px 38px 38px minmax(70px, auto) 38px !important;
    column-gap: 5px !important;
  }

  body.index-page .site-header .brand { grid-column: 1 !important; }
  body.index-page .site-header #themeToggleMobile,
  body.index-page .site-header .theme-toggle-mobile {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
  }
  body.index-page .site-header #menuBtn,
  body.index-page .site-header .menu-btn { grid-column: 6 !important; }

  body.index-page .site-header .nav-actions {
    display: contents !important;
  }

  body.index-page .site-header .nav-actions .nav-tools {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  body.index-page .site-header .nav-actions > .public-auth-notify,
  body.index-page .site-header .nav-actions > .velaea-public-notification-wrap {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
  }

  body.index-page .site-header .nav-actions > .velaea-public-notification-wrap {
    display: inline-flex !important;
    position: relative !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body.index-page .site-header .nav-actions .public-auth-notify {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
  }

  body.index-page .site-header .nav-actions > [data-public-auth="login"],
  body.index-page .site-header .nav-actions > [data-public-auth="primary"] {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
  }

  html.is-authenticated-public body.index-page .site-header .nav-actions > [data-public-auth="primary"],
  html.is-authenticated-public body.index-page .site-header .nav-actions > [data-public-auth-dashboard] {
    display: none !important;
  }

  html.is-authenticated-public body.index-page .site-header .nav-actions > [data-public-auth="login"].is-auth-status {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px 7px 3px 4px !important;
    gap: 5px !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }

  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-dot {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
  }

  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-profile-copy {
    min-width: 31px !important;
    width: 31px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-profile-name,
  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-profile-role {
    display: none !important;
  }

  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-profile-meta,
  html.is-authenticated-public body.index-page .site-header [data-public-auth="login"] .public-auth-profile-package {
    display: inline-flex !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > .public-auth-notify,
  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > .velaea-public-notification-wrap,
  html.is-guest-public body.index-page .site-header .nav-actions > .public-auth-notify,
  html.is-guest-public body.index-page .site-header .nav-actions > .velaea-public-notification-wrap {
    display: none !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > [data-public-auth="primary"],
  html.is-guest-public body.index-page .site-header .nav-actions > [data-public-auth="primary"] {
    display: none !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > [data-public-auth="login"],
  html.is-guest-public body.index-page .site-header .nav-actions > [data-public-auth="login"] {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 76px !important;
    max-width: 96px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    color: #1b1307 !important;
    border-color: rgba(255, 224, 142, .72) !important;
    background: linear-gradient(135deg, #ffe08a 0%, #d8a536 100%) !important;
    box-shadow: 0 8px 20px rgba(202, 151, 42, .24), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  }

  body.index-page .site-header .nav {
    grid-column: 1 / -1 !important;
  }

  html.is-authenticated-public body.index-page .site-header .mobile-menu-actions
    [data-public-auth-mobile="primary"].is-logout-link {
    display: inline-flex !important;
  }
}

@media (max-width: 430px) {
  body.index-page .site-header .container.nav-wrap,
  body.index-page .site-header .nav-wrap {
    grid-template-columns: minmax(38px, 1fr) 36px 36px 36px minmax(68px, auto) 36px !important;
    column-gap: 4px !important;
  }

  body.index-page .site-header .brand img {
    width: clamp(45px, 13vw, 58px) !important;
    max-width: 58px !important;
  }

  body.index-page .site-header .nav-actions .nav-tools,
  body.index-page .site-header .nav-actions > .velaea-public-notification-wrap,
  body.index-page .site-header .nav-actions .public-auth-notify {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  html.is-authenticated-public body.index-page .site-header .nav-actions > [data-public-auth="login"].is-auth-status {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > [data-public-auth="login"],
  html.is-guest-public body.index-page .site-header .nav-actions > [data-public-auth="login"] {
    min-width: 68px !important;
    max-width: 82px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 359px) {
  body.index-page .site-header .container.nav-wrap,
  body.index-page .site-header .nav-wrap {
    width: min(100% - 8px, 1180px) !important;
    grid-template-columns: minmax(34px, 1fr) 34px 34px 34px minmax(62px, auto) 34px !important;
    column-gap: 3px !important;
  }

  body.index-page .site-header #themeToggleMobile,
  body.index-page .site-header .theme-toggle-mobile {
    display: inline-flex !important;
  }
}

/* Guest header has no notification control, so it uses five real columns.
   This prevents the hidden notification slot from leaving a visual hole. */
@media (max-width: 980px) {
  html:not(.is-authenticated-public) body.index-page .site-header .container.nav-wrap,
  html:not(.is-authenticated-public) body.index-page .site-header .nav-wrap,
  html.is-guest-public body.index-page .site-header .container.nav-wrap,
  html.is-guest-public body.index-page .site-header .nav-wrap {
    grid-template-columns: minmax(44px, 1fr) 38px 38px minmax(76px, auto) 38px !important;
    column-gap: 5px !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header #themeToggleMobile,
  html:not(.is-authenticated-public) body.index-page .site-header .theme-toggle-mobile,
  html.is-guest-public body.index-page .site-header #themeToggleMobile,
  html.is-guest-public body.index-page .site-header .theme-toggle-mobile {
    grid-column: 2 !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions .nav-tools,
  html.is-guest-public body.index-page .site-header .nav-actions .nav-tools {
    grid-column: 3 !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header .nav-actions > [data-public-auth="login"],
  html.is-guest-public body.index-page .site-header .nav-actions > [data-public-auth="login"] {
    grid-column: 4 !important;
  }

  html:not(.is-authenticated-public) body.index-page .site-header #menuBtn,
  html:not(.is-authenticated-public) body.index-page .site-header .menu-btn,
  html.is-guest-public body.index-page .site-header #menuBtn,
  html.is-guest-public body.index-page .site-header .menu-btn {
    grid-column: 5 !important;
  }
}

@media (max-width: 430px) {
  html:not(.is-authenticated-public) body.index-page .site-header .container.nav-wrap,
  html:not(.is-authenticated-public) body.index-page .site-header .nav-wrap,
  html.is-guest-public body.index-page .site-header .container.nav-wrap,
  html.is-guest-public body.index-page .site-header .nav-wrap {
    grid-template-columns: minmax(38px, 1fr) 36px 36px minmax(68px, auto) 36px !important;
    column-gap: 4px !important;
  }
}

@media (max-width: 359px) {
  html:not(.is-authenticated-public) body.index-page .site-header .container.nav-wrap,
  html:not(.is-authenticated-public) body.index-page .site-header .nav-wrap,
  html.is-guest-public body.index-page .site-header .container.nav-wrap,
  html.is-guest-public body.index-page .site-header .nav-wrap {
    grid-template-columns: minmax(34px, 1fr) 34px 34px minmax(62px, auto) 34px !important;
    column-gap: 3px !important;
  }
}