/* ============================================================

Honda JDM Imports — Unified Modern Stylesheet

============================================================ */


/* ---------- CSS Custom Properties ---------- */

:root {

--color-primary: #c0392b;

--color-primary-dk: #96281b;

--color-accent: #e74c3c;

--color-dark: #1a1a1a;

--color-text: #2c2c2c;

--color-muted: #666;

--color-light: #f5f5f5;

--color-white: #fff;

--color-border: #ddd;

--font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;

--font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;

--max-width: 1200px;

--radius: 8px;

--shadow: 0 2px 12px rgba(0,0,0,.08);

--shadow-lg: 0 4px 24px rgba(0,0,0,.12);

--transition: .25s ease;

}


/* ---------- Reset / Base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

font-family: var(--font-body);

color: var(--color-text);

background: var(--color-white);

line-height: 1.6;

-webkit-font-smoothing: antialiased;

}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }

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

ul, ol { list-style: none; }


/* ---------- Utility ---------- */

.container { width: 90%; max-width: var(--max-width); margin-inline: auto; }

.sr-only {

position: absolute; width: 1px; height: 1px;

padding: 0; margin: -1px; overflow: hidden;

clip: rect(0,0,0,0); border: 0;

}

.text-center { text-align: center; }

.mt-1 { margin-top: .5rem; }

.mt-2 { margin-top: 1rem; }

.mt-3 { margin-top: 1.5rem; }

.mb-2 { margin-bottom: 1rem; }


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

.site-header {

position: sticky; top: 0; z-index: 1000;

background: var(--color-dark);

box-shadow: var(--shadow);

}

.navbar {

display: flex; align-items: center; justify-content: space-between;

padding: .75rem 0;

}

.navbar .logo-link {

display: flex; align-items: center; gap: .5rem;

text-decoration: none;

}

.navbar .logo-img {

width: 52px; height: 52px;

object-fit: contain;

border-radius: 4px;

}

.navbar .logo-text {

font-size: 1.15rem; font-weight: 700;

color: var(--color-white);

letter-spacing: .5px;

white-space: nowrap;

}

.nav-links {

display: flex; align-items: center; gap: 1.5rem;

}

.nav-links a {

color: rgba(255,255,255,.85);

font-size: .95rem; font-weight: 500;

padding: .35rem 0;

position: relative;

transition: color var(--transition);

}

.nav-links a::after {

content: ''; position: absolute; bottom: 0; left: 0;

width: 0; height: 2px;

background: var(--color-primary);

transition: width var(--transition);

}

.nav-links a:hover,

.nav-links a.active { color: #fff; }

.nav-links a:hover::after,

.nav-links a.active::after { width: 100%; }


/* Hamburger */

.menu-toggle {

display: none; background: none; border: none; cursor: pointer;

padding: .5rem; color: #fff;

}

.menu-toggle svg { width: 28px; height: 28px; }


@media (max-width: 768px) {

.menu-toggle { display: block; }

.nav-links {

display: none; flex-direction: column; gap: 0;

position: absolute; top: 100%; left: 0; width: 100%;

background: var(--color-dark);

box-shadow: var(--shadow-lg);

}

.nav-links.open { display: flex; }

.nav-links a {

padding: .9rem 5%; width: 100%;

border-top: 1px solid rgba(255,255,255,.07);

}

.nav-links a::after { display: none; }

}


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

.hero {

background: linear-gradient(135deg, var(--color-dark) 0%, #2c2c2c 100%);

color: var(--color-white);

text-align: center;

padding: 4.5rem 1rem 4rem;

}

.hero h1 {

font-family: var(--font-heading);

font-size: clamp(2rem, 5vw, 3rem);

font-weight: 800;

margin-bottom: .75rem;

}

.hero p {

max-width: 640px; margin-inline: auto;

font-size: 1.1rem; color: rgba(255,255,255,.8);

line-height: 1.7;

}


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

.btn {

display: inline-block; padding: .75rem 1.75rem;

font-size: .95rem; font-weight: 600;

border-radius: var(--radius);

border: none; cursor: pointer;

transition: background var(--transition), transform var(--transition);

}

.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--color-primary); color: #fff; }

.btn-primary:hover { background: var(--color-primary-dk); color: #fff; }

.btn-outline {

background: transparent; color: #fff;

border: 2px solid rgba(255,255,255,.4);

}

.btn-outline:hover {

border-color: #fff; color: #fff; background: rgba(255,255,255,.08);

}

.btn-group {

display: flex; gap: 1rem; justify-content: center;

flex-wrap: wrap; margin-top: 1.5rem;

}


/* ---------- Sections ---------- */

.section { padding: 4rem 1rem; }

.section--alt { background: var(--color-light); }

.section-title {

text-align: center; font-size: 1.75rem; font-weight: 700;

margin-bottom: .5rem; color: var(--color-dark);

}

.section-subtitle {

text-align: center; color: var(--color-muted);

max-width: 600px; margin: 0 auto 2.5rem;

}


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

.cards {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 1.5rem;

}

.card {

background: var(--color-white);

border: 1px solid var(--color-border);

border-radius: var(--radius);

padding: 2rem 1.5rem;

text-align: center;

transition: box-shadow var(--transition), transform var(--transition);

}

.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.card-icon { font-size: 2.25rem; margin-bottom: 1rem; }

.card h3 {

font-size: 1.15rem; font-weight: 700;

margin-bottom: .5rem; color: var(--color-dark);

}

.card p { color: var(--color-muted); font-size: .95rem; }


/* ---------- Vehicle Inventory ---------- */

.filters {

display: flex; flex-wrap: wrap; gap: 1rem;

margin-bottom: 2rem; justify-content: center;

}

.filters input,

.filters select {

padding: .6rem 1rem; font-size: .95rem;

border: 1px solid var(--color-border);

border-radius: var(--radius);

background: var(--color-white);

min-width: 200px;

}

.filters input:focus,

.filters select:focus {

outline: none; border-color: var(--color-primary);

box-shadow: 0 0 0 3px rgba(192,57,43,.15);

}

.vehicle-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

gap: 1.5rem;

}

.vehicle-card {

background: var(--color-white);

border: 1px solid var(--color-border);

border-radius: var(--radius);

overflow: hidden;

transition: box-shadow var(--transition), transform var(--transition);

}

.vehicle-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.vehicle-card img { width: 100%; height: 200px; object-fit: cover; }

.vehicle-card .card-body { padding: 1.25rem; }

.vehicle-card h3 { font-size: 1.1rem; margin-bottom: .35rem; }

.vehicle-card .price {

font-size: 1.2rem; font-weight: 700; color: var(--color-primary);

}

.vehicle-card .meta {

font-size: .85rem; color: var(--color-muted); margin-top: .35rem;

}

#no-results {

text-align: center; padding: 3rem 1rem;

color: var(--color-muted); font-size: 1.1rem;

display: none;

}


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

