/*
 * Contact info bar (spec §4.19 "Info bar") [M computed] [M js:1802190c]: #222, white, py 24. Column centred, gap 24
 * (h 172 at 375); row, space-between from 768 with 1×32 gray-600 separators (h 80). Icons 20 orange, gap 12.
 * Phone 18/28 semibold, mail 16/24 (both hover orange), hours gray-300.
 */
.contact-infobar { padding-block: calc(var(--spacing) * 6); background-color: var(--color-brand-dark); color: var(--color-white); }
.contact-infobar__row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .contact-infobar__row { flex-direction: row; } }
.contact-infobar__sep { display: none; width: 1px; height: calc(var(--spacing) * 8); background-color: var(--color-gray-600); }
@media (min-width: 48rem) { .contact-infobar__sep { display: block; } }
.contact-infobar__item { display: flex; align-items: center; gap: calc(var(--spacing) * 3); }
.contact-infobar__icon { flex-shrink: 0; color: var(--color-brand-orange); }
.contact-infobar__phone { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: var(--font-weight-semibold); }
.contact-infobar__phone, .contact-infobar__mail { transition: color var(--duration-fast) var(--ease-default); }
a.contact-infobar__phone:hover, .contact-infobar__mail:hover { color: var(--color-brand-orange); }
.contact-infobar__hours { color: var(--color-gray-300); }