/* =====================================================================
   PIRT Theme — Nav-actions (right side of header)
   Account menu / language SELECT / inline search.
   ===================================================================== */

/* Outer container: row with consistent gap */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Flatten the wrapper divs Drupal injects so children sit inline */
.nav-actions > div,
.nav-actions > div > div,
.nav-actions > nav,
.nav-actions > span[data-big-pipe-placeholder-id] {
  display: contents;
}

/* ---- Account: custom AccountMenuBlock emits clean markup we can style. ----
   Authenticated: <div class="account-pill"><a class="account-pill__name">…</a>
                  <a class="account-pill__logout">⏻</a></div>
   Anonymous:     <div class="account-actions"><a btn-outline>Sign in</a>
                  <a btn-primary>Register</a></div> */
.nav-actions .account-pill {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  background: var(--white-05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill, 999px);
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-actions .account-pill__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: var(--white-70);
  text-decoration: none;
}
.nav-actions .account-pill__name:hover {
  background: var(--white-10);
  color: var(--white);
}
.nav-actions .account-pill__avatar {
  font-size: 14px;
}
.nav-actions .account-pill__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border-left: 1px solid var(--glass-border);
  color: var(--white-70);
  text-decoration: none;
  font-size: 14px;
}
.nav-actions .account-pill__logout:hover {
  background: var(--red, #ef4444);
  color: #fff;
}

.nav-actions .account-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-actions .account-actions .btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
}

/* ---- Language menu (custom <details> dropdown) ----
   <details class="lang-menu">
     <summary class="lang-menu__trigger">🌐 English ▾</summary>
     <div class="lang-menu__panel" role="menu">
       <a class="lang-menu__item is-active">EN English</a>
       <a class="lang-menu__item">FR Français</a>
     </div>
   </details>
*/
.nav-actions .lang-menu {
  position: relative;
}
.nav-actions .lang-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--white-05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-weight: 600;
  color: var(--white-70);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.nav-actions .lang-menu__trigger::-webkit-details-marker { display: none; }
.nav-actions .lang-menu__trigger::marker { content: ''; }
.nav-actions .lang-menu__trigger:hover {
  background: var(--white-10);
  color: var(--white);
}
.nav-actions .lang-menu__icon { font-size: 13px; opacity: 0.8; }
.nav-actions .lang-menu__caret {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 2px;
  transition: transform 0.15s;
}
.nav-actions .lang-menu[open] .lang-menu__caret {
  transform: rotate(180deg);
}
.nav-actions .lang-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: rgba(10, 22, 40, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--pirt-shadow-md);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-actions .lang-menu__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--white-70);
  text-decoration: none;
  white-space: nowrap;
}
.nav-actions .lang-menu__item:hover {
  background: var(--white-10);
  color: var(--white);
}
.nav-actions .lang-menu__item.is-active {
  background: var(--teal);
  color: var(--white);
}
.nav-actions .lang-menu__code {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0.75;
  width: 22px;
}
.nav-actions .lang-menu__name {
  flex: 1;
}

/* ---- Search form — inline with magnifier icon button ---- */
.nav-actions form#search-block-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  position: relative;
}
.nav-actions form#search-block-form .form-item,
.nav-actions form#search-block-form .form-actions {
  margin: 0;
  padding: 0;
}
.nav-actions form#search-block-form input[type="search"] {
  width: 160px;
  height: 32px;
  padding: 0 32px 0 14px;
  background: var(--white-05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill, 999px);
  color: var(--white);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  transition: width 0.2s, background 0.2s;
}
.nav-actions form#search-block-form input[type="search"]:focus {
  width: 220px;
  border-color: var(--teal);
  background: var(--white-10);
}
.nav-actions form#search-block-form input[type="search"]::placeholder {
  color: var(--white-50);
}
.nav-actions form#search-block-form input[type="submit"] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--white-70);
  font-size: 0;
  cursor: pointer;
}
.nav-actions form#search-block-form input[type="submit"]::before {
  content: '🔍';
  font-size: 13px;
}
.nav-actions form#search-block-form input[type="submit"]:hover {
  background: var(--white-10);
}

/* Hide the bare Drupal language `<ul class="links">` once the new select
   block is placed (defensive — prevents both rendering at once). */
.nav-actions ul.links[role="menu"],
.nav-actions ul.links {
  display: none !important;
}

/* ---- Skin overrides (SPREP white surface) ---- */
body.skin .nav-actions .account-pill {
  background: var(--sp-bg) !important;
  border-color: var(--sp-line) !important;
  box-shadow: 0 1px 3px rgba(0,34,66,.06);
}
body.skin .nav-actions .account-pill__name {
  color: var(--sp-text) !important;
}
body.skin .nav-actions .account-pill__name:hover {
  background: var(--sp-surface) !important;
  color: var(--sp-primary) !important;
}
body.skin .nav-actions .account-pill__logout {
  border-left-color: var(--sp-line) !important;
  color: var(--sp-muted) !important;
}
body.skin .nav-actions .account-pill__logout:hover {
  background: var(--sp-red, #ce3836) !important;
  color: #fff !important;
}

/* Skin: search collapses to icon-only; expands to 200px when input is focused
   or when the form has the .search-open class (toggled by pirt_theme.js). */
body.skin .nav-actions form#search-block-form {
  overflow: hidden;
}
body.skin .nav-actions form#search-block-form input[type="search"] {
  width: 32px !important;
  padding: 0 0 0 32px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--sp-text) !important;
  cursor: pointer;
  transition: width 0.25s ease, background 0.2s, border-color 0.2s, padding 0.25s ease !important;
}
body.skin .nav-actions form#search-block-form input[type="search"]:focus,
body.skin .nav-actions form#search-block-form.search-open input[type="search"] {
  width: 200px !important;
  padding: 0 32px 0 14px !important;
  background: var(--sp-bg) !important;
  border-color: var(--sp-line) !important;
  cursor: text;
}
body.skin .nav-actions form#search-block-form input[type="search"]::placeholder {
  color: var(--sp-muted) !important;
  opacity: 0;
  transition: opacity 0.15s 0.1s;
}
body.skin .nav-actions form#search-block-form input[type="search"]:focus::placeholder,
body.skin .nav-actions form#search-block-form.search-open input[type="search"]::placeholder {
  opacity: 1;
}
body.skin .nav-actions form#search-block-form input[type="submit"] {
  color: var(--sp-muted) !important;
}
body.skin .nav-actions form#search-block-form input[type="submit"]:hover {
  background: var(--sp-bg) !important;
}

/* ---- Mobile (≤900px): hide nav-actions in collapsed nav ---- */
@media (max-width: 900px) {
  .nav-actions {
    display: none;
  }
}