/* Homepage Font Override - Match Plans Page Styling */

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Top left brand name - 10HourLoop.com */
header a[href="/"],
header a[href="https://10hourloop.com"],
header a[href="https://10hourloop.com/"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

/* Navigation links - Articles, About, FAQ, Plans & Pricing */
nav a,
nav.flex.items-center.gap-6 a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* Main centered title - 10HourLoop.com */
h1,
.text-4xl,
.text-5xl,
.text-6xl {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 700 !important;
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
}

/* Subtitle - "Create seamless loops and merge audio & video files" */
h2,
.text-xl,
.text-2xl,
[class*="subtitle"],
h1 + * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    color: #b0b0b0 !important;
}

/* Login and Register buttons */
button,
.button,
[type="button"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600 !important;
}

/* Tab buttons - Create Loop, Merge Audio & Video */
[role="tablist"] button,
[role="tab"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* Body text and general elements */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 400 !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    h1,
    .text-4xl,
    .text-5xl,
    .text-6xl {
        font-size: 2.5rem !important;
    }
    
    h2,
    .text-xl,
    .text-2xl {
        font-size: 1.25rem !important;
    }
    
    header a[href="/"],
    header a[href="https://10hourloop.com"],
    header a[href="https://10hourloop.com/"] {
        font-size: 16px !important;
    }
    
    nav a {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    h1,
    .text-4xl,
    .text-5xl,
    .text-6xl {
        font-size: 2rem !important;
    }
    
    h2,
    .text-xl,
    .text-2xl {
        font-size: 1.125rem !important;
    }
}