/* --------------------------------------------------------------------------
   topbar: slim utility row above the main navigation (phone, social, language)
   Kept in its own file because future pages reuse the header but never the
   hero, so nothing page-specific should leak in here.
   -------------------------------------------------------------------------- */
.topbar { position: relative; z-index: 1; background: rgba(1, 4, 9, .82); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topbar__row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.topbar__phone { display: inline-flex; align-items: center; gap: 7px; color: #cfe3f2; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .03em; transition: color .2s ease; }
.topbar__phone:hover { color: var(--color-cyan-bright); }
.topbar__right { display: flex; align-items: center; gap: 16px; }
.topbar__follow { color: #7f8fa0; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.topbar__social { display: flex; align-items: center; gap: 10px; }
.topbar__social a { display: grid; place-items: center; width: 20px; height: 20px; color: #cfe3f2; transition: color .2s ease, transform .2s ease; }
.topbar__social a:hover { color: var(--color-gold); transform: translateY(-1px); }

/* The language switch borrows a native <select> for free keyboard/a11y support. */
.topbar__lang { display: inline-flex; align-items: center; gap: 5px; padding-left: 14px; color: #cfe3f2; border-left: 1px solid rgba(255, 255, 255, .16); }
.topbar__lang select { padding: 2px 3px; color: #fff; background: transparent; border: 0; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.topbar__lang select option { color: #03070d; }

/* Drop the utility bar on small screens; the phone stays reachable via footer/nav. */
@media (max-width: 700px) {
    .topbar__follow { display: none; }
}

@media (max-width: 520px) {
    .topbar__row { min-height: 30px; }
    .topbar__phone span { display: none; }
}