/* The primary navigation carries the full brand signature. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.site-header .brand { gap: .76rem; font-size: 1.28rem; font-weight: 820; letter-spacing: .012em; }
.site-header .brand-mark { width: 52px; height: 52px; }
.brand-wordmark { display: block; flex: none; width: auto; height: 26px; }
.site-header .brand-wordmark { height: 29px; transform: translateY(4px); }
.footer-brand .brand-wordmark { height: 23px; }

/* Keep every desktop action on the same optical centre line.  The general
   form-field rule adds vertical margins to selects, so the language form
   needs an explicit compact navigation treatment. */
.site-header .nav-actions { align-items: center; min-height: 36px; }
.site-header .nav-actions .language { display: flex; align-items: center; height: 36px; margin: 0; }
.site-header .nav-actions .language select { display: block; width: auto; height: 36px; margin: 0; padding: 0 .32rem; }
.site-header .nav-actions .account-link { display: inline-flex; align-items: center; min-height: 36px; }
.site-header .nav-actions .button { min-height: 36px; }

/* Match the mobile menu's primary text contrast on desktop navigation. */
.desktop-nav a { color: var(--ink); }

/* A gentle "lit window" welcome for guests: warm enough to invite a return,
   but intentionally lighter than the primary registration button. */
.site-header .welcome-login {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 34px;
  padding: 0 .52rem;
  border: 1px solid rgba(219,157,53,.3);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,248,217,.9), rgba(255,226,151,.52));
  color: #694214;
  font-weight: 720;
  text-shadow: 0 1px rgba(255,255,255,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.82), 0 0 13px rgba(245,178,58,.17);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.site-header .welcome-login::before {
  width: 6px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, #fff9c8, #ffc24c);
  box-shadow: 0 0 8px rgba(255,184,55,.78);
  content: "";
}
.site-header .welcome-login:hover,
.site-header .welcome-login:focus-visible {
  border-color: rgba(199,123,24,.55);
  background: linear-gradient(135deg, #fff8ce, #ffd977);
  color: #4f2f0c;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 0 18px rgba(240,167,42,.3);
  outline: none;
}
.site-header .welcome-login:focus-visible { outline: 2px solid #c87718; outline-offset: 3px; }

/* The signed-in person's name is the personal centre of the header: warm,
   assured and precious without competing with the product navigation. */
.site-header .user-name {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  color: #4d2c0b;
  font-weight: 800;
  letter-spacing: -.018em;
  text-shadow: 0 1px rgba(255,255,255,.9), 0 0 12px rgba(235,177,63,.2);
}
.site-header .user-name::after {
  position: absolute;
  right: 5%;
  bottom: -1px;
  left: 5%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #d28b25 22%, #ffe19a 50%, #d28b25 78%, transparent);
  box-shadow: 0 1px 5px rgba(227,160,43,.34);
  content: "";
}

/* A warm citrus-like account marker: it remains a concise initial avatar,
   while the peel, highlight and tiny pores make it feel inviting rather
   than like a flat status dot. */
.site-header .avatar-placeholder {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px 1px;
  border: 1px solid #dc8512;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,239,.95) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 69%, rgba(151,69,3,.16) 0 5%, transparent 6%),
    radial-gradient(circle at 60% 82%, rgba(151,69,3,.13) 0 4%, transparent 5%),
    linear-gradient(135deg, #fff2a0 0%, #ffd45a 34%, #ffae2d 63%, #e9850f 100%);
  color: #5a350d;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,239,.72),
    inset -2px -2px 3px rgba(167,77,5,.18),
    0 1px 2px rgba(118,60,5,.18);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px rgba(255,248,211,.68), 0 0 5px rgba(255,247,199,.24);
}

/* Symbol-only map sections: a small riddle that remains clear on hover,
   keyboard focus and touch through the link's accessible label. */
.desktop-nav .map-section-symbol { position: relative; display: inline-grid; width: 30px; height: 32px; place-items: center; color: #2c63bf; }
.map-section-symbol img { display: block; width: 24px; height: 24px; transition: transform .18s ease; }
.desktop-nav .map-section-symbol::after { position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; padding: .36rem .5rem; border-radius: .45rem; background: #252b32; color: #fff; content: attr(data-map-label); font-size: .69rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -3px); transition: opacity .16s ease, transform .16s ease; }
.desktop-nav .map-section-symbol:hover img, .desktop-nav .map-section-symbol:focus-visible img { transform: translateY(-1px) scale(1.08); }
.desktop-nav .map-section-symbol:hover::after, .desktop-nav .map-section-symbol:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mobile-nav .map-section-symbol { display: flex; align-items: center; justify-content: flex-start; min-height: 43px; }
.mobile-nav .map-section-symbol img { width: 26px; height: 26px; }

/* The desktop brand mark is 52 px tall. A 64 px shell leaves a deliberate
   6 px optical breathing space above and below it instead of the previous
   12 px, without changing compact mobile navigation. */
@media (min-width: 821px) {
  .site-header .nav-shell { height: 64px; }
}

@media (max-width: 480px) {
  .site-header .brand { gap: .62rem; font-size: 1.14rem; letter-spacing: .006em; }
  .site-header .brand-mark { width: 44px; height: 44px; }
  .site-header .brand-wordmark { height: 22px; }
}

@media (max-width: 820px) {
  .mobile-nav .welcome-login { display: flex; align-items: center; gap: .48rem; }
  .mobile-language { display: grid; gap: 7px; padding: 8px 8px 10px; border-bottom: 1px solid #eae5dc; }
  .mobile-language-label { color: #655f56; font-size: .72rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
  .mobile-language-options { display: grid; grid-template-columns: 1fr 1fr; min-height: 44px; overflow: hidden; border: 1px solid #d8d4cd; border-radius: 10px; background: #f6f3ee; }
  .mobile-language-options button, .mobile-language-options .is-current { display: grid; place-items: center; min-width: 0; min-height: 42px; padding: 7px; border: 0; border-radius: 8px; font-size: .84rem; font-weight: 760; line-height: 1.1; }
  .mobile-language-options button { background: transparent; color: #4f4a43; cursor: pointer; box-shadow: none; }
  .mobile-language-options button:hover { background: #fff; color: #201f1c; transform: none; }
  .mobile-language-options .is-current { margin: 2px; background: #201f1c; color: #fff; }
}