/* --- Variables --- */
:root {
    --color-neutral-darkest: #111;
    --color-neutral-dark: #333;
    --color-neutral-darkish: #555;
    --color-neutral: #777;
    --color-neutral-lightish: #aaa;
    --color-neutral-light: #ccc;
    --color-neutral-lightest: #eee;
	--color1: #006784;
	--color1-dark: #003d4e;
	--color1-light: #7dc4d8;
	--color2: #990048;
	--color2-dark: #5b002a;
	--colorHr: #ccc;
    --color-success: #06965b;
}

/* --- Resets --- */
body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {
	font-family: 'Roboto', sans-serif;
	color: var(--color-neutral-dark);
	font-size: clamp(1.1rem, 2vw, 1.2rem);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* --- Font Declarations --- */
@font-face {
	font-family: "MontHeavy";
	src: url("/font/Mont-Heavy.woff2") format("woff2"),
		url("/font/Mont-Heavy.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/font/Roboto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/font/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/font/Roboto-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* --- Global Styles --- */
main {
	padding: 2.5rem 0;
}
a:link, a:visited {
	color: var(--color1);
}
a:hover, a:active {
	color: var(--color1-dark);
}
hr {
    color: var(--color-neutral-lightest);
    opacity: 1;
}

/* --- Headers --- */
h1 {
	font-size: clamp(2.6rem, 3.5vw, 5rem);
	line-height: clamp(2.6rem, 4vw, 5rem);
	font-weight: 900;
	font-family: "MontHeavy", sans-serif;
}
h2 {
	font-size: clamp(1.8rem, 2.3vw, 2.2rem);
	line-height: clamp(1.8rem, 2.3vw, 2.2rem);
	font-weight: 700;
	margin-top: 2rem;
}
h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.4rem);
	line-height: clamp(1.2rem, 1.8vw, 1.4rem);
    margin-top: clamp(0.6rem, 1.2vw, 0.9rem);
    margin-bottom: clamp(0.6rem, 1.2vw, 0.9rem);
	font-weight: 500;
	position: relative;
	left: 0.1rem;
	color: var(--color2);
}
h1 .alt {
	color: var(--color2);
}

/* --- Navigation --- */
.navbar-light .navbar-nav .nav-link:not(.nav-link) {
	color: #333;
	transition: none;
}
.navbar-collapse .nav-item a.nav-link {
	padding: 0.5rem 1.2rem 0.4rem;
	border-radius: 100px;
	text-transform: uppercase;
	white-space: nowrap;
    color: var(--color-neutral-dark);
}
.navbar-light .navbar-collapse .nav-item:hover a {
	background-color: #333;
}
.navbar-light .navbar-collapse .nav-item:hover a {
	color: white!important;
}
.navbar-collapse .nav-item a.nav-link.btn {
	font-weight: normal;
	color: white;
	font-size: 1.1rem;
	margin-left: 0.5rem;
}
.navbar-collapse .nav-item a.nav-link.btn:hover, .navbar-collapse .nav-item a.nav-link.btn:active {
	color: var(--color1-dark);
}
.navbar-toggler {
	margin-left: auto;
	align-self: flex-end;
}
.rail-nav {
    list-style-type: none;
    padding-left: 0;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 20px;
}
.rail-nav li {
    margin-bottom: 1.4rem;
}
.rail-nav li a.highlight {
    color: var(--color2);
}
.rail-nav-content-item .text-link-minor {
    padding-top: 0.3rem;
    font-size: 1rem;
}
.rail-nav-content-item.highlight h3 {
    color: var(--color2);
    padding-bottom: 0.4rem;
}
.rail-nav-content-item.highlight {
    border-left: 6px solid var(--color-neutral-darkest);
    padding-left: 1rem;
}

/* --- Layout & Grid --- */
.right-rail {
	text-align: right;
}


/* --- Components --- */
.two-column-text-area {
	margin-bottom: 2rem;
}
.two-column-text-area h2 {
	margin-top: 0;
}


/* --- Buttons --- */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:focus-visible,
nav .btn-primary:link,
nav .btn-primary:visited,
.btn-primary.btn.disabled,
.btn-primary.btn:disabled,
fieldset:disabled .btn-primary.btn {
	background-color: var(--color1);
	font-size: 1.3rem;
	border: none;
	border-radius: 100px;
	padding: 0.6rem 1.5rem 0.5rem;
	color: white;
	font-weight: 800;
	outline: none;
    box-shadow: none;
}
.btn-primary:hover,
nav .btn-primary:hover,
.btn-primary:active,
.btn:first-child:active,
.btn-primary:focus,
nav .btn-primary:active {
	background-color: var(--color1-dark);
    box-shadow: none;
	outline: none;
    box-shadow: none;
}
.btn-primary.btn-check:checked+.btn,
.btn-primary.btn.active,
.btn-primary.btn.show,
.btn-primary.btn:first-child:active,
:not(.btn-check)+.btn-primary.btn:active {
    background-color: var(--color1-dark);
    box-shadow: none;
    outline: none;
    box-shadow: none;
}
.btn-secondary:link,
.btn-secondary:visited,
.btn-secondary:focus,
.btn-secondary:focus-visible,
nav .btn-secondary:link,
nav .btn-secondary:visited,
.btn-secondary.btn.disabled,
.btn-secondary.btn:disabled,
fieldset:disabled .btn-secondary.btn {
	background-color: var(--color2);
	font-size: 1.3rem;
	border: none;
	border-radius: 100px;
	padding: 0.6rem 1.5rem 0.5rem;
	color: white;
	font-weight: 800;
	outline: none;
    box-shadow: none;
}
.btn-secondary:hover,
nav .btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
nav .btn-secondary:active {
	background-color: var(--color2-dark);
    box-shadow: none;
	outline: none;
}
.btn-secondary.btn-check:checked+.btn,
.btn-secondary.btn.active,
.btn-secondary.btn.show,
.btn-secondary.btn:first-child:active,
:not(.btn-check)+.btn-secondary.btn:active {
    background-color: var(--color1-dark);
    box-shadow: none;
    outline: none;
}
.btn:focus,
.btn:active,
.btn.active {
	outline: none;
	box-shadow: none;
}

/* --- Alerts --- */
.alert.alert-success {
    background-color: var(--color-success);
    color: white;
}
.alert.alert-danger {
    background-color: var(--color2);
    color: white;
}

h1.danger, h2.danger, h3.danger, strong.danger {
    color: var(--color2) !important;
}


/* --- Forms and input fields --- */
/* Chrome, Safari, and Opera */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 200px white inset !important;
}
input:-moz-ui-valid {
    background-color: white !important;
    background-image: none !important;
}



