/* Settings goldie.css expects that the current gold-i.com stylesheet doesn't define. Scoped to Goldie only. */
.goldie-panel {
  --line-light: #ededed;
  --muted-dark: rgba(255, 255, 255, 0.72);
  --font-display: "Lato", sans-serif;
  --font-body: "Lato", sans-serif;
}
.goldie-panel .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.goldie-panel p, .goldie-panel ul { font-family: var(--font-body); }

/* Contact cards: four to a row keep phone numbers and emails on one line; cards with an Ask Goldie, live chat
   or phone link act on it from anywhere on the card (goldie.js, goldie-prod.js). */
.flex-columns-4 > .component-cards-item { padding: 24px 20px !important; }
.component-cards-item:has(a[href="#ask-goldie"]), .component-cards-item:has(a[href="#live-chat"]),
.component-cards-item:has(a[href^="tel:"]) { cursor: pointer; }

/* Headline above "Crypto and FX" in the home page hero (seed-hero-headline.php), like staging's "One Connection / All
   Markets". The spans carry colours only; size comes from here so it scales on small screens. */
/* margin-bottom: a gap as tall as the headline's letters (Lato bold capitals and ascenders are about 0.76em). */
#hero-text .hero-topline { font: 700 clamp(40px, 5.4vw, 80px)/1.15 "Lato", sans-serif !important; letter-spacing: -0.02em; margin: 0 0 0.76em !important; text-align: center; color: #ffffff; }
#hero-text .hero-topline span { font-size: inherit !important; }
/* The old design leaves 284px above the hero text for a one-line heading; with the headline that pushed the three cards
   below the fold. Phones already use a smaller gap. */
@media (min-width: 768px) {
  #hero .hero-content { padding-top: 156px !important; }
  #hero .hero-cards { margin-top: 40px !important; }
}

/* Purple title banner on every page but the home page: just clear of the menu (which overlays it, 96px tall) instead of
   80px below it, and little space below, so more of the page shows on smaller screens. */
.section-page-header { padding-top: 104px !important; padding-bottom: 24px !important; min-height: 0 !important; }

/* Topline above the header (includes/header/announce.inc.php), matching the new design's announcement bar. */
.goldi-announce { position: relative; z-index: 4; background: #29262b; color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font: 14px/1.4 "Lato", sans-serif; }
.goldi-announce-inner { max-width: 1280px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; text-align: center; }
.goldi-announce-tag { background: #ffdd00; color: #29262b; font: 700 11px/1 "Lato", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 8px; }
.goldi-announce a { color: #ffdd00; text-decoration: none; }
.goldi-announce a:hover { color: #ffdd00; text-decoration: underline; }
.goldi-announce-admin { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 560px) {
  .goldi-announce-inner { display: block; padding: 8px 16px; font-size: 13px; }
  .goldi-announce-inner > * { display: inline; }
  .goldi-announce-tag { display: inline-block; margin-right: 6px; vertical-align: 1px; }
  .goldi-announce a { margin-left: 6px; white-space: nowrap; }
}