/* ════════════════════════════════════════════════════════════════════
   FIP 2026 — SITE-WIDE CHROME (top bar + footer)
   "Chrome" = the frame around the page (top utility bar + footer), as opposed
   to the page content. Loaded on EVERY page (incl. content pages) when the
   fip2026 switch is on — see the hook in website.fip2019.tpl.var.inc.php.
   Restyles the existing 2019 elements (.header-top-bar / .footer / .footerlinks)
   to match the 2026 design without changing the template markup. !important is
   used where the 2019 stylesheet (loaded earlier) would otherwise win.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --fip2026-cyan: #20c4f4;
    --fip2026-topbar-bg: #7bbadd;   /* light blue utility bar */
    --fip2026-ink: #1a2744;
    --fip2026-line: #e5e7eb;
}

/* ── TOP UTILITY BAR ──────────────────────────────────────────────────── */
.header-top-bar {
    background: var(--fip2026-topbar-bg) !important;
    border-bottom: 0 !important;
    font-size: 0.82rem;
}

.header-top-bar .header-top-bar-nav {
    display: flex !important;
    align-items: center !important;   /* all items share one centreline */
    justify-content: flex-end;        /* right-aligned like the design */
    gap: 14px;
    flex-wrap: wrap;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    min-height: 42px;                 /* a stable row height so 30px pills + the
                                         icon/text all centre against the same line */
}

/* Each item fills the row height and centres its own content, so the home icon,
   the pills and the login text all sit on the same centreline. */
.header-top-bar .header-top-bar-nav > li {
    margin: 0;
    list-style: none;
    display: inline-flex !important;
    align-items: center !important;
}

.header-top-bar .header-top-bar-nav a {
    color: var(--fip2026-ink) !important;
    text-decoration: none !important;
    font-weight: 500;
    /* The 2019 theme makes each link a 32px-tall block with padding-top:12px,
       which pushes the text/icon to the bottom (the "more pixels on the bottom"
       you saw). Drop the fixed height + top padding so flex centring works. */
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* The 2019 base rule adds margin-right:25px to every link, which stacks on
       top of the flex gap:14px and opens a big gap (e.g. after JOIN US! before
       Login). Spacing is handled by the list's gap, so drop the margin. */
    margin-right: 0 !important;
}

.header-top-bar .header-top-bar-nav a:hover {
    color: #fff !important;
}

/* Vertically centre the icon/text links (home, join, login) WITHOUT touching
   the google-translate widget (.icon-gt). */
/* Vertically centre ONLY the specific links — home, login, join. Do NOT use a
   catch-all `a` selector here: it would hit the Google Translate widget's links
   and break it. Login has no class, so target it by its href. */
.header-top-bar .header-top-bar-nav-home,
.header-top-bar .topbar-join,
.header-top-bar .header-top-bar-nav a[href*="login_members"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* The 2019 theme adds a "›" separator after each link as an ABSOLUTELY
   positioned :after at top:12px — that fixed offset fights vertical centring.
   Anchor it to the link's own centre instead. */
.header-top-bar .header-top-bar-nav a {
    position: relative;
}
.header-top-bar .header-top-bar-nav a:after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ── Pill search box (left of the translate widget) ───────────────────── */
.header-top-bar .topbar-search__form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 100px;
    height: 30px;                 /* match the translate pill height */
    padding: 0 12px;
    line-height: 1;
}

.header-top-bar .topbar-search__icon {
    color: var(--fip2026-ink);
    font-size: 0.78rem;
    opacity: 0.7;
}

/* The 2019 style.css gives inputs a tall fixed height + padding, which top-
   aligns the placeholder. Reset to a natural, vertically-centred input. */
