/*
Theme Name: DealerShark.io Website
Theme URI: https://dealerpro.io/
Machine Name: dealerpro
Author: DealerShark.io
Author URI: https://dealerpro.io/
Description: Marketing website theme for DealerShark.io, powered by Aduvio.
Version: 1.1
*/

/*
	Base typography

	Titles default to Montserrat and body copy to Roboto, matching the DealerShark product. 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=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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


h1,
h2,
h3,
h4,
h5,
h6,
.dp-footer-wordmark,
.splash-wordmark {
	font-family: "Montserrat", sans-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: #2196f3;
}


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

	Everything every marketing page is built out of. Page stylesheets in css/<page>/ carry only
	the bands unique to that page. All prefixed .dp- so nothing collides with Bootstrap or with
	the core website stylesheet.
*/

:root {
	--dp-ink: #14171b;
	--dp-ink-soft: #5a6673;
	--dp-blue: #2196f3;
	--dp-blue-dark: #1478cf;
	--dp-dark: #14171b;
	--dp-dark-soft: #212730;
	--dp-line: #e4e8ed;
	--dp-wash: #f6f8fa;
}


/* 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 */
.dp-page.content {
	padding-top: 0;
	background: #ffffff;

	/* Core sets overflow:hidden here to contain floats. That also makes .content the nearest
	   clipping ancestor, which kills position:sticky on anything inside it - the Features jump
	   strip among them. Nothing on these pages floats, so it can go back to visible */
	overflow: visible;
}


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


.dp-section {
	padding: 84px 0;
}

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

.dp-section-dark {
	background-color: var(--dp-dark);
	background-image: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(33, 150, 243, 0.18) 0%, rgba(33, 150, 243, 0) 60%);
}


/* 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 - so a <header> here
   is clipped to a black bar and pulled out of the flow, and whatever follows rides up over it */
.dp-section-head {
	max-width: 720px;
	margin: 0 auto 48px auto;
	text-align: center;
}

.dp-section-head-left {
	margin-left: 0;
	text-align: left;
}


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


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


.dp-eyebrow {
	margin: 0 0 12px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dp-blue);
}


.dp-section-dark .dp-section-title {
	color: #ffffff;
}

.dp-section-dark .dp-section-subtitle {
	color: rgba(255, 255, 255, 0.72);
}


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

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

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

.dp-btn-lg {
	padding: 16px 34px;
	font-size: 16px;
}

.dp-btn-primary {
	background: var(--dp-blue);
	border-color: var(--dp-blue);
	color: #ffffff;
}

.dp-btn-primary:hover,
.dp-btn-primary:focus {
	background: var(--dp-blue-dark);
	border-color: var(--dp-blue-dark);
	color: #ffffff;
}

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

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

.dp-btn-outline {
	background: transparent;
	border-color: var(--dp-blue);
	color: var(--dp-blue);
}

.dp-btn-outline:hover,
.dp-btn-outline:focus {
	background: var(--dp-blue);
	color: #ffffff;
}


/* ---------------------------------------------------------------- Grids */

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

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

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

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


/* ---------------------------------------------------------------- Cards */

.dp-card {
	display: block;
	padding: 30px 28px;
	border: 1px solid var(--dp-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;
}

/* Only the ones that are links lift */
a.dp-card:hover,
a.dp-card:focus {
	border-color: rgba(33, 150, 243, 0.5);
	box-shadow: 0 10px 30px rgba(20, 23, 27, 0.08);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}

.dp-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 10px;
	background: rgba(33, 150, 243, 0.1);
	color: var(--dp-blue);
	font-size: 19px;
}

.dp-card-title {
	margin: 0 0 10px 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--dp-ink);
}

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


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

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

.dp-ticks > li {
	position: relative;
	padding: 6px 0 6px 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--dp-ink-soft);
}

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


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

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

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

	background-color: var(--dp-dark);
	background-image:
		radial-gradient(ellipse 110% 80% at 50% 0%, rgba(33, 150, 243, 0.16) 0%, rgba(33, 150, 243, 0) 62%),
		linear-gradient(160deg, var(--dp-dark-soft) 0%, var(--dp-dark) 58%, #0f1216 100%);
}

/* Inner pages open on a shorter version of the same hero */
.dp-hero-compact {
	padding: 132px 0 68px 0;
}

/* The hatch that ties every page back to the splash */
.dp-hero:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
	pointer-events: none;
}

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

