/* ==========================================================================
   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: #333;
    background-color: #fff;
}

/* ==========================================================================
   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: #2563eb;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #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: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    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: 70px;
}

.logo {
    height: 40px;
    width: auto;
}

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

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

.nav-link:hover {
    color: #2563eb;
}

/* 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: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 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: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: #2563eb;
    border-color: #2563eb;
}

.btn-secondary:hover {
    background: #2563eb;
    color: #fff;
}

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

.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 150px 0 100px;
    text-align: center;
    margin-top: 70px; /* Account for fixed header */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

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

/* Mobile hero adjustments */
@media (max-width: 768px) {
    .hero {
        padding: 120px 0 80px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
    }
}

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

.value-prop {
    padding: 80px 0;
    background: #f8fafc;
}

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

.value-item {
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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

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

.services {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-color: #2563eb;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.service-card.featured {
    border-color: #2563eb;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
}

.service-price {
    color: #2563eb;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

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

.service-features li {
    padding: 0.5rem 0;
    color: #666;
}

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

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

.approach {
    padding: 80px 0;
    background: #f8fafc;
}

.approach-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.approach-text h4 {
    color: #2563eb;
    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-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.stat {
    text-align: center;
    padding: 1.5rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2563eb;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

/* Mobile approach adjustments */
@media (max-width: 768px) {
    .approach-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .approach-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .stat {
        flex: 1;
        min-width: 120px;
    }
}

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

.about {
    padding: 80px 0;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

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

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

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

.contact {
    padding: 80px 0;
    background: #f8fafc;
}

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

.contact-method {
    margin: 2rem 0;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.guarantee {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #ecfdf5;
    border: 2px solid #10b981;
    border-radius: 8px;
}

.guarantee h4 {
    color: #059669;
}

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

.site-footer {
    background: #1f2937;
    color: #d1d5db;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

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

.footer-section h4 {
    color: #fff;
    margin-bottom: 1rem;
}

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

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

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

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

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

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

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

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
.menu-toggle:focus + .menu-icon {
    outline: 2px solid #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: #2563eb; }
.text-secondary { color: #666; }
.text-muted { color: #9ca3af; }