/* ═══════════════════════════════════════════════════════════════════════════
   Header — Theme Builder header layout (top utility bar + main nav)

   Chrome for the global TB header (et_header_layout 337). The bar's content is
   native Divi Text/Code modules fed by Site Info shortcodes ([address] [phone]
   [pharmacy_url] [booking_url]); this file only carries what native controls
   can't express: the serif face on the bar + nav, the green contact icons
   (rendered by the [map_icon]/[phone_icon] SVG shortcodes), the icon size, the
   wrap/icon-only mobile behavior, and small layout polish. Scoped to .collins-*
   classes so nothing leaks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top utility bar — serif, navy, compact ───────────────────────────────── */
.collins-topbar-item,
.collins-topbar-item p {
  margin: 0;
  font-family: var(--font-ivyora-display);
  font-size: 0.9375rem; /* 15px */
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--navy);
}
/* icon + label sit on one baseline */
.collins-topbar-item p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.collins-topbar-item a {
  color: var(--navy);
  text-decoration: none;
}
.collins-topbar-item a:hover {
  color: var(--medium-green);
}

/* green contact icons from [map_icon] / [phone_icon] — SIZE IS CONTROLLED HERE
   (this rule wins over the shortcode's size="" attribute, so tune it here) */
.collins-topbar-item .site-icon svg {
  color: var(--medium-green);
  width: 1.5rem;
  height: 1.5rem;
}

/* let bar items drop to a second line when the row gets tight */
.collins-topbar-col {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}
.collins-topbar-actions {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* CTA cluster (Code module) — Pharmacy link + Request An Appointment button.
   Two adjacent, equal-height chips (flush, no gap, no radius): sage behind
   Pharmacy, yellow behind the button — same treatment at every breakpoint. */
.collins-topbar-cluster {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.collins-topbar-cluster .collins-pharm {
  display: flex;
  align-items: center;
  font-family: var(--font-ivyora-display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: none;
  background-color: #b7c4a7c7;
  padding: 0 1.25rem;
  border-radius: 0;
  transition: color 0.25s ease;
}
.collins-topbar-cluster .collins-portal {
  background-color: var(--light-blue);
  white-space: nowrap;
}
.collins-topbar-cluster .collins-pharm:hover {
  color: var(--medium-green);
}
.collins-topbar-cluster .btn {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 0;
}
@media (max-width: 767px) {
  .collins-topbar-item p { justify-content: center; }
}
/* ── Mobile (≤767px) — bar rows sit flush; CTA cluster spans the full width ── */
@media (max-width: 767px) {
  .collins-topbar-col { row-gap: 0; }
  .collins-topbar-cluster { width: 100%; }
  .collins-topbar-cluster .btn-yellow { flex-grow: 1; }
}

/* ── Main nav — serif links, navy ─────────────────────────────────────────── */
.collins-header-nav a {
  font-family: var(--font-ivyora-display);
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.02em;
}
.collins-header-nav a:hover {
  color: var(--medium-green);
}

/* ── Mobile (≤1080px) — address + phone collapse to ICON ONLY ───────────────── */
@media (max-width: 1080px) {
  .collins-topbar-item,
  .collins-topbar-item p {
    font-size: 0.875rem;
  }
  /* hide the text labels, keep the linked map/phone icons */
  .collins-topbar-addr a:not(.site-icon),
  .collins-topbar-phone .site-phone {
    display: none;
  }
}

/* ── Skip to content — contrast + visibility for Divi Assistant's skip link ──
   Markup is injected by the Divi Assistant plugin; these rules only apply when
   that plugin is active. ─────────────────────────────────────────────────── */
.skip-link.da-screen-reader-text,
.skip-link.da-screen-reader-text:focus {
  color: #ffffff !important;
  background-color: #1a1a1a !important;
  opacity: 1 !important;
  text-decoration: underline !important;
  outline: 2px solid #2ea3f2 !important;
}