/* =========================================================
   AskPerTask — unified navigation
   Theme file: askpertask-child/assets/css/apt-nav-unified.css
   Scope: extends .aptv2-header (defined in homepage-v2.css, loaded
   first — this file only adds new .aptv2-nav-, .aptv2-lang- and .aptv2-acct-
   prefixed rules and a small number of targeted overrides, never redefines an
   existing .aptv2-header* selector wholesale).
   ========================================================= */

/* Distinct from .aptv2-btn--ghost (borderless) so "Log in" and "Register"
   read as two different, clearly-visible actions rather than duplicates. */
.aptv2-btn--outline {
  background: var(--aptv2-bg);
  border-color: var(--aptv2-navy);
  color: var(--aptv2-navy);
}

.aptv2-btn--outline:hover {
  background: var(--aptv2-navy-light);
}

/* ---------- primary nav: dropdown-capable items ---------- */

.aptv2-nav-item {
  position: relative;
}

.aptv2-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--aptv2-text);
  background: none;
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.aptv2-nav-trigger:hover,
.aptv2-nav-item.is-open .aptv2-nav-trigger {
  color: var(--aptv2-green);
}

.aptv2-nav-trigger .aptv2-nav-chevron {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.aptv2-nav-item.is-open .aptv2-nav-chevron {
  transform: rotate(180deg);
}

/* "Live Map" — restrained green highlight, first and most prominent item */
.aptv2-header__nav a.aptv2-nav-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aptv2-green-dark) !important;
  font-weight: 700 !important;
  background: var(--aptv2-green-light);
  border-radius: var(--aptv2-radius-pill);
  padding: 8px 14px;
}

.aptv2-header__nav a.aptv2-nav-map:hover {
  background: #ddf3e2;
}

/* ---------- dropdown panel (Explore / Professionals) ---------- */

.aptv2-nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  background: var(--aptv2-bg);
  border: 1px solid var(--aptv2-border);
  border-radius: var(--aptv2-radius-lg);
  box-shadow: var(--aptv2-shadow-lg);
  padding: 10px;
  z-index: 40;
}

.aptv2-nav-panel--wide {
  min-width: 480px;
}

/* Language dropdown — deliberately small, just enough to hold the
   GTranslate widget's own compact list, not a full-width flyout. */
.aptv2-nav-panel--lang {
  min-width: 160px;
  width: max-content;
  max-width: 240px;
  padding: 8px;
}

.aptv2-nav-item.is-open .aptv2-nav-panel {
  display: block;
}

.aptv2-nav-panel-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--aptv2-text);
}

.aptv2-nav-panel-item:hover {
  background: var(--aptv2-bg-soft);
}

.aptv2-nav-panel-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aptv2-nav-panel-item__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--aptv2-text);
}

.aptv2-nav-panel-item__desc {
  font-size: 12.5px;
  color: var(--aptv2-text-muted);
  margin: 0;
}

/* ---------- language control ---------- */

.aptv2-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: var(--aptv2-radius-pill);
  border: 1px solid var(--aptv2-border);
  background: var(--aptv2-bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aptv2-text);
  cursor: pointer;
  white-space: nowrap;
}

.aptv2-lang-trigger:hover {
  background: var(--aptv2-bg-soft);
}

/* Compact language list — one row per GTranslate "gt-link" shortcode
   (real flag image + name + click-to-switch behaviour, untouched). */
.aptv2-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aptv2-lang-list__item a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--aptv2-text);
  font-size: 13px;
  font-weight: 600;
}

.aptv2-lang-list__item a:hover {
  background: var(--aptv2-bg-soft);
}

.aptv2-lang-list__item a img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 2px;
}

/* Marks the visitor's REAL currently-active language (resolved server-side
   from GTranslate's own cookie in aptv2_get_current_gtranslate_lang()) -
   deliberately not GTranslate's own .gt-current-lang class, which only
   ever reflects the site's default language, not the visitor's actual
   selection. */
.aptv2-lang-list__item--current a {
  color: var(--aptv2-green-dark);
  font-weight: 800;
  background: var(--aptv2-bg-soft);
}

.aptv2-lang-nav-trigger__flag {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
  object-fit: cover;
}

/* ---------- Account trigger — avatar + name + chevron, styled to read
   clearly as the user's account control rather than blend in with the
   other header pill buttons ---------- */

.aptv2-acct-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: var(--aptv2-radius-pill);
  border: 2px solid var(--aptv2-navy);
  background: var(--aptv2-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--aptv2-navy);
  cursor: pointer;
  white-space: nowrap;
}

.aptv2-acct-trigger:hover,
.aptv2-nav-item.is-open .aptv2-acct-trigger {
  border-color: var(--aptv2-green-dark);
  background: var(--aptv2-green-light);
  color: var(--aptv2-green-dark);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
}

.aptv2-acct-trigger__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aptv2-acct-trigger__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aptv2-acct-trigger__avatar--initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
}

.aptv2-acct-trigger:focus-visible,
.aptv2-nav-trigger:focus-visible,
.aptv2-lang-trigger:focus-visible {
  outline: 2px solid var(--aptv2-green-dark);
  outline-offset: 2px;
}

.aptv2-acct-panel {
  right: 0;
  left: auto;
  min-width: 270px;
}

.aptv2-acct-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 12px;
}

.aptv2-acct-panel__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0.9;
}

.aptv2-acct-panel__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.aptv2-acct-panel__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.aptv2-acct-panel__name {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: var(--aptv2-text);
}

.aptv2-acct-panel__role {
  font-size: 12px;
  color: var(--aptv2-text-muted);
  font-weight: 600;
  margin: 1px 0 0;
}

.aptv2-acct-panel__divider {
  height: 1px;
  background: var(--aptv2-border);
  margin: 6px 4px;
}

.aptv2-acct-panel-item {
  padding: 9px 12px;
  gap: 11px;
}

.aptv2-acct-panel-item .aptv2-nav-panel-item__icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.aptv2-acct-panel-item__title {
  font-size: 13.6px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.aptv2-acct-badge {
  margin-left: auto;
  background: var(--aptv2-green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.aptv2-acct-panel-item--logout {
  color: #b4232c;
}

.aptv2-acct-panel-item--logout .aptv2-nav-panel-item__icon {
  background: #fceaeb;
  color: #b4232c;
}

/* ---------- mobile drawer actions (Language / Login-Register-or-Dashboard-Account / Post a Request) ---------- */

.aptv2-header__mobile-actions {
  display: none;
}

/* ---------- mobile: dropdown → accordion ---------- */

@media (max-width: 900px) {
  /* Pin the toggle to the header's top-right corner instead of letting it
     flex-wrap into the drawer flow — once the drawer's own content grows
     tall (dropdown items, mobile actions), plain flex placement pushed the
     toggle down below all of it instead of keeping it reachable at the top
     next to the logo. */
  .aptv2-header__inner {
    position: relative;
  }

  .aptv2-header__toggle {
    position: absolute;
    top: var(--aptv2-space-4);
    right: 0;
  }

  .aptv2-nav-item {
    width: 100%;
  }

  .aptv2-nav-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    font-size: 1rem;
  }

  .aptv2-header__nav a.aptv2-nav-map {
    width: 100%;
    justify-content: flex-start;
  }

  .aptv2-nav-panel {
    display: none;
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 4px 12px;
    min-width: 0;
  }

  .aptv2-nav-panel--wide {
    min-width: 0;
  }

  .aptv2-nav-item.is-open .aptv2-nav-panel {
    display: block;
  }

  .aptv2-nav-panel-item {
    padding: 10px 8px;
  }

  .aptv2-nav-panel-item__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  /* Language / account-or-login / Post a Request move into the drawer;
     the desktop-only copy in .aptv2-header__actions is hidden instead of
     removed, so both share one PHP render call — see apt-header.php. */
  .aptv2-header__actions {
    display: none;
  }

  .aptv2-header.is-open .aptv2-header__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: var(--aptv2-space-4);
    margin-top: var(--aptv2-space-2);
    border-top: 1px solid var(--aptv2-border);
  }

  .aptv2-header__mobile-actions .aptv2-btn {
    width: 100%;
  }

  .aptv2-header__mobile-actions .aptv2-lang-trigger,
  .aptv2-header__mobile-actions .aptv2-acct-trigger {
    width: 100%;
    justify-content: center;
  }

  .aptv2-header__mobile-actions .aptv2-nav-panel {
    left: 0;
    right: 0;
  }

  /* Toggle button must stay visible even though .aptv2-header__actions
     (its sibling) is hidden on mobile. */
  .aptv2-header__toggle {
    margin-left: auto;
  }
}