/**
 * Mark Andrew Preston Website - Custom Design System
 * Based on PRD Design Language
 * 
 * Color Palette:
 * - Primary (Deep Navy): #0B1C2E
 * - Accent (Papaya Orange): #FF7F2A  
 * - Secondary (Electric Blue): #1DA1F2
 * - Neutrals: White #FFFFFF, Light Sand #F6F7F9
 */

/* ==========================================================================
   0. GOOGLE FONTS IMPORT
   ========================================================================== */

/* Import Montserrat (headings) and Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap');

/* ==========================================================================
   1. COLOR SYSTEM OVERRIDES
   ========================================================================== */

/* Primary color overrides */
:root {
    --primary-color: #0B1C2E;
    --accent-color: #FF7F2A;
    --secondary-color: #1DA1F2;
    --background-light: #F6F7F9;
}

/* Update default black to deep navy */
.has-primary-color,
.site-title a,
.main-navigation a,
h1, h2, h3, h4, h5, h6 {
    color: #0B1C2E !important;
}

.has-primary-background-color {
    background-color: #0B1C2E !important;
}

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

/* Montserrat for headings (bold, modern) */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.wp-block-heading {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Inter for body text (readable and scalable) */
body,
p,
.entry-content,
.wp-block-paragraph {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
}

/* Font size adjustments */
body {
    font-size: 16px;
}

@media only screen and (min-width: 560px) {
    body {
        font-size: 18px;
    }
}

h1, .h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2, .h2 {
    font-size: 2rem;
    line-height: 1.25;
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.3;
}

/* ==========================================================================
   3. BUTTONS & CTAs
   ========================================================================== */

/* Primary button style (Papaya Orange) */
.wp-block-button__link,
button,
.button,
input[type="submit"],
.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: #FF7F2A !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    padding: 16px 32px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none !important;
    transition: all 0.3s ease;
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
    background-color: #E66D1F !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 127, 42, 0.3);
}

/* Secondary button style (Electric Blue outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.button-secondary {
    background-color: transparent !important;
    color: #1DA1F2 !important;
    border: 2px solid #1DA1F2 !important;
    padding: 14px 30px !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button-secondary:hover {
    background-color: #1DA1F2 !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #F6F7F9;
    padding: 24px 32px;
}

.site-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0B1C2E !important;
}

.site-description {
    color: #666666;
    font-size: 0.875rem;
    font-weight: 400;
}

/* Navigation styling */
.main-navigation a {
    color: #0B1C2E !important;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 8px 16px;
    transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation li.current-menu-item a {
    color: #FF7F2A !important;
}

.main-navigation li.current-menu-item a {
    border-bottom: 2px solid #FF7F2A;
}

/* ==========================================================================
   5. HERO / FEATURED SECTIONS
   ========================================================================== */

/* Hero section styling */
.hero-section,
.wp-block-cover.hero {
    min-height: 500px;
    background-color: #0B1C2E;
    color: #FFFFFF;
    padding: 80px 32px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: #FFFFFF !important;
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #F6F7F9;
    margin-bottom: 32px;
    max-width: 600px;
}

/* ==========================================================================
   6. CONTENT SECTIONS
   ========================================================================== */

/* Section spacing */
.content-section {
    padding: 80px 32px;
}

.content-section.light {
    background-color: #F6F7F9;
}

.content-section.dark {
    background-color: #0B1C2E;
    color: #FFFFFF;
}

/* Framework section (Motorsport MBA) */
.framework-section {
    background: linear-gradient(135deg, #0B1C2E 0%, #1a2f45 100%);
    color: #FFFFFF;
    padding: 80px 32px;
}

.framework-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.pillar-card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-8px);
    border-color: #FF7F2A;
}

.pillar-icon {
    font-size: 3rem;
    color: #FF7F2A;
    margin-bottom: 16px;
}

/* ==========================================================================
   7. PROOF / TESTIMONIALS
   ========================================================================== */

.testimonial-card {
    background-color: #FFFFFF;
    border-left: 4px solid #FF7F2A;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-text {
    font-size: 1.125rem;
    font-style: italic;
    color: #333333;
    margin-bottom: 16px;
}

.testimonial-author {
    font-weight: 600;
    color: #0B1C2E;
}

.testimonial-role {
    color: #666666;
    font-size: 0.875rem;
}

/* Stats/Metrics display */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin: 48px 0;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #FF7F2A;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.875rem;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   8. CARDS & CONTENT BLOCKS
   ========================================================================== */

.content-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.content-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.card-title {
    color: #0B1C2E;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.card-description {
    color: #666666;
    line-height: 1.6;
}

/* ==========================================================================
   9. FORMS & INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
textarea {
    border: 2px solid #E5E5E5;
    border-radius: 5px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #1DA1F2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(29, 161, 242, 0.1);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
    background-color: #0B1C2E;
    color: #F6F7F9;
    padding: 48px 32px 24px;
}

.site-footer a {
    color: #F6F7F9;
}

.site-footer a:hover {
    color: #FF7F2A;
}

.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    margin-top: 24px;
    font-size: 0.875rem;
    color: #999999;
}

/* ==========================================================================
   11. UTILITY CLASSES
   ========================================================================== */

.accent-color {
    color: #FF7F2A !important;
}

.secondary-color {
    color: #1DA1F2 !important;
}

.text-center {
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0B1C2E;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 1.25rem;
    color: #666666;
    margin-bottom: 48px;
}

/* Spacing utilities */
.mt-large {
    margin-top: 80px !important;
}

.mb-large {
    margin-bottom: 80px !important;
}

.py-large {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* ==========================================================================
   12. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media only screen and (max-width: 782px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .content-section {
        padding: 48px 16px;
    }
    
    .framework-pillars {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #1DA1F2;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0B1C2E;
    color: #FFFFFF;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}