@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: #0D0D0D;          /* 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;
}

/* =====================================================
   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;
    }
}