/*
Theme Name: DealerPro Solutions Website
Theme URI: https://dealerpro.solutions/
Machine Name: dealerpro-solutions
Author: DealerPro Solutions
Author URI: https://dealerpro.solutions/
Description: Marketing website theme for DealerPro Solutions, a consulting firm for dealerships, powered by Aduvio.
Version: 1.0
*/

/*
	Base typography

	Fraunces for titles, Inter for body copy. These are only the theme defaults: the fonts picked in
	Aduvio > Front-end settings > Typography are printed after this file (php/includes/css-from-settings.php)
	and override everything here.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

body {
	font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.dps-footer-wordmark {
	font-family: "Fraunces", Georgia, serif;
}


/*
	Theme default for the main colour. The colour picked in Aduvio > Front-end settings > Main theme
	color is printed after this file (php/includes/css-from-settings.php) with !important, so this only
	applies when no colour is set there.
*/

.primary-bg {
	background-color: #e8962e;
}


/* ================================================================ Page primitives

	Everything every page is built out of. All prefixed .dps- so nothing collides with Bootstrap or with
	the core website stylesheet.
*/

:root {
	--dps-navy: #0e2238;
	--dps-navy-soft: #173452;
	--dps-accent: #e8962e;
	--dps-accent-dark: #c97a14;
	--dps-ink: #1a2430;
	--dps-ink-soft: #56626f;
	--dps-line: #e3e1da;
	--dps-wash: #f6f4ef;
}


/* The core stylesheet offsets .content by the height of the fixed header. Every page here opens on a
   hero that paints its own background, so that offset would leave a pale band between the navbar and the
   hero - the hero carries the clearance in its own padding instead */
.dps-page.content {
	padding-top: 0;
	background: #ffffff;

	/* Core sets overflow:hidden here to contain floats, which is not needed on these pages */
	overflow: visible;
}


.dps-container {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}


.dps-section {
	padding: 88px 0;
}

.dps-section-wash {
	background: var(--dps-wash);
}


/* Must stay a div in the markup. The core stylesheet styles the bare <header> element as the legacy site
   header - black, 40px tall, overflow hidden and position:fixed */
.dps-section-head {
	max-width: 700px;
	margin: 0 auto 48px auto;
	text-align: center;
}

.dps-section-title {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--dps-ink);
}

.dps-section-subtitle {
	margin: 16px 0 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--dps-ink-soft);
}

.dps-eyebrow {
	margin: 0 0 12px 0;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dps-accent-dark);
}


/* Two columns: the copy on the left, a list on the right. One column below 768px */
.dps-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px 72px;
	align-items: center;
}


/* ---------------------------------------------------------------- Buttons */

.dps-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dps-btn:hover,
.dps-btn:focus {
	text-decoration: none;
}

.dps-btn-lg {
	padding: 16px 32px;
	font-size: 16px;
}

.dps-btn-primary {
	background: var(--dps-accent);
	border-color: var(--dps-accent);
	color: var(--dps-navy);
}

.dps-btn-primary:hover,
.dps-btn-primary:focus {
	background: var(--dps-accent-dark);
	border-color: var(--dps-accent-dark);
	color: var(--dps-navy);
}

/* Sits on a dark band, so its resting state is the background showing through */
.dps-btn-ghost {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.32);
	color: #ffffff;
}

.dps-btn-ghost:hover,
.dps-btn-ghost:focus {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
}


/* ---------------------------------------------------------------- Hero */

.dps-hero {
	position: relative;
	overflow: hidden;

	/* 60px of it is the fixed header this sits under */
	padding: 160px 0 112px 0;

	background-color: var(--dps-navy);
	background-image:
		radial-gradient(ellipse 100% 80% at 80% 0%, rgba(232, 150, 46, 0.14) 0%, rgba(232, 150, 46, 0) 60%),
		linear-gradient(160deg, var(--dps-navy-soft) 0%, var(--dps-navy) 62%);
}

