/* ==========================================================================
   Header — from the "CrickHunt Homepage" design canvas.

   Covers the header shell (accent strip, sticky bar, logo), the hover effect
   on the mega menu toggles, and the header links on the right (Open Portal,
   the account pill and its menu, the log in button, the burger).

   The mega menu panels themselves are not touched here: ch-mega-menu.css owns
   them and this file only adds the toggles' hover state.
   ========================================================================== */

:root {
  --ch-hdr-ink: #1e293b;
  --ch-hdr-muted: #64748b;
  --ch-hdr-faint: #94a3b8;
  --ch-hdr-line: #e8edf5;
  --ch-hdr-line-strong: #dbe4f0;
  --ch-hdr-blue: #2557a7;
  --ch-hdr-blue-dark: #173d7a;
  --ch-hdr-navy: #0b1428;
  --ch-hdr-surface: #eef2f8;
  --ch-hdr-bar: 72px;
  --ch-hdr-ctl: 42px;
}



/* ---- shell ---------------------------------------------------------- */
.ch-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 var(--ch-hdr-line), 0 6px 18px rgba(15, 23, 42, .04);
}
/* the bar keeps the theme's own side padding and the logo its own size */
.ch-hdr .navbar {
  min-height: var(--ch-hdr-bar);
  gap: 10px;
  background: transparent !important;
}
.ch-hdr .header-logo {
  flex-shrink: 0;
}
.ch-hdr .header-logo a {
  display: flex;
  align-items: center;
}

/* ---- mega menu toggles: hover only ------------------------------------
   The tint is the link's own background. The padding that draws it is taken
   back out of the list item's margin, so every label keeps its exact size,
   spacing and position — nothing in the mega menu moves. */
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle {
  position: relative;
  z-index: 0;
  padding: 13px 8px;
  margin: -8px;
  border-radius: 5px;
  background-color: transparent;
  transition: background-color .18s ease, color .18s ease;
}
/* a little more room between the menus, where the bar is wide enough for it */
@media all and (min-width: 1500px) {
  .header-menu-text ul.navbar-nav > li.ch-mm-nav-item {
    margin-left: 14px;
    margin-right: 14px;
  }
  .header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle {
    padding-left: 9px;
    padding-right: 9px;
    margin-left: -9px;
    margin-right: -9px;
  }
  .header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle::after {
    left: 9px;
    right: 9px;
  }
}
/* Each menu tints its own toggle with the accent its panel already uses, so the
   hover and the open marker follow the menu you are pointing at. */