/* --- Image Background Section --- */
.image-bg-with-content-area {
	padding: 0 0 3rem;
}
.image-bg-with-content-area .caption {
	padding-top: 0.4rem;
}
.image-bg-with-content {
	border-radius: 10px;
	height: 300px;
	background-size: cover;
	background-position: left;
	position: relative;
}
.image-bg-with-content .content {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	max-width: 360px;
}
.image-bg-with-content .content p {
	max-width: 80%;
	font-size: 1.2rem;
	position: relative;
	left: 0.5rem;
	padding-bottom: 1rem;
}
.image-bg-with-content .content .btn {
	font-size: 1.2rem;
}


/* --- graphics --- */
#dog-peeking {
    position: absolute;
    top: 70px;
    right: 0px;
    z-index: -1;
    height: 320px;
}


/* --- Services --- */
.service {
    margin-bottom: 3rem;
}
.service h3 {
    color: var(--color-neutral-dark);
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
    line-height: clamp(1.8rem, 2vw, 2.2rem);
}

/* --- Emergencies Page --- */
#pg-emergencies .er-clinic {
    margin-bottom: 2rem;
}
#pg-emergencies h2 {
    padding-top: 2rem;
    border-top: 1px solid #ccc;
}
#pg-emergencies .er-clinic h3 {
    margin-bottom: 0.2rem;
    font-weight: bold;
}