/* A fine grid that gives the dark bands some texture without an image */
.dps-hero:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

/* Inner pages open on a shorter version of the same hero */
.dps-hero-compact {
	padding: 136px 0 72px 0;
}

.dps-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
	text-align: center;
}

.dps-hero-eyebrow {
	margin: 0 0 18px 0;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dps-accent);
}

.dps-hero-title {
	margin: 0;
	font-size: clamp(32px, 5.2vw, 56px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: #ffffff;
}

.dps-hero-compact .dps-hero-title {
	font-size: clamp(28px, 4.2vw, 44px);
}

.dps-hero-subtitle {
	margin: 22px auto 0 auto;
	max-width: 660px;
	font-size: clamp(16px, 1.9vw, 19px);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

.dps-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 38px;
}


/* ---------------------------------------------------------------- Grids and cards */

.dps-grid {
	display: grid;
	gap: 24px;
}

.dps-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.dps-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}


.dps-card {
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	border: 1px solid var(--dps-line);
	border-radius: 10px;
	background: #ffffff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.dps-card:hover,
a.dps-card:focus {
	border-color: var(--dps-accent);
	box-shadow: 0 10px 30px rgba(14, 34, 56, 0.09);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}

.dps-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 10px;
	background: rgba(232, 150, 46, 0.14);
	color: var(--dps-accent-dark);
	font-size: 20px;
}

.dps-card-title {
	margin: 0 0 10px 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--dps-ink);
}

.dps-card-text {
	margin: 0 0 18px 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--dps-ink-soft);
}

/* Pushed to the bottom so the three cards line up whatever the length of their text */
.dps-card-more {
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--dps-accent-dark);
}

.dps-card-more i {
	margin-left: 4px;
	font-size: 12px;
}


/* ---------------------------------------------------------------- Tick list */

.dps-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-ticks > li {
	position: relative;
	padding: 8px 0 8px 30px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dps-ink);
}

.dps-ticks > li:before {
	content: "\f00c";
	position: absolute;
	top: 10px;
	left: 0;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	color: var(--dps-accent-dark);
}


/* ---------------------------------------------------------------- Numbered steps */

.dps-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--dps-navy);
	font-family: "Fraunces", Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--dps-accent);
}

.dps-step-title {
	margin: 0 0 8px 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--dps-ink);
}

.dps-step-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--dps-ink-soft);
}


/* ---------------------------------------------------------------- Services page */

/* The home page cards link to these by anchor, and the fixed header would otherwise cover the heading */
.dps-service {
	scroll-margin-top: 70px;
}

.dps-service-points {
	padding: 28px 30px;
	border: 1px solid var(--dps-line);
	border-radius: 10px;
	background: #ffffff;
}

.dps-service-points-title {
	margin: 0 0 8px 0;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dps-ink-soft);
}


/* ---------------------------------------------------------------- Final CTA */

.dps-final {
	position: relative;
	overflow: hidden;
	padding: 88px 0;
	background-color: var(--dps-navy);
	background-image: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(232, 150, 46, 0.16) 0%, rgba(232, 150, 46, 0) 64%);
}

.dps-final-inner {
	max-width: 720px;
	text-align: center;
}

.dps-final-title {
	margin: 0;
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
}

.dps-final-text {
	margin: 16px auto 32px auto;
	max-width: 560px;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}


/* ---------------------------------------------------------------- Contact page */

.dps-contact-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px 72px;
	align-items: start;
}

.dps-aside-title {
	margin: 0 0 14px 0;
	font-size: 22px;
	font-weight: 600;
	color: var(--dps-ink);
}

.dps-contact-aside .dps-ticks {
	margin-bottom: 8px;
}

.dps-contact-details {
	margin: 0 0 36px 0;
	padding: 0;
	list-style: none;
}

.dps-contact-details > li {
	padding: 6px 0;
	font-size: 16px;
	color: var(--dps-ink);
}

