/* assets/css/header.css */

.header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);
    color: var(--white);
    padding: 2.5rem 0;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--primary);
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="%23ffffff" stroke-width="0.3" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    pointer-events: none;
}

.header-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.header h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 2.75rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

.header .container {
    position: relative;
    z-index: 2;
}

/* ===========================================
   CENTRAL BANK DISTINCTIVE HEADER COLORS
   =========================================== */

/* 1. FEDERAL RESERVE (USA) - Classic Blue */
.header.fed {
    background: linear-gradient(135deg, #1e293b 0%, #2563eb 100%);
    color: #ffffff;
    padding: 2rem 0;
}

.header.fed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="fedgrid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23ffffff" stroke-width="0.25" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23fedgrid)"/></svg>');
    pointer-events: none;
}

/* 2. EUROPEAN CENTRAL BANK - EU Blue & Gold */
.header.ecb {
    background: linear-gradient(135deg, #1e293b 0%, #0284c7 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
}

.header.ecb::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.1) 100%);
    pointer-events: none;
}

/* 3. BANK OF ENGLAND - Royal Purple */
.header.boe {
    background: linear-gradient(135deg, #1e293b 0%, #7c3aed 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
}

.header.boe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="boegrid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="%23ffffff" stroke-width="0.3" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23boegrid)"/></svg>');
    pointer-events: none;
}

/* 4. BANK OF JAPAN - Rising Sun Red */
.header.boj {
    background: linear-gradient(135deg, #1e293b 0%, #dc2626 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.header.boj::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* 5. PEOPLE'S BANK OF CHINA - Chinese Red & Gold */
.header.pboc {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.header.pboc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="chinagrid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="%23fbbf24" stroke-width="0.3" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23chinagrid)"/></svg>');
    pointer-events: none;
}

/* 6. RESERVE BANK OF AUSTRALIA - Green & Gold */
.header.rba {
    background: linear-gradient(135deg, #1e293b 0%, #059669 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
}

.header.rba::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #fbbf24 100%);
    pointer-events: none;
}

/* 7. RESERVE BANK OF INDIA - Saffron Orange */
.header.rbi {
    background: linear-gradient(135deg, #ea580c 0%, #ff6600 100%);
    color: #ffffff;
    padding: 2rem 0;
    position: relative;
}

.header.rbi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="indiagrid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23ffffff" stroke-width="0.25" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23indiagrid)"/></svg>');
    pointer-events: none;
}