/* ============================================
   HERO TITLE COLORS - INDEX.HTML ONLY
   Color overrides for index.html light background
   Works with the code animation from hero-title-animation.js
   ============================================ */

/* 
   INDEX.HTML HERO SECTION:
   - Background: White with node network (not gradient)
   - Line 1 "Redefining": Should be Pantone 7688 C → Dark/Black
   - Line 2 "Urban Innovation": Should be Pantone 7688 C → Vibrant Blue
   
   This overrides the default gradient background colors:
   - Default Line 1: White (for gradient backgrounds)
   - Default Line 2: Orange (for gradient backgrounds)
*/

/* Pantone 7688 C = #0085CA (Connect21 Vibrant Blue) */

/* ========================================================================
   INDEX.HTML SPECIFIC COLOR OVERRIDES
   ======================================================================== */

/* Ensure lines are displayed as BLOCKS (2 separate lines) */
body.bg-c21-bg .hero-title .title-line,
section.bg-white .hero-title .title-line {
    display: block !important;
}

/* Mobile responsive sizing - prevent overflow */
@media (max-width: 639px) {
    body.bg-c21-bg .hero-title,
    section.bg-white .hero-title {
        font-size: 2.25rem !important; /* 36px instead of 48px */
        word-break: break-word;
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    /* Ensure individual lines fit on mobile */
    body.bg-c21-bg .hero-title .title-line,
    section.bg-white .hero-title .title-line {
        max-width: 100%;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 374px) {
    body.bg-c21-bg .hero-title,
    section.bg-white .hero-title {
        font-size: 1.875rem !important; /* 30px for very small screens */
    }
}

/* Target only index.html hero section with white background */
body.bg-c21-bg .hero-title .title-line:first-child,
section.bg-white .hero-title .title-line:first-child {
    /* Line 1: Dark/Black text on white background */
    color: #07203F !important;
}

body.bg-c21-bg .hero-title .title-line:first-child.gradient-text-hero,
section.bg-white .hero-title .title-line:first-child.gradient-text-hero {
    /* If first line accidentally has gradient class */
    background: none !important;
    -webkit-text-fill-color: #07203F !important;
    color: #07203F !important;
}

body.bg-c21-bg .hero-title .gradient-text-hero,
section.bg-white .hero-title .gradient-text-hero {
    /* Line 2: Vibrant Blue (not orange like other pages) */
    background: none !important;
    -webkit-text-fill-color: #0085CA !important;
    color: #0085CA !important;
}

/* During code animation, use Pantone 7688 C for BOTH lines */
body.bg-c21-bg .hero-title .code-line,
section.bg-white .hero-title .code-line {
    color: #0085CA !important;
    -webkit-text-fill-color: #0085CA !important;
}

/* Dark mode adjustments for index.html */
.dark body.bg-c21-bg .hero-title .title-line:first-child,
.dark section.bg-gray-900 .hero-title .title-line:first-child {
    /* Line 1: White text on dark background */
    color: #FFFFFF !important;
}

.dark body.bg-c21-bg .hero-title .gradient-text-hero,
.dark section.bg-gray-900 .hero-title .gradient-text-hero {
    /* Line 2: Keep vibrant blue even in dark mode */
    background: none !important;
    -webkit-text-fill-color: #0085CA !important;
    color: #0085CA !important;
}

.dark body.bg-c21-bg .hero-title .code-line,
.dark section.bg-gray-900 .hero-title .code-line {
    /* Code animation: Pantone 7688 C in dark mode too */
    color: #0085CA !important;
    -webkit-text-fill-color: #0085CA !important;
}

/* ========================================================================
   NOTES FOR DEVELOPERS
   ======================================================================== */

/*
 * This CSS file provides COLOR OVERRIDES for index.html only.
 * 
 * It works WITH the existing code animation system:
 * - hero-title.css: Base styles and structure
 * - hero-title-animation.js: Code-to-text transformation animation
 * - hero-title-index.css: Color overrides for index.html ONLY
 * 
 * The animation flow on index.html:
 * 1. Code appears in Pantone 7688 C (#0085CA) - both lines
 * 2. Scrambles while staying in Pantone 7688 C
 * 3. Reveals final text:
 *    - Line 1 "Redefining": #07203F (dark/black)
 *    - Line 2 "Urban Innovation": #0085CA (vibrant blue)
 * 
 * Other pages (gradient backgrounds):
 * 1. Code appears in white (Line 1) and orange (Line 2)
 * 2. Scrambles in those colors
 * 3. Reveals final text:
 *    - Line 1: White
 *    - Line 2: Orange
 */