.dps-contact-details i {
	width: 22px;
	color: var(--dps-accent-dark);
}

.dps-contact-details address {
	display: inline;
	margin: 0;
}

.dps-contact-form-wrap {
	padding: 36px 34px;
	border: 1px solid var(--dps-line);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 10px 30px rgba(14, 34, 56, 0.06);
}


/* ---------------------------------------------------------------- Forms */

.dps-form-title {
	margin: 0 0 8px 0;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 600;
	color: var(--dps-ink);
}

.dps-form-intro {
	margin: 0 0 26px 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--dps-ink-soft);
}

.dps-field {
	margin-bottom: 18px;
}

/* Two fields share a row above 600px and stack below it */
.dps-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
}

.dps-field-row > .dps-field {
	flex: 1 1 220px;
	min-width: 0;
}

.dps-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dps-ink);
}

.dps-label-note {
	font-weight: 400;
	color: var(--dps-ink-soft);
}

.dps-input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #cfccc2;
	border-radius: 6px;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dps-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dps-input:focus {
	outline: none;
	border-color: var(--dps-accent-dark);
	box-shadow: 0 0 0 3px rgba(232, 150, 46, 0.22);
}

.dps-textarea {
	resize: vertical;
	min-height: 140px;
}

.dps-input.error {
	border-color: #d9534f;
}

.dps-field-error {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: #c9302c;
}

/* Empty until the endpoint answers, so it must not take up room before then */
.dps-form-alert:empty {
	display: none;
}

.dps-form-alert {
	margin-bottom: 18px;
}

/* The honeypot. Off screen rather than display:none, which some scripts skip */
.dps-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}


/* ---------------------------------------------------------------- Header

	The logo fills more of the bar by taking padding off the brand block, not by growing the bar. The brand
	heights stay the core's (60px, 70px from 992px) so the header keeps its size - the selectors match the
	core's own, which this sheet loads after.
*/

.site-header > .site-header-main .navbar-brand {
	padding: 6px 0px;
}

.site-header .navbar-logo {
	height: 48px;
}

@media (min-width: 992px) {

	.site-header > .site-header-main .navbar-brand {
		padding: 7px 0px;
	}

	.site-header .navbar-logo {
		height: 56px;
	}
}


/* Contact is the one call to action in the bar. #nav-contact is the itemid of its row in the menus table
   (see _install/website-menu.sql). Desktop only: below 992px the menu is the collapsed drop-down, where a
   full-width row like every other item is the right thing */
@media (min-width: 992px) {

	/* .site-header-menu is a flex row whose items stretch, so the li is the full height of the bar and the
	   anchor sits at the top of it. Centring the anchor inside the li lines the button up with the text links */
	.site-header .site-header-menu > li#nav-contact {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	.site-header .site-header-menu > li#nav-contact > a {
		padding: 10px 18px;
		border-radius: 6px;
		background: var(--dps-accent);
		color: var(--dps-navy);
		font-weight: 600;
		line-height: 20px;
	}

	.site-header .site-header-menu > li#nav-contact > a:hover,
	.site-header .site-header-menu > li#nav-contact > a:focus {
		background: var(--dps-accent-dark);
		color: var(--dps-navy);
	}

	/* The accent underline the core grows under a hovered item belongs to a text link. Inside a filled
	   button it draws a bar across the middle of it */
	.site-header .site-header-menu > li#nav-contact > a:after {
		content: none;
	}
}


/* The core draws the accent underline for li.active already. What it never does is emit the class: its menu
   loop only ever writes 'dropdown', so the footer script marks the current row itself. Only the colour is set
   here. --header-accent is retuned on the li rather than on .site-header because the core also paints the
   utility strip with it. */

.site-header .site-header-menu > li.active {
	--header-accent: var(--dps-accent);
}

