/* Header — Theme Builder global header (top bar + nav). */

/* Switch to the hamburger at 1345px (Divi defaults to 980px): hide the desktop menu, show Divi's
   mobile toggle. Scoped to .quebec-header-nav so the footer menu is untouched. */
@media (min-width: 981px) and (max-width: 1345px) {
  .quebec-header-nav .et-menu {
    display: none !important;
  }
  .quebec-header-nav .et_mobile_nav_menu {
    display: block !important;
  }
}

/* Hide the address text below 1320px (Divi already hides it ≤980) so the three header buttons have
   room on narrower desktops; the map-pin icon stays. Only the address — the phone text still hides
   at ≤980 with the mobile layout. */
@media (max-width: 1320px) {
  .et-l--header .et_pb_text_0_tb_header { display: none !important; }
}

/* Header buttons — Pet Portal · Pharmacy · Request an Appointment share the "Header Button"
   code module, wrapped in .hdr-buttons. Flex row with a gap on every breakpoint. */
.hdr-buttons {
  display: flex;
  flex-wrap: nowrap;   /* desktop: keep all three on one line (mobile re-enables wrap) */
  align-items: center;
  gap: 0.75rem;
}

/* Tablet + mobile (≤980px) — the top bar wraps into two lines: the two contact icons become
   50/50 colour bars (line 1), and the three buttons drop to their own centred line (line 2).
   The address/phone text labels are already hidden (Divi), so each group shows just its icon. */
@media (max-width: 980px) {
  /* Full-bleed the top bar: drop the row's 90% width, side gutter and 12px top gap so the two
     icon halves fill the sides + top. The divider (was the row's bottom border) moves onto the
     inset buttons row below. Heights go auto so the two wrapped lines don't overflow the nav. */
  .et-l--header .et_pb_section_0_tb_header { height: auto !important; min-height: 0 !important; }
  .et-l--header .et_pb_section_0_tb_header .et_pb_row_0_tb_header {
    display: block !important;   /* block flow so the column's height includes BOTH wrapped lines */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;    /* beat Divi's row gutter (the 12px top gap) */
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .et-l--header .et_pb_column_0_tb_header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: stretch !important;   /* both icon bars take the same (line) height */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;                  /* kill Divi's 30px column row-gap (the big gap above the buttons) */
    height: auto !important;
    min-height: 0 !important;
  }

  /* the two icon halves — equal 50% full-bleed colour bars; icon centred with 0.3rem above + below */
  .et-l--header .et_pb_group_0_tb_header,
  .et-l--header .et_pb_group_1_tb_header {
    flex: 0 0 50% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0.3rem 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .et-l--header .et_pb_group_0_tb_header { background: var(--mist); }                     /* #CBDAD3 (map) */
  .et-l--header .et_pb_group_0_tb_header .et-pb-icon { color: var(--pine) !important; }   /* icon #105F57 */
  .et-l--header .et_pb_group_1_tb_header { background: var(--pine); }                     /* #105F57 (phone) */
  .et-l--header .et_pb_group_1_tb_header .et-pb-icon { color: var(--mist) !important; }   /* icon #CBDAD3 */

  /* buttons row — inset to 90% (aligned with the divider it now carries), spaced apart end-to-end,
     with 0.5rem above + below. The 1px olive border is the divider, now beneath the buttons. */
  .et-l--header .et_pb_code_0_tb_header {
    flex: 0 0 auto !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid var(--olive) !important;
    box-sizing: border-box !important;
    height: auto !important;
  }
  .et-l--header .hdr-buttons { justify-content: space-between; flex-wrap: wrap; gap: 0.35rem; padding: 0; }
  .et-l--header .hdr-buttons .btn-primary {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    letter-spacing: 0.01rem;
  }
}