/*
Theme Name: Advanced Veterinary Solutions
Description: A lightweight classic theme prepared for ACF Flexible Content.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: advancedveterinarysolutions
Domain Path: /languages
*/

/* Reset and base typography. Design values live in assets/css/variables.css. */
html {
	font-size: 100%;
	box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--bg);
	color: var(--text-base-color, var(--text));
	font-family: var(--text-base-font, var(--body-font));
	font-size: var(--text-base);
	font-weight: var(--text-base-weight, var(--weight-regular));
	line-height: var(--text-base-lh, var(--body-lh));
	letter-spacing: var(--text-base-letter-spacing, 0em);
	font-style: var(--text-base-style, normal);
	text-transform: var(--text-base-transform, none);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--gap-sm);
	font-family: var(--heading-font);
	color: var(--text-heading);
	font-weight: var(--weight-bold);
	line-height: var(--heading-lh);
}

h1 {
	font-size: var(--h1);
	font-family: var(--h1-font, var(--heading-font));
	font-weight: var(--h1-weight, var(--weight-extrabold));
	line-height: var(--h1-lh, var(--heading-lh));
	letter-spacing: var(--h1-letter-spacing, -0.02em);
	font-style: var(--h1-style, normal);
	text-transform: var(--h1-transform, none);
	text-decoration: var(--h1-decoration, none);
	color: var(--h1-color, var(--text-heading));
	margin-block-end: var(--h1-margin-bottom, var(--gap-sm));
}
h2 {
	font-size: var(--h2);
	font-family: var(--h2-font, var(--heading-font));
	font-weight: var(--h2-weight, var(--weight-bold));
	line-height: var(--h2-lh, var(--heading-lh));
	letter-spacing: var(--h2-letter-spacing, -0.01em);
	font-style: var(--h2-style, normal);
	text-transform: var(--h2-transform, none);
	text-decoration: var(--h2-decoration, none);
	color: var(--h2-color, var(--text-heading));
	margin-block-end: var(--h2-margin-bottom, var(--gap-sm));
}
h3 {
	font-size: var(--h3);
	font-family: var(--h3-font, var(--heading-font));
	font-weight: var(--h3-weight, var(--weight-bold));
	line-height: var(--h3-lh, var(--heading-lh));
	letter-spacing: var(--h3-letter-spacing, 0em);
	font-style: var(--h3-style, normal);
	text-transform: var(--h3-transform, none);
	text-decoration: var(--h3-decoration, none);
	color: var(--h3-color, var(--text-heading));
	margin-block-end: var(--h3-margin-bottom, var(--gap-sm));
}
h4 {
	font-size: var(--h4);
	font-family: var(--h4-font, var(--heading-font));
	font-weight: var(--h4-weight, var(--weight-bold));
	line-height: var(--h4-lh, var(--heading-lh));
	letter-spacing: var(--h4-letter-spacing, 0em);
	font-style: var(--h4-style, normal);
	text-transform: var(--h4-transform, none);
	text-decoration: var(--h4-decoration, none);
	color: var(--h4-color, var(--text-heading));
	margin-block-end: var(--h4-margin-bottom, var(--gap-sm));
}
h5 {
	font-size: var(--h5);
	font-family: var(--h5-font, var(--heading-font));
	font-weight: var(--h5-weight, var(--weight-medium));
	line-height: var(--h5-lh, var(--heading-lh));
	letter-spacing: var(--h5-letter-spacing, 0em);
	font-style: var(--h5-style, normal);
	text-transform: var(--h5-transform, none);
	text-decoration: var(--h5-decoration, none);
	color: var(--h5-color, var(--text-heading));
	margin-block-end: var(--h5-margin-bottom, var(--gap-sm));
}
h6 {
	font-size: var(--h6);
	font-family: var(--h6-font, var(--heading-font));
	font-weight: var(--h6-weight, var(--weight-medium));
	line-height: var(--h6-lh, var(--heading-lh));
	letter-spacing: var(--h6-letter-spacing, 0em);
	font-style: var(--h6-style, normal);
	text-transform: var(--h6-transform, none);
	text-decoration: var(--h6-decoration, none);
	color: var(--h6-color, var(--text-heading));
	margin-block-end: var(--h6-margin-bottom, var(--gap-sm));
}

.eyebrow {
	font-size: var(--eyebrow);
	font-family: var(--eyebrow-font, var(--heading-font));
	font-weight: var(--eyebrow-weight, var(--weight-medium));
	line-height: var(--eyebrow-lh, var(--heading-lh));
	letter-spacing: var(--eyebrow-letter-spacing, 0em);
	font-style: var(--eyebrow-style, normal);
	text-transform: var(--eyebrow-transform, none);
	text-decoration: var(--eyebrow-decoration, none);
	color: var(--eyebrow-color, var(--primary));
	margin-block-end: var(--eyebrow-margin-bottom, var(--gap-sm));
}