.header-top-bar .topbar-search__input {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 0.8rem;
    color: var(--fip2026-ink);
    width: 160px;                 /* old: 130px */
    height: 22px !important;
    line-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-top-bar .topbar-search__input::placeholder {
    color: #6b7280;
}

/* ── Pill-shape the Google Translate dropdown ─────────────────────────── */
/* The 2019 style.css gives .icon-gt a fixed 52px height, a negative top margin,
   and a 39px left padding (for its own google-translate logo background). That
   wrapper is what pushed the box to the top and left a big gap at the bottom.
   Reset the wrapper to a normal, auto-height, centred item (no logo bg). */
.header-top-bar .icon-gt {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Google renders the widget as .goog-te-gadget: the <select> plus a
   "Powered by Google" text/links node and some line-height/baseline of its own.
   That extra text is what pushed the box up out of the bar. Collapse the
   gadget to just hold the select, vertically centred, with NO stray text. */
.header-top-bar .icon-gt .goog-te-gadget {
    font-size: 0 !important;          /* hide "Powered by Google Translate" text */
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    color: transparent !important;
}

/* Hide the gadget's own text/link children (e.g. the "Powered by" links),
   keep only the dropdown. */
.header-top-bar .icon-gt .goog-te-gadget > span {
    display: none !important;
}

/* Small translate icon to the LEFT of the pill (like the search magnifier),
   using the original logo already on the server. */
.header-top-bar .icon-gt::before {
    content: "";
    width: 20px;                  /* match the home icon (1.25rem ≈ 20px) */
    height: 20px;
    margin-right: 6px;
    flex: 0 0 20px;
    background: url("inc/fw_assets/images/logo-google-translate.svg") no-repeat center / contain;
}

/* Style the widget's <select> as a white pill to match the search box.
   Strip the native appearance and add a small subtle caret via SVG. */
.header-top-bar .icon-gt .goog-te-combo {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #fff !important;
    /* small subtle chevron, right-aligned */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236b7280' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 8px 5px !important;
    border: 0 !important;
    border-radius: 100px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 26px 0 14px !important;   /* room for the caret on the right */
    font-size: 0.8rem !important;
    color: var(--fip2026-ink) !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Join us = dark button (approved design: .util-join, bg #2a2f37).
   Selector kept more specific than ".header-top-bar-nav a" so it wins. */
.header-top-bar .header-top-bar-nav a.topbar-join {
    background: #2a2f37 !important;
    color: #fff !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;   /* JOIN US! */
    letter-spacing: -0.02em !important;      /* condensed / tight */
    font-stretch: condensed;
    height: auto !important;
}

.header-top-bar .header-top-bar-nav a.topbar-join:hover {
    background: #000 !important;
    color: #fff !important;
}

/* The 2019 base stylesheet adds a "›" chevron (:after, FontAwesome \f105) after
   every top-bar nav link as a separator. After the JOIN US! pill button it sits
   ~11px to the right and, with the list gap, opens a big gap before Login.
   Drop the chevron on the button and the trailing Login link. */
.header-top-bar .header-top-bar-nav a.topbar-join:after,
.header-top-bar .header-top-bar-nav a[href*="login_members"]:after {
    content: none !important;
}

/* On small screens the top bar runs out of room and items wrap to a 2nd line.
   Hide the JOIN US! button there — it's redundant with the quick-links section.
   (Raise/lower the 767.98px breakpoint if it should drop sooner.) */
@media (max-width: 767.98px) {
    .header-top-bar .header-top-bar-nav li:has(> a.topbar-join) {
        display: none !important;
    }
}

/* ── MAIN NAV LOGO ────────────────────────────────────────────────────── */
/* The 2019 theme positions the brand logo absolutely (top:42px, height:111px)
   so it hangs below the navbar. Pull it back INSIDE the navbar (2026 design):
   normal flow, sized to fit. */
nav.navbar a.navbar-brand-home-logo {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
}

nav.navbar a.navbar-brand-home-logo img,
.navbar-logo-img {
    position: static !important;
    top: auto !important;
    height: 48px !important;
    width: auto !important;
}

/* The 2019 masthead has a fixed height sized for the overhanging logo, which
   bottom-aligns the menu. Center its content vertically and keep comfortable
   padding so there's breathing room between the top bar and the carousel. */
#masthead {
    height: auto !important;
    margin-bottom: 0 !important;
    padding-top: 18px;
    padding-bottom: 18px;
    display: flex !important;
    align-items: center !important;
}

/* the nav fills the masthead so its own items can centre too */
#masthead > nav,
#masthead .navbar {
    width: 100%;
    align-items: center !important;
}

/* Let the menu wrap to a 2nd row when it's too full for one line (the 2019
   theme forces nowrap). Individual labels still never break mid-word. The
   masthead is align-items:center, so a 2-row menu grows up AND down (it isn't
   pushed onto the banner below). */
#masthead .navbar-nav {
    flex-wrap: wrap !important;
    align-items: center;
    row-gap: 4px;
}

/* The 2019 theme gives each menu link a fixed 68px height with
   vertical-align:bottom, which pushes the labels to the bottom of the navbar.
   Use a natural height, vertically centred, and keep each label on one line. */
#masthead .nav-item .nav-link {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
/* Hide the old dark partners / works-for / contact block site-wide. */
.footerlinks {
    display: none !important;
}

/* Light single-bar footer: logo + copyright left, links right.
   The 2019 theme sets .footer { height: 50px; margin-top: 25px } — override
   those so the footer sizes to its content. */
.footer {
    background: #fff !important;
    color: var(--fip2026-ink) !important;
    border-top: 1px solid var(--fip2026-line) !important;
    height: auto !important;
    margin: 0 !important;          /* no margin above/below the footer */
    padding: 24px 0 !important;
}

/* No extra space below the footer: the footer is the last visible thing. */
#page,
#page-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Clear the 2019 grey .footer-container background so the footer stays white. */
.footer .footer-container {
    background: transparent !important;
}

.footer .row {
    align-items: center;
}

/* Left column: logo + copyright vertically centred together.
   The 2019 theme positions the logo absolutely (top:-21px) and offsets .copy
   with margins — undo both so they sit normally in a flex row. */
.footer .row > .col-md-6:first-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
}

footer.footer a.logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
}

.footer .logo img {
    height: 42px !important;
    width: auto !important;
    display: block;
}

footer.footer .copy {
    margin: 0 !important;
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    line-height: 1.2;
}

.footer .footer-right {
    text-align: right;
}

.footer a {
    color: var(--fip2026-ink) !important;
    text-decoration: none !important;
}

.footer a:hover {
    color: var(--fip2026-cyan) !important;
}