/* ==========================================================================
   MOTIFIC WEBSITE STYLES
   Modern, responsive design for prevention-focused project management consulting
   
   TABLE OF CONTENTS:
   1. Fonts and Reset
   2. Typography
   3. Layout Containers
   4. Header and Navigation
   5. Buttons
   6. Hero Section
   7. Value Proposition Section
   8. Services Section
   9. Approach Section
   10. About Section
   11. Contact Section
   12. Footer
   13. Responsive Utilities
   14. Smooth Scrolling
   15. Accessibility
   ========================================================================== */

/* ==========================================================================
   1. FONTS AND RESET
   ========================================================================== */

/* Using system font stack for maximum performance and compatibility
   No external font loading required - works perfectly on OpenBSD httpd */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #e5e7eb; /* Light gray text for dark backgrounds */
    background-color: #1f2937; /* Dark gray background */
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: #1e3a8a;  /* Change from #2563eb */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #1e40af;  /* Change from #1d4ed8 */
}

/* ==========================================================================
   3. LAYOUT CONTAINERS
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Responsive container adjustments */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

/* ==========================================================================
   4. HEADER AND NAVIGATION
   ========================================================================== */

.site-header {
    background: #000000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 80px; /* Increased from 70px */
}

.logo {
    height: 50px; /* Increased from 40px */
    width: auto;
    transition: all 0.3s ease;
}

.logo:hover {
    filter: brightness(0) saturate(100%) invert(60%) hue-rotate(27deg) sepia(100%) saturate(1000%) brightness(100%) contrast(92%);
    transform: scale(1.05); /* Subtle hover effect */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: #ffffff;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #f5aa3a;
}

/* Mobile menu toggle (CSS-only solution for OpenBSD compatibility) */
.menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.menu-icon span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 80px; /* Update from 70px */
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px); /* Update from 70px */
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        padding-top: 2rem;
        transition: left 0.3s ease;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .menu-icon {
        display: flex;
    }
    
    /* CSS-only mobile menu toggle */
    .menu-toggle:checked ~ .nav-menu {
        left: 0;
    }
    
    .menu-toggle:checked ~ .menu-icon span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle:checked ~ .menu-icon span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle:checked ~ .menu-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: #fff;
    color: #1e3a8a;  /* Change from #2563eb */
    border-color: #fff;
}

.btn-primary:hover {
    background: transparent;
    color: #ffffff;
    border-color: #f5aa3a;
}

.btn-secondary {
    background: #f5aa3a;
    color: #fff;
    border-color: #f5aa3a;
    filter: brightness(0.85)
}

.btn-secondary:hover {
    background: transparent;
    border-color: #ffffff;
    color: #f5aa3a;
    filter: brightness(1.05)
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    max-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 80px; /* Update from 70px to match new header height */
    background: #1f2937; /* Dark fallback while video loads */
}

/* Video Background */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Fallback background (shows while video loads or if video fails) */
.hero-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e3a8a 0%, #374151 100%);
    z-index: 0;
}