.dp-hero-eyebrow {
	margin: 0 0 18px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.dp-hero-title {
	margin: 0;
	font-size: clamp(32px, 5.4vw, 58px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #ffffff;
}

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

.dp-hero-subtitle {
	margin: 22px auto 0 auto;
	max-width: 680px;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
}

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


/* ---------------------------------------------------------------- Plan cards */

.dp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 24px;
	border: 1px solid var(--dp-line);
	border-radius: 10px;
	background: #ffffff;
	text-align: center;
}

.dp-plan.is-popular {
	border-color: var(--dp-blue);
	box-shadow: 0 12px 34px rgba(33, 150, 243, 0.14);
}

.dp-plan-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 14px;
	border-radius: 20px;
	background: var(--dp-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #ffffff;
}

.dp-plan-name {
	margin: 0 0 12px 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dp-ink);
}

.dp-plan-price {
	margin: 0 0 14px 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--dp-ink);
}

.dp-plan-currency {
	margin-right: 2px;
	font-size: 20px;
	font-weight: 600;
	vertical-align: super;
}

.dp-plan-period {
	margin-left: 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dp-ink-soft);
}

.dp-plan-line {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dp-ink-soft);
}


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

.dp-final {
	position: relative;
	overflow: hidden;
	padding: 88px 0;
	background-color: var(--dp-dark);
	background-image: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0) 64%);
}

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

.dp-final-title {
	margin: 0;
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #ffffff;
}

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


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

@media (max-width: 991px) {

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

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

	.dp-hero {
		padding: 124px 0 80px 0;
	}

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


@media (max-width: 767px) {

	.dp-grid-2,
	.dp-grid-3,
	.dp-grid-4 {
		grid-template-columns: 1fr;
	}

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

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

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

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


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

	.dp-card,
	.dp-btn {
		transition: none;
	}

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


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

	Used by the demo page's "what to expect" and by the detail pages' "how it works".
*/

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

.dp-step {
	display: flex;
	gap: 16px;
	padding-bottom: 24px;
}

/* The rule connecting one number to the next - not on the last, which connects to nothing */
.dp-step:not(:last-child) .dp-step-num:after {
	content: "";
	position: absolute;
	top: 36px;
	left: 50%;
	width: 1px;
	height: calc(100% + 12px);
	transform: translateX(-50%);
	background: var(--dp-line);
}

.dp-step-num {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(33, 150, 243, 0.1);
	font-size: 14px;
	font-weight: 700;
	color: var(--dp-blue);
}

.dp-step-body {
	min-width: 0;
}

.dp-step-title {
	margin: 4px 0 6px 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--dp-ink);
}

.dp-step-title i {
	margin-right: 6px;
	color: var(--dp-blue);
}

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


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

	Used by the contact and demo forms. Deliberately not sky-form: that markup carries its own
	opinionated styling, which fights the rest of this theme.
*/

.dp-form-title {
	margin: 0 0 8px 0;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--dp-ink);
}

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


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

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

.dp-field-row > .dp-field {
	flex: 1 1 240px;
	min-width: 0;
}


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

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


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

.dp-input:focus {
	outline: none;
	border-color: var(--dp-blue);
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.14);
}

.dp-textarea {
	resize: vertical;
	min-height: 130px;
}


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

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


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

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


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

	.dp-input {
		transition: none;
	}
}


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

	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;
	}
}


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

	The core header builds its right-hand button from the login/register settings, which this site
	does not use - so the nav's own Book a Demo row is drawn as the button instead. #nav-book-a-demo
	is the itemid on that menus row (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 and the button treatment only gets in the way */
@media (min-width: 992px) {

	/* .site-header-menu is a flex row whose items stretch, so the li is the full 70px height of
	   the bar and the anchor sits at the top of it. Centring the anchor inside the li is what
	   lines the button up with the text links beside it - margins cannot, because the row height
	   is set by those links' 25px padding rather than by anything on this item */
	.site-header .site-header-menu > li#nav-book-a-demo {
		display: flex;
		align-items: center;
		margin-left: 10px;
	}

	.site-header .site-header-menu > li#nav-book-a-demo > a {
		padding: 10px 18px;
		border-radius: 6px;
		background: var(--dp-blue);
		color: #ffffff;
		font-weight: 600;
		line-height: 20px;
	}

	.site-header .site-header-menu > li#nav-book-a-demo > a:hover,
	.site-header .site-header-menu > li#nav-book-a-demo > a:focus {
		background: var(--dp-blue-dark);
		color: #ffffff;
	}

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


/* ================================================================ 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;
}


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


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


.dp-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 48px;
}


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


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


.dp-footer-logo {
	max-width: 100%;
	height: auto;
	max-height: 40px;
}


.dp-footer-wordmark {
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
}


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


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

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

.dp-footer-social a:hover,
.dp-footer-social a:focus {
	color: #2196f3;
}


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


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

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

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

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


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


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


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


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

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

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


@media (max-width: 767px) {

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

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

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