/*
Theme Name: The Animal Clinic 2026
Version: 0
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checklist"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* screenreader */
.sr-only, .m-sr-only {border:0; clip:rect(0, 0, 0, 0); height:1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px}
.sr-only-focusable:active, .sr-only-focusable:focus {clip:auto; height:auto; overflow:visible; position:static; white-space:normal; width:auto}
#skipnav {background-color: #2c713c; display: inline-block; color: #fff; left: 0; padding: 0.5em 1em; position: absolute; text-decoration: none; top: 0; z-index: 10}

/* vars */
:root {
	--BG: #eff6ff;
	--BG_light: #f9fafb;
	--BG_dark: #101828;
	--border: #e5e7eb;
	--border_dark: #1e2939;
	--dark: #000000;
	--dark2: #4a5565;
	--highlight: #0190a0;
	--highlight2: #9f0712;
	--highlight3: #e9a129;
	--highlight4: #155dfc;
	--highlight5: #00a63e;
	--light: #ffffff;
	--light2: #f9fafb;
	--light3: #d1d5dc;
	--shadow: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
	--gradient: linear-gradient(to right bottom, oklab(0.597941 -0.0902838 -0.0491324 / 0.1) 0%, oklab(0.723555 -0.0762018 0.148504 / 0.05) 50%, oklab(0.761014 0.0409179 0.144169 / 0.1) 100%)
}

