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


:root {

  /* Fonts — one --font-[slug] per project font */
  --font-harlow-duo-serif-plain : "harlow-duo-serif-plain", serif;
  --font-sweet-sans-pro         : "sweet-sans-pro", sans-serif;

  /* Colors */
  --peri        : #F5F7FF;
  --frost       : #DFEEFA;
  --sky         : #A0BBD6;
  --teal        : #4D6D78;
  --sea-glass   : #E9F4F3;
  --light-green : #EBF5EC;
  --aqua        : #B7D2CF;
  --sea         : #88A79F;
  --dark-sky    : #84A3C3;
  --blue        : #7697B8;
  --button      : #008A9F;

}


/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  height          : 42px;
  padding         : 0 20px;
  font-family     : var(--font-sweet-sans-pro);
  font-size       : var(--text-sub-sm);
  font-weight     : 700;
  line-height     : normal;
  letter-spacing  : 0.08em;
  text-transform  : uppercase;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : background-color 0.2s ease, color 0.2s ease;
}

.btn-frost {
  background-color : var(--frost);
  color            : var(--teal);
}

.btn-frost:hover {
  background-color : var(--sky);
  color            : var(--teal);
}

.btn-teal {
  background-color : var(--button);
  color            : var(--peri);
}

.btn-teal:hover {
  background-color : var(--teal);
  color            : var(--peri);
}

.btn-peri {
  background-color : var(--peri);
  color            : var(--teal);
  border           : 1px solid var(--sky);
  text-transform   : none;
}

.btn-peri:hover {
  background-color : var(--frost);
  color            : var(--teal);
}

.btn-light-green {
  background-color : var(--light-green);
  color            : var(--teal);
  text-transform   : none;
  font-weight      : 700;
}

.btn-light-green:hover {
  background-color : var(--aqua);
  color            : var(--teal);
}

@media (max-width: 980px) {
  .btn         { height: 38px; }
  .btn-peri    { height: 40px; }
}

@media (max-width: 980px) {

  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }

  .pa-open-mobile-menu .et_pb_menu_inner_container,
  .pa-open-mobile-menu .et_pb_menu__wrap,
  .pa-open-mobile-menu .et-menu-nav {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .pa-open-mobile-menu .et_pb_menu__menu .et-menu,
  .pa-open-mobile-menu ul.et-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pa-open-mobile-menu .et_pb_menu__menu .et-menu > li,
  .pa-open-mobile-menu ul.et-menu > li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }

  .pa-open-mobile-menu .et_pb_menu__menu .et-menu > li > a,
  .pa-open-mobile-menu ul.et-menu > li > a {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }

}