/* Button styles */

.btn,
button {
	display: block;
	width: fit-content;
	padding: var(--space-2xs) var(--space-l);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	margin-block: .5rem;
	border-radius: .25rem;
	transition: .2s ease-in-out;
	border: none;
	line-height: var(--space-m);
	font-size: var(--fs--1);
	font-weight: 500;
	text-transform: capitalize;
}

button:disabled,
button:disabled:hover {
	background-color: var(--line-grey);
	cursor: not-allowed;
}

.btn--primary,
.btn--primary:visited {
	background-color: var(--pink);
	color: #fff;
}

.btn--primary:hover {
	background-color: var(--primary);
	color: #fff;
}

.btn--secondary,
.btn--secondary:visited {
	background-color: var(--body);
	color: #fff;
}


.btn--secondary:hover {
	color: #fff;
}

.btn--white {
	background-color: #fff;
	color: var(--body);
}

.btn--white:hover {
	background-color: var(--bg-blue);
	color: var(--body);
}

.btn--blue {
	background-color: var(--bg-blue);
	color: var(--body);
	border: 1px solid var(--bg-blue);
}

.btn--blue:hover {
	background-color: #fff;
	color: var(--body);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
}

/* Header */

.site-header {
	padding-block: var(--space-s);
}

.site-header__wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Menu */

.site-menu {
	display: flex;
	align-items: center;
	gap: var(--space-l);
}

.main-menu {
	list-style: none;
	display: flex;
	gap: var(--space-l);
	padding: 0;
	margin: 0;
}

.main-menu a {
	text-decoration: none;
}

.menu-icon {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.site-header__mobile {
	display: none;
}

@media (max-width: 768px) {

	body.menu-open {
		overflow: hidden;
  	}

	.site-menu {
	  display: none;
	}

	.site-header__mobile {
		display: block;
	}

	.mobile-menu {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		position: fixed;
		top: 0;
		right: 0;
		width: 80%;
		height: 100vh;
		padding: var(--space-m);
		background: #fff;
		box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		transform: translateX(100%);
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
		z-index: 99999;
	}
	
	.mobile-menu.is-active {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		transform: translateX(0);
	}

	.mobile-menu .main-menu {
		flex-direction: column;
		gap: var(--space-xs)
	}
  
}
  
/* Various Pills */

.service-category,
.service-count {
	font-size: var(--fs--1);
	background-color: var(--bg-blue);
	color: var(--secondary);
	max-width: fit-content;
	padding: var(--space-3xs) var(--space-s);
	border-radius: 999px;
	text-decoration: none;
}

.service-count {
    text-align: left;
    font-size: var(--fs--2);
	padding: var(--space-3xs) var(--space-xs);
}

.services-list .service-category {
	font-size: var(--fs--2);
	background-color: transparent;
	border: 1px solid var(--bg-blue);
	line-height: 1.2;
}

/* Tiles */

.services-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-m);
	padding-bottom: var(--space-xl);
}

@media (max-width: 768px) { 
	.services-list {
		grid-template-columns: repeat(1, 1fr);
	}
}

.service-tile {
	background: #fff;
	border: 1px solid var(--line-grey);
	border-radius: .5rem;
	box-shadow: var(--shadow);
	padding: var(--space-s);
	display: block;
	text-decoration: none;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-tile h3 {
	font-size: var(--fs-1);
	line-height: 1.2;
}

.service-tile .service-address {
	font-size: var(--fs--1);
}

.service-tile .btn {
	width: 100%;
}

/* Footer */

.site-footer {
	margin-top: var(--space-xl);
	border-top: 1px solid var(--line-grey);
	box-shadow: var(--shadow);
	background: #fff;
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs--1);
}

.site-footer ul li a {
	text-decoration: none;
}

.site-footer__wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xs);
	align-items: flex-start;
	padding-block: var(--space-xl);
}

.site-footer__wrapper p {
	margin: 0;
	font-size: var(--fs--1);
}

.site-info {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: var(--space-l);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--space-m);
}

.site-info p {
	font-size: var(--fs--2);
	line-height: var(--space-s);
	margin: 0;
}

.site-info p:last-of-type {
	text-align: left;
}

@media (max-width: 768px) {

	.site-footer__wrapper,
	.site-info {
		grid-template-columns: 1fr;
	}

	.site-info p:last-of-type {
		text-align: left;
	}

}

.bug-report-bar {
	background: var(--primary);
	color: #fff;
	padding-block: var(--space-2xs);
	margin-bottom: var(--space-m);
	font-size: var(--fs--1);
	text-align: center;
}

.bug-report-bar p {
	margin: 0;
}

.bug-report-bar a {
	color: #fff;
}