/* css/style.css - Combined Theme: Dark Nav, White Content, Red Accents */

/* --- Font Import (Roboto & Montserrat) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Roboto:wght@400;500;700&display=swap');

/* --- CSS Variables --- */
:root {
    --color-primary: #dc3545;       /* THE RED ACCENT */
    --color-primary-hover: #bb2d3b;    /* Darker red for hover */
    --color-secondary: #6c757d;     /* Standard gray */
    --color-light: #f8f9fa;        /* Light gray page background */
    --color-dark: #212529;         /* Darker Gray (for headings, nav bg) */
    --color-darker: #000000;        /* Pure Black (alternative text) */
    --color-text: #333;            /* Body text in white container */
    --color-border: #dee2e6;       /* Subtle borders */
    --color-white: #ffffff;

    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    --base-font-size: 16px;
    --line-height: 1.7;
    --border-radius: 0.25rem;
    --navbar-height: 60px; /* Approximate, adjust if needed */
}

/* --- Base Styles --- */
html {
  scroll-padding-top: var(--navbar-height); /* Offset for sticky nav anchors */
}

body {
    font-family: var(--font-body);
    font-size: var(--base-font-size);
    color: var(--color-text); /* Default text color */
    line-height: var(--line-height);
    background-color: var(--color-light); /* Light gray BACKGROUND for the whole page */
    display: flex;          /* For sticky footer */
    flex-direction: column; /* For sticky footer */
    min-height: 100vh;      /* For sticky footer */
}

h1, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark); /* Dark headings by default */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

h2{
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-white); /* Dark headings by default */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }

a {
    color: var(--color-primary); /* Red links by default */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

hr {
    border-color: var(--color-border);
    opacity: 0.6;
    margin: 2rem 0;
}

/* --- Layout --- */
main.container {
    background-color: var(--color-white); /* WHITE background for the main content */
    color: var(--color-text);            /* Default text color inside main */
    padding: 2rem 1.5rem;                /* Comfortable padding */
    border-radius: var(--border-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.07); /* Subtle shadow */
    flex-grow: 1;                        /* For sticky footer */
}

/* Ensure elements inside main inherit the main text color unless specified */
main.container h1,

main.container h3,
main.container h4,
main.container h5,
main.container h6 {
    color: var(--color-dark); /* Use the darker heading color */
}
main.container p,
main.container div,
main.container span,
main.container li,
main.container label,
main.container dt,
main.container dd {
    color: inherit; /* Inherit the --color-text set on main.container */
}

/* Style links within the main container specifically if needed, otherwise they use the global red */
/* main.container a {
     color: var(--color-primary);
}
main.container a:hover {
    color: var(--color-primary-hover);
} */


/* --- Components --- */

/* Navbar - DARK Theme (using navbar-dark bg-dark/black in HTML) */
.navbar {
    /* sticky-top class added in HTML */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Slightly stronger shadow for dark nav */
    position: sticky;  /* <<< CORRECT CSS PROPERTY */
    top: 0;            /* <<< Tells it to stick to the top edge */
    z-index: 1020;  
}
.navbar-brand img {
    max-height: 40px; /* Your desired logo height */
    width: auto;
    transition: transform 0.3s ease;
    border-radius: 25px;
    margin-right: 10px;
}
.navbar-brand:hover img {
    transform: scale(1.05);
}
.navbar-dark .navbar-brand {
    color: var(--color-white); /* White brand text */
    font-family: var(--font-heading);
    font-weight: 700;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75); /* Slightly muted white */
    font-weight: 500;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    transition: color 0.2s ease-in-out;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--color-white); /* Brighter white on hover/focus */
}
/* Active link uses the PRIMARY RED color */
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--color-primary);
    font-weight: 700; /* Make active link bolder */
}
.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Buttons */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    padding: 0.6rem 1.3rem;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    border: 1px solid transparent; /* Base border */
}
.btn:focus, .btn.focus {
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .5); /* Use Bootstrap variable temporarily if needed */
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-primary:focus {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5); /* Red focus glow */
}


.btn-secondary {
     background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}
 /* Using direct hex for darken effect as CSS variables don't support it directly */