/* Hero Content - positioned above video */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 800px;
    padding: 0 1.5rem;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Optional: Subtle overlay to ensure text readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 58, 138, 0.1); /* Very subtle navy overlay */
    z-index: 1;
    pointer-events: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero {
        min-height: 500px;
        max-height: 600px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Pause video on mobile to save battery/data */
    .hero-video {
        display: none;
    }
    
    .hero-fallback {
        display: block;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
    
    .hero-fallback {
        display: block;
    }
}

/* ==========================================================================
   7. VALUE PROPOSITION SECTION
   ========================================================================== */

.value-prop {
    padding: 80px 0;
    background: linear-gradient(178deg, #010102 10%, #2b394d 50%);
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-item {
    text-align: center;
    padding: 2rem;
    background: #1f2937; /* Dark background */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    color: #e5e7eb; /* Light text */
}

.value-item h3 {
    color: #f5aa3a;
    margin-bottom: 1rem;
}

.value-item a {
    font-weight: 600;
    color: #60a5fa; /* Light blue for dark background */
    text-decoration: underline;
}

.value-item a:hover {
    color: #93c5fd;
}

/* ==========================================================================
   8. SERVICES SECTION
   ========================================================================== */

.services {
    padding: 80px 0;
    background: #faf9f7; /* Warm off-white background */
}

.services .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #1e3a8a; /* Navy instead of near-white */
}

.services .section-subtitle {
    text-align: center;
    color: #6b7280; /* Warm medium gray instead of light gray */
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

/* Updated services layout */
.services-integrated {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 3rem;
}

.services-column-1, .services-column-2 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.service-card {
    background: #ffffff; /* White cards */
    border: 2px solid #e5e7eb; /* Light border */
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    color: #374151; /* Dark warm gray text */
}

.service-card:hover {
    border-color: #60a5fa; /* Light blue hover */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.service-card.featured {
    border-color: #fbbf24; /* Bright gold */
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    color: #e5e7eb; /* Light text for dark featured card */
}

.service-card h3 {
    color: #1e3a8a; /* Navy headings */
}

.service-card.featured h3 {
    color: #f9fafb; /* Light headings for featured card */
}

.service-price {
    color: #1e3a8a; /* Navy price text */
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.service-card.featured .service-price {
    color: #60a5fa; /* Light blue for featured card */
}

.service-features {
    list-style: none;
    margin-top: 1.5rem;
}

.service-features li {
    padding: 0.5rem 0;
    color: #374151; /* Dark text */
}

.service-card.featured .service-features li {
    color: #ca991c; /* Gold for featured card */
}

.service-features li::before {
    content: "✓ ";
    color: #0f8664;
    font-weight: bold;
}

.services-hero-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Mobile services adjustments */
@media (max-width: 768px) {
    .services-integrated {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ==========================================================================
   9. APPROACH SECTION
   ========================================================================== */

.approach {
    padding: 80px 0;
    background: #f7f5f3;
    background-image: url('../../images/strategist01.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.approach::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(247, 245, 243, 0.95) 30%, rgba(247, 245, 243, 0.7) 50%, rgba(247, 245, 243, 0.3) 70%, rgba(247, 245, 243, 0) 100%);
    z-index: 1;
}

.approach .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #1e3a8a;
    position: relative;
    z-index: 2;
}

.approach-content {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.approach-text {
    max-width: 60%;
    padding: 2rem;
    border-radius: 8px;
    position: relative;
    color: #374151;
}

.approach-text h3 {
    color: #1e3a8a;
}

.approach-text h3 {
    color: #1e3a8a; /* Navy headings */
}

.approach-text h4 {
    color: #f5aa3a; /* Gold subheadings */
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.approach-text ul {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.approach-text li {
    margin-bottom: 0.5rem;
}

.approach-link {
    color: #f5aa3a;
    font-weight: 500;
    padding: 0.5rem 0;
}

.approach-cta {
    margin-top: 2rem;
}

.approach-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 400px;
}

.approach-hero-image {
    width: 250%; /* Much wider to reach across the screen */
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    position: relative;
    right: 0%; /* Position much farther left */
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.1) 85%, rgba(0,0,0,0) 100%);
}

/* Mobile approach adjustments */
@media (max-width: 768px) {
    .approach-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .approach-text {
        padding: 2rem;
    }
    
    .approach-hero-image {
        width: 100%;
        right: 0;
        mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0) 100%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0) 100%);
    }
}

/* ==========================================================================
   10. ABOUT SECTION
   ========================================================================== */

.about {
    padding: 80px 0;
    background: #1f2937;
    background-image: url('../../images/network-pattern-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(31, 41, 55, 0.95) 20%, rgba(31, 41, 55, 0.8) 40%, rgba(31, 41, 55, 0.6) 60%, rgba(31, 41, 55, 0.4) 80%, rgba(31, 41, 55, 0.2) 100%);
    z-index: 1;
}

.about .container {
    position: relative;
    z-index: 2;
}

.about .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #f9fafb;
    position: relative;
    z-index: 2;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.about-text {
    color: #e5e7eb;
    padding: 2rem;
    background: rgba(31, 41, 55, 0.3);
    border-radius: 8px;
}

.about-text h3 {
    color: #f9fafb;
}

.about-text ul {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.about-text li {
    margin-bottom: 0.5rem;
}

.about-link {
    color: #f5aa3a;
    font-weight: 500;
    padding: 0.5rem 0;
}

.about-link:hover {
    color: #f9fafb;
}

/* ==========================================================================
   11. CONTACT SECTION
   ========================================================================== */

.contact {
    padding: 80px 0;
    background: linear-gradient(190deg, #f5aa3a -25%, #f9fafb 75%);
}

.contact .section-title {
    text-align: center;
    margin-bottom: 1rem;
    color: #1e3a8a; /* Navy - clean and professional */
}

.contact .section-subtitle {
    text-align: center;
    color: #6b7280; /* Medium gray for readability */
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-info h3 {
    color: #1e3a8a; /* Navy headings */
}

.contact-info p {
    color: #374151; /* Dark gray for body text */
}

.contact-method {
    margin: 2rem 0;
    padding: 2rem;
    background: #ffffff; /* Clean white cards */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
}

.contact-method h4 {
    color: #1e3a8a; /* Navy headings */
}

.contact-method p {
    color: #374151; /* Dark gray text */
}

.guarantee {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%); /* Same as featured card */
    border: 2px solid #fbbf24; /* Bright gold border */
    border-radius: 8px;
    color: #e5e7eb; /* Light text for dark background */
    transition: all 0.3s ease; /* Add subtle hover effect */
}

.guarantee:hover {
    transform: translateY(-2px); /* Subtle lift on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Enhanced shadow on hover */
}

.contact-info h3 {
    color: #1e3a8a; /* Navy for section headings */
}

.guarantee h4 {
    color: #fbbf24; /* Bright gold heading - matches featured card theme */
    margin-bottom: 1rem;
}

.guarantee p {
    color: #e5e7eb; /* Light gray text - consistent with other dark cards */
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.site-footer {
    background: #f9fafb; /* Light, clean background */
    color: #374151; /* Dark text for readability */
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
    text-align: center; /* Center the logo section */
}

/* .footer-logo {
    height: 40px;
    width: auto;
    margin-bottom: 1rem;
} */

.footer-logo {
    height: 50px; /* Increased from 40px */
    width: auto;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.footer-logo:hover {
    filter: brightness(0) saturate(100%) invert(60%) hue-rotate(27deg) sepia(100%) saturate(1000%) brightness(100%) contrast(92%);
    transform: scale(1.05); /* Subtle hover effect */
}

.footer-section h4 {
    color: #000000; /* Navy headings */
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #000000;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #f5aa3a;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    color: #000000;
}

/* Footer logo responsive alignment */
@media (min-width: 769px) {
    .footer-content .footer-section:first-child {
        text-align: left; /* Keep left-aligned on desktop */
    }
}

/* ==========================================================================
   13. RESPONSIVE UTILITIES
   ========================================================================== */

/* Hide elements on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Hide elements on desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none;
    }
}

/* ==========================================================================
   14. SMOOTH SCROLLING FOR ANCHOR LINKS
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Offset for fixed header when jumping to sections */
section[id] {
    scroll-margin-top: 100px; /* Update from 90px for anchor links */
}

/* ==========================================================================
   15. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
.menu-toggle:focus + .menu-icon {
    outline: 2px solid #1e3a8a;  /* Change from #2563eb */
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   ADDITIONAL UTILITY CLASSES
   ========================================================================== */

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margin utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Color utilities */
.text-primary { color: #1e3a8a; }
.text-secondary { color: #666; }
.text-muted { color: #9ca3af; }