/* contact_bar block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   contact bar with bg + align modifiers */

.contact-bar__inner { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1.2rem 1.4rem; }
.contact-bar--bordered .contact-bar__inner { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-bar--bg-white .contact-bar__inner { background: var(--white); }
.contact-bar--bg-light-grey .contact-bar__inner { background: var(--light); }
.contact-bar--bg-navy .contact-bar__inner { background: var(--surface-dark); }
.contact-bar--bg-dark .contact-bar__inner { background: var(--surface-dark-alt); }
.contact-bar--align-center .contact-bar__inner { justify-content: center; }
.contact-bar--align-left .contact-bar__inner { justify-content: flex-start; }
.contact-bar--bg-transparent .contact-bar__inner { background: transparent; border: 0; padding-inline: 0; }
.contact-bar__item { display: flex; gap: .7rem; align-items: center; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.contact-bar__item a { color: inherit; text-decoration: none; }
.contact-bar__item a:hover { color: var(--link); }
.contact-bar__item svg { width: 22px; height: 22px; color: var(--em-color); }
:is(.contact-bar--bg-navy, .contact-bar--bg-dark) .contact-bar__item { color: var(--white); }
:is(.contact-bar--bg-navy, .contact-bar--bg-dark) .contact-bar__item svg { color: var(--accent-on-dark); }