/* ==========================================================================
   custom.css – Bootstrap 5 overrides & custom styles
   Load AFTER bootstrap.min.css
   ========================================================================== */

/* ── 1. Global base adjustments ─────────────────────────────────────────── */
:root {
    --bs-body-bg:               #fdfaf7;           /* warm off-white – soft full-page bg */
    --bs-body-color:            #2d3748;           /* darker gray text */
    --bs-primary:               #1e40af;           /* deeper blue */
    --bs-primary-rgb:           30, 64, 175;
    --bs-link-color:            var(--bs-primary);
    --bs-link-hover-color:      #1e3a8a;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-height: 100vh;
}

/* Headings – more weight & tighter spacing */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #111827;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.875rem; }

/* ── 2. Navbar overrides ────────────────────────────────────────────────── */
.navbar {
    --bs-navbar-padding-y:      1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
}

/* ── 3. Hero section tweaks ─────────────────────────────────────────────── */
.hero {
    background: url('/img/heroRoad.jpg') center/cover no-repeat fixed;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-attachment: fixed; /* parallax – remove if unwanted */
}

.hero h1 {
    font-size: clamp(2.8rem, 8vw, 5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.hero .lead {
    font-size: 1.4rem;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

/* ── 4. Buttons – more modern & punchy ──────────────────────────────────── */
.btn {
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    transition: all 0.25s ease;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30,64,175,0.25);
}

.btn-outline-primary {
    border-width: 2px;
    font-weight: 600;
}

/* ── 5. About Us section – clean solid background (no image/texture) ─────── */
.about-section {
    background-color: #ffffff;           /* crisp white – clean & professional */
    /* Alternative soft options: */
    /* background-color: #fdfaf7; */     /* matches body for seamless flow */
    /* background-color: #f8f9fa; */     /* very light cool gray */
    
    padding: 3rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);  /* gentle lift */
    border: 1px solid #e5e7eb;           /* optional thin border for definition */
}

/* Text styling – no overlay needed on solid bg */
.about-section h2,
.about-section p {
    color: #1f2937;                      /* dark gray for contrast */
}

/* ── 6. Footer & contact icons ──────────────────────────────────────────── */
footer {
    background-color: #111827;
    color: #d1d5db;
}

footer a {
    color: #93c5fd;
    transition: color 0.2s;
}

footer a:hover {
    color: #60a5fa;
}

/* ── 7. Mobile-first responsive overrides ───────────────────────────────── */
@media (max-width: 991px) {
    .hero h1       { font-size: 3rem; }
    .hero .lead    { font-size: 1.25rem; }
    .btn-lg        { width: 100%; margin-bottom: 1rem; }
}

@media (max-width: 576px) {
    .hero          { min-height: 70vh; padding-top: 5rem; }
    h1             { font-size: 2.5rem; }
}

.cta {
    display: inline-block;
    background: #1e40af;
    color: #ffffff !important;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 6px;
    margin: 20px 0;
    font-weight: bold;
    transition: background 0.3s ease;
}

.cta:hover {
    background: #1e3a8a;           /* slightly darker blue on hover */
}