/* landing-page/Faster/css/transconnect-theme.css */

/* =========================================
   THEME: ORANGE SIGNAL & NAVY TRUST
   ========================================= */

:root {
    /* === 1. PRIMARY (High-Vis Orange) === */
    --color-primary:       #FF6B00;  /* Main Brand - Night Visible */
    --color-primary-dark:  #E55A00;  /* Hover State */
    --color-primary-light: #FF8533;  /* Accents */
    --color-primary-pale:  #FFF4EB;  /* Warm Backgrounds */

    /* === 2. SECONDARY (Corporate Navy) === */
    --color-navy:          #1E3A5F;  /* Trust/Body */
    --color-navy-dark:     #152A45;  /* Headers/Footers */
    --color-navy-light:    #2A4F7A;  /* Secondary Actions */
    --color-navy-pale:     #E8EEF4;  /* Cool Backgrounds */

    /* === 3. NEUTRALS & SEMANTICS === */
    --bg-white:            #FFFFFF;
    --bg-gray:             #F9FAFB;  /* Gray 50 */
    --text-dark:           #111827;  /* Gray 900 */
    --text-muted:          #6B7280;  /* Gray 500 */
    
    --border-color:        #E5E7EB;  /* Gray 200 */
}

/* =========================================
   2. GLOBAL OVERRIDES
   ========================================= */

body {
    color: var(--text-dark) !important;
    background-color: var(--bg-gray) !important;
}

/* Headings: Use the Dark Navy for authority */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-navy-dark) !important;
    font-weight: 800 !important; /* Bold for visibility */
}

/* Links */
a {
    color: var(--color-primary);
    transition: all 0.3s;
}
a:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* =========================================
   3. BRANDED ELEMENTS (Backgrounds)
   ========================================= */

/* Primary Backgrounds (Like the Service Icons) */
.bg-primary {
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

/* Secondary Backgrounds (Like the Features Section) */
.bg-secondary {
    background-color: var(--color-navy-pale) !important;
    color: var(--color-navy-dark) !important;
}

/* Dark Backgrounds (Top Bar, Footer) */
.bg-dark {
    background-color: var(--color-navy-dark) !important;
    color: #FFFFFF !important;
}

/* Text Highlights */
.text-primary, 
.fa.text-primary, 
i.text-primary {
    color: var(--color-primary) !important;
}

/* =========================================
   4. BUTTONS: THE "NIGHT VISIBILITY" LOOK
   ========================================= */

/* Main CTA - Orange Background, White Text */
.btn-primary, 
button[type="submit"] {
    background-color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 6px -1px rgba(255, 107, 0, 0.3); /* Orange glow shadow */
    transition: all 0.3s ease;
}

/* Hover State - Uses Primary Dark */
.btn-primary:hover, 
button[type="submit"]:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #FFFFFF !important;
}

/* Back to Top Button - High Vis */
.back-to-top {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* =========================================
   5. NAVIGATION BAR (Modern Style)
   ========================================= */

/* Brand Logo */
.navbar-brand h1 {
    color: var(--color-primary) !important; /* Sets TransConnect to ORANGE */
    font-weight: 900 !important;
}

/* This targets the word "Logistics" specifically */
.navbar-brand h1 span {
    color: var(--color-navy-dark) !important; /* Sets Logistics to NAVY */
}

.navbar-brand i {
    color: var(--color-primary) !important; /* Icon stays Orange */
}

/* Nav Links - Default State */
.navbar-light .navbar-nav .nav-link {
    color: var(--color-navy) !important;
    font-weight: 600 !important;
    padding: 10px 15px !important; /* Adjust spacing */
}

/* Active Nav Link - No background block, just sharp Orange Text + Underline */
.navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.active {
    background-color: transparent !important; /* Removes the orange box */
    color: var(--color-primary) !important;
    border-bottom: 2px solid var(--color-primary); /* Modern indicator */
}

/* Hover State */
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-primary) !important;
}

/* =========================================
   6. FORMS & INPUTS
   ========================================= */

input, select, textarea, .form-control {
    border: 2px solid var(--border-color) !important;
    background-color: var(--bg-white) !important;
    color: var(--text-dark) !important;
    border-radius: 4px !important;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    /* Soft orange ring for focus visibility */
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1) !important; 
}

/* =========================================
   7. STICKER DESIGNS (Specific Classes)
   ========================================= */
/* Use these classes if you want to create specific "Sticker" look elements */

.sticker-primary {
    background-color: var(--color-primary);
    color: white;
    border: 3px solid white;
    font-weight: bold;
}

.sticker-navy {
    background-color: var(--color-navy);
    color: var(--color-primary);
    border: 3px solid var(--color-primary);
    font-weight: bold;
}

/* ========================================= */
/* MOBILE RESPONSIVENESS FIXES               */
/* ========================================= */

/* 1. Prevent Horizontal Scrolling */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 2. Top Bar Adjustments for Mobile */
@media (max-width: 991px) {
    /* Hide the Social Media Section completely on mobile */
    .bg-dark .text-lg-right {
        display: none !important;
    }

    /* Center and stack the Contact Info (Phone/Email) */
    .bg-dark .text-lg-left .d-inline-flex {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Hide the divider "|" line */
    .bg-dark .px-3 {
        display: none;
    }

    /* Add spacing between Phone and Email */
    .bg-dark small {
        margin-bottom: 5px;
        font-size: 13px; /* Slightly smaller text for better fit */
        display: block;
    }
    
    /* Ensure the container doesn't have extra padding shifting it */
    .bg-dark .col-lg-6 {
        padding: 0;
        margin-bottom: 0 !important;
    }
}

/* 3. Fix the Huge Logo Text */
@media (max-width: 576px) {
    .navbar-brand h1 {
        font-size: 1.4rem !important; /* Shrink "TRANSCONNECT" */
        white-space: normal; /* Allow wrapping if needed */
    }
    
    .navbar-brand h1 span {
        font-size: 1.1rem !important; /* Shrink "LOGISTICS" */
        display: block; /* Put Logistics on a new line to save width */
        margin-top: -5px;
    }
    
    .navbar-brand i {
        font-size: 1.4rem !important; /* Shrink Truck Icon */
    }
}

/* 4. Fix the Hero Section (Big Text & Image) */
@media (max-width: 768px) {
    /* Shrink the big "The Digital Bridge..." text */
    .display-3 {
        font-size: 2rem !important; 
        font-weight: 700;
        line-height: 1.2;
    }
    
    /* Shrink the orange "Connect. Verify. Track." text */
    .jumbotron h1.text-primary {
        font-size: 1.5rem !important;
    }
    
    /* Adjust padding so it doesn't take up half the screen */
    .jumbotron {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
        min-height: auto !important;
    }
    
    /* Ensure the background image fits on mobile */
    .jumbotron {
        background-position: center !important; 
    }
}

/* 5. Fix Content Padding */
@media (max-width: 576px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Make the footer text (Newsletter/Statement) smaller */
    .footer h1 {
        font-size: 1.5rem !important;
    }
    .footer h2 {
        font-size: 1.2rem !important;
    }
}