/* ==========================================================================
   Vet Imaging Advisors: global stylesheet
   1. Base + Divi compatibility layer
   2. Header (verbatim from the Divi Theme Builder header)
   Footer + request-guidance modal styles are in via-footer.css, linked from the footer partial so
   they load AFTER each page's own <style> block. That is the order WordPress used, and the modal's
   form rules are meant to win where class names overlap (e.g. .via-form-group on /contact/).
   Page-specific styles live in a <style> block at the top of each page file.
   ========================================================================== */

/* ---------- 1. Base + Divi compatibility ----------
   The page code was written inside Divi, so it leans on Divi's reset, base type and
   section/row spacing. These rules reproduce exactly the parts it depends on.
   Divi's body font was Open Sans; Inter replaces it (the brand font, already loaded). */
:root {
  --via-navy: #1C2F3A;
  --via-teal: #1F6F78;
  --via-seafoam: #8FBFC2;
  --via-evergreen: #2F5D50;
  --via-white: #F9FAF8;
  --via-stone: #E6E9EB;
  --via-slate: #4A5568;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, strong, b, i, em, ol, ul, li,
form, label, iframe, small, sub, sup, code, pre, q {
  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
* { box-sizing: border-box; }
ol, ul { list-style: none; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; color: #666; background-color: #fff; line-height: 1.7em; font-weight: 500;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: #2ea3f2; text-decoration: none; }
p { padding-bottom: 1em; }
p:not(.has-background):last-of-type { padding-bottom: 0; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { color: #333; padding-bottom: 10px; line-height: 1em; font-weight: 500; }
h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; }
img { max-width: 100%; height: auto; }
video, iframe { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
input { -webkit-appearance: none; }
input[type=email], input[type=tel], input[type=text], select, textarea {
  background-color: #fff; border: 1px solid #bbb; padding: 2px; color: #4e4e4e; margin: 0;
}
textarea { padding: 4px; }
:focus-visible { outline: 2px solid var(--via-teal); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000003; background: #fff; color: var(--via-navy); padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }

/* Divi's list defaults inside page content, header and footer */
/* Same specificity as Divi's .entry-content ul (0,1,1), which beats single-class page rules. */
.dv-section ul { list-style-type: disc; padding: 0 0 23px 1em; line-height: 26px; }
.dv-section ol { list-style-type: decimal; list-style-position: inside; padding: 0 0 23px; line-height: 26px; }
.dv-section ul li ul, .dv-section ul li ol { padding: 2px 0 2px 20px; }
.dv-section ol li ul, .dv-section ol li ol { padding: 2px 0 2px 35px; }
.dv-section table { border: 1px solid #eee; margin: 0 0 15px; text-align: left; width: 100%; }

/* Divi section/row spacing. Per-section overrides from the old site sit inline on the element. */
.dv-section { position: relative; background-color: #fff; padding: 50px 0; }
.dv-row { width: 80%; max-width: 1080px; margin: auto; position: relative; padding: 30px 0; }
.dv-module { position: relative; margin-bottom: 30px; }
.dv-module:last-child { margin-bottom: 0; }
@media (min-width: 981px) {
  .dv-section { padding: 4% 0; }
  .dv-row { padding: 2% 0; }
  .dv-module { margin-bottom: 2.75%; }
  .dv-module:last-child { margin-bottom: 0; }
}
@media (min-width: 1350px) {
  .dv-section { padding: 54px 0; }
  .dv-row { padding: 27px 0; }
}
/* Divi single-post template: posts sit in a centred container instead of full-width sections */
/* Bottom space = Divi's #left-area 23px (desktop only) + article 25px + article margin 60px/42px. */
.dv-post { width: 80%; max-width: 1080px; margin: 0 auto; padding: 58px 0 108px; overflow-wrap: break-word; }
.dv-post .dv-row { width: 100%; }
@media (max-width: 1100px) { .dv-post { padding-bottom: 90px; } }
@media (max-width: 980px) { .dv-post { padding-bottom: 67px; } }
@media (max-width: 479px) { .dv-post h2 { font-size: 16px; padding-bottom: 0; } }

/* Stacking: Divi put page content in its own low layer (z-index 1) and the header above it,
   so sections with their own z-index (the home hero is 500) can't cover the fixed header.
   The modal sits outside both, so its z-index (10000000+) puts it above the header as intended. */
main { position: relative; z-index: 1; }

/* Theme Builder header/footer wrappers */
.dv-section.dv-tb-header { padding-top: 0; padding-bottom: 7px; z-index: 104; }
.dv-row.dv-tb-header-row { padding-top: 1px; }
.dv-section.dv-tb-footer { padding-top: 14px; padding-bottom: 0; width: 100%; max-width: 100%; }
.dv-row.dv-tb-footer-row { padding-top: 10px; padding-bottom: 0; width: 100%; max-width: none; }

/* ---------- 2. Header ---------- */

    /* 1. BASE HEADER STYLES */
    .via-global-header {
        width: 100%; background-color: #ffffff; padding: 15px 5%; 
        display: flex; align-items: center; justify-content: space-between;
        position: fixed; top: 0; left: 0; z-index: 9999999; /* Boosted for mobile safety */
        border-bottom: 1px solid #E6E9EB; transition: all 0.4s ease;
    }
    .via-nav-logo img { height: 62px; width: auto; display: block; transition: height 0.3s ease; }
    .via-global-header.is-scrolled { padding: 10px 5%; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    .via-global-header.is-scrolled .via-nav-logo img { height: 52px; }
    /* 2. DESKTOP NAV */
    .via-nav-links { display: flex; gap: 30px; align-items: center; }
    .via-nav-item {
        text-decoration: none; color: #1C2F3A; font-weight: 600; font-size: 0.85rem;
        text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; font-family: 'Inter', sans-serif;
    }
    .via-nav-item:hover { color: #1F6F78; }
    .via-nav-cta { background: #1F6F78; color: #fff !important; padding: 12px 24px; border-radius: 4px; }
    /* 3. HAMBURGER ICON (Visible only on mobile) */
    .via-hamburger {
        display: none;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding: 10px;
        z-index: 10000000;
    }
    .via-hamburger span {
        display: block; width: 28px; height: 3px;
        background-color: #1C2F3A; transition: 0.3s;
    }
    /* 4. MOBILE MENU OVERLAY */
    .via-mobile-menu {
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
        background: #ffffff; z-index: 9999998; display: flex;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 35px; transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .via-mobile-menu.is-active { right: 0; }
    .via-mobile-link {
        font-size: 1.5rem; font-weight: 800; color: #1C2F3A;
        text-decoration: none; text-transform: uppercase; letter-spacing: 2px;
    }
    /* 5. RESPONSIVE LOGIC */
    @media (max-width: 980px) {
        .via-nav-links { display: none; }
        .via-hamburger { display: flex; }
        
        /* Animation for Hamburger X */
        .via-hamburger.is-active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
        .via-hamburger.is-active span:nth-child(2) { opacity: 0; }
        .via-hamburger.is-active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
    }