/* stylelint-disable max-line-length */
/* stylelint-disable selector-class-pattern */

/* ========================= CSS VARIABLES ========================= */

:root {
	--color-gold: #bdab64;
	--color-green: #324024;
	--color-canvas: #f3f2ec;
	--color-white: #fff;
	--color-black: #000;
	--color-gray-light: rgb(245 245 245);
	--color-green-alpha: #324024bd;
	--color-green-lighter: rgb(from var(--color-green) r g b / 80%);
	--header-height: 4rem;
	--font-body: 'Avenir', sans-serif;
	--font-heading-1: 'ZillaSlab';
}

/* ========================= BASE STYLES ========================= */

body {
	--theme-color: var(--color-green) !important;
	--theme-color-80: var(--color-green-lighter) !important;

	font-family: var(--font-body);
	background-color: #fbfeff;
}

/* ========================= UTILITY OVERRIDES ========================= */

*.bg-primary-600,
*.before\:bg-primary-600::before,
*.bg-theme-600 {
	background-color: var(--color-green) !important;
}

*.bg-primary-400,
*.bg-theme-400 {
	background-color: var(--color-green-lighter) !important;
}

*.font-theme {
	font-family: var(--font-body) !important;
}

*.text-primary-600,
*.hover\:text-primary-600,
*.text-theme-600 {
	color: var(--color-green) !important;
}

*.text-primary-400,
*.hover\:text-primary-500,
*.text-theme-400 {
	color: var(--color-green-lighter) !important;
}

*.hover\:text-primary-500:hover {
	color: var(--color-green) !important;
}

*.focus\:ring-primary-500:focus {
	--tw-ring-color: var(--color-green) !important;
}

*.border-primary-600,
*.border-primary-500 {
	border-color: var(--color-green) !important;
}

.vue-editor-toolbar.ql-toolbar.ql-snow button:hover {
	border-color: var(--color-green) !important;

	--tw-ring-shadow: var(--color-green) !important;
	--tw-ring-color: var(--color-green) !important;
}

/* ========================= LAYOUT COMPONENTS ========================= */

.header,
.bottom-mobile-menu {
	background-color: var(--color-canvas) !important;
	color: var(--color-gold);
}

.header {
	height: var(--header-height);

	.toggle-btn-icon {
		background-color: var(--color-gold);
	}

	.page-name {
		color: var(--color-green);
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 500;
	}
}

.main-heading {

	&.write-a-post___en {

		.main-heading-image {
			background-color: var(--color-green);

			img {
				display: none;
			}
		}
	}
}

.bottom-mobile-menu {

	.nuxt-link-active,
	.nuxt-link:focus,
	.nuxt-link:hover {
		color: var(--color-black);
	}

	.png-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* ========================= HOME PAGE ========================= */

.hero {

	.hero-img {
		padding-top: 15rem;
		mask-image: linear-gradient(to bottom, transparent 15rem, var(--color-black) 17rem);
	}

	.hero-content {
		position: absolute;
		top: 4rem;
		max-width: 15rem;
	}

	.hero-buttons {
		position: absolute;
		top: 1rem;
		right: 1rem;
		width: unset;
	}

	.syndicates-btn {
		display: none;
	}

	.login-btn {
		background-color: var(--color-white) !important;
		color: var(--color-green);
		border-color: var(--color-green);
	}
}

.home-content {

	h1,
	h2,
	h3,
	h6 {
		color: var(--color-green);
		font-family: var(--font-heading-1);
	}

	b {
		color: var(--color-gold);
	}
}

.welcome-to-stride {

	.home-content {
		@media (min-width: 64rem) {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		img {
			grid-column: 2 / 3;
			grid-row: 1 / 4;
			position: relative;
			width: unset;
		}
	}

	p {
		max-width: unset !important;

		&:last-child {
			grid-column: 1 / 3;
		}
	}
}

.exclusive-content b {
	color: var(--color-gold);
}

.key-features a {
	width: unset;
}

.testimonials-card {
	background-color: var(--color-green-alpha) !important;
}

/* ========================= VIDEO PLAYER ========================= */

button.play-button {
	background-color: var(--color-gold);
	color: var(--color-green);
	border: none;
}

/* ========================= MISC COMPONENTS ========================= */

.cookie-message {
	background-color: var(--color-canvas);
}

/* ========================= HORSE CARDS ========================= */

.horse-single-card,
.horse-card {

	.download-horse-pdf {
		background-color: var(--color-green);
		color: var(--color-white);
		justify-content: flex-start;
		padding-inline: 0.5rem;
		gap: 1rem;

		&:hover {
			opacity: 0.9;
		}
	}

	.horse-card-badge {
		background-color: var(--color-green);
		color: var(--color-white);
		font-weight: 200;

		span {
			background-color: var(--color-white);
			letter-spacing: unset;
			font-weight: 500;
		}
	}

	.horse-single-card-footer {
		flex-direction: column-reverse !important;

		.base-collapse-panel {
			background-color: var(--color-gray-light);
		}

		[role='button'][aria-expanded='true'] {
			background-color: var(--color-gold);
		}
	}
}

.date-picker.vc-container {

	.vc-title {
		font-family: var(--font-body);
		text-transform: uppercase;
		font-weight: 500;
	}

	.vc-highlight {
		width: 2.25rem;
		height: 1.625rem;
	}

	.vc-weekday {
		color: var(--gray-900);
	}

	.vc-day.is-not-in-month .vc-day-content {
		opacity: 1;
		color: #a0aec0;
	}

	.vc-day-content:focus {
		background-color: transparent;
	}
}