.ch-mm-toggle {
  --ch-hdr-nav-accent: var(--ch-hdr-blue);
  --ch-hdr-nav-soft: #e6edf8;
}
.ch-mm-toggle[aria-controls="ch-mega-menu-tournaments"] { --ch-hdr-nav-accent: #d97706; --ch-hdr-nav-soft: #f7efe1; }
.ch-mm-toggle[aria-controls="ch-mega-menu-auctions"]    { --ch-hdr-nav-accent: #2557a7; --ch-hdr-nav-soft: #e6edf8; }
.ch-mm-toggle[aria-controls="ch-mega-menu-matches"]     { --ch-hdr-nav-accent: #16a34a; --ch-hdr-nav-soft: #e4f2e9; }
.ch-mm-toggle[aria-controls="ch-mega-menu-overlay"]     { --ch-hdr-nav-accent: #4f46e5; --ch-hdr-nav-soft: #e3e9fe; }
.ch-mm-toggle[aria-controls="ch-mega-menu-network"]     { --ch-hdr-nav-accent: #7c3aed; --ch-hdr-nav-soft: #e9dcf8; }
.ch-mm-toggle[aria-controls="ch-mega-menu-resources"]   { --ch-hdr-nav-accent: #0e7490; --ch-hdr-nav-soft: #ddeff4; }
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle:hover,
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle:focus-visible,
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle[aria-expanded="true"] {
  background-color: var(--ch-hdr-nav-soft);
}
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle:hover,
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle:focus,
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle[aria-expanded="true"] {
  color: var(--ch-hdr-nav-accent);
  text-decoration: none;
}
/* the open menu keeps the pill and adds the 3px marker along the bottom of the bar */
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -9px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ch-hdr-nav-accent);
  opacity: 0;
  transition: opacity .18s ease;
}
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle[aria-expanded="true"] {
  box-shadow: none;
}
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle[aria-expanded="true"]::after {
  opacity: 1;
}

/* collapsed menu: the tint hugs its own row, lined up with the row divider, and the
   marker that belongs to the bottom of the desktop bar is not drawn */
@media all and (max-width: 1199px) {
  .header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle {
    /* the tint stays inside the row, with the label padded in on both sides */
    padding: 10px 12px;
    margin: 0;
    border-radius: 8px;
  }
  .header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle::after {
    display: none;
  }
  /* a plain link has no mega panel, so none of the toggle rules above reach it.
     It takes the same side padding so its label lines up with the rows above
     instead of sitting flush against the edge of the row. */
  .header-menu-text ul.navbar-nav a.nav-link:not(.ch-mm-toggle) {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- the row of controls on the right -------------------------------- */
.ch-hdr .header-links ul:has(li.ch-portal) {
  height: var(--ch-hdr-ctl);
}

/* Open Portal */
.ch-hdr .header-links li.ch-portal a.ch-portal__btn {
  padding: 0 16px;
  gap: 8px;
  border-radius: 6px;
  background: var(--ch-hdr-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: background-color .18s ease;
}
.ch-hdr .header-links li.ch-portal a.ch-portal__btn:hover,
.ch-hdr .header-links li.ch-portal a.ch-portal__btn:focus {
  background: var(--ch-hdr-blue);
  color: #fff;
}

/* the account pill */
.ch-hdr .ch-acc__button {
  height: 100%;
  padding: 0 10px 0 4px;
  gap: 10px;
  border: 1px solid var(--ch-hdr-line-strong);
  border-radius: 99px;
  background: #fff;
  transition: border-color .18s ease;
}
.ch-hdr .ch-acc__button:hover,
.ch-hdr .ch-acc__button:focus {
  border-color: var(--ch-hdr-faint);
  background: #fff;
}
.ch-hdr .ch-acc__button[aria-expanded="true"] {
  border-color: var(--ch-hdr-blue);
}
.ch-hdr .ch-acc__avatar--sm {
  width: 34px;
  height: 34px;
  /* the pill avatar is the brand blue in the design; the menu keeps the violet one */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10' r='4' fill='%23fff'/%3E%3Cpath d='M 8 24 Q 8 18 16 18 Q 24 18 24 24' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2557a7 0%, #173d7a 100%);
}
.ch-hdr .ch-acc__name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-hdr-ink);
}
.ch-hdr .ch-acc__handle {
  margin-top: 0;
  font-size: 10px;
  color: var(--ch-hdr-faint);
}

/* the account menu */
.ch-hdr .ch-acc__menu {
  --ch-acc-title-size: 13px;
  --ch-acc-sub-size: 12px;
  --ch-acc-item-pad: 10px 16px;
  min-width: 280px;
  border-color: var(--ch-hdr-line-strong);
}
.ch-hdr .ch-acc__profile {
  padding: 16px;
  border-bottom: 1px solid var(--ch-hdr-line);
}
.ch-hdr .ch-acc__profile-name {
  font-size: 14px;
  font-weight: 900;
}
.ch-hdr .ch-acc__profile-mail {
  font-size: 12px;
  color: var(--ch-hdr-muted);
}
.ch-hdr .ch-acc__profile-since {
  font-size: 11px;
  color: var(--ch-hdr-faint);
}
.ch-hdr .ch-acc__group {
  padding: 8px 0;
}
.ch-hdr .ch-acc__group + .ch-acc__group {
  border-top: 1px solid var(--ch-hdr-line);
}
.ch-hdr .ch-acc__item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ch-hdr-ink);
}
.ch-hdr .ch-acc__item:hover,
.ch-hdr .ch-acc__item:focus {
  background: var(--ch-hdr-surface);
}
/* the first row doubles as the portal shortcut: tinted, blue and inset */
.ch-hdr .ch-acc__item--primary {
  margin: 0 8px 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f1f5fb;
}
.ch-hdr .ch-acc__item--primary .ch-acc__item-title {
  color: var(--ch-hdr-blue);
  font-weight: 800;
}
.ch-hdr .ch-acc__item--primary:hover,
.ch-hdr .ch-acc__item--primary:focus {
  background: #d9e4f4;
}
.ch-acc__item-arrow {
  margin-left: auto;
  color: var(--ch-hdr-blue);
  font-weight: 800;
}
.ch-hdr .ch-acc__item--danger .ch-acc__item-title {
  color: #dc2626;
}

/* log in, when signed out */
.ch-hdr .header-links li.login-btn .primary-btn {
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  transition: background-color .18s ease;
}

/* the burger, on the bars that show it */
.ch-hdr .navbar-toggler {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ch-hdr-line-strong);
  border-radius: 10px;
  background: #fff;
  transition: border-color .18s ease;
}
.ch-hdr .navbar-toggler:hover,
.ch-hdr .navbar-toggler:focus {
  border-color: var(--ch-hdr-faint);
  outline: none;
}
.ch-hdr .navbar-toggler .navbar-toggler-icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5.5h14M3 10h14M3 14.5h14'/%3E%3C/svg%3E");
}

/* ---- responsive ------------------------------------------------------- */
@media all and (max-width: 991px) {
  .ch-hdr {
    --ch-hdr-bar: 64px;
    --ch-hdr-ctl: 44px;
  }
  /* the design turns the portal button blue once the menu collapses */
  .ch-hdr .header-links li.ch-portal a.ch-portal__btn {
    padding: 0 14px;
    gap: 7px;
    background: var(--ch-hdr-blue);
  }
  .ch-hdr .header-links li.ch-portal a.ch-portal__btn:hover,
  .ch-hdr .header-links li.ch-portal a.ch-portal__btn:focus {
    background: var(--ch-hdr-blue-dark);
  }
}

@media all and (max-width: 575px) {
  .ch-hdr .header-links li.ch-portal a.ch-portal__btn {
    padding: 0 12px;
  }
}

/* small phones: logo, portal, account and burger stay on one row down to 350px */
@media all and (max-width: 480px) {
  .ch-hdr {
    --ch-hdr-bar: 60px;
    --ch-hdr-ctl: 40px;
  }
  .ch-hdr .navbar,
  .ch-hdr .header-links ul:has(li.ch-portal) {
    gap: 8px;
  }
  .ch-hdr .header-logo img {
    height: 45px;
    object-fit: contain;
  }
  .ch-hdr .header-links li.ch-portal a.ch-portal__btn {
    padding: 0 10px;
  }
  .ch-hdr .ch-acc__button {
    padding: 0 6px 0 3px;
    gap: 5px;
  }
  .ch-hdr .ch-acc__avatar--sm {
    width: 28px;
    height: 28px;
  }
  .ch-hdr .header-links li.login-btn .primary-btn {
    padding: 0 12px;
  }
  .ch-hdr .navbar-toggler {
    width: 40px;
    height: 40px;
  }
  .ch-hdr .mobile-toggle button.navbar-toggler {
    margin-left: 8px;
  }
  .ch-hdr .ch-acc__menu {
    min-width: 260px;
    max-width: calc(100vw - 20px);
  }
}