/* basic */
html {height: 100%; scroll-behavior: smooth}
body {background-color: var(--light); color: var(--dark2); display: flex; flex-direction: column; font-family: "Open Sans", sans-serif; min-height: 100%}
main {display: flex; flex-direction: column; flex-grow: 1}
h1, h2, h3, h4, h5, h6, p, ol, ul {margin: 1rem 0}
p {line-height: 1.5}
li {margin: 0.5rem 0}
h1, h2, h3, h4, h5, h6 {color: var(--dark); font-weight: normal; line-height: 1}
h1 {font-size: 2.25rem}
h2 {font-size: 1.875rem}
h3 {font-size: 1.5rem}
h4 {font-size: 1.25rem}
h5 {font-size: 1.125rem}
h6 {font-size: 1.0625rem}
a {color: inherit}
img {height: auto; max-width: 100%}
table {border-spacing: 1rem 0.5rem; margin: 1rem 0}
[id] {scroll-margin-top: 5rem}
body.menu_open [id] {scroll-margin-top: 22rem}
.container {padding: 0 1rem}
.subhead {font-size: 1.25rem}
.buttonholder {align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; line-height: normal}
.center {text-align: center}
.center .buttonholder {justify-content: center}
.button {background-color: transparent; border: 1px solid; border-radius: 0.5rem; color: inherit; display: inline-block; padding: 0.5rem 1rem; text-decoration: none}
.button:hover {background-color: var(--highlight3); border-color: transparent; color: var(--light)}
.button.blue:not(:hover) {background-color: var(--highlight); border-color: transparent; color: var(--light)}
.button.white-orange:not(:hover) {background-color: #f06a47; border-color: transparent; color: #ffffff}
.button.red-white:not(:hover) {background-color: #ffffff; border-color: var(--border); color: var(--highlight2)}
.videoholder {margin: 1rem auto; max-width: 720px}
.mapwrapper:has(iframe), .videowrapper:has(iframe) {height: 0; position: relative}
.mapwrapper:has(iframe) {padding-bottom: 50%}
.videowrapper:has(iframe) {\padding-bottom: 56.25%}
.mapwrapper iframe, .videowrapper iframe {height: 100%; left: 0; position: absolute; top: 0; width: 100%}
.videowrapper video {display: block; height: auto; object-fit: cover; width: 100%}
.stars {color: var(--highlight3); font-size: 1.5rem}
.quote p:first-child::before {content: '\201c'}
.quote p:last-child::after {content: '\201d'}
.icon {align-items: center; border-radius: 0.5rem; display: flex; height: 1.5rem; justify-content: center; padding: 0.5rem; width: 1.5rem}
.icon.circle {border-radius: 1000rem}
.icon.blue {background-color: #dbeafe; color: #155dfc}
.icon.green {background-color: #9fb2011a; color: #9fb201}
.icon.orange {background-color: #e9a1291a; color: #e9a129}
.icon.red {background-color: #f06a471a; color: #f06a47}
.icon.turquoise {background-color: #0190a01a; color: #0190a0}
.logolink, .logolink img {display: block}
.pseudologo {color: var(--dark); font-size: 1.5rem; font-weight: bold; max-width: 20rem}
.pseudologo p {line-height: 1; margin: 0; text-wrap: balance}
.pseudologo span {color: var(--highlight); display: block; font-size: 0.75rem}

/* form */
.field {margin: 1rem 0}
.field label:not(.sr-only) {display: block}
input[type="email"], input[type="tel"], input[type="text"], textarea {background-color: #f3f3f5; border: none; border-radius: 0.5rem; box-sizing: border-box; padding: 0.5rem 1rem; width: 100%}
textarea {min-height: 3rem; resize: vertical}
.input_icon_wrap {position: relative}
.input_icon_wrap input {padding-right: 2.5rem}
.input_icon_wrap .input_icon {position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%)}
.input_icon_wrap .input_icon svg {height: 1.25rem; width: auto}
button[type="submit"] {background-color: var(--highlight); border-color: transparent; border-radius: 0.5rem; color: var(--light); text-align: center; padding: 0.5rem 1rem; width: 100%}
button[type="submit"] svg {height: 1rem; margin-right: 1rem; vertical-align: text-top; width: auto}
[name="comments"] {display: none}

/* header */
#header {background-color: var(--light); border-bottom: 1px solid var(--border); padding: 0.5rem 0; position: sticky; top: 0; z-index: 5}
#header .container {align-items: center; display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between}
#header_logo {flex-basis: calc(100% - 2rem); flex-shrink: 1}
.logolink:has(.pseudologo) {display: block; text-decoration: none}
#header_logo img {max-height: 3.25rem; width: auto}
#main_menu_open {display: block; flex-basis: 2rem; font-size: 3rem; line-height: 0.7; text-align: right; text-decoration: none}
/*menu*/
#main_menu {flex-basis: 100%; padding: 1px 1rem 0.5rem 1rem}
body.js #main_menu {display: none}
#main_menu ul {list-style: none; padding: 0; margin: 0}
#main_menu li {margin: 0}
#main_menu a {text-decoration: none}
#main_menu_menu > li > a {border-radius: 0.5rem; display: block; padding: 0.5rem 1rem}
#main_menu_menu > li.current-menu-item > a {background-color: var(--BG); color: var(--highlight)}
#main_menu_menu > li:not(.current-menu-item) > a:hover{background-color: var(--light2)}
#main_menu_links {text-align: center}
#main_menu_links {text-align: center}
#main_menu_links a:not(.button) {color: var(--highlight); display: inline-block; padding: 1rem}

/* hero */
#hero {background-image: var(--gradient); padding: 2rem 0; text-align: center; text-wrap: balance}
#hero h1 span {color: var(--highlight)}
#hero .buttonholder {justify-content: center}
#hero_reviews {margin: 1rem 0}
#hero_reviews p {line-height: normal;margin: 0}
#hero_img {aspect-ratio: 1.5; background-position: center; background-size: cover; border-radius: 1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: end; margin: 2rem 1rem}
#hero_img:has(#hero_stats) {margin-bottom: 4rem}
#hero_stats {display: flex; flex-wrap: wrap-reverse; gap: 0.5rem; justify-content: center; margin: 2rem 0}
#hero_img #hero_stats {justify-content: start; margin: 0 0 -2rem -1rem}
.hero_stat {align-items: center; background-color: var(--light); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); display: flex; gap: 0.5rem; padding: 1rem}
.hero_stat_stat span {display: block}
.hero_stat_stat {line-height: normal; margin: 0}
.hero_stat_stat .data {color: var(--dark); font-size: 1.5rem; font-weight: bold}
.hero_stat_stat .desc {font-size: 0.875rem}

/* sections */
section:last-child {flex-grow: 1}
.section {padding: 4rem 0}
#main_content, .section.auto {margin: 4rem 0; padding: 0}
.section.gray {background-color: var(--BG_light)}
.section.gradient {background-image: linear-gradient(to right in oklab, #0190a0 0%, #9fb201 100%); color: var(--light)}
.section.gradient h1, .section.gradient h2, .section.gradient h3, .section.gradient h4, .section.gradient h5, .section.gradient h6 {color: var(--light)}
.section > .sub_section:first-child > .container:first-child > :first-child {margin-top: 0}
.section > .sub_section:last-child > .container:last-child > :last-child {margin-bottom: 0}
/*boxes*/
.box {background-color: var(--light); border: 1px solid var(--border); border-radius: 0.5rem; display: flex; flex-direction: column; margin: 1rem 0; overflow: clip; padding: 1rem}
.boxes.center .box {text-align: center}
.boxes.shadow .box {border: none; box-shadow: var(--shadow)}
.box > :first-child {margin-top: 0}
.box > :last-child {margin-bottom: 0}
.box_img {aspect-ratio: 2; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: end; margin: -1rem -1rem 0 -1rem !important}
.box_img .icon {background-color: var(--light) !important; margin: 0 0 1rem 1rem}
.boxes.center .box .icon {margin: 0 auto 1rem auto}
.box .heading, .box h2 {font-size: 1.25rem; font-weight: bold}
.box h3 {font-size: 1.125rem}
.box h4 {font-size: 1.0625rem}
.box h5, .box h6 {font-size: 1rem}
.box p {margin-top: 0}
.box p.email, .box p.phone, .box p.hours {line-height: 1; margin: 0.5rem 0 0 0}
.box a {color: var(--highlight); text-decoration: none}
.box .link {margin-top: auto}
/*contact*/
.contact_boxes {margin: 4rem 0}
.contact_boxes .box {margin: 1rem 0}
.box.contact_emergency {background-color: #fef2f2; border-color: #ffc9c9; color: #9f0712}
.box.contact_emergency .icon {background-color: #e7000b; color: #ffffff}
.box.contact_emergency .heading {color: #82181a}
.box.contact_emergency .phone {font-size: 1.125rem}
.box.contact_emergency .phone a {color: #e7000b}
.box.contact_form .heading {font-weight: normal; font-size: 1.5rem}
.box.contact_map {padding: 0}
/*heading*/
.sub_section_heading {margin-bottom: 2rem; text-align: center}
/*row*/
.row .imgholder .img {aspect-ratio: 2; background-position: center; background-size: cover; border-radius: 1rem}
.row_stats {display: flex; flex-wrap: wrap; gap: 1rem}
.row_stat span {display: block}
.row_stat {flex-basis: calc(25% - 0.75rem); flex-grow: 1; line-height: normal; margin: 0}
.row_stat .data {color: var(--highlight); font-size: 2rem}
.row_stat:nth-child(2n) .data {color: var(--highlight2)}
/*staff*/
.boxes.staff .box_img {aspect-ratio: 1; background-position: top !important}
.box .heading:has(+.jobtitle) {margin-bottom: 0}
.staff .jobtitle {color: var(--highlight); margin-top: 0}
/*timeline*/
.timeline {border-collapse: collapse; border-style: hidden; table-layout: fixed; width: 100%}
.timeline th, .timeline td {border: 1rem solid transparent; border-bottom-width: 2rem; vertical-align: top}
.timeline th.year span {align-items: center; aspect-ratio: 1; background-color: var(--highlight4); border-radius: 100%; color: var(--light); display: flex; flex-direction: column; justify-content: center; padding: 0.5rem; width: min-content}
.timeline th {width: min-content}
.timeline .copy {background-color: var(--BG_light); border-radius: 0.5rem; padding: 1rem}
.timeline .copy > :first-child {margin-top: 0}
.timeline .copy > :last-child {margin-bottom: 0}
.timeline .copy .heading {font-size: 1.25rem}
.timeline .copy p {line-height: normal}
.timeline .check {color: var(--highlight5); vertical-align: middle; width: min-content}
.timeline .check svg {height: auto; width: 1.5rem}

/* posts */
#posts .box .heading {margin-bottom: 1rem}
.pagination {display: flex; flex-wrap: wrap; font-size: 1.125rem; justify-content: center}
.prev.page-numbers, .next.page-numbers  {text-decoration: none}
.page-numbers {padding: 0.25rem 0.5rem}
.page-numbers.current {font-weight: bold}

/* footer */
#footer {background-color: var(--BG_dark); color: var(--light3); text-align: center}
#footer h2, #footer .icon_item .day {color: var(--light)}
#footer h2 {font-size: 1.125rem}
#footer a {text-decoration: none}
.footercol {margin: 2rem auto}
#footer_logo img {max-height: 2.5rem; margin: 0 auto; width: auto}
.footercol .menu {list-style: none; padding: 0}
.icon_item {display: flex; gap: 0.5rem; line-height: normal; text-align: left}
.icon_item .content > :first-child {margin-top: 0}
.icon_item .content > :last-child {margin-bottom: 0}
.icon_item svg {flex-basis: 1.5rem; flex-shrink: 0}
#footer_social {display: flex; flex-wrap: wrap; gap: 0.5rem}
#footer_social a {align-items: center; border-radius: 100rem; display: inline-flex; flex-direction: column; height: 1.5rem; justify-content: center; padding: 0.25rem; width: 1.5rem}
#footer_copyright {border-top: 1px solid var(--border_dark)}