.form-group { margin-bottom: 1.25rem; }

.form-group label {

display: block; font-weight: 600; margin-bottom: .35rem;

font-size: .9rem; color: var(--color-dark);

}

.form-group input,

.form-group select,

.form-group textarea {

width: 100%; padding: .65rem .9rem;

font-size: .95rem; font-family: inherit;

border: 1px solid var(--color-border);

border-radius: var(--radius);

transition: border-color var(--transition), box-shadow var(--transition);

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

outline: none; border-color: var(--color-primary);

box-shadow: 0 0 0 3px rgba(192,57,43,.12);

}

.checkbox-label {

display: flex; align-items: flex-start; gap: .5rem;

font-size: .9rem; cursor: pointer;

}

.checkbox-label input[type="checkbox"] { margin-top: .25rem; }

.btn-submit {

width: 100%; padding: .85rem;

font-size: 1rem; font-weight: 700;

background: var(--color-primary); color: #fff;

border: none; border-radius: var(--radius); cursor: pointer;

transition: background var(--transition);

}

.btn-submit:hover { background: var(--color-primary-dk); }


/* ---------- Content Sections (About / History) ---------- */

.content-section {

max-width: 800px; margin-inline: auto; padding: 3rem 1rem;

}

.content-section h2 {

font-size: 1.5rem; font-weight: 700;

color: var(--color-dark); margin-bottom: .75rem;

padding-bottom: .5rem;

border-bottom: 3px solid var(--color-primary);

display: inline-block;

}

.content-section p {

margin-bottom: 1rem; line-height: 1.8; color: var(--color-text);

}

.content-section + .content-section {

border-top: 1px solid var(--color-border);

}


/* ---------- CTA Banner ---------- */

.cta-banner {

background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

color: var(--color-white);

text-align: center;

padding: 3.5rem 1rem;

}

.cta-banner h2 {

font-size: 1.75rem; font-weight: 700; margin-bottom: .75rem;

}

.cta-banner p {

max-width: 550px; margin-inline: auto;

color: rgba(255,255,255,.9); margin-bottom: 1.5rem;

}


/* ---------- Footer ---------- */

.site-footer {

background: var(--color-dark); color: rgba(255,255,255,.7);

padding: 2.5rem 1rem 1.5rem;

}

.footer-inner {

display: flex; flex-wrap: wrap; justify-content: space-between;

align-items: center; gap: 1rem;

max-width: var(--max-width); margin-inline: auto;

}

.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }

.footer-nav a {

color: rgba(255,255,255,.7); font-size: .9rem;

transition: color var(--transition);

}

.footer-nav a:hover { color: #fff; }

.footer-copy { font-size: .85rem; text-align: right; }


@media (max-width: 600px) {

.footer-inner { flex-direction: column; text-align: center; }

.footer-copy { text-align: center; }

}