@charset "UTF-8";
/* CSS Document */

:root {
    /* Brand Fonts */
    --font-primary: 'Oswald', sans-serif;
    --font-body: 'Fira Sans', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Font Sizes */
    --font-size-base: 1rem; 
    --font-size-sm: 0.875rem; 
    --font-size-xsm: 0.675rem; 
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem; 
    --font-size-h1: 2rem;
    --font-size-h2: 2rem;   
    --font-size-h3: 1.75rem; 
    --font-size-h4: 1.5rem;  
    --font-size-h5: 1.25rem; 
    --font-size-h6: 1rem;

	/* Font Text Case */
	--font-primary-text-case: uppercase;

    /* Brand Colors */
    --color-primary: #000000; /* Black */
    --color-secondary: #333333; /* Dark Grey */
    --color-accent: #6c3; /* Kawasaki Greeen */
    --color-grey: #F1F1F1; /* Light grey background */
    --color-dark-grey: #c7c7c7; /* Dark grey background */
    --color-muted: #f8f9fa; /* Light grey background */
    --color-text: #1a1a1a; /* Bootstrap body text */
	--color-white: #ffffff; /* White Text */

    /* Background Colors */
    --bg-body: #ffffff;
    --bg-header: #000000;
    --bg-footer: #000000;
    --bg-section: #f1f1f1;
    --bg-card: #ffffff;

    /* Buttons */
    --btn-font-family: var(--font-primary);
    --btn-font-size: var(--font-size-sm);
    --btn-font-weight: var(--font-weight-medium);
    --btn-line-height: 1.5;
    --btn-border-radius: 0; /* Sharp edges */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.5rem;
    --btn-text-transform: uppercase;

    --btn-font-size-sm: var(--font-size-sm);

    --btn-primary-text-color: var(--color-white);
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: #b5b5b9;
    --btn-primary-text-color-hover: var(--color-primary);

    --btn-secondary-text-color: var(--color-primary);
    --btn-secondary-bg: var(--color-grey);
    --btn-secondary-bg-hover: #f0f0f0;

    /* Borders */
    --border-width: 1px;
    --border-color: #dddddd;
    --border-radius: 0;

    /* Spacing Units */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 2rem;    /* 32px */
    --spacing-xl: 4rem;    /* 64px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);
}


/* === Mobile-first adjustments === */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint */
    :root {
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --font-size-h4: 1.125rem;
        --font-size-h5: 1rem;
        --font-size-h6: 0.875rem;
    }
}


/* Body Font */
body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    color: var(--color-primary);
}  

/* Section Classes */
.grey {
	background-color: var(--color-grey);
	border-top: 1px solid var(--color-dark-grey);
}
.dark-grey {
	background-color: var(--color-secondary);
}


/* Main Heading Fonts */
/* typography changes */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-family: var(--font-primary);
    text-transform: var(--font-primary-text-case);
    color: var(--color-primary);
    font-style: normal;
}
h1, .h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}
h2, .h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}
h3, .h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-regular);
    line-height: 1;
}
h4, .h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-regular);
    line-height: 1;
}
h5, .h5 {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1rem;
    color: var(--color-primary);
}
p {
    margin-bottom: 1rem;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-style: normal;
}
p.lead {
    font-size: inherit;
    font-weight: var(--font-weight-medium);
}
ul li {
    font-size: var(--font-size-base);
}
a {
    color: var(--color-accent);
}
a.link {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-sm);
    line-height: normal;
    font-style: normal;
    color: var(--color-primary);
    margin: 0;
    display: block;
	text-decoration: none;
}
a:hover, a:focus {
    color: #999;
}
.accent {
    color: #6c3 !important; /* Kawasaki green */
    font-weight: 600;
}
a.return-link {
	text-decoration: none;
}
p.small, span.small, span.small {
    font-size: var(--font-size-xsm);
}
.white-text h1, .white-text h2, .white-text h3, .white-text h4, .white-text h5, .white-text li, .white-text p, .white-text a.link, .white-text a {
    color: #FFF !important;
}
.panel li {
    font-size: 0.9rem;
}



/* button changes */
.btn {
    padding: 0.65rem 1.05rem;
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    color: var(--btn-color);
    text-transform: var(--btn-text-transform);
    border-radius: 5px;
    background-color: var(--btn-bg);
	transition: all .5s ease;
}

.btn.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--color-white);
    border: 1px solid var(--btn-primary-bg)
}

.btn.btn-primary:hover {
    background-color: var(--btn-primary-bg-hover);
    color: var(--color-primary);
    border: 1px solid var(--btn-primary-bg-hover)
}

.btn.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--color-primary);
    border: 1px solid var(--btn-secondary-bg)
}

.btn.btn-secondary:hover {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--color-primary);
    border: 1px solid var(--btn-secondary-bg-hover)
}

.btn.btn-highlight {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: 1px solid var(--color-accent)
}

.btn.btn-highlight:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary)
}

.btn.btn-sm {
    padding: 0.35rem 0.95rem;
    font-size: var(--btn-font-size-sm);
	text-transform: capitalize;
	font-weight: var(--font-weight-regular);
}
.btn.btn-lg {
    padding: 1.25rem 0.95rem;
}
.btn.dropdown-toggle {
    background-color: var(--btn-primary-outline-color);
    color: var(--black-text);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: var(--btn-font-regular);
    padding: 7px 15px;
    border-radius: 5px;
    border: var(--bs-border-width) solid var(--bs-border-color)
}
.btn i {
	font-size: 1.2rem;
}
.btn.btn-lg i {
	font-size: 1.6rem;
}