p { margin-block: 0 var(--text-base-margin-bottom, var(--gutter)); text-decoration: var(--text-base-decoration, none); }
strong, b { font-weight: var(--weight-bold); }

a {
	color: var(--link-color, var(--primary));
	font-weight: var(--weight-medium);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 0.08em;
	transition: color 0.2s ease;
}

a:hover { color: var(--link-hover-color, var(--secondary)); }
:where(h1, h2, h3, h4, h5, h6) a { color: inherit; }

ul, ol { margin-block: 0 var(--gutter); padding-inline-start: 1.5em; }
blockquote { margin: 0 0 var(--gutter); padding-inline-start: var(--gutter); border-inline-start: 3px solid var(--primary); }
blockquote > :last-child { margin-block-end: 0; }
hr { margin-block: var(--gap-horz); border: 0; border-block-start: 1px solid var(--line); }
.divider {
  flex-shrink: 0;
  width: var(--divider-width);
  max-width: 100%;
  height: var(--divider-height);
  margin: 0 auto;
  border: 0;
  color: inherit;
  background: var(--divider-color);
  opacity: var(--divider-opacity);
}
pre { max-width: 100%; overflow: auto; }

/* Small typography helpers. */
.text-xs {
	font-size: var(--text-xs);
	font-family: var(--text-xs-font, inherit);
	font-weight: var(--text-xs-weight, inherit);
	line-height: var(--text-xs-lh, inherit);
	letter-spacing: var(--text-xs-letter-spacing, 0em);
	font-style: var(--text-xs-style, normal);
	text-transform: var(--text-xs-transform, none);
	text-decoration: var(--text-xs-decoration, none);
	color: var(--text-xs-color, inherit);
	margin-block-end: var(--text-xs-margin-bottom, var(--text-base-margin-bottom, var(--gutter)));
}
small, .small, .text-sm {
	font-size: var(--text-sm);
	font-family: var(--text-sm-font, inherit);
	font-weight: var(--text-sm-weight, inherit);
	line-height: var(--text-sm-lh, inherit);
	letter-spacing: var(--text-sm-letter-spacing, 0em);
	font-style: var(--text-sm-style, normal);
	text-transform: var(--text-sm-transform, none);
	text-decoration: var(--text-sm-decoration, none);
	color: var(--text-sm-color, inherit);
	margin-block-end: var(--text-sm-margin-bottom, var(--text-base-margin-bottom, var(--gutter)));
}
.text-base {
	font-size: var(--text-base);
	font-family: var(--text-base-font, var(--body-font));
	font-weight: var(--text-base-weight, var(--weight-regular));
	line-height: var(--text-base-lh, var(--body-lh));
	letter-spacing: var(--text-base-letter-spacing, 0em);
	font-style: var(--text-base-style, normal);
	text-transform: var(--text-base-transform, none);
	text-decoration: var(--text-base-decoration, none);
	color: var(--text-base-color, inherit);
	margin-block-end: var(--text-base-margin-bottom, var(--gutter));
}
.lead, .text-md {
	font-size: var(--text-md);
	font-family: var(--text-md-font, inherit);
	font-weight: var(--text-md-weight, inherit);
	line-height: var(--text-md-lh, var(--text-base-lh, var(--body-lh)));
	letter-spacing: var(--text-md-letter-spacing, 0em);
	font-style: var(--text-md-style, normal);
	text-transform: var(--text-md-transform, none);
	text-decoration: var(--text-md-decoration, none);
	color: var(--text-md-color, inherit);
	margin-block-end: var(--text-md-margin-bottom, var(--text-base-margin-bottom, var(--gutter)));
}
.counter {
	font-size: var(--counter);
	font-family: var(--counter-font, var(--heading-font));
	font-weight: var(--counter-weight, var(--weight-bold));
	line-height: var(--counter-lh, var(--text-base-lh, var(--body-lh)));
	letter-spacing: var(--counter-letter-spacing, 0em);
	font-style: var(--counter-style, normal);
	text-transform: var(--counter-transform, none);
	text-decoration: var(--counter-decoration, none);
	color: var(--counter-color, var(--primary));
	margin-block-end: var(--counter-margin-bottom, 0);
}
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }
.text-primary { color: var(--primary); }
.text-body { color: var(--text); }
.text-heading { color: var(--text-heading); }
.text-center { text-align: center; }

/* Light text contexts also update headings and links inside the wrapper. */
.text-light {
	--text-heading: var(--text-light);
	--link-color: var(--text-light);
	--link-hover-color: var(--text-muted-light);
	color: var(--text-light);
}

.text-muted-light { color: var(--text-muted-light); }

.text-dark {
	--text-heading: var(--text);
	--link-color: var(--primary);
	--link-hover-color: var(--secondary);
	color: var(--text);
}

img { max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }
button, input, select, textarea { max-width: 100%; font: inherit; }
button, input[type="submit"] { cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Shared buttons for links, form buttons, and reusable ACF Button fields. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  max-width: 100%;
  min-height: 3rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius_xs);
  background: transparent;
  color: inherit;
  font-family: var(--heading-font);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary { background: var(--cyan_df5); border-color: var(--cyan_df5); color: var(--secondary); }
