/*
 * ClutchHub v151 navbar
 * Matches the supplied white tactical reference without changing the logo.
 */
@media (min-width: 1024px) {
  .site-header {
    background: rgba(248, 251, 254, 0.98) !important;
    border-bottom: 0 !important;
    padding: 6px 8px !important;
    box-shadow: 0 8px 22px rgba(21, 38, 63, 0.12) !important;
  }

  .header-inner {
    width: min(1640px, 100%) !important;
    min-height: 68px !important;
    grid-template-columns: 315px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 0 14px 0 22px !important;
    border: 1px solid #b8cbe0 !important;
    clip-path: polygon(
      16px 0,
      calc(100% - 16px) 0,
      100% 16px,
      100% calc(100% - 16px),
      calc(100% - 16px) 100%,
      16px 100%,
      0 calc(100% - 16px),
      0 16px
    ) !important;
    background:
      linear-gradient(90deg, rgba(213, 225, 237, 0.46) 1px, transparent 1px) 0 0 / 205px 100%,
      linear-gradient(180deg, #fff, #fbfcfe) !important;
    box-shadow:
      inset 0 0 0 5px rgba(255, 255, 255, 0.72),
      0 4px 12px rgba(26, 44, 70, 0.08) !important;
    overflow: visible !important;
  }

  .header-inner::before {
    content: "" !important;
    z-index: 5;
    pointer-events: none;
    position: absolute !important;
    inset: 5px !important;
    height: auto !important;
    display: block !important;
    background:
      linear-gradient(90deg, #b8cbe0, #b8cbe0) left 26px top / 29% 1px no-repeat,
      linear-gradient(90deg, #b8cbe0, #b8cbe0) right 25px top / 17% 1px no-repeat,
      linear-gradient(135deg, transparent 43%, #ff5a18 44% 52%, transparent 53%) right top / 25px 25px no-repeat,
      linear-gradient(270deg, #b8cbe0, #b8cbe0) right top 29px / 1px calc(100% - 58px) no-repeat,
      linear-gradient(90deg, #ff5a18, #ff5a18) right bottom / 72px 2px no-repeat,
      linear-gradient(90deg, #b8cbe0, #b8cbe0) right 88px bottom / 20% 1px no-repeat,
      linear-gradient(315deg, transparent 43%, #15243a 44% 52%, transparent 53%) left bottom / 23px 23px no-repeat,
      linear-gradient(90deg, #b8cbe0, #b8cbe0) left 32px bottom / 27% 1px no-repeat,
      linear-gradient(90deg, #b8cbe0, #b8cbe0) left top 29px / 1px calc(100% - 58px) no-repeat !important;
  }

  .header-inner::after {
    content: "" !important;
    z-index: 6;
    pointer-events: none;
    position: absolute !important;
    width: 54px !important;
    height: 6px !important;
    left: 27% !important;
    right: auto !important;
    top: auto !important;
    bottom: 3px !important;
    display: block !important;
    opacity: 0.75;
    background: repeating-linear-gradient(
      125deg,
      #b8cbe0 0 3px,
      transparent 3px 6px
    ) !important;
  }

  /* Only layout around the logo changes; the mark and wordmark remain untouched. */
  .header-inner > .brand {
    align-self: stretch !important;
    justify-self: start;
    gap: 10px !important;
    padding-left: 9px;
  }

  .main-nav {
    align-items: stretch !important;
    justify-content: center !important;
    min-width: 0;
    gap: 0 !important;
  }

  .nav-link {
    min-width: 78px;
    padding: 0 14px !important;
    color: #1d2b42 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .nav-link::after {
    left: 13px !important;
    right: 13px !important;
    bottom: 3px !important;
    height: 2px !important;
    background: #ff5a18 !important;
  }

  .nav-link:hover,
  .nav-link.active {
    color: #f04c12 !important;
  }

  .header-actions,
  .header-actions.authenticated {
    align-self: stretch;
    gap: 8px !important;
    min-width: 0;
  }

  .header-actions.authenticated > .message-shortcut {
    order: 1;
  }

  .header-actions.authenticated > .notification-button {
    order: 2;
  }

  .header-actions.authenticated > .profile-chip {
    order: 3;
  }

  .header-actions.authenticated > .icon-button,
  .header-actions > .icon-button {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex-basis: 42px !important;
    color: #1e2d45 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #cddae8 !important;
    border-radius: 7px 2px !important;
    box-shadow: 0 4px 11px rgba(20, 39, 66, 0.07) !important;
  }

  .header-actions.authenticated > .icon-button:hover,
  .header-actions > .icon-button:hover {
    color: #ef4f15 !important;
    border-color: #ffb18c !important;
    background: #fff7f2 !important;
  }

  .header-actions > .profile-chip,
  .header-actions.authenticated > .profile-chip {
    width: auto !important;
    min-width: 150px !important;
    min-height: 54px !important;
    grid-template-columns: 42px minmax(66px, auto) 14px !important;
    gap: 8px !important;
    padding: 5px 9px 5px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px),
      0 10px
    );
    background:
      linear-gradient(#b8cbe0, #b8cbe0) left top / 38px 1px no-repeat,
      linear-gradient(#b8cbe0, #b8cbe0) right bottom / 46px 1px no-repeat,
      linear-gradient(135deg, #fff, #f7fafc) !important;
    box-shadow:
      inset 0 0 0 1px #cddae8,
      0 5px 14px rgba(20, 39, 66, 0.08) !important;
  }

  .header-actions > .profile-chip .profile-avatar,
  .header-actions.authenticated > .profile-chip .profile-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .profile-chip .profile-copy {
    display: flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .profile-chip .profile-copy > strong {
    max-width: 92px;
    overflow: hidden;
    color: #132139 !important;
    font-size: 11px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-chip .profile-copy > small {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
  }

  .profile-chip .profile-online-label,
  .profile-chip .navbar-level-badge {
    display: none !important;
  }

  .profile-chip .profile-copy > small > i {
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
  }

  .profile-chip .profile-chevron {
    color: #273750;
  }

  .header-auth-links {
    gap: 8px !important;
  }

  .header-login-link,
  .header-register-link {
    min-height: 43px !important;
    border-radius: 7px 2px !important;
    padding: 0 16px !important;
    font-size: 10px !important;
  }

  .header-login-link {
    color: #17263e !important;
    background: #fff !important;
    border: 1px solid #c9d7e6 !important;
  }

  .header-register-link {
    color: #fff !important;
    background: linear-gradient(135deg, #ff641f, #ec430d) !important;
    border: 1px solid #ff8d56 !important;
    box-shadow: 0 7px 16px rgba(238, 70, 15, 0.22) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1240px) {
  .header-inner {
    grid-template-columns: 260px minmax(0, 1fr) auto !important;
  }

  .nav-link {
    min-width: 0;
    padding: 0 10px !important;
    font-size: 10px !important;
  }

  .header-actions > .profile-chip,
  .header-actions.authenticated > .profile-chip {
    min-width: 132px !important;
  }
}