/* ==========================================================================
   Healthy Pet Veterinary Clinic - Shared Site Stylesheet
   Blue design system. Palette and type carried over from the existing site.
   Edit colors in :root once and they update everywhere.
   ========================================================================== */

:root {
  --navy:        #1a3a5c;   /* primary dark blue (headings, header) */
  --blue:        #2a6496;   /* mid blue (links, accents) */
  --blue-light:  #e8f0f8;   /* light blue panels/cards */
  --blue-border: #d0e0ee;   /* light blue borders */
  --sky:         #a8d0f0;   /* light accent on dark backgrounds */
  --gold:        #ffc233;   /* featured accent (Online Store nav) */
  --gold-light:  #ffd76b;   /* featured accent, hover */
  --sky-soft:    #cde0f0;   /* soft text on dark backgrounds */
  --ink:         #3a3a3a;   /* body text */
  --ink-soft:    #475a6b;   /* secondary body text */
  --ink-muted:   #4A6280;   /* muted/subtitle text. Was #6b8aa8, which computed
                                 3.60:1 on white; now identical to --text-muted. */
  --bg:          #ffffff;
  --bg-alt:      #f5f8fb;   /* alternating section background */
  --gradient:    linear-gradient(135deg, #1a3a5c 0%, #2a6496 50%, #1a3a5c 100%);
  --radius:      16px;
  --shadow:      0 4px 18px rgba(26,58,92,0.18);
  --shadow-lg:   0 12px 32px rgba(26,58,92,0.30);
  --maxw:        1100px;
  /* Light-card system (Option 1). Sits alongside the older blue-* values;
     --sky-pale/--line are the card circle + hairline, --text-body/--text-muted
     are the readable dark copy that replaced white-on-navy card text. */
  --sky-pale:    #EAF3FA;   /* pale circle behind card icons */
  --line:        #DCE7F0;   /* card + tile hairline border */
  --text-body:   #33475C;   /* body copy on light cards, 9.55:1 on white */
  --text-muted:  #4A6280;   /* subtitles and small labels, 6.27:1 on white */
  --green:       #2E7D32;   /* affirmative / checkmark, 5.94:1 on white */
  --red:         #c0392b;   /* clinical red, already the site's alert colour */
}

/* --- Reset & base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--navy);
  line-height: 1.2;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Top utility bar ------------------------------------------------------ */
.topbar {
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
}
.topbar .container {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: space-between;
  padding-top: 8px; padding-bottom: 8px;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .topbar-hours { color: var(--sky); }

/* --- Header / logo -------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--blue-border); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.site-logo img { max-height: 74px; width: auto; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.header-phone:hover { color: var(--blue); }

/* --- Navigation ----------------------------------------------------------- */
.site-nav { background: var(--gradient); position: sticky; top: 0; z-index: 100; }
.site-nav .container { padding: 0 24px; }
.nav-toggle {
  display: none; background: none; border: 0; color: #fff;
  font-size: 1.6rem; padding: 12px 0; cursor: pointer;
}
.nav-list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.nav-list > li { position: relative; }
.nav-list a {
  display: block; color: #fff; text-decoration: none;
  font-weight: 700; padding: 14px 16px; font-size: 0.98rem;
  transition: background 0.2s ease;
}
.nav-list a:hover, .nav-list a:focus,
.nav-list li:hover > a { background: rgba(255,255,255,0.14); }
/* Active-page indicator: a quiet 3px underline. Deliberately unlike the store
   pill, so "where you are" and "shop now" never read as the same signal. */
.nav-list > li.nav-current::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 3px; border-radius: 2px; background: #6BAED6;
}
.has-sub > a::after { content: " \25BE"; font-size: 0.7em; opacity: 0.8; }
.subnav {
  list-style: none; position: absolute; left: 0; top: 100%;
  background: var(--navy); min-width: 250px; box-shadow: var(--shadow-lg);
  border-radius: 0 0 10px 10px; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all 0.18s ease; z-index: 120;
}
.nav-list li:hover > .subnav,
.nav-list li:focus-within > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a { padding: 12px 18px; font-weight: 600; font-size: 0.95rem; border-top: 1px solid rgba(255,255,255,0.06); }

/* Featured nav item (Online Store) - amber pill so it stands out on the navy bar */
.nav-list > li.nav-featured > a {
  background: var(--gold); color: var(--navy);
  border-radius: 999px; margin: 0 8px; padding: 12px 22px;
  font-size: 1.02rem; letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.nav-list > li.nav-featured > a::after { opacity: 1; }
.nav-list > li.nav-featured:hover > a,
.nav-list > li.nav-featured > a:hover,
.nav-list > li.nav-featured > a:focus {
  background: var(--gold-light); color: var(--navy);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 14px 32px; border-radius: 50px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.1rem;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: all 0.25s ease;
}
.btn-primary { background: #fff; color: var(--navy); }
.btn-primary:hover { background: #f0f6fc; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow); }

/* --- Shared section header (pill + title + subtitle) ---------------------- */
.section { padding: 64px 24px; }
.section-alt { background: var(--bg-alt); }
.section-header { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.section-pill {
  display: inline-block; background: var(--blue-light); color: var(--blue);
  font-size: 0.85rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 50px; margin-bottom: 16px;
}
.section-title { font-size: 2.6rem; color: var(--navy); font-weight: 700; margin-bottom: 10px; }
.section-subtitle { font-size: 1.2rem; color: var(--text-muted); }

/* --- Cards (flexbox, centered so orphans center on last row) -------------- */
.card-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
  max-width: var(--maxw); margin: 0 auto;
}
/* The single card definition for the whole site. The New Patient Center
   service cards are the standard, so these are their values; that page now
   uses .card too rather than repeating them. */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sky);
  border-radius: 14px;
  padding: 26px 24px;
  text-align: left;
  box-shadow: none;
  flex: 1 1 280px; max-width: 340px;
  transition: border-color 0.25s ease;
}
/* Quiet hover: a hairline colour shift only. No lift, no shadow. */
.card:hover { border-color: var(--sky); }
/* Service-card line icons: a bare 32px blue glyph sitting top-left above the
   copy. No circle, no plate. stroke="currentColor" in the SVG, so the one
   colour rule here drives every card icon on the site. */
.card .card-icon {
  display: block;
  margin: 0 0 14px 0;
  font-size: 0;
}
.card .card-icon .svc-icon { width: 32px; height: 32px; color: var(--blue); display: block; }
.card h3 { font-family: 'Nunito', sans-serif; color: var(--navy); font-size: 19.2px; font-weight: 800; margin: 0 0 6px; }
.card p  { color: var(--text-body); font-size: 16.8px; line-height: 1.6; margin: 0; }

/* --- Inline UI icons (buttons and text links) ----------------------------- */
/* 16px is the text-link size; .ui-icon-lg is the 18px button size. Both
   stroke="currentColor", so an icon always takes its label's colour.
   .ui-icon-after flips the 8px gap for icons that trail the label. */
.ui-icon {
  --ui-icon-size: 16px;
  width: var(--ui-icon-size); height: var(--ui-icon-size);
  display: inline-block;
  /* Centre the icon on the text regardless of the label size: the glyph is a
     fixed px box, so the offset has to carry its own half-height. Both derive
     from --ui-icon-size, so overriding that one value keeps them in step. */
  vertical-align: calc(0.3em - var(--ui-icon-size) / 2);
  margin-right: 8px; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ui-icon-lg { --ui-icon-size: 18px; }
.ui-icon-after { margin-right: 0; margin-left: 8px; }
a:hover .ui-icon-after, a:focus-visible .ui-icon-after { transform: translateX(2px); }

/* --- Prose (article body) ------------------------------------------------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose p { font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 16px; }
.prose h2 { font-size: 2rem; margin: 32px 0 14px; }
.prose h3 { font-size: 1.4rem; color: var(--navy); margin: 24px 0 10px; }
.prose ul, .prose ol { margin: 0 0 16px 1.3em; }
.prose li { margin-bottom: 8px; color: var(--ink-soft); }
.prose a { color: var(--blue); text-decoration: underline; }
.prose strong { color: var(--navy); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--gradient); color: #fff; text-align: center; padding: 56px 24px; }
.cta-band h2 { color: #fff; font-size: 2.2rem; margin-bottom: 12px; }
.cta-band p { color: var(--sky-soft); font-size: 1.15rem; max-width: 620px; margin: 0 auto 24px; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #cdd9e6; padding: 48px 24px 24px; font-size: 0.98rem; }
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto 32px;
}
.footer-col { flex: 1 1 220px; }
.footer-col h3 { color: #fff; font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.footer-col a { color: #cdd9e6; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col img { max-height: 60px; width: auto; margin-bottom: 12px; background: #fff; padding: 6px 10px; border-radius: 8px; }
.footer-social a { display: inline-block; margin-right: 10px; font-weight: 700; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; color: #9fb3c8; font-size: 0.9rem; max-width: var(--maxw); margin: 0 auto; }
/* These inherited the global blue link colour and computed 1.86:1 on the navy
   footer. Same treatment as the other footer links: 8.04:1. */
.footer-bottom a { color: #cdd9e6; }
.footer-bottom a:hover, .footer-bottom a:focus { color: #fff; text-decoration: underline; }

/* --- Find Us map band ----------------------------------------------------- */
.map-band { line-height: 0; }
.map-band iframe { width: 100%; height: 360px; border: 0; display: block; }

/* --- Draft banner (for pages pending review) ------------------------------ */
.draft-banner { background: #fff4d6; color: #7a5a00; border-bottom: 1px solid #e6cf8a; text-align: center; padding: 10px 16px; font-weight: 700; font-size: 0.95rem; }

/* --- Focus visibility ----------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
/* On white grounds the sky ring alone is faint, so pair it with a navy
   shadow ring. Both are outside the box, so nothing shifts. */
.site-header a:focus-visible,
main a:focus-visible,
main button:focus-visible,
.site-footer a:focus-visible {
  box-shadow: 0 0 0 4px rgba(26,58,92,0.35);
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* --- Responsive ----------------------------------------------------------- */
/* Keep the bar to a single row on mid-size screens now that it carries 8 items. */
@media (max-width: 1120px) and (min-width: 961px) {
  .nav-list a { padding: 14px 11px; font-size: 0.94rem; }
  .nav-list > li.nav-featured > a { padding: 11px 17px; margin: 0 5px; }
}
@media (max-width: 960px) {
  /* The bar is a wrapping flex row: toggle + featured pill on line 1,
     the full menu (when opened) wraps onto line 2. */
  .site-nav .container { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-toggle { display: block; order: 1; }
  .nav-list {
    display: flex; order: 2; flex-direction: column; align-items: stretch;
    padding-bottom: 10px;
  }
  /* Closed: only the featured pill shows, riding beside the Menu button. */
  .nav-list:not(.open) {
    flex-direction: row; margin-left: auto; padding-bottom: 0;
  }
  .nav-list:not(.open) > li:not(.nav-featured) { display: none; }
  .nav-list:not(.open) .subnav { display: none; }
  .nav-list.open { width: 100%; }
  .nav-list.open > li { width: 100%; }
  .has-sub > a::after { float: right; }
  .nav-list.open > li.nav-featured > a { border-radius: 10px; margin: 6px 0; text-align: left; }
  /* Open menu makes the <li> wrap its whole submenu, so anchor the active bar
     to the label itself rather than the list item. */
  .nav-list > li.nav-current::after { content: none; }
  .nav-list > li.nav-current > a {
    background-image: linear-gradient(#6BAED6, #6BAED6);
    background-repeat: no-repeat;
    background-position: 16px calc(100% - 8px);
    background-size: 34px 3px;
  }
  .nav-list:not(.open) > li.nav-featured > a { margin: 8px 0; padding: 10px 18px; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-radius: 0; min-width: 0; background: rgba(0,0,0,0.18);
  }
}
@media (max-width: 600px) {
  .section-title { font-size: 2rem; }
  .cta-band h2 { font-size: 1.8rem; }
  .section { padding: 48px 20px; }
}