/*
 Theme Name:   Bluebonnet Family Vet
 Theme URI:    https://eoshealthcaremarketing.com/
 Description:  Bluebonnet Family Vet — EOS Divi 5 child theme.
 Author:       EOS Healthcare Marketing
 Author URI:   https://eoshealthcaremarketing.com/
 Template:     Divi
 Version:      1.0.0
 Text Domain:  bluebonnet
*/


/* ═══════════════════════════════════════════════════════════════════
   BLUEBONNET — style.css   ·   table of contents
   ───────────────────────────────────────────────────────────────────
   1. FOUNDATIONS ........... :root font + color tokens
   2. GLOBAL OVERRIDES ...... Divi mobile-menu fix · sub-service title
   3. COMPONENTS · BUTTONS .. btn-header / -outline / -cta / -solid /
                              -hero (+left/right) / -fill
   4. COMPONENTS · NAV ...... footer-menu (+ sub-menu, responsive)
   5. LAYOUT UTILITIES ...... fill-image
   Type scale lives in css/typography.css (enqueued before this file).
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. FOUNDATIONS ═══════════════════════════════════════════════ */
:root {

  /* Fonts — one --font-[slug] per project font (Adobe Fonts kit mxf2qej) */
  --font-aesthet-nova   : "aesthet-nova", sans-serif;
  --font-sweet-sans-pro : "sweet-sans-pro", sans-serif;

  /* Colors — seeded into Divi Global Colors via WP-CLI (see create-theme output) */
  --primary        : #313B97;
  --primary-mid    : #5D6BB2;
  --primary-light  : #93A0E5;
  --primary-pale   : #D0D4EA;
  --accent         : #C9D342;
  --accent-light   : #E3E7AB;
  --secondary      : #689853;
  --secondary-dark : #2E7F3E;

}


/* ═══ 2. GLOBAL OVERRIDES ══════════════════════════════════════════ */
@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: stretch;        /* equal-width pills (center collapsed them to content width) */
    margin-left: auto;
    margin-right: auto;          /* center the equal-width block on tablet/mobile */
  }
}

/* EOS: hide default block-template title on sub-service pages */
body.page-template-sub-service .wp-block-post-title, body.page-template-sub-service .wp-block-site-title { display:none !important; }


/* ═══ 3. COMPONENTS · BUTTONS ══════════════════════════════════════ */

/* ── Header button ───────────────────────────────────────────
   Pill CTA for the header (and matching hero buttons).
   PAIR with .subheading-lg for the text — inherits Sweet Sans Pro +
   letter-spacing 0.12em from it. The button sets its OWN font-size
   (13→24px) to match the comp on mobile, since subheading-lg's floor
   is 18px; the desktop 24px equals the Figma "L Subheading" value.
   Set the background per-instance INLINE in the Divi Code module;
   the button label is just the element's text. Example:
     <a class="subheading-lg btn-header" style="background: var(--accent);">BOOK NOW</a>
   ──────────────────────────────────────────────────────────── */
.btn-header {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 0.75rem 1.25rem;
  border-radius   : 6.25rem;             /* full pill */
  background      : var(--accent);       /* default — override inline per button */
  color           : var(--primary);      /* #313B97 — override inline if needed  */
  font-weight     : 800 !important;      /* Sweet Sans +200 vs Figma to match on-screen (capped at kit max 800); !important beats Divi */
  font-size       : clamp(0.813rem, 0.622rem + 0.813vw, 1.500rem);  /* 13px → 24px — override subheading-lg to match the comp on mobile */
  line-height     : normal;
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : opacity 0.2s ease;
}
.btn-header:hover { opacity: 0.9; }


/* ── Outline button ──────────────────────────────────────────
   Bordered pill — the "Visit website" card CTA.
   PAIR with .body-lg for the text: body-lg's 20→24→28px range matches
   the comp's "L Body" EXACTLY at both breakpoints, so no font-size
   override is needed. body-lg supplies Sweet Sans Pro + 0.08em spacing
   + line-height; this class adds the shape, weight, border + fill.
   Background / border / label are editable inline per instance:
     <a class="body-lg btn-outline" style="background:#FCFFD8; border-color:#B6BDE6;">Visit website</a>
   ──────────────────────────────────────────────────────────── */
.btn-outline {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 0.375rem 1.75rem;
  border-radius   : 6.25rem;               /* full pill */
  border          : 3px solid #B6BDE6;     /* periwinkle — override inline per button */
  background      : #FCFFD8;               /* pale yellow — override inline per button */
  color           : var(--primary);        /* #313B97 — override inline if needed     */
  font-weight     : 700;                   /* Sweet Sans +200 vs Figma to match on-screen */
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : opacity 0.2s ease;
}
.btn-outline:hover { opacity: 0.9; }


