/**
 * Perfect Mobile Typography - Comprehensive Site Coverage
 * Uses high-specificity selectors to override component CSS
 * Balanced approach: 16px body, 14px labels, 12px minimum
 */

/* ========================================
   HERO SECTION - Maximum Impact
   ======================================== */

/* Hero container for increased specificity */
.hero .hero-name,
section.hero .hero-name {
    font-size: 2rem !important;
    line-height: 1.3 !important;
}

.hero .hero-subtitle,
section.hero .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.hero .hero-description,
section.hero .hero-description {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Tablet (768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .hero .hero-name,
    section.hero .hero-name {
        font-size: 2.5rem !important;
    }

    .hero .hero-subtitle,
    section.hero .hero-subtitle {
        font-size: 1.15rem !important;
    }

    .hero .hero-description,
    section.hero .hero-description {
        font-size: 0.9rem !important;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .hero .hero-name,
    section.hero .hero-name {
        font-size: 2rem !important;
    }

    .hero .hero-subtitle,
    section.hero .hero-subtitle {
        font-size: 1rem !important;
    }

    .hero .hero-description,
    section.hero .hero-description {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   ABOUT SECTION - Readable Body Text
   ======================================== */

/* Section headers */
.about .section-title,
section.about .section-title,
.about-header .section-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
}

/* THIS IS THE CRITICAL ONE - User reported too small */
.about .section-subtitle,
section.about .section-subtitle,
.about-header .section-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    letter-spacing: 1.5px !important;
}

/* Body paragraphs */
.about .about-paragraph,
section.about .about-paragraph,
.about-content p,
section.about p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/* Goal boxes */
.about .goal-box p,
section.about .goal-box p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .about .section-title,
    section.about .section-title {
        font-size: 2rem !important;
    }

    .about .section-subtitle,
    section.about .section-subtitle {
        font-size: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .about .section-title,
    section.about .section-title {
        font-size: 1.75rem !important;
    }

    .about .section-subtitle,
    section.about .section-subtitle {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   PROJECTS SECTION - Clear Hierarchy
   ======================================== */

.projects .section-title,
section.projects .section-title,
.projects-header .section-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
}

.projects .section-subtitle,
section.projects .section-subtitle,
.projects-header .section-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    letter-spacing: 1.5px !important;
}

.projects .project-title,
section.projects .project-title {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
}

.projects .project-description,
section.projects .project-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .projects .section-title,
    section.projects .section-title {
        font-size: 2rem !important;
    }

    .projects .section-subtitle,
    section.projects .section-subtitle {
        font-size: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .projects .section-title,
    section.projects .section-title {
        font-size: 1.75rem !important;
    }

    .projects .section-subtitle,
    section.projects .section-subtitle {
        font-size: 0.875rem !important;
    }

    .projects .project-title,
    section.projects .project-title {
        font-size: 1.25rem !important;
    }
}

/* ========================================
   CONTACT SECTION - Professional & Clear
   ======================================== */

.contact .section-title,
section.contact .section-title,
.contact-header .section-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
}

.contact .section-subtitle,
section.contact .section-subtitle,
.contact-header .section-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    letter-spacing: 1.5px !important;
}

.contact .contact-message,
section.contact .contact-message,
.contact p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.contact .contact-link span,
section.contact .contact-link span,
.contact-link .contact-label {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    .contact .section-title,
    section.contact .section-title {
        font-size: 2rem !important;
    }

    .contact .section-subtitle,
    section.contact .section-subtitle {
        font-size: 1rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .contact .section-title,
    section.contact .section-title {
        font-size: 1.75rem !important;
    }

    .contact .section-subtitle,
    section.contact .section-subtitle {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   HEADER - Navigation & Branding
   ======================================== */

header .header-logo,
.header .header-logo {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
}

header .header-tagline,
.header .header-tagline,
header .tagline {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

header nav a,
.header nav a,
header .nav a {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

/* Tablet */
@media (max-width: 768px) and (min-width: 481px) {
    header .header-logo,
    .header .header-logo {
        font-size: 1.5rem !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    header .header-logo,
    .header .header-logo {
        font-size: 1.4rem !important;
    }

    header .header-tagline,
    .header .header-tagline {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   GLOBAL OVERRIDES - Catch All
   ======================================== */

/* Ensure NO text goes below 12px on mobile */
@media (max-width: 480px) {
    body * {
        min-font-size: 0.75rem; /* 12px minimum */
    }
}