/* ==========================================================================
   Header utility bar

   The strip was the same bright blue as the hero and the old footer, so the
   page opened and closed on its loudest colour and the small text inside it
   had to fight that background. The footer is now a deep blue-black; this
   matches it, which frames the page: a dark strip at the top, white
   navigation, a dark footer.

   Loaded after style.css and redesign.css, scoped to .header-top so the
   navigation below is untouched.
   ========================================================================== */

.header-top {
    --t-ground: #14232f;   /* palette.css overrides this with the shared token */
    --t-text:   rgba(230, 238, 245, .92);
    --t-mute:   rgba(230, 238, 245, .58);
    --t-line:   rgba(255, 255, 255, .12);
    --t-accent: #4fa8dd;

    background: var(--t-ground) !important;
    color: var(--t-text);
    font-size: .86rem;
}

.header-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 44px;
    padding-block: 6px;
}

/* --------------------------------------------------------------------- left */

.header-top .header-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-top .header-contact li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.header-top .header-contact i {
    color: var(--t-accent);
    font-size: .8rem;
}

.header-top .header-contact a {
    color: var(--t-text);
    text-decoration: none;
    transition: color .16s ease;
}

.header-top .header-contact a:hover { color: var(--t-accent); }

.header-top .header-contact .muted {
    color: var(--t-mute);
    font-size: .8rem;
}

/* -------------------------------------------------------------------- right */

.header-top__right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-top__links {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-top__links a {
    color: var(--t-mute);
    text-decoration: none;
    transition: color .16s ease;
}

.header-top__links a:hover { color: var(--t-accent); }

/* A hairline between the links and the social buttons, rather than a gap
   that reads as two unrelated groups. */
.header-top__links + .header-socials {
    padding-left: 18px;
    border-left: 1px solid var(--t-line);
}

.header-top .header-socials {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-top .header-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: var(--t-text);
    font-size: .8rem;
    transition: background .16s ease, transform .16s ease;
}

.header-top .header-socials a:hover {
    background: var(--t-accent);
    transform: translateY(-1px);
}

/* Only for an uploaded picture the brand map did not recognise. Left as it
   was drawn: inverting it turned a dark disc into a white one. */
.header-top .header-socials img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 991px) {
    .header-top__links { display: none; }
    .header-top__links + .header-socials { padding-left: 0; border-left: 0; }
}

@media (max-width: 767px) {
    .header-top .header-contact .muted { display: none; }
    .header-top__inner { justify-content: center; }
    .header-top .header-contact { justify-content: center; gap: 6px 16px; }
    .header-top__right { display: none; }
}