/* ── CTA button ──────────────────────────────────────────────
   Large solid pill — the in-page "BOOK NOW" CTA. Same look as
   .btn-header, one size up. PAIR with .body-xl for the text:
   body-xl is 24→32px, which matches the comp exactly, so no size
   override is needed (like .btn-outline + .body-lg). This class
   adds the shape, bold weight + 0.08em tracking.
   Background / label are editable inline per instance:
     <a class="body-xl btn-cta" style="background: var(--accent);">BOOK NOW</a>
   ──────────────────────────────────────────────────────────── */
.btn-cta {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  padding         : 0.75rem 2.5rem;
  border-radius   : 6.25rem;             /* full pill */
  background      : var(--accent);       /* default — override inline per button */
  color           : var(--primary);      /* #313B97 — override inline if needed  */
  font-weight     : 800 !important;      /* Sweet Sans +200 (capped at kit max 800); !important beats Divi */
  letter-spacing  : 0.08em;              /* comp: 0.16rem @ 32px = 0.08em */
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : opacity 0.2s ease;
}
.btn-cta:hover { opacity: 0.9; }


/* ── Solid pill button (generic) ─────────────────────────────
   Borderless solid pill. PAIR with a type class for size/weight
   (e.g. .body-lg for the "Services" button). Padding is em-based
   so it scales with the paired text size. Set the background
   inline per instance; the label is the element text. (.btn-cta
   and .btn-header are size-specific takes on this same shape.)
     <a class="body-lg btn-solid" style="background:#E0E5FF;">Services</a>
   ──────────────────────────────────────────────────────────── */
.btn-solid {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5em;
  padding         : 0.5em clamp(1.75rem, -0.19rem + 8.28vw, 8.75rem);  /* sides: ~28px mobile (like other buttons) → ~140px desktop */
  text-indent     : 0.04em;              /* offset letter-spacing's trailing space so the label centers L/R */
  border-radius   : 6.25rem;             /* full pill */
  background      : var(--accent);       /* default — override inline per button */
  color           : var(--primary);      /* navy text; override inline if needed */
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : opacity 0.2s ease;
}
.btn-solid:hover { opacity: 0.9; }


/* ── Hero split buttons ──────────────────────────────────────
   The paired hero CTAs (PHARMACY + BOOK NOW) that sit side by
   side as one split pill: the LEFT button rounds its left end,
   the RIGHT button rounds its right end, and their inner edges
   stay square so the pair meets flush. The two are otherwise
   identical — they just swap which side is round (and the bg,
   set inline). PAIR with .subheading-xl for the text — it supplies
   Sweet Sans Pro, weight, 0.05em tracking, and the fluid size
   (20→40px). Each button sizes
   to its content: the side padding clamps 9rem (desktop) → 1.5rem
   (mobile); vertical clamps 1.5rem (desktop) → 0.5rem (mobile).
   Set the background per instance inline; the label is the text.
     <a class="subheading-xl btn-hero btn-hero-left"  style="background:var(--primary-pale)">PHARMACY</a>
     <a class="subheading-xl btn-hero btn-hero-right" style="background:#BDDD8F">BOOK NOW</a>
   To make the pair meet flush, drop both in adjacent columns (or a
   flex row) with the gutter/gap set to 0 — no width:100% needed.
   ──────────────────────────────────────────────────────────── */
.btn-hero {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5em;
  padding         : clamp(0.5rem, 0.223rem + 1.183vw, 1.5rem) clamp(1.5rem, -0.579rem + 8.869vw, 9rem);  /* vertical: 0.5rem mobile → 1.5rem desktop · sides: 1.5rem mobile → 9rem desktop */
  text-indent     : 0.05em;              /* offset subheading-xl's trailing letter-spacing so the label centers L/R */
  background      : var(--primary-pale); /* default — override inline per button */
  color           : var(--primary);      /* navy — override inline if needed */
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap !important;   /* beat Divi's text wrapping — keeps "BOOK NOW" on one line */
  cursor          : pointer;
  transition      : opacity 0.2s ease;
}
.btn-hero:hover { opacity: 0.9; }

/* Rounded ends — only difference between the two: which side rounds.
   Inner edge stays square so the pair reads as one continuous pill. */
.btn-hero-left  { border-radius: 6.25rem 0 0 6.25rem; }   /* round LEFT, square RIGHT  (PHARMACY) */
.btn-hero-right { border-radius: 0 6.25rem 6.25rem 0; }   /* square LEFT, round RIGHT  (BOOK NOW) */


/* ── Fill button ─────────────────────────────────────────────
   Full-width pill — ALWAYS fills the column it's in (no inline
   width needed). The stacked "form" buttons (New Patient Form,
   etc.). PAIR with a type class for the clamped text — .body-lg
   matches the comp's L Body exactly (20px → 28px, Sweet Sans Pro,
   0.08em tracking). Vertical padding is em-based so it tracks the
   text. Set the background inline per instance; the label is the
   element text. Long labels wrap centered (it's full-width, so
   they won't overflow). Add a border inline for the outlined look.
     <a class="body-lg btn-fill" style="background:#FCFFD8">New Patient Form</a>
   ──────────────────────────────────────────────────────────── */