/* Enquiry Buttons */
	@media (max-width: 768px) {
		.enquiry-buttons .btn.btn-lg {
			padding: 15px 10px;
			font-size: 12px;
		}
		.enquiry-buttons .btn.btn-lg i {
			font-size: 14px;
		}
	}


/* Header */
header {
	background: black;
	border-bottom: 5px solid #69be28;
    font-family: 'Oswald', sans-serif;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header img.kawasaki-logo {
	width: 130px;
}
header img.kawasaki-connect-logo {
	width: 260px;
}
header h3.dealer-name {
	color: white;
	font-size: 1.2rem;
	padding: 0;
	margin: 0;
}
	@media (min-width: 768px) {
		header {
			padding-top: 1rem;
			padding-bottom: 1rem;
		}
	}
	@media (max-width: 768px) {
		header img.kawasaki-connect-logo {
			width: 160px;
		}	
		header img.kawasaki-logo {
			width: 100px;
		}
	}	


/* Footer */
footer {
    background: var(--color-primary);
}
footer a, footer p {
    color: var(--color-white);
	font-size: var(--font-size-sm);
}
footer a:hover {
    text-decoration: underline;
}
footer i {
    color: var(--color-primary);
    background: var(--color-white);
    padding: 7px;
    font-size: 25px;
    border-radius: 50px;
    width: 40px;
    height: 40px;
}
footer i:hover {
    opacity: 0.8;
}
/* End Footer */


/* Modal Overrides */
.modal {
    max-width: 100% !important;
    width: 100% !important;
    z-index: 1060 !important;
    background: transparent !important;
    box-shadow: 0 0 0 #000 !important;
    position: absolute !important;
}
.modal-title {
    font-weight: 600 !important;
}
@media (max-width: 768px) {
	.modal {
		--bs-modal-width: 95%;
	}
}
.modal-header {
    border-bottom: var(--bs-modal-header-border-width) solid var(--color-accent);
}
/* End Modal Overrides */



/* Offcanvas Overrides */
.offcanvas-header {
    border-bottom: 2px solid var(--color-accent);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
	--bs-offcanvas-height: 65vh;
}
/* End Offcanvas Overrides */


/* Accordion Overrides */
.accordion-button {
    font-size: 1rem;
	text-transform: uppercase;
}
.accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background-color: var(--color-grey);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgb(102 204 51 / 22%);
}
/* End Accordion Overrides */

/* Generic Table Styles */
table.transparent {
	background: transparent;
	--bs-table-bg: transparent;
	border: 1px solid var(--color-dark-grey);
}
table.transparent td.accent {
	font-weight: var(--font-weight-bold);
	width: 40%;
}
table td {
    padding: 1rem 0; /* vertical spacing */
	font-size: var(--font-size-sm);
}
table td i {
	position: relative;
	top: -5px;
	font-size: var(--font-size-xsm);
}
/* End Generic Table Styles */

/* Spec Table Styles */
.spec-table {
    width: 100%;
    border-collapse: collapse;
}
.spec-table td {
    padding: 1rem 0; /* vertical spacing */
	font-size: var(--font-size-sm);
}
.spec-table tr {
    border-bottom: 1px solid #ddd; /* light line between rows */
}
.spec-table tr:last-child {
    border-bottom: none; /* no line on last row */
}
.spec-table td:first-child {
    font-weight: 600; /* bold for left column */
    width: 40%; /* adjust to fit your layout */
}
/* End Spec Table Styles */


/* Chosen Model Details */
.chosen-model-details .image-container {
	position:relative;
	margin-top: -1rem;
}
	@media (min-width: 768px) {
		.chosen-model-details .image-container {
			margin-top: -2rem;
		}
	}
/* End Chosen Model Details */


/* Upsell Container */
.upsell-container .card {
	border: 2px solid var(--color-dark-grey);
	transition: all .5s ease;
	cursor: pointer;
}
.upsell-container .card img {
	max-width: 100%;
	text-align: left;
}
.upsell-container .card:hover {
	border: 2px solid var(--color-accent);
}
.upsell-container .card .card-body h3 {
	text-transform: capitalize;
}
.upsell-container .card .card-text span {
	font-size: 1.2rem;
    font-weight: 700;
}
	@media (min-width: 768px) {
		.upsell-container .card img {
			max-width: 80%;
		}
	}
/* End Upsell Container */



/* Upsell Colour Container */
.upsell-container.colour-stage .card img {
	max-width: 100%;
	text-align: left;
}
span.block-rounded {
    cursor: pointer;
    width: 100em;
    height: 100em;
    font-size: .0625em;
    position: relative;
    box-shadow: 0 0 0 2px transparent;
    border: 4em solid transparent;
	border-radius: 100%;
	display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
span.block-rounded img {
    height: 100%;
    width: 100%;
    z-index: 1;
}
.kw-model-color li.active span.block-rounded {
    box-shadow: 0 0 0 2px #69be28;
    border-color: #fff;
}
	@media (min-width: 768px) {
		.upsell-container.colour-stage .card img {
			max-width: 100%;
		}
	}
/* End Upsell Colour Container */



/* Dealer Details Container */
.dealer-detail-block {
    padding-top: 1rem;
    padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-dark-grey);
}
/* End Dealer Details Container */