.btn--primary:hover:not(:disabled) { background: var(--mint_2e7); border-color: var(--mint_2e7); color: var(--secondary); }
.btn--secondary { border-color: currentColor; }
.btn--secondary:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: var(--text-light); }
.text-light .btn--secondary:hover:not(:disabled) { background: var(--text-light); border-color: var(--text-light); color: var(--secondary); }
.btn--text { min-height: 2.75rem; padding-inline: 0; text-transform: none; text-decoration: underline; text-underline-offset: 0.25em; }
.btn--text:hover:not(:disabled) { color: var(--primary); }
.text-light .btn--text:hover:not(:disabled) { color: var(--mint_2e7); }
.btn:focus-visible { outline-color: var(--primary); }
.text-light .btn:focus-visible { outline-color: var(--text-light); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Shared native expandable panels. */
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gutter);
  background: var(--primary);
  color: var(--text-light);
  font-family: var(--heading-font);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--body-lh);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; flex-shrink: 0; }
.disclosure[open] > summary::after { content: "−"; }
.disclosure > summary[aria-expanded="false"]::after { content: "+"; }
.disclosure > summary:focus-visible { outline-offset: -4px; }
.disclosure__body { padding-block-start: var(--gap-sm); }
.disclosure--animating { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Animation-marked content stays readable until AOS initializes successfully. */
html:not(.aos-enabled) [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}

.section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.section:is(.text-light, .text-dark) :where(h1, h2, h3, h4, h5, h6, p, small, .text-base, .text-md, .text-sm, .text-xs, .lead, .counter):where(:not(.eyebrow)) {
  color: inherit;
}

/* Global flexbox layout. Column widths include their share of the row gap. */
.container,
.container-wide,
.container-fluid {
  width: calc(100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.container { max-width: var(--container); }
.container-wide { max-width: var(--containerWide); }
.container-fluid { max-width: none; }

.section > :is(.container, .container-wide, .container-fluid) { width: 100%; }

.row {
  --row-gap: var(--grid-gap);
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
}

.row > * {
  --col-span: var(--grid-columns);
  flex: 0 0 calc((100% + var(--row-gap)) * var(--col-span) / var(--grid-columns) - var(--row-gap));
  min-width: 0;
  max-width: 100%;
}

.col { flex: 1 1 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { --col-span: 1; }
.col-2 { --col-span: 2; }
.col-3 { --col-span: 3; }
.col-4 { --col-span: 4; }
.col-5 { --col-span: 5; }
.col-6 { --col-span: 6; }
.col-7 { --col-span: 7; }
.col-8 { --col-span: 8; }
.col-9 { --col-span: 9; }
.col-10 { --col-span: 10; }
.col-11 { --col-span: 11; }
.col-12 { --col-span: 12; }

.flex { display: flex; gap: var(--grid-gap); min-width: 0; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-col > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) { margin-block: 0; }

/* Gap helpers update the same variable used to calculate column widths. */
.gap-0 { --grid-gap: 0px; }
.gap-xs { --grid-gap: calc(var(--gap-sm) / 2); }
.gap-sm { --grid-gap: var(--gap-sm); }
.gap-md { --grid-gap: var(--gutter); }
.gap-lg { --grid-gap: var(--gap-horz); }
.gap-xl { --grid-gap: var(--gap-vert); }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

.section-py { padding-block: var(--pad-y-lg); }
.mb-md { margin-block-end: var(--gutter); }
.mb-lg { margin-block-end: var(--gap-horz); }

/* Starter theme shell. */
.site-header, .site-footer { padding-block: 1.5rem; }
.site-header { border-bottom: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); }

.site-header__inner, .site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.site-branding { min-width: 0; overflow-wrap: anywhere; }
.site-title { font-size: 1.25rem; font-weight: 700; }
.custom-logo { display: block; width: auto; max-height: 5rem; }

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sub-menu { padding-inline-start: 1.25rem; }
.site-main { flex: 1; padding-block: 3rem; }
.site-main--full-width { padding-block: 0; }
.layout-notice {
	margin-block: var(--gutter);
	padding: var(--gap-sm);
	border-inline-start: 4px solid var(--primary);
	background: var(--surface);
	color: var(--text);
	overflow-wrap: anywhere;
}
.layout-notice p { margin: 0; }
.entry, .comments-area { margin-block-end: 3rem; overflow-wrap: anywhere; }
.entry-content::after { display: table; clear: both; content: ""; }
.entry-content > :first-child { margin-block-start: 0; }
.wp-caption { max-width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.comment-form label { display: block; }
.comment-form textarea { width: 100%; }
.comment-list, .comment-list .children { padding-inline-start: 1.5rem; }
.comment-body { margin-block: 1.5rem; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: var(--surface);
	color: var(--text);
}