.btn-fill {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5em;
  width           : 100%;
  box-sizing      : border-box;
  padding         : 0.5em 1.5em;
  border-radius   : 6.25rem;             /* full pill */
  background      : #FCFFD8;             /* pale yellow — override inline per button */
  color           : var(--primary);      /* navy — override inline if needed */
  text-align      : center;
  text-decoration : none;
  cursor          : pointer;
  transition      : background 0.2s ease, color 0.2s ease;
}
.btn-fill:hover {
  background : var(--primary) !important;  /* #313B97 — !important beats the inline background */
  color      : #fff !important;            /* white text on hover (beats Divi link-hover color) */
}


/* ═══ 4. COMPONENTS · NAVIGATION ═══════════════════════════════════ */

/* ── Footer menu ─────────────────────────────────────────────
   Vertical pill navigation. Apply .footer-menu to the menu <ul>
   (e.g. wp_nav_menu menu_class, or a hand-coded <ul> in a Code
   module). Always column-stacked. Parent items expand their
   sub-menu as a panel below the button (accordion) on click —
   driven by js/footer-menu.js, which toggles .eos-open.
   (If the menu is inside a Divi Menu module, the class lands on
   the wrapper — retarget these selectors at the inner <ul>.)
   ──────────────────────────────────────────────────────────── */
.footer-menu {
  display        : flex;
  flex-direction : column;                  /* always vertical */
  gap            : 0.75rem;
  width          : fit-content;             /* shrink to the widest item… */
  max-width      : 100%;                    /* …but never overflow the container */
  align-items    : stretch;                 /* every pill matches the widest one */
  margin         : 0;
  padding        : 0;
  list-style     : none;
}
.footer-menu li { margin: 0; list-style: none !important; }   /* no list bullets (beats Divi text-module list styling) */
.footer-menu a  { text-transform: uppercase; }                /* nav is all-caps — type normal case in the menu */

/* Top-level pill buttons */
.footer-menu > li > a {
  display         : flex !important;        /* beat Divi's responsive link styles */
  align-items     : center;
  justify-content : center;
  width           : 100% !important;        /* fill the li → all pills equal width (incl. tablet/mobile) */
  box-sizing      : border-box;
  padding         : 0.625rem 1.5rem;
  border-radius   : 6.25rem;
  background      : var(--primary-mid);     /* #5D6BB2 */
  color           : #fff;
  font-family     : var(--font-sweet-sans-pro);
  font-weight     : 700;                    /* Sweet Sans +200 (white-on-color reads thin too) */
  font-size       : clamp(0.938rem, 0.816rem + 0.517vw, 1.375rem);  /* 15px → 22px */
  letter-spacing  : 0.1em;
  line-height     : normal;
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : background 0.2s ease, opacity 0.2s ease;
}
.footer-menu > li > a:hover        { opacity: 0.9; }
.footer-menu > li.eos-open > a     { background: var(--primary); }  /* open (expanded) state */
.footer-menu > li.current-menu-item > a,
.footer-menu > li.current_page_item > a { background: #BDDD8F; color: var(--primary); }  /* active page — green, navy text for contrast */

/* Sub-menu panel — hidden until the parent is .eos-open, then expands
   in-flow below the button (pushes the rest of the menu down) */
.footer-menu .sub-menu {
  display        : none;
  flex-direction : column;
  gap            : 0.25rem;
  margin         : 0.5rem 0 0;
  padding        : 0.75rem;
  border-radius  : 1.25rem;
  background     : var(--primary);
  list-style     : none;
}
.footer-menu .menu-item-has-children.eos-open > .sub-menu { display: flex; }

.footer-menu .sub-menu a {
  display         : block;
  padding         : 0.5rem 1rem;
  border-radius   : 6.25rem;
  background      : transparent;
  color           : #fff;
  font-family     : var(--font-sweet-sans-pro);
  font-weight     : 700;                    /* Sweet Sans +200 */
  font-size       : clamp(0.875rem, 0.806rem + 0.296vw, 1.125rem);  /* 14px → 18px */
  letter-spacing  : 0.08em;
  text-align      : center;
  text-decoration : none;
  transition      : background 0.2s ease;
}
.footer-menu .sub-menu a:hover { background: var(--primary-mid); }

/* Desktop: spread the pills vertically to fill the column height. Divi 5
   columns are equal-height by default, so the column is already tall enough;
   the menu just needs to fill it. Set the menu's Text module Height = 100%
   (module → Design → Sizing). If a nested wrapper still eats the height,
   give .footer-menu a min-height instead. */
@media (min-width: 981px) {
  .footer-menu {
    height          : 100%;
    justify-content : space-between;
  }
}


/* ═══ 5. LAYOUT UTILITIES ══════════════════════════════════════════ */

/* ── Fill image ──────────────────────────────────────────────
   Add .fill-image to an image module to make its image fill and
   crop (object-fit: cover) its already-sized parent.
   ──────────────────────────────────────────────────────────── */
.fill-image,
.fill-image .et_pb_image_wrap {
  width  : 100%;
  height : 100%;
}

.fill-image img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}