/* ============================================
   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 (Connect 21 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;
}

/* ========================================================================
   HOME TITLE COLOR THEMES (optional)
   Default (no theme class on the home <h1>): the original blue colors above.
   Add ONE class to <h1 ... data-title-id="home"> in index.html to switch:
     hero-theme-orange  → Digital Orange → Burnt Orange gradient
     hero-theme-gray    → brand gray gradient
   Guide: Home-Page-Title-Color-Guide.pdf (project root)
   ======================================================================== */

/* Theme colors - each theme only sets these three variables */
.hero-title.hero-theme-orange {
    --hero-grad-from: #FF8200;   /* Digital Orange (Pantone 1575 C) */
    --hero-grad-to: #C75B12;     /* Burnt Orange */
    --hero-grad-fallback: #FF8200;
}

.hero-title.hero-theme-gray {
    --hero-grad-from: #2D3748;   /* same gray scale as --c21-text-secondary #4A5568 */
    --hero-grad-to: #718096;
    --hero-grad-fallback: #4A5568;
}

.dark .hero-title.hero-theme-gray {
    /* lighter end of the scale so it stays readable on the dark background */
    --hero-grad-from: #E2E8F0;
    --hero-grad-to: #A0AEC0;
    --hero-grad-fallback: #E2E8F0;
}

/* Themed: while the code animation runs, the first line shows its final color
   (navy / white) instead of blue (hero-title-animation.js sets no inline
   colors on the home page, so these CSS rules decide) */
body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .code-line {
    color: #07203F !important;
    -webkit-text-fill-color: #07203F !important;
}

.dark body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .code-line {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Themed: gradient lines ("Mission-Critical Infrastructure." / "One Accountable
   Owner."), also while animating (the animation temporarily swaps the
   gradient-text-hero class for data-has-gradient="true") */
body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .title-line.gradient-text-hero,
body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .title-line[data-has-gradient="true"],
.dark body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .title-line.gradient-text-hero,
.dark body.bg-c21-bg .hero-title[data-title-id="home"][class*="hero-theme-"] .title-line[data-has-gradient="true"] {
    background: linear-gradient(135deg, var(--hero-grad-from) 0%, var(--hero-grad-to) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--hero-grad-fallback) !important;
    /* Size the gradient to the text, not the full-width block */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================================================
   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
 */