/*
 Theme Name:   Thistle Veterinary Clinic
 Theme URI:    https://eoshealthcaremarketing.com/
 Description:  Thistle Veterinary Clinic — EOS Divi 5 child theme.
 Author:       EOS Healthcare Marketing
 Author URI:   https://eoshealthcaremarketing.com/
 Template:     Divi
 Version:      1.0.0
 Text Domain:  thistle
*/

:root {
  /* Fonts — one --font-[slug] per project font */
  --font-mrs-eaves-xl-serif:
    "mrs-eaves-xl-serif", serif; /* Typekit ddu0uxl — headings */
  --font-wavehaus:
    "Wavehaus", sans-serif; /* self-hosted — subheadings + body */

  /* Colors */
  --light-pink: #fef9fb;
  --light-purple: #e6e5f3;
  --navy: #343f6a;
  --dark-navy: #262f55;
  --background: #f7f5f1;
  --background-beige: #eeece7;
  --background-medium-beige: #dfdad1;
  --green: #d1dc88;
}

@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
  #menu-footer-menu {
    flex-direction: column !important;
    align-items: center;
  }
}

body.page-template-sub-service .wp-block-post-title,
body.page-template-sub-service .wp-block-site-title {
  display: none !important;
}

/* ── Global header — Theme Builder (Thistle) ──────────────── */
.thistle-topbar,
.thistle-topbar p,
.thistle-topbar
  a:not(.btn-header-cta):not(.btn-header-app):not(.btn-header-pharmacy),
.thistle-topbar h6,
.thistle-topbar .et_pb_text,
.thistle-topbar .et-pb-icon,
.thistle-topbar .et_pb_icon {
  color: var(--light-pink) !important;
}
.thistle-topbar a {
  text-decoration: none;
}
/* header icons: white on desktop, light-pink on tablet/mobile (base rule above = light-pink at all widths; this overrides icons to white >980) */
@media (min-width: 981px) {
  .thistle-topbar .et-pb-icon,
  .thistle-topbar .et_pb_icon {
    color: #fff !important;
  }
}
/* Desktop: once the right-hand buttons start crowding the NAP (≤1520px), drop the address text — keep the pin icon */
@media (min-width: 981px) and (max-width: 1520px) {
  .thistle-topbar .topbar-address .et_pb_text {
    display: none !important;
  }
}
/* Narrower still (<=1110px): also drop the phone number text - keep the phone icon */
@media (min-width: 981px) and (max-width: 1110px) {
  .thistle-topbar .topbar-phone .et_pb_text {
    display: none !important;
  }
}
/* Header nav: switch to the hamburger at 1100px (Divi defaults to 980). In the 981–1100 gap,
   hide the desktop menu (.et-menu) and reveal Divi's mobile toggle (.et_mobile_nav_menu). The
   dropdown is base-CSS styled + JS-slideToggled, so it works at this width; ≤980 keeps Divi's
   own behavior. Scoped to .thistle-header-nav so the footer menu is untouched. */
@media (min-width: 981px) and (max-width: 1100px) {
  .thistle-header-nav .et-menu {
    display: none !important;
  }
  .thistle-header-nav .et_mobile_nav_menu {
    display: block !important;
  }
}
/* Mobile menu: "Meet the Doctor" is the only item with a submenu, so Divi's
   .menu-item-has-children rule gave it bold + a gray bg — reading as "always active".
   Neutralize it so submenu parents match the rest of the list. */
.thistle-header-nav .et_mobile_menu .menu-item-has-children > a {
  font-weight: inherit;
  background-color: transparent;
}

@media (max-width: 980px) {
  /* Row 1 (navy bar): phone (30%) · location (30%) · Book Now (40% — matches the Figma, so the full-size
     1rem/0.3rem label fits one line).  Row 2: App | Pharmacy 50 / 50.  10-col grid reconciles both. */
  .thistle-topbar .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .thistle-topbar .et_pb_column {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr);
    align-items: stretch !important;
    gap: 0 !important;
  }
  .thistle-topbar .topbar-phone {
    grid-row: 1;
    grid-column: 1 / 3;
    justify-self: center;
    align-self: center;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* location fills the middle cell full-height → its 1px white side borders sit on the cell boundaries */
  .thistle-topbar .topbar-address {
    grid-row: 1;
    grid-column: 3 / 5;
    margin: 0 !important;
    padding: 0 !important;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .thistle-topbar .topbar-phone .et_pb_text {
    display: none !important;
  }
  /* Retina: the 1fr tracks land on fractional pixels, so the two 1px dividers antialias
     differently (one smears to ~2 device px). Hairline 0.5px borders render as one crisp
     device pixel at DPR ≥ 2 → both lines identical. 1x screens keep the 1px above. */
  @media (min-resolution: 2dppx) {
    .thistle-topbar .topbar-address {
      border-left-width: 0.5px;
      border-right-width: 0.5px;
    }
  }
  .thistle-topbar .et_pb_column > .et_pb_module:last-child {
    grid-row: 1;
    grid-column: 5 / 11;
    justify-self: center;
    align-self: center;
    min-width: 0; /* Book Now can't bloat the shared tracks (same fix as the App/Pharmacy cells) */
    max-width: 100%; /* …and the centered button can't spill over the location divider */
    margin: 0 !important;
  }
  /* App + Pharmacy get their own line directly below the navy bar — 60/40 (the longer
     nowrap App label needs the wider cell; matches the mock). min-width:0 lets the cells
     shrink instead of bloating the shared grid tracks, which was pushing the whole grid
     past the viewport (clipped App text + the location cell's right border up on row 1). */
  .thistle-topbar .hdr-app {
    grid-row: 2;
    grid-column: 1 / 7;
    min-width: 0;
    margin: 0 !important;
  }
  .thistle-topbar .hdr-pharmacy {
    grid-row: 2;
    grid-column: 7 / 11;
    min-width: 0;
    margin: 0 !important;
  }
}