/* size-v2 */
/* ==========================================================================
   Header bar: search field + language link + Login in the first bar.
   Loaded after main.css. The second bar is untouched except that its loupe
   button is gone (on phones the same search sits at the top of the menu).
   ========================================================================== */
html body .hdr-search {
  display: flex; align-items: stretch; margin: 0;
  height: 48px; width: 340px; flex: 0 1 340px;
  background: #fff; border: 1px solid var(--border, #E3EBE7);
  border-radius: 0; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
html body .hdr-search:focus-within {
  border-color: var(--green, #1A9E72);
  box-shadow: 0 0 0 3px var(--green-soft, rgba(26,158,114,.15));
}
html body .hdr-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 0 16px; font: inherit; font-size: 16px; color: var(--text, #1c2b25);
}
html body .hdr-search input::placeholder { color: var(--text-3, #6b7f76); opacity: 1; }
html body .hdr-search input::-webkit-search-cancel-button { display: none; }
html body .hdr-search button {
  flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; padding: 0;
  background: var(--forest, #0B3D2E); color: #fff;
  transition: background .15s;
}
html body .hdr-search button:hover { background: var(--green-dark, #0f7a58); }
html body .hdr-search button { border-radius: 0; }
html body .hdr-search button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2.2; }

html body .header-actions .login-link { font-size: 16px; padding: 10px 14px; }
html body .header-actions .hdr-lang { letter-spacing: .06em; padding: 10px 12px; }

/* narrow desktop windows: a slightly shorter field so the row never overflows */
@media (min-width: 969px) and (max-width: 1180px) {
  html body .hdr-search { width: 250px; flex-basis: 250px; }
}

/* the in-menu copy is for phones only */
html body .hdr-search--panel { display: none; }

@media (max-width: 968px) {
  html body .header-actions .hdr-search { display: none; }
  html body .nav-actions .hdr-search--panel {
    display: flex; width: 100%; height: 52px; flex: none; margin-bottom: 16px; box-sizing: border-box;
  }
  html body .nav-actions .hdr-search--panel input { font-size: 16px; }
  html body .nav-actions .hdr-search--panel button { flex-basis: 54px; }
}
@media (max-width: 768px) {
  html body .header-actions .hdr-lang { padding: 8px 6px; font-size: 13px; }
}

/* phones: keep logo, language link, Login and the menu button on one line */
@media (max-width: 480px) {
  html body .header-top { padding: 10px 12px; }
  html body .header-top .logo-section { gap: 8px; }
  html body .header-top .logo-icon { width: 34px; height: 34px; }
  html body .header-top .logo-icon img { width: 30px; height: 30px; }
  html body .header-top .logo-text strong { font-size: 14px; }
  html body .header-actions { gap: 0; }
  html body .header-actions .login-link { padding: 8px 6px; font-size: 13px; }
  html body .header-actions .mobile-toggle { margin-left: 4px; }
}
@media (max-width: 350px) {
  html body .header-top .logo-text { display: none; }
}

/* gwx-hdr-nowrap */
html body .header-actions .login-link,
html body .header-actions .lang-link,
html body .header-actions > a { white-space: nowrap !important; }
@media (max-width: 1500px) {
  html body .header-actions .login-link { padding-left: 8px !important; padding-right: 8px !important; }
  html body .header-actions { gap: 4px; }
}

/* gwx-mobile-header: one flexible row on every phone, menu button always visible */
@media (max-width: 768px) {
  html body .header-top { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px !important; }
  html body .header-top > * { min-width: 0; }
  html body .header-top .logo-section { flex: 1 1 auto; min-width: 0; gap: 8px; }
  html body .header-top .logo-icon { flex: 0 0 auto; width: 40px; height: 40px; }
  html body .header-top .logo-icon img { width: 36px; height: 36px; }
  html body .header-top .logo-text { min-width: 0; overflow: hidden; }
  html body .header-top .logo-text strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .header-actions { flex: 0 0 auto !important; margin-left: auto; gap: 2px !important; flex-wrap: nowrap !important; }
  html body .header-actions .login-link { padding: 8px 6px !important; font-size: 13px; }
  html body .header-actions .hdr-lang { padding: 8px 6px !important; font-size: 13px; }
  html body .header-actions button { flex: 0 0 auto; }
  html body .header-actions .mobile-toggle { flex: 0 0 auto; margin-left: 4px; }
}
@media (max-width: 340px) {
  html body .header-top .logo-text { display: none; }
}

/* gwx-login-icon: on phones the Login link becomes a round user icon */
@media (max-width: 768px) {
  html body .header-actions .login-link:not(.hdr-lang) {
    font-size: 0 !important; line-height: 0; width: 40px; height: 40px; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border: 1px solid rgba(26,158,114,.35); border-radius: 50%; flex: 0 0 auto;
  }
  html body .header-actions .login-link:not(.hdr-lang)::before {
    content: ""; display: block; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}