/* Miracle Leaf Franchise Hub - Website & Login Branding */

/* === Self-hosted fonts === */
@font-face {
	font-family: 'Ridley Grotesk';
	src: url('/assets/franchise_hub/fonts/RidleyGrotesk-Regular.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Ridley Grotesk';
	src: url('/assets/franchise_hub/fonts/RidleyGrotesk-Medium.otf') format('opentype');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Ridley Grotesk';
	src: url('/assets/franchise_hub/fonts/RidleyGrotesk-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Ridley Grotesk';
	src: url('/assets/franchise_hub/fonts/RidleyGrotesk-Bold.otf') format('opentype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Optician Sans';
	src: url('/assets/franchise_hub/fonts/OpticianSans.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url('/assets/franchise_hub/fonts/Barlow-Light.otf') format('opentype');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('/assets/franchise_hub/fonts/Barlow-Regular.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('/assets/franchise_hub/fonts/Barlow-Medium.otf') format('opentype');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('/assets/franchise_hub/fonts/Barlow-SemiBold.otf') format('opentype');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('/assets/franchise_hub/fonts/Barlow-Bold.otf') format('opentype');
	font-weight: 700;
	font-display: swap;
}

/* === Variables === */
:root {
	--ml-primary: #4b6e34;
	--ml-primary-dark: #3a5728;
	--ml-secondary: #86bf3e;
	--ml-secondary-light: #a3d465;
	--ml-font-header: 'Ridley Grotesk', 'Barlow', sans-serif;
	--ml-font-subtitle: 'Optician Sans', 'Barlow', sans-serif;
	--ml-font-body: 'Barlow', sans-serif;
}

/* === Global === */
body {
	font-family: var(--ml-font-body) !important;
}

h1, h2, h3, .page-card .page-card-head .title {
	font-family: var(--ml-font-header) !important;
}

h4, h5, h6, .subtitle {
	font-family: var(--ml-font-subtitle) !important;
}

/* === Links & Buttons === */
a {
	color: var(--ml-primary);
}

a:hover {
	color: var(--ml-primary-dark);
}

.btn-primary, .btn-primary-dark {
	background-color: var(--ml-primary) !important;
	border-color: var(--ml-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: var(--ml-primary-dark) !important;
	border-color: var(--ml-primary-dark) !important;
}

/* === Login Page === */
.page-card {
	border-top: 4px solid var(--ml-secondary) !important;
}

.page-card .page-card-head .title {
	color: var(--ml-primary) !important;
}

.page-card .page-card-head .app-logo {
	max-height: 64px !important;
}

.page-card .btn-primary {
	background-color: var(--ml-primary) !important;
	border-color: var(--ml-primary) !important;
}

.page-card .btn-primary:hover {
	background-color: var(--ml-primary-dark) !important;
	border-color: var(--ml-primary-dark) !important;
}

.page-card .btn-primary-light {
	background-color: var(--ml-secondary) !important;
	border-color: var(--ml-secondary) !important;
	color: #fff !important;
}

.page-card .btn-primary-light:hover {
	background-color: var(--ml-secondary-light) !important;
}

.btn-default.btn-social {
	border-color: var(--ml-primary) !important;
}

/* === Navbar === */
.navbar {
	background-color: var(--ml-primary) !important;
	border-bottom: 2px solid var(--ml-secondary) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler {
	color: #fff !important;
}

.navbar .nav-link:hover {
	color: var(--ml-secondary-light) !important;
}

/* === Footer === */
.web-footer {
	background-color: var(--ml-primary) !important;
	color: #fff !important;
}

.web-footer a {
	color: var(--ml-secondary-light) !important;
}

/* === Form Controls === */
.form-control:focus {
	border-color: var(--ml-secondary) !important;
	box-shadow: 0 0 0 0.2rem rgba(75, 110, 52, 0.25) !important;
}