/* --- Featurette --- */
.featurette .btn {
	margin-top: 0.9rem;
}
.featurette {
	margin-bottom: clamp(2.4rem, 10vw, 3rem);
}
.featurette address {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	margin-bottom: 0;
	position: relative;
	left: 0.3rem;
}
.featurette .hours {
    padding-top: 1rem;
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	color: var(--color1);
	position: relative;
	left: 0.3rem;
}

/* --- Page Areas --- */
p.page-intro {
    margin-bottom: 3rem;
}


/* --- Progress Bar --- */
.progress-bar.bg-speed-fast, .progress-bar.bg-price-low {
    background-color: #2198bc !important;
}
.progress-bar.bg-speed-medium, .progress-bar.bg-price-medium {
    background-color: #e3a631 !important;
}
.progress-bar.bg-speed-slow, .progress-bar.bg-price-high {
    background-color: var(--color2) !important;
}


/* --- Cards --- */
.bg-success {
    background-color: #009962 !important;
    color: white;
}
.bg-primary {
    background-color: var(--color1) !important;
    color: white;
}
.bg-warning {
    background-color: var(--color2) !important;
    color: white;
}




ul#hours {
	list-style-type: none;
	padding-left: 0;
}
ul#hours li {
	padding-bottom: 1rem;
}

/* --- Articles List --- */
#articlesList h6 a {
    font-family: "MontHeavy", sans-serif;
    text-decoration: none;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}

#articlesList .article-row {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    flex-direction: row;
    border-bottom: 1px solid var(--color-neutral-lightest);
}
#articlesList .article-row .thumbnail {
    width: 340px;
    max-width:100%;
    object-fit: cover;
}
#articlesList .article-row .text-content {
    margin-left: 1.8rem;
}


/* --- Articles --- */
article p {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}
article p.excerpt,
article li p {
    margin-bottom: 0;
}
article figure {
	margin: 10px 0 30px 0;
	width: 100%;
}
article figure img {
	max-width: 100%;
}
figcaption {
	text-align: left;
	font-style: italic;
	padding-top: 0.5rem;
	font-size: 0.95rem;
}
article::after {
	content: "";
	display: table;
	clear: both;
}
article h2:not(:first-of-type) {
	padding-top: 2rem;
	border-top: 1px solid var(--colorHr);
}
article h3 {
    margin-bottom: 0;
}
article h2, article h3 {
	clear: left;  /* This will ensure that the headings appear below the floated figure */
}
article ol, article ul {
	padding-top: 0.2rem;
	padding-bottom: 0.4rem;
}
article li {
	padding-top: 0.5rem;
	font-size: clamp(1.1rem, 2vw, 1.2rem);
}
article ol li:first-child h3 {
    margin-top: 0;
}
article ul li:first-child,
article ol li:first-child {
    padding-top: 0;
}
article #table-of-contents ul li:first-child,
article #table-of-contents ol li:first-child {
    padding-top: 0.6rem;
}
article header {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--colorHr);
    padding-left: 0;
}
article header time {
	display: inline-block;
	margin-left: auto;
}
article ::selection {
	background-color: var(--color1);
	color: white;
}
.review-box {
    margin-top: 0.75rem;
    background-color: var(--color1);
    color: white;
    border-radius: 10px;
    padding: 1.5rem;
}
.review-box .name {
    font-size: 1rem;
    /* text-align: right; */
    /* font-weight: bold; */
}
.review-box .stars {
    max-width: 120px;
    display: block;
    padding: 0 0 0.8rem;
}
.author-time-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--colorHr);
	font-size: 0.95rem;
}

/* --- Author BIO (under article) --- */
#author-bio {
    margin-top: 2rem;
}
#author-bio h4 {
    font-weight: bold;
}

/* By default (mobile-first), show the short date and hide the long date */
.short-date {
	display: inline;
}
.long-date {
	display: none;
}
.author-prefix {
	display: none;
}


.article-list {
	list-style-type: none;
	padding: 0;
}
.article-list li {
	padding-bottom: 2rem;
}
.article-list li h2 {
	font-size: 1.2rem;
}
.article-list li p {
	font-size: 1.1rem;
}
.article-share-buttons a {
    text-decoration: none;
    padding: 0 0.4rem;
    color: var(--color-neutral-darkest);
}
.article-share-buttons a svg {
    width: 22px;
    height: 22px;
}
article aside {
    padding: 0 2rem 1.4rem;
    background-color: #efefef;
    border: 2px solid #ccc;
    border-radius: 6px;
    margin-top: 1rem;
}

