/* Top utility bar (social icon + announcement carousel + country/language
   selectors) — visual restyle only, to match the footer's dark maroon /
   cream palette for a consistent top-to-bottom theme. No structure,
   content, links, or JS behavior changed: every element here already
   reads its color from the same CSS custom properties the footer uses
   (background, foreground, link), so overriding them on this scoped
   selector is enough to recolor the whole bar. */
.utility-bar.color-scheme-bab227d5-051e-4892-bcdf-498f74ceea0e {
  --color-background: 44, 12, 18;
  --gradient-background: #2c0c12;
  --color-foreground: 244, 236, 224;
  --color-link: 244, 236, 224;
  --color-button: 244, 236, 224;
  --color-button-text: 44, 12, 18;
}

/* The bar's default border color also derives from --color-foreground via
   rgba(), so it automatically becomes a subtle cream-tinted divider
   instead of the old dark-on-dark line. Nothing else to add. */

/* Country/language selectors removed from the announcement bar, so the
   3-col grid (social-icons | announcements | language-currency) only has
   its first two areas left. Reflow to 2 columns so the announcement
   carousel takes the freed-up width instead of leaving a gap. */
@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 7fr;
    grid-template-areas: "social-icons announcements";
  }
}

/* The announcement carousel text carries the shared ".h5" utility class
   for sizing, and base.css hardcodes all headings (h1–h5, .h1–.h5) to a
   red brand color. That's fine for page headings, but on this bar's dark
   maroon background it reads as low-contrast red-on-maroon instead of
   legible text. This file loads on every page (unlike the per-page CSS
   bundles), so scoping the override here fixes it site-wide instead of
   only on the Home page (see the similar, Home-only fix in
   homepage-redesign.css). Text color only — no structure/layout change. */
.announcement-bar__message,
.announcement-bar__message span {
  color: #fff;
}

/* The top-bar social row now uses the same backend-managed platform list as
   the footer. Keep the old single-icon markup hidden so a configured social
   link is rendered exactly once. */
.utility-bar__legacy-social {
  display: none !important;
}

.utility-bar__social-list {
  grid-area: social-icons;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.utility-bar__social-list .list-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: rgb(var(--color-foreground));
}

.utility-bar__social-list .svg-wrapper,
.utility-bar__social-list .icon {
  width: 1.8rem;
  height: 1.8rem;
}

@media screen and (max-width: 989px) {
  .utility-bar__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "social-icons announcements";
  }

  .utility-bar__social-list {
    gap: 0.25rem;
  }
}

@media screen and (max-width: 749px) {
  .utility-bar__social-list .list-social__link {
    width: 2.4rem;
    height: 2.4rem;
  }

  .utility-bar__social-list .svg-wrapper,
  .utility-bar__social-list .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}