/* ============================================
   CSS Migration Overrides
   ============================================
   
   PURPOSE:
   This file handles conflicts between the legacy Hervin template (style.css)
   and modern Tailwind utilities during the gradual migration process.
   
   STRATEGY:
   - This file loads LAST in the CSS cascade
   - Use this for element-level resets that Tailwind can't override
   - Add migration-specific classes for opt-in modern styling
   - Document each override with the legacy source
   
   LOAD ORDER:
   1. style.css (legacy Hervin template)
   2. foundation.css (grid system)
   3. style-overrides.css (project-specific tweaks)
   4. tailwind.css (utility classes)
   5. migration-overrides.css (THIS FILE - conflict resolution)
   
   USAGE:
   - For gradual migration, use opt-in classes like .tw-base
   - For full pages ready for modern styling, add class to parent
   
   ============================================ */




/* ============================================
   TYPOGRAPHY RESETS
   ============================================ */

/*
 * Legacy: style.css line 36 sets body { font-size: 14px }
 * Legacy: style.css line 529 sets p { font-size: 14px }
 * Modern: Tailwind base is 16px (1rem)
 * 
 * Use .tw-typography class on container to opt-in to modern sizing
 */
.tw-typography {
    font-size: 1rem; /* 16px base */
    line-height: 1.625; /* Tailwind's prose default */
}

.tw-typography p {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.25em;
}

.tw-typography h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 0.8em;
}

.tw-typography h2 {
    font-size: 1.875rem;
    line-height: 1.3;
    margin-bottom: 0.75em;
}

.tw-typography h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0.6em;
}

.tw-typography h4 {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 0.5em;
}

.tw-typography ul,
.tw-typography ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.tw-typography li {
    margin-bottom: 0.5em;
}

/* ============================================
   SINGLE ELEMENT OVERRIDES
   ============================================
   Use these utility classes when you need modern sizing
   on individual elements without changing the whole container
*/

/* Force 16px paragraph text */
.text-base-force {
    font-size: 1rem !important;
    line-height: 1.625 !important;
}

/* Force specific sizes */
.text-sm-force {
    font-size: 0.875rem !important; /* 14px */
}

.text-lg-force {
    font-size: 1.125rem !important; /* 18px */
}

.text-xl-force {
    font-size: 1.25rem !important; /* 20px */
}

/* ============================================
   PAGE-LEVEL MIGRATION CLASSES
   ============================================
   Add these to #page-content or #main-page-content
   to progressively enable modern styling per page
*/

/* About page specific - opt-in to larger paragraph text */
.about-page #main-page-content p {
    font-size: 1rem;
    line-height: 1.75;
}

/* Project pages - keep legacy 14px for now (remove when ready) */
/* .project-page #main-page-content p { font-size: 14px; } */

/* ============================================
   HERO TITLE/SUBTITLE CONSISTENCY
   ============================================
   
   Ensures .hero-title/.hero-subtitle (project pages) align exactly 
   with .title/.subtitle (index carousel) across all breakpoints.
   
   Sources:
   - showcase.css: .title, .subtitle (index carousel)
   - style.css: .hero-title, .hero-subtitle (project pages)
   
   Both use Oswald 700 and converge at the same responsive sizes.
   These rules ensure pixel-perfect alignment.
   
   ============================================ */

/* Base hero title - matches showcase.css .title */
.hero-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

/* Base hero subtitle - matches showcase.css .subtitle */
.hero-subtitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 2px;
}

/* Ensure consistent responsive breakpoints */
@media only screen and (max-width: 1024px) {
    .hero-title {
        font-size: 70px;
        line-height: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-title {
        font-size: 50px;
        line-height: 80px;
    }
}

@media only screen and (max-width: 479px) {
    .hero-title {
        font-size: 40px;
        line-height: 80px;
    }
}

/* ============================================
   CONFLICT RESOLUTION LOG
   ============================================
   Track conflicts found and how they were resolved:
   
   | Date       | Element | Legacy Value | Modern Value | Resolution |
   |------------|---------|--------------|--------------|------------|
   | 2026-01-15 | p       | 14px         | 16px (1rem)  | .about-page override |
   | 2026-01-15 | body    | 14px         | 16px         | Inherited by children |
   | 2026-01-15 | hero-title | style.css | showcase.css | Unified via migration-overrides |
   
   ============================================ */