@charset "utf-8";
/* ==========================================================================
   SITE: Baja's ProLine Designs LLC
   VERSION: 1.0.0
   TECHNICAL ENVIRONMENT: Twenty Twenty-Four Block Theme + Bootstrap 5
   ========================================================================== */

/* =====================================================
   1. ROOT DESIGN TOKENS (CSS VARIABLES)
   ===================================================== */
:root {
    /* Brand Colors */
    --color-primary: #F2B705;       /* High-Impact Yellow */
    --color-secondary: #C29204;     /* Muted Gold */
    --color-base: #010101;          /* Deep Charcoal Background */
    --color-contrast: #FFFFFF;      /* Crisp White Text */
    --color-muted-copy: #A0A0A0;    /* Muted Text / Form Labels */

    /* Typography Overrides */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Component Architecture */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --transition-fast: all 0.2s ease-in-out;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --shadow-industrial: 0 8px 30px rgba(0, 0, 0, 0.7);
    --border-gold: 2px solid var(--color-secondary);
}

/* =====================================================
   2. CORE ARCHITECTURE & DARK SCHEMA RESET
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--color-base) !important;
    color: var(--color-contrast) !important;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

/* Gutenberg Container Constraints */
.wp-block-group.eplus-wrapper,
.wp-block-columns.eplus-wrapper {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

/* =====================================================
   3. TYPOGRAPHY HIERARCHY
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.font-heading-style {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    color: var(--color-contrast);
    line-height: 1.2;
}

h1 { font-size: calc(2.2rem + 1.2vw); }
h2 { font-size: calc(1.8rem + 0.8vw); }
h3 { font-size: calc(1.4rem + 0.4vw); }

p, li, label, select, input, textarea {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-contrast);
}

.text-muted-custom {
    color: var(--color-muted-copy) !important;
}

/* Selection Highlight */
::-webkit-selection { background: var(--color-primary); color: var(--color-base); }
::-moz-selection { background: var(--color-primary); color: var(--color-base); }
::selection { background: var(--color-primary); color: var(--color-base); }

/* =====================================================
   4. NATIVE BLOCK OVERRIDES (GUTENBERG & BOOTSTRAP BLENDS)
   ===================================================== */

/* Primary Theme Button Layout (.btn-yellow-01 style setup) */
.wp-block-button.btn-yellow-01 .wp-block-button__link,
.btn-custom-primary {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    background-color: var(--color-primary) !important;
    color: var(--color-base) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--color-primary) !important;
    transition: var(--transition-smooth) !important;
    letter-spacing: 1px;
}

.wp-block-button.btn-yellow-01 .wp-block-button__link:hover,
.btn-custom-primary:hover {
    background-color: transparent !important;
    color: var(--color-contrast) !important;
    border-color: var(--color-contrast) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(242, 183, 5, 0.3);
}

/* Secondary / Outline Button Layout */
.wp-block-button.btn-outline-gold .wp-block-button__link,
.btn-custom-secondary {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
    color: var(--color-contrast) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-md) !important;
    border: var(--border-gold) !important;
    transition: var(--transition-smooth) !important;
    letter-spacing: 1px;
}

.wp-block-button.btn-outline-gold .wp-block-button__link:hover,
.btn-custom-secondary:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-base) !important;
    transform: translateY(-2px);
}

/* Cover & Card Component Blocks */
.wp-block-cover {
    border-radius: var(--radius-sm);
}

.card-custom-dark {
    background-color: #141414 !important;
    border: 1px solid rgba(194, 146, 4, 0.2) !important;
    border-radius: var(--radius-md);
    padding: 30px;
    transition: var(--transition-smooth);
}

.card-custom-dark:hover {
    border-color: var(--color-primary) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-industrial);
}

/* =====================================================
   5. OPTIMIZED TRIGGER-BASED ANIMATION SYSTEM
   ===================================================== */