.btn-secondary:hover {
    background-color: #5c636a;
    border-color: #565e64;
     color: var(--color-white);
    transform: translateY(-2px);
}
.btn-secondary:focus {
     box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.5); /* Gray focus glow */
}


.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline-primary:hover {
     color: var(--color-white);
     background-color: var(--color-primary);
     border-color: var(--color-primary);
}
/* Add other button variants (.btn-success, .btn-info etc.) if needed */


/* Cards */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    margin-bottom: 1.5rem; /* Add spacing between cards */
    overflow: hidden; /* Ensure badges stay within bounds */
}
.card:hover {
   box-shadow: 0 6px 16px rgba(0,0,0,0.1); /* Subtle shadow on hover */
   transform: translateY(-3px); /* Slight lift effect */
}
.card-img-top {
    border-bottom: 1px solid var(--color-border);
}
.card-body {
    padding: 1.25rem;
}
.card-title {
     font-size: 1.1rem;
     font-family: var(--font-heading);
     font-weight: 700;
     color: var(--color-dark);
     margin-bottom: 0.5rem;
}
.card-subtitle { /* Price */
    font-size: 1.2rem; /* Make price slightly larger */
    font-weight: 700;
    color: var(--color-primary); /* RED price */
    margin-bottom: 0.75rem;
    display: block; /* Ensure it takes its own line */
}
.card-text {
    font-size: 0.95rem;
    color: var(--color-secondary); /* Gray for descriptive text */
    margin-bottom: 1rem;
}
.card-footer {
    background-color: var(--color-light);
    border-top: 1px solid var(--color-border);
    padding: 0.75rem 1.25rem;
}
.card-footer .btn {
    padding: 0.4rem 1rem; /* Slightly smaller buttons in footer */
    font-size: 0.85rem;
}

/* Featured Vehicle Badge/Highlight */
.featured-badge {
    background-color: var(--color-primary);
    color: var(--color-white); /* WHITE text on red badge */
    font-size: 0.75rem;
    padding: 0.2em 0.6em;
    border-radius: var(--border-radius);
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1; /* Ensure it's above image */
}

/* Homepage Hero Section */
.hero-section {
   padding: 4rem 0; /* Adjust padding as needed */
   text-align: center;
   /* background-color: var(--color-light); */ /* Or keep white main bg */
}
.hero-section .display-4 { /* Large heading */
    color: var(--color-dark);
    font-weight: 700;
    margin-bottom: 1rem;
}
.hero-section .lead { /* Subtitle */
     color: var(--color-secondary);
     font-size: 1.2rem;
     margin-bottom: 2rem;
}


/* Section Backgrounds */
.bg-light {
    background-color: var(--color-light) !important;
}
.bg-white {
    background-color: var(--color-white) !important;
}
.bg-dark {
    background-color: var(--color-dark) !important;
    color: var(--color-light); /* Light text on dark bg */
}
.bg-primary {
     background-color: var(--color-primary) !important;
     color: var(--color-white); /* White text on primary bg */
}


/* Footer */
.footer {
    background-color: var(--color-dark); /* Dark footer */
    color: rgba(255, 255, 255, 0.7); /* Light gray text */
    padding: 2rem 0;
    /* margin-top: auto; Applied via .mt-auto class in HTML */
    border-top: 3px solid var(--color-primary); /* Red accent line */
    font-size: 0.9rem;
}
.footer a {
     color: var(--color-white); /* White links in footer */
     font-weight: 500;
     text-decoration: underline;
}
.footer a:hover {
     color: var(--color-primary); /* Red hover for links */
}


/* Forms */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}
.form-control, .form-select {
    border: 1px solid var(--color-border);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); /* Red focus glow */
    outline: 0;
}

/* Use red for validation errors */
.is-invalid {
    border-color: var(--color-primary) !important; /* Ensure override */
}
.is-invalid:focus {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}
.invalid-feedback {
    color: var(--color-primary);
    font-weight: 500;
}


/* Testimonial star color */
.customer-testimonials .text-warning { /* Assuming Bootstrap's text-warning class is used for stars */
    color: var(--color-primary) !important; /* Use primary red for stars */
}

/* General Utility */
.img-fluid {
    max-width: 100%;
    height: auto;
}