/* The header's top bar on every buyer page (templates/common/site-header.html), as the homepage shows it
   (canvas boards HomeHP5*, Krish 2026-10-08; every page since 2026-10-13: "have the same header nav as home
   page header"). Loaded by templates/header.html, new-design/header.html and user/header.html after their own
   stylesheets, which are three different sets, so these rules win on every page. They lived in
   homepage-hp5.css, which only the homepage loads. */

/* The brand line beside the logo: a hairline, then the words. Two short lines until the header
   has room for one (1680px): on one line it squeezed the logo below its 130px (to 102px at 1440,
   64px at 1280), which prod's header never does. 14px, a step up from 12px (Krish 2026-10-09),
   except from 992 to 1279px, where the full menu leaves no room: 14px shrank the logo to 83px at
   1024 and 118px at 1200. */
.logo:has(.hp-tagline) { display: flex; align-items: center; gap: 10px; }
.hp-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
  border-left: 1px solid #E3E6EC;
  min-height: 36px;
  font-family: var(--ff-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #4A5468;
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  .hp-tagline { min-height: 28px; font-size: 12px; line-height: 15px; }
}
@media (min-width: 1680px) {
  .logo:has(.hp-tagline) { gap: 14px; }
  .hp-tagline { flex-direction: row; align-items: center; gap: 4px; padding-left: 14px; min-height: 32px; font-size: 16px; line-height: 22px; }
}

/* No hamburger on a desktop: from 992px the header shows the whole menu and the Sign up / Log in
   buttons, and every other link the drawer holds is in the footer (tests/test_homepage_hp5.py
   checks that). Hidden, not removed: the drawer stays in the page for phones, and for crawlers. */
@media (min-width: 992px) {
  header .header-wrapper .tp-header__hamburger { display: none; }
}

/* The board's buttons: Sign up an outline, Log in solid, both the redesign's purple. */
header .header-acttion-btns [data-target="#registermodal"].btn {
  background: #FFFFFF;
  border: 1.5px solid #5B2FC9;
  color: #5B2FC9;
}
header .header-acttion-btns [data-target="#loginModal"].btn {
  background: #5B2FC9;
  border-color: #5B2FC9;
  color: #FFFFFF;
}
header .header-acttion-btns [data-target="#registermodal"].btn:hover { background: #F4F1FC; }
header .header-acttion-btns [data-target="#loginModal"].btn:hover { background: #4A23AE; border-color: #4A23AE; }

/* The homepage's values for what the other two stylesheet sets draw differently (each measured against the
   homepage, 2026-10-13). The homepage's own stylesheet (assets/new-design/css/custom.css) already gives these,
   so the homepage doesn't change. */

/* The menu: assets/css/custom.css spaces it tighter, drops it to 13px at 1024px and shows the current page in
   blue; style.css makes the account pages' purple a different one. */
.site-header .main-menu-2 nav > ul > li { margin: 0 15px; padding: 15px 0; }
.site-header .main-menu-2 nav > ul > li > a { display: inline; padding: 30px 0; font-size: 14px; line-height: 21px; }
.site-header .main-menu-2 nav > ul > li.active > a,
.site-header .main-menu-2 nav > ul > li:hover > a { color: #9A71E1; }
@media (max-width: 1024px) {
  .site-header .main-menu-2 nav > ul > li { margin: 0 5px; }
}

/* Signed in, the homepage shows no search circle beside the account menu (its stylesheet hides .mobile_icon);
   assets/css/custom.css showed it, and only the account pages' custom-user.js gave it a click. */
.site-header div.mobile_icon { display: none; }

/* The account pages' buttons were 14px with an 8px gap (their own bootstrap). */
.site-header .header-acttion-btns [data-target].btn { font-size: 16px; line-height: 24px; }
.site-header .header-acttion-btns [data-target="#loginModal"].btn { margin-left: 16px; }
/* The account menu's button: assets/css/custom.css drops it to 13px at 1024px. */
.site-header .header-acttion-btns a.tp-btn { font-size: 14px; }

/* Phones: assets/css/main.css pulls the logo up 80px, out of the bar (it sat under the back arrow the old
   header had), and the bar must be a block, the logo left and the menu button right. */
@media (max-width: 991.98px) {
  .site-header { display: block; }
  .site-header .header-wrapper .logo { position: relative; left: 0; transform: none; margin-top: 0; padding-top: 0; }
}
@media (max-width: 767.98px) {
  .site-header .header-wrapper { justify-content: space-between; }
}