/* ==========================================================================
   Theme refresh — cosmetic modernization pass over the "vetdoctor" template.
   Loaded last so it wins the cascade without needing to fight every vendor
   rule individually. Keeps the brand green, retires the 2016-template look:
   flat slab-serif headings, hard-edged cards, boxy uppercase everything.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;600;700;800&display=swap');

:root {
  --vet-green: #12966b;
  --vet-green-dark: #0f3d2e;
  --vet-green-darker: #0a2b20;
  --vet-green-pale: #e8f6f0;
  --vet-radius: 10px;
  --vet-radius-sm: 6px;
  --vet-shadow: 0 6px 20px rgba(10, 43, 32, .08);
  --vet-shadow-hover: 0 16px 32px rgba(10, 43, 32, .14);
}

/* -------- Headings: swap the dated Roboto Slab for a modern rounded sans -------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Rubik', 'Open Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Section titles keep their weight but lose the shouty tight tracking */
.section-title h2, h2.text-uppercase {
  letter-spacing: .02em;
}

/* -------- Body text: the template default (#a9a9a9 @ 14px) is too pale
   and too small to read comfortably — bump both size and contrast. -------- */
body {
  color: #3d4744 !important;
  font-size: 16px !important;
}
p {
  color: #3d4744;
}
.vet-content {
  font-size: 17px;
  color: #333c39;
}
.vet-content p {
  margin-bottom: 16px;
}
.vet-content li {
  color: #333c39;
}

/* -------- Cards: replace flat 1px borders with soft elevation -------- */
.border-1px {
  border: none !important;
  border-radius: var(--vet-radius) !important;
  box-shadow: var(--vet-shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
a:hover > .border-1px,
.border-1px:hover {
  box-shadow: var(--vet-shadow-hover);
  transform: translateY(-3px);
}
.icon-box.border-1px:hover {
  transform: none;
}

/* -------- Buttons: rounder, softer, with a bit of lift on hover -------- */
.btn {
  border-radius: var(--vet-radius-sm) !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn-lg {
  border-radius: var(--vet-radius) !important;
}
.btn-theme-colored {
  box-shadow: 0 6px 16px rgba(18, 150, 107, .28);
}
.btn-theme-colored:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(18, 150, 107, .36);
}

/* -------- Images / thumbnails: match the new card radius -------- */
.thumbnail {
  border-radius: var(--vet-radius) !important;
  border: none !important;
  box-shadow: var(--vet-shadow);
}
.gallery .thumb img,
.thumb > div > img {
  border-radius: var(--vet-radius-sm);
}

/* -------- Article/page body content: keep pasted-in images well-behaved -------- */
.vet-content {
  line-height: 1.7;
}
.vet-content img {
  max-width: 100%;
  height: auto;
}
.vet-content .content-photo {
  display: block;
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 20px auto;
  border-radius: var(--vet-radius);
  box-shadow: var(--vet-shadow);
}
.vet-content ul {
  padding-left: 20px;
}
.vet-content ul li {
  margin-bottom: 6px;
}

/* -------- Header: subtle depth instead of a flat color block -------- */
.header-nav-wrapper {
  box-shadow: 0 2px 12px rgba(10, 43, 32, .06);
}
.header-top {
  background: var(--vet-green-dark) !important;
}

/* -------- Footer: tie the dark sections into the brand green -------- */
footer#footer {
  background: var(--vet-green-darker) !important;
}
footer#footer .footer-bottom {
  background: rgba(0, 0, 0, .18) !important;
}
footer#footer .footer-bottom .powered-by {
  margin-top: .4rem !important;
  font-weight: 300;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .4);
}
footer#footer .footer-bottom .powered-by a {
  color: rgba(255, 255, 255, .5);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
footer#footer .footer-bottom .powered-by a:hover {
  color: rgba(255, 255, 255, .9);
}

/* -------- Testimonials dark section: same family as the footer -------- */
.divider.overlay-black {
  background: var(--vet-green-darker) !important;
}
.testimonial {
  border-radius: var(--vet-radius) !important;
}

/* -------- Pagination: round instead of square page numbers -------- */
.pagination > li > a,
.pagination > li > span {
  border-radius: 50% !important;
  margin: 0 3px;
}

/* -------- Logo: the desktop circular badge (fixed 120px height, -60px
   bottom margin, z-index:1000, all inline on the <img> — see base.html.twig)
   overlapped the menuzord hamburger button on mobile, blocking taps on it.
   Reset it back to a normal in-flow logo at menuzord's own <=900px
   responsive breakpoint so it can't sit on top of the burger anymore. -------- */
@media (max-width: 900px) {
  .menuzord-brand img {
    max-height: 44px !important;
    margin-bottom: 0 !important;
    position: static !important;
    z-index: auto !important;
  }
}