/*
 * Theme only. Layout and components are built with Bootstrap classes in the views.
 * The brochure colors are applied by overriding Bootstrap's CSS variables.
 */
:root {
	--bs-primary: #1F4FA8;
	--bs-primary-rgb: 31, 79, 168;
	--bs-primary-bg-subtle: #EEF4FC;
	/* Darker than the brochure green (#5BAA2E) so white button text meets WCAG AA contrast */
	--bs-success: #33801A;
	--bs-success-rgb: 51, 128, 26;
	--bs-warning: #F5B21A;
	--bs-warning-rgb: 245, 178, 26;
	--bs-dark: #1A2752;
	--bs-dark-rgb: 26, 39, 82;

	--bs-heading-color: #25366F;
	--bs-link-color-rgb: 31, 79, 168;
	--bs-link-hover-color-rgb: 24, 63, 136;
	--bs-border-color: #DCE5F2;

	--bs-body-font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-body-font-size: 1.0625rem;
	--bs-body-line-height: 1.7;
	--bs-body-color: #1F2A44;

	--heading-font-family: "Oswald", "Arial Narrow", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
	font-family: var(--heading-font-family);
}

/* Bootstrap hard-codes the success button colors instead of reading --bs-success */
.btn-success {
	--bs-btn-bg: var(--bs-success);
	--bs-btn-border-color: var(--bs-success);
	--bs-btn-hover-bg: #2A6B15;
	--bs-btn-hover-border-color: #2A6B15;
	--bs-btn-active-bg: #2A6B15;
	--bs-btn-active-border-color: #2A6B15;
	--bs-btn-disabled-bg: var(--bs-success);
	--bs-btn-disabled-border-color: var(--bs-success);
}

/* Rich text output from the backoffice cannot carry Bootstrap classes */
blockquote {
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--bs-heading-color);
}

/* Header: fade between the translucent and the solid state (see js/header.js) */
.site-header {
	transition: background-color 0.3s ease;
}

/* Bootstrap's dark navbar links are too dim, especially on top of a photo */
.navbar[data-bs-theme="dark"] {
	--bs-navbar-color: rgba(255, 255, 255, 0.85);
}

/* Hero: at least 60% of the window below the floating header (about 5.5rem tall) */
.hero-min-height {
	min-height: calc(60vh + 5.5rem);
}

/* Darkens the text side of a hero photo and lets the other side show through. Bootstrap has no directional gradient. */
.hero-overlay {
	background: rgba(var(--bs-dark-rgb), 0.7);
}

@media (min-width: 992px) {
	.hero-overlay {
		background: linear-gradient(90deg, rgba(var(--bs-dark-rgb), 0.85) 0%, rgba(var(--bs-primary-rgb), 0.55) 45%, rgba(var(--bs-primary-rgb), 0) 80%);
	}
}

/* Slide that goes with Bootstrap's .fade opacity transition (see js/site.js) */
.reveal {
	transform: translateY(1.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.show {
	transform: none;
}

/* Slowly drifting gradient behind the call to action */
.cta-animated {
	background: linear-gradient(120deg, var(--bs-primary), var(--bs-dark), var(--bs-primary));
	background-size: 200% 200%;
	animation: cta-drift 14s ease-in-out infinite;
}

@keyframes cta-drift {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/*
 * Feature cards: they grow slightly on hover. A card with a photo also flips over to it.
 * Touch screens have no hover, so they only show the front, which holds all the content.
 */
.feature-card {
	perspective: 1200px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-card-inner {
	transform-style: preserve-3d;
	transition: transform 0.7s ease;
}

.feature-card-face {
	backface-visibility: hidden;
}

.feature-card-back {
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.feature-card:hover {
		z-index: 1;
		transform: scale(1.04);
		box-shadow: var(--bs-box-shadow-lg) !important;
	}

	.feature-card-flip:hover .feature-card-inner {
		transform: rotateY(180deg);
	}
}

/* Decorated section: blue gradient with two soft glows that drift slowly, like sunlight */
.section-decor {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-dark) 100%);
}

.section-decor::before,
.section-decor::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.section-decor::before {
	top: -14rem;
	right: -10rem;
	width: 36rem;
	height: 36rem;
	background: radial-gradient(circle, rgba(var(--bs-warning-rgb), 0.35), transparent 65%);
	animation: glow-drift 16s ease-in-out infinite;
}

.section-decor::after {
	bottom: -14rem;
	left: -10rem;
	width: 30rem;
	height: 30rem;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
	animation: glow-drift 20s ease-in-out infinite reverse;
}

.section-decor > * {
	position: relative;
	z-index: 1;
}

@keyframes glow-drift {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-3rem, 2rem);
	}
}

/* Keep the content, drop the motion */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.feature-card,
	.feature-card-inner {
		transition: none;
	}

	.reveal {
		transform: none;
		transition: none;
	}

	.feature-card:hover {
		transform: none;
	}

	.cta-animated,
	.section-decor::before,
	.section-decor::after {
		animation: none;
	}
}