/* Base execution state for all animation components */
[class*="nwd-fade-"] {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

/* Intersection Observer Execution Trigger Class */
.nwd-start-anim {
    animation-play-state: running !important;
}

/* Animation Targets */
.nwd-fade-up.nwd-start-anim    { animation-name: fadeUp; }
.nwd-fade-in.nwd-start-anim    { animation-name: fadeIn; }
.nwd-fade-left.nwd-start-anim  { animation-name: fadeInLeft; }
.nwd-fade-right.nwd-start-anim { animation-name: fadeInRight; }

/* Cascade Delay Steps */
.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.4s !important; }
.delay-3 { animation-delay: 0.6s !important; }
.delay-4 { animation-delay: 0.8s !important; }

/* Core Animation Interpolation Rules */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Ken Burns Immersive Background Configuration */
@keyframes kenBurnsZoomOut {
    from {
        transform: scale(1.15);
        transform-origin: center center;
    }
    to {
        transform: scale(1);
        transform-origin: center center;
    }
}

.ken-burns-bg-zoom {
    animation: kenBurnsZoomOut 12s cubic-bezier(0.1, 1, 0.1, 1) forwards;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Component Overflow Security Wrappers */
.overflow-hidden-wrapper {
    overflow: hidden !important;
}


/* =====================================================
   GLOBAL HEADER CUSTOM ARCHITECTURE (COMPLETE)
===================================================== */
.global-header-section {
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 2px solid var(--color-secondary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    background-color: var(--color-base) !important;
}

/* 1. ABSOLUTE VERTICAL CENTERING (THE SCREENSHOT REFIX) */
.global-header-section .wp-block-columns.eplus-wrapper.alignitems-center {
    display: flex !important;
    align-items: center !important;     /* Forces vertical alignment to middle cross-axis */
    align-content: center !important;
    flex-wrap: nowrap !important;        /* Keeps logo, navigation, and CTA on one line */
    width: 100%;
}

/* Force each column block wrapper to remain vertically centered and ignore block margins */
.global-header-section .wp-block-columns.eplus-wrapper.alignitems-center > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centers block inner content vertically */
    align-self: center !important;     /* Defends column from stretch boundary lines */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. LOGO, NAVIGATION, AND BUTTON ALIGNMENT */
.global-header-section .header-logo-wrap figure {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.global-header-section .header-navigation-menu {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.header-navigation-menu .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;        /* Locks links tightly to a single horizontal row */
    align-items: center;
    justify-content: center;
    gap: 24px !important;               /* Gutter layout space between header items */
    padding: 0;
    margin: 0;
    list-style: none;
}

.header-navigation-menu .wp-block-navigation-item {
    white-space: nowrap !important;     /* Completely stops text from wrapping to a second line */
}

.header-navigation-menu .wp-block-navigation-item a {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: var(--color-contrast) !important;
    transition: var(--transition-fast);
    text-decoration: none;
}

.header-navigation-menu .wp-block-navigation-item a:hover {
    color: var(--color-primary) !important;
}

.global-header-section .wp-block-buttons {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* =====================================================
   3. RESPONSIVE MEDIA BREAKPOINTS
===================================================== */
@media (max-width: 991.98px) {
    .header-navigation-menu .wp-block-navigation__container {
        gap: 12px !important;           /* Condenses row spacing cleanly for tablet widths */
    }
    .header-navigation-menu .wp-block-navigation-item a {
        font-size: 0.8rem;
    }
}

@media (max-width: 781px) {
    /* Shifts the layout safely into an organized column stack for small mobile screens only */
    .global-header-section .wp-block-columns.eplus-wrapper.alignitems-center {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 15px;
    }
    .header-navigation-menu .wp-block-navigation__container {
        flex-wrap: wrap !important;     /* Safely permits navigation menu items to shift on mobile */
        justify-content: center;
    }
    .global-header-section .wp-block-buttons {
        justify-content: center !important;
    }
}









/* =====================================================
   HOMEPAGE CUSTOM ARCHITECTURE INTERFACES
===================================================== */
/* Dim Overlay settings for Hero Components */
.has-background-dim-80.wp-block-cover__background {
    opacity: 0.80 !important;
    background-color: var(--color-base) !important;
}

/* Logistics rows inside Brand statement areas */
.logistics-badge-row {
    display: flex;
    gap: 25px;
    margin-top: 20px;
}
.badge-item-meta {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-primary);
    border: 1px dashed var(--color-secondary);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Core Service Matrix Custom Icons */
.service-card-icon {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

/* Call-to-action lock box layout utilities */
.cta-dark-accent-box {
    background-color: #111111;
    border: 2px solid var(--color-secondary);
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-industrial);
}
.phone-accent-footer {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--color-contrast);
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(194,146,4,0.3);
    padding-top: 15px;
    margin-top: 10px;
}

/* Framework utility to lock flexible heights */
.h-100 {
    height: 100% !important;
}
.text-center {
    text-align: center !important;
}

/* Responsive Structural Overrides */
@media (max-width: 767.98px) {
    .logistics-badge-row {
        flex-direction: column;
        gap: 12px;
    }
    .cta-dark-accent-box {
        padding: 25px;
    }
}








/* =====================================================
   GLOBAL FOOTER CUSTOM ARCHITECTURE
===================================================== */
.global-footer-section {
    border-top: 4px solid var(--color-primary); /* High-Impact Yellow top border */
    padding-top: 80px !important;
    padding-bottom: 60px !important;
    background-color: var(--color-base) !important;
}

/* Structural Layout Integrity */
.footer-grid-columns {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

/* Widget Header Element */
.footer-widget-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    color: var(--color-contrast) !important;
    letter-spacing: 1px;
    margin-bottom: 25px !important;
    text-transform: uppercase !important;
}

/* Column 1: Asset Handling & Copyright */
.footer-brand-badge img {
    max-width: 150px;
    height: auto;
}

.footer-copyright-text {
    color: var(--color-muted-copy) !important;
    line-height: 1.4;
    margin-top: 15px !important;
}

/* Column 2: Vertical Navigation Links */
.footer-vertical-menu .wp-block-navigation-item {
    margin-bottom: 12px !important;
}

.footer-vertical-menu .wp-block-navigation-item a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-muted-copy) !important;
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-vertical-menu .wp-block-navigation-item a:hover {
    color: var(--color-primary) !important;
    padding-left: 5px;
}

/* Column 3: Contact Details & Badges */
.footer-contact-item {
    font-size: 0.95rem;
    margin-bottom: 12px !important;
    color: var(--color-contrast);
}

.footer-contact-item a {
    color: var(--color-contrast);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-contact-item a:hover {
    color: var(--color-primary);
}

.footer-shipping-badge {
    font-size: 0.85rem;
    color: var(--color-muted-copy);
    line-height: 1.5;
}

.footer-shipping-badge span {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

/* Column 4: Slogan Wrap */
.footer-slogan-wrap {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-muted-copy);
    border-left: 2px solid var(--color-secondary);
    padding-left: 15px;
    margin: 0;
}

/* =====================================================
   RESPONSIVE FOOTER LAYOUT ADJUSTMENTS
===================================================== */
@media (max-width: 991.98px) {
    .footer-grid-columns {
        flex-wrap: wrap !important;
        gap: 30px !important;
    }
    .footer-grid-columns > .wp-block-column {
        flex-basis: calc(50% - 20px) !important; /* Transform to a 2x2 layout on tablet */
    }
}

@media (max-width: 575.98px) {
    .footer-grid-columns > .wp-block-column {
        flex-basis: 100% !important; /* Stack vertically on small mobile */
    }
    .footer-slogan-wrap {
        border-left: none;
        border-top: 2px solid var(--color-secondary);
        padding-left: 0;
        padding-top: 15px;
    }
}




/* =====================================================
   6. RESPONSIVE LAYOUT RESPONSES (MEDIA QUERIES)
   ===================================================== */
@media (max-width: 991.98px) {
    .wp-block-group.eplus-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.95rem;
    }
    
    [class*="nwd-fade-"] {
        /* Optional deceleration override for smoother scaling mobile adjustments */
        animation-duration: 0.6s;
    }

    .ken-burns-bg-zoom {
        animation: none !important; /* Disables scaling overheads on legacy mobile devices */
        transform: scale(1) !important;
    }
}