footer, footer p, footer h1, footer h2, footer h3, footer h4, footer h5, footer a:link, footer a:visited, footer a:hover, footer a:active {
	color: white;
}
footer .logo {
	max-width: 200px;
	margin-bottom: 1rem;
}

.five-stars {
	max-width: clamp(120px, 11vw, 200px);
	padding: 0.4rem 0 .6rem;
}

.bar {
	background-color: var(--color1);
	color: white;
	padding: 1rem 1.6rem;
	font-size: 1.2rem;
}
footer .bi-linkedin-x {
    width: 18px;
}

.local-facilities .facility {
    margin-bottom: 1.6rem;
}
.local-facilities .facility .name {
    font-size: 1.4rem;
    font-weight: bold;
}
.city-overview {
    padding-right:1rem;
    padding-bottom:2rem;
    margin-bottom:2rem;
    border-bottom:1px solid var(--color-neutral-lightest);
}
.city-facility-type-header {
    margin-top:0;
    color:var(--color2);
    font-size:1.8rem;
    padding-bottom:1rem;
}
.payment-options {
    margin: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px; /* Adjust space between icons */
}
.payment-options .payment-type {
    max-width: 100px; /* Adjust the max width for icons */
    height: auto;
    flex-shrink: 1;
    object-fit: contain;
}

/* --- Media Queries --- */

/* < 1200px */
@media (max-width: 1200px) {
    #dog-peeking {
        top: 70px;
        height: 280px;
    }
}
/* > 992px */
@media (max-width: 991.68px) {
	.navbar-collapse {
		position: fixed;
		top: 68px;
		background-color: white;
		border-bottom: 2px solid #ccc;
		width: 100%;
		left: 0;
		z-index: 20;
	}
	.nav-item:first-child {
		margin-top: 1rem;
	}
	.nav-item.last-child-mobile {
		margin-bottom: 1rem;
	}
	.nav-item {
		margin: 0.2rem 1rem;
	}
	.image-bg-with-content-area {
		padding: 0 0 2.5rem;
	}
	.image-bg-with-content {
		height: 250px;
		background-position: left -50px center;
	}
    #articlesList .article-row  {
        flex-direction: column;
    }
    #articlesList .article-row .text-content {
        margin-left: 0;
        margin-top: 0.9rem;
    }
    #articlesList .article-row .thumbnail {
        width: 420px;
    }
}

/* >= 768px */
@media (min-width: 768px) {
	.short-date {
		display: none;
	}
	.long-date {
		display: inline;
	}
	.author-prefix {
		display: inline;
	}
}

/* < 768px */
@media (max-width: 767.75px) {
	main, footer {
		padding: 1.5rem 1.5rem;
	}
	header {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}
	#body-content .container:first-child {
		padding-left: 0;
		padding-right: 0;
	}
	nav.navbar .container {
		padding: 0;
	}
	.image-bg-with-content-area {
		padding: 0 0 2rem;
	}
	.image-bg-with-content {
		background-position: left -175px center;
		max-height: 240px;
	}
	.two-column-text-area h2 {
		font-size: 1.7rem;
	}
	.right-rail {
		text-align: left;
	}
    #dog-peeking {
        display: none;
    }
}

/* <=576px */
@media (max-width: 576px) {
	.image-bg-with-content {
		background-position: left -210px center;
	}
}
/* <=530px */
@media (max-width: 530px) {
	.image-bg-with-content {
		background-position: left -230px center;
	}
}
/* <=500px */
@media (max-width: 500px) {
	.image-bg-with-content {
		background-position: left -250px center;
	}
}
/* <=460px */
@media (max-width: 460px) {
	.image-bg-with-content {
		background-position: left -270px center;
	}
}
/* <=440px */
@media (max-width: 440px) {
	.image-bg-with-content {
		background-position: left -290px center;
	}
}