/* Header — Theme Builder global header (top bar + logo/nav).
   Companion CSS for the global-header template → copy to the target's
   css/global/header.css. No brand colors — fully portable. */

/* ≤1390px — nav switches to the hamburger early (Divi's own switch is
   980; six items + a logo run out of room well before that). Scoped to
   .eos-header-nav so the footer is untouched. */
@media (min-width: 981px) and (max-width: 1390px) {
  .eos-header-nav .et-menu { display: none !important; }
  .eos-header-nav .et_mobile_nav_menu { display: block !important; }
}

/* ── Nav link hit area ─────────────────────────────────────────────
   Divi pads menu links 31px top and bottom (measured), so each item's
   clickable box was 86px tall around 24px of text — 62px of dead link
   above and below. Zeroing the vertical padding makes the hit area match
   the text. Horizontal spacing between items is untouched; that comes
   from the li's own padding, not the anchor.

   Side effect worth knowing: the nav, not the 67px logo, was setting the
   nav row's height (32 + 86 + 24 = 142), so the header gets shorter. Add
   row padding in the builder if you want the original height back.

   Zeroing the padding alone is not enough here: the links are flex items
   and stretch to the tallest thing in the row, so they still measured 67px
   against 24px of text once the logo became the tallest element. Centring
   them instead of stretching makes the box hug the text. */
.eos-header-nav .et-menu { align-items: center; }

.eos-header-nav .et-menu > li,
.eos-header-nav .et-menu > li > a {
  align-self     : center;
  padding-top    : 0 !important;
  padding-bottom : 0 !important;
}

/* ≤1575px — hide the top-bar address text (the map pin stays). The bar runs
   out of room for the full address well before the nav does, so this switches
   earlier than the hamburger breakpoint below. Divi's own disabledOn on the
   text module handles ≤980, so this only needs to cover 981–1575. */
@media (min-width: 981px) and (max-width: 1575px) {
  .hdr-address { display: none !important; }
}

/* ≤1120px — hide the TEXT US AT label (its speech-bubble icon stays). Divi's
   disabledOn on the text module covers ≤980, so this spans 981–1120. */
@media (min-width: 981px) and (max-width: 1120px) {
  .hdr-text-us { display: none !important; }
}

/* NOTE: an inherited `.et-l--header .btn-pill { padding: .5rem .9rem;
   letter-spacing: .05rem }` rule used to sit here, from the imported
   template's two-pill top bar (Book Now + Pharmacy). At (0,2,0) in a file
   that loads after buttons.css it silently beat .btn-square (0,1,0), so
   the CTA's fluid padding never applied and subheading-sm's tracking was
   overridden on mobile. Removed — .btn-square owns both now. */

/* NOTE: a `.et-l--header .btn-square:hover { transform: none; background:
   white }` rule used to sit here. It is gone because buttons.css now owns
   both halves for every button: the base has no transform at all, and
   .btn-square declares --btn-hover-bg: white. Scoping it to the header was
   what made the hero's identical button hover differently. */

/* ── ≤980px — the CTA fills the bar height ─────────────────────────
   The pale background belongs to the <a>, and an inline-flex anchor is
   sized by its content: ~38px (.5rem + 16px/1.375 + .5rem) against the
   icon segments' ~40px (.5rem + 1.5rem glyph + .5rem). The column
   centres the shorter button, leaving ~1px of bar showing above and
   below it — which reads as a border on a light box.

   Stretching the anchor to the bar removes the arithmetic entirely, so
   it cannot drift when the type scale or icon size changes. Four rules
   because the chain has to stretch the whole way down: the group is a
   centred flex item, and Divi inserts .et_pb_code_inner between the
   module box and the anchor.

   Hooked on .hdr-cta, NOT the generated .et_pb_code_0_tb_header — index
   classes renumber the moment a module is inserted. */
@media (max-width: 980px) {
  .et-l--header .hdr-cta { align-self: stretch; }
  .et-l--header .hdr-cta .et_pb_code,
  .et-l--header .hdr-cta .et_pb_code_inner { display: flex; flex: 1 1 auto; }
  .et-l--header .hdr-cta .btn-square { flex: 1 1 auto; }
}