.site-header .site-header-menu > li.active > a,
.site-header .site-header-menu > li.active > a:hover,
.site-header .site-header-menu > li.active > a:focus {
	color: var(--dps-accent);
	background-color: transparent;
}

/* The button keeps its own colours when it is the current page */
@media (min-width: 992px) {

	.site-header .site-header-menu > li#nav-contact.active > a,
	.site-header .site-header-menu > li#nav-contact.active > a:hover,
	.site-header .site-header-menu > li#nav-contact.active > a:focus {
		background-color: var(--dps-accent-dark);
		color: var(--dps-navy);
	}
}


/* ================================================================ Footer

	The core stylesheet gives the .footer wrapper a 200px min-height and a white background, which is what shows
	through when a theme ships no footer of its own. The footer below paints its own ground, so the wrapper has
	to stop painting one.
*/

.footer {
	min-height: 0;
	background: none;
}

.dps-footer {
	background: #0a1828;
	color: rgba(255, 255, 255, 0.66);
	font-size: 14px;
}

.dps-footer-top {
	padding: 56px 0 44px 0;
}

.dps-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 56px;
}

/* The brand block takes the room left over once the link columns have theirs */
.dps-footer-brand {
	flex: 1 1 280px;
	min-width: 0;
}

.dps-footer-col {
	flex: 0 1 190px;
	min-width: 0;
}

.dps-footer-logo {
	max-width: 100%;
	height: auto;
	max-height: 44px;
}

.dps-footer-wordmark {
	font-size: 22px;
	font-weight: 600;
	color: #ffffff;
}

.dps-footer-tagline {
	margin: 16px 0 0 0;
	max-width: 320px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

.dps-footer-social {
	margin-top: 18px;
}

.dps-footer-social a {
	display: inline-block;
	padding: 8px 14px 8px 0;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.55);
}

.dps-footer-social a:hover,
.dps-footer-social a:focus {
	color: var(--dps-accent);
}

/* An h2 for the document outline, sized as the small label it actually is */
.dps-footer-title {
	margin: 0 0 16px 0;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.dps-footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-footer-list > li {
	margin-bottom: 2px;
}

.dps-footer-list a {
	display: inline-block;
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.dps-footer-list a:hover,
.dps-footer-list a:focus {
	color: #ffffff;
	text-decoration: none;
}

.dps-footer-bottom {
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dps-footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
}

.dps-footer-copy {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.dps-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-footer-legal a {
	display: inline-block;
	padding: 5px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.58);
	text-decoration: none;
}

.dps-footer-legal a:hover,
.dps-footer-legal a:focus {
	color: #ffffff;
	text-decoration: none;
}


/* ---------------------------------------------------------------- Responsive */

@media (max-width: 991px) {

	.dps-grid-3,
	.dps-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.dps-section {
		padding: 64px 0;
	}

	.dps-hero {
		padding: 128px 0 84px 0;
	}

	.dps-hero-compact {
		padding: 112px 0 56px 0;
	}

	.dps-contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {

	.dps-grid-3,
	.dps-grid-4,
	.dps-split {
		grid-template-columns: 1fr;
	}

	.dps-split {
		gap: 28px;
	}

	.dps-section {
		padding: 52px 0;
	}

	.dps-hero {
		padding: 104px 0 64px 0;
	}

	.dps-hero-compact {
		padding: 96px 0 48px 0;
	}

	.dps-hero-actions .dps-btn {
		flex: 1 1 100%;
	}

	.dps-contact-form-wrap {
		padding: 26px 20px;
	}

	.dps-footer-top {
		padding: 40px 0 28px 0;
	}

	.dps-footer-brand,
	.dps-footer-col {
		flex: 1 1 100%;
	}

	.dps-footer-bottom-inner {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {

	.dps-card,
	.dps-btn,
	.dps-input {
		transition: none;
	}

	a.dps-card:hover,
	a.dps-card:focus {
		transform: none;
	}
}