/* ===================================================================
   Auth navigation elements: Sign In button, profile dropdown,
   language switcher, mobile auth items.
   Dark-theme values taken from main.css: #222 bg, #f5f5f5 text,
   #333 borders, #007ced accent.
=================================================================== */

/* ----- Header controls: language is separate from auth/nav -------- */
.header-content {
  position: relative;
}

.header-auth {
  float: right;
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  height: 50px;          /* matches desktop nav line-height */
}

.header-lang {
  position: absolute;
  top: -18px;
  right: 0;
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1001;
}

.lang-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  gap: 5px;              /* 5-6px between flag icon and language text */
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  opacity: .55;
  line-height: 1;
  white-space: nowrap;
}

/* flag-icons sizing inside lang-btn */
.lang-btn .fi {
  width: 1.1em;
  font-size: 1em;
  line-height: 1;
  border-radius: 1px;
}

.lang-btn:hover,
.lang-btn.lang-active {
  opacity: 1;
  color: #f5f5f5;
}

.lang-sep {
  color: #555;
  font-size: 11px;
}

/* ----- Sign In button (desktop only) ----------------------------- */
.btn-sign-in {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  opacity: .70;
  white-space: nowrap;
  line-height: 1.6;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}

.btn-sign-in:hover,
.btn-sign-in:focus {
  opacity: 1;
  color: #f5f5f5;
  text-decoration: none;
}

/* ----- Profile menu (desktop + mobile header) -------------------- */
.profile-menu {
  position: relative;
  display: inline-block;
}

.profile-toggle {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #444;
  display: block;
  -webkit-transition: border-color .2s;
  transition: border-color .2s;
}

.profile-toggle:hover .profile-avatar {
  border-color: #007ced;
}

.profile-caret {
  font-size: 9px;
  color: #f5f5f5;
  opacity: .55;
}

/* Dropdown panel */
.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 4px;
  min-width: 155px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.profile-dropdown[hidden] {
  display: none;
}

.profile-dropdown-item {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #bbb;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: background .15s, color .15s;
  transition: background .15s, color .15s;
}

.profile-dropdown-item:hover {
  background-color: #2a2a2a;
  color: #f5f5f5;
  text-decoration: none;
}

.profile-dropdown-item i {
  width: 14px;
  text-align: center;
  font-size: 13px;
}

.dropdown-signout {
  color: #e05c5c;
}

.dropdown-signout:hover {
  color: #ff7070;
}

/* ----- Mobile-only nav items (Sign In / Sign Out inside hamburger) */
@media only screen and (min-width: 992px) {
  .mobile-auth-divider,
  .mobile-only-nav-item {
    display: none !important;
  }
}

/* ----- Desktop-only elements (hidden on mobile) ------------------ */
@media only screen and (max-width: 991px) {
  .btn-sign-in {
    display: none;         /* Sign In is inside the hamburger menu */
  }

  /* Profile dropdown (avatar) is desktop-only — on mobile, Sign Out
     lives inside the hamburger menu, header bar shows: Logo | EN|ES | ☰
     Per UX rule: language switcher stays in header (top right, OUTSIDE the
     main menu — see wireframe section 5). */
  .profile-menu {
    display: none !important;
  }

  .header-auth {
    height: 32px;          /* matches mobile header logo height */
  }

  .header-lang {
    top: 10px;
    right: 58px;
    height: 32px;
  }

  .lang-btn {
    font-size: 11px;
    gap: 4px;
  }

  .site-main-menu li.mobile-auth-divider {
    display: block;
    height: 1px;
    margin: auto 30px 12px;
    padding: 0;
    background-color: rgba(255,255,255,.14);
    list-style: none;
  }

  .site-main-menu {
    display: -webkit-flex;
    display: flex;
    min-height: calc(100vh - 52px);
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 36px;
  }

  .site-nav.animate {
    z-index: 10000;
  }

  .header.mobile-menu-open {
    z-index: 10001;
  }

  .site-main-menu li.mobile-only-nav-item a {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f5f5f5;
    line-height: 50px;
    opacity: .88;
  }

  .site-main-menu li.mobile-only-nav-item i {
    width: 15px;
    color: #f5f5f5;
    font-size: 13px;
    text-align: center;
    opacity: .85;
  }

  .site-main-menu li.dropdown-signout-item a,
  .site-main-menu li.dropdown-signout-item i {
    color: #ff5b5b;
    opacity: .95;
  }
}

/* ----- Generate Resume nav item: accent color only when active or hovered ----- */
.site-main-menu li.nav-generate.current-menu-item > a,
.site-main-menu li.nav-generate:hover > a {
  color: #4fc3f7;
}