/* ============================================
   IRONGATE UNIVERSITY - GLOBAL STYLES
   NEO-LUX INDUSTRIAL Design System
   ============================================ */

/* ===== CSS VARIABLES ===== */
:root {
    /* LIGHT MODE - 2025 Academic Theme */
    --bg-primary: #F5F7FB;
    --bg-section: #FFFFFF;
    --color-primary: #1E3A8A;
    --color-secondary: #2563EB;
    --color-accent: #F59E0B;
    --text-main: #000000;
    --text-muted: #000000;
    --card-bg: #FFFFFF;
    --card-border: #E5E7EB;
    
    /* Legacy support - mapped to new colors */
    --academic-blue: #2563EB;
    --academic-navy: #1E3A8A;
    --academic-gold: #F59E0B;
    --light-bg: #F5F7FB;
    --light-gray: #F5F7FB;
    --text-dark: #000000;
    --text-medium: #000000;
    --text-light: #000000;
    
    /* Navbar Colors */
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --navbar-text: #000000;
    --navbar-text-hover: #2563EB;
    --navbar-border: rgba(30, 58, 138, 0.1);
    
    /* Typography */
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-subtext: 'Playfair Display', serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    
    /* Spacing */
    --spacing-unit: 8px;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
}

/* DARK MODE - 2025 Academic Theme */
body.dark {
    /* DARK MODE Colors */
    --bg-primary: #0B1220;
    --bg-section: #111827;
    --color-primary: #60A5FA;
    --color-secondary: #3B82F6;
    --color-accent: #FBBF24;
    --text-main: #E5E7EB;
    --text-muted: #9CA3AF;
    --card-bg: #111827;
    --card-border: #1F2937;
    
    /* Legacy support - mapped to new colors */
    --academic-blue: #3B82F6;
    --academic-navy: #60A5FA;
    --academic-gold: #FBBF24;
    --light-bg: #0B1220;
    --light-gray: #111827;
    --text-dark: #E5E7EB;
    --text-medium: #9CA3AF;
    --text-light: #9CA3AF;
    
    /* Dark Mode Navbar Colors */
    --navbar-bg: rgba(17, 24, 39, 0.95);
    --navbar-text: #E5E7EB;
    --navbar-text-hover: #60A5FA;
    --navbar-border: rgba(96, 165, 250, 0.1);
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.7;
    overflow-x: hidden;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    position: relative;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Global Centering */
.container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.row {
    justify-content: center;
    text-align: center;
}

.row > [class*="col-"] {
    text-align: center;
}

.page-title, h1, h2, h3, h4, h5, h6 {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

p {
    text-align: center;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    filter: brightness(1) contrast(1.05);
}

/* Ensure images are visible in light mode */
body:not(.dark) img {
    opacity: 1;
    filter: brightness(1) contrast(1.05);
}

/* Dark mode images */
body.dark img {
    filter: brightness(0.9) contrast(1.1);
}

.btn, button, .btn-neo {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

section {
    text-align: center;
}

.neo-card, .card {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

ul, ol {
    text-align: center;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.d-flex {
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        position: relative;
        text-align: center;
    }
    
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: calc(var(--spacing-unit) * 2);
        padding-right: calc(var(--spacing-unit) * 2);
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }
    
    section .container {
        padding-left: calc(var(--spacing-unit) * 2);
        padding-right: calc(var(--spacing-unit) * 2);
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .row > [class*="col-"] {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .page-title {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center all headings */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center paragraphs and text */
    p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center images */
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center buttons */
    .btn, button {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    /* Center cards and sections */
    .card, section {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center lists */
    ul, ol {
        text-align: center;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Center flex containers */
    .d-flex {
        justify-content: center;
        align-items: center;
    }
}

/* Tablet centering */
@media (min-width: 769px) and (max-width: 991px) {
    html, body {
        text-align: center;
    }
    
    .container {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .row {
        justify-content: center;
        text-align: center;
    }
    
    .row > [class*="col-"] {
        text-align: center;
    }
    
    .page-title, h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    p {
        text-align: center;
    }
    
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .btn, button {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.3;
    color: var(--text-main);
}

/* Ensure headings are visible in both modes */
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) h4,
body:not(.dark) h5,
body:not(.dark) h6,
body:not(.dark) .feature-title,
body:not(.dark) .page-title,
body:not(.dark) .card-title,
body:not(.dark) .section-title {
    color: #000000 !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark .feature-title,
body.dark .page-title,
body.dark .card-title,
body.dark .section-title {
    color: var(--text-main) !important;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.25rem); }
h6 { font-size: clamp(0.875rem, 1.5vw, 1rem); }

/* Page Title - Center aligned, one line */
.page-title {
    text-align: center !important;
    white-space: nowrap !important;
    width: 100%;
    max-width: 100%;
    display: block;
}

p {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    max-width: 65ch;
    line-height: 1.8;
    color: var(--text-muted);
}

/* Ensure paragraphs use black text in light mode */
body:not(.dark) p,
body:not(.dark) .feature-text,
body:not(.dark) .italic-subtext,
body:not(.dark) li,
body:not(.dark) span:not(.icon-sun):not(.icon-moon),
body:not(.dark) .stat-label,
body:not(.dark) .cta-text,
body:not(.dark) .card-text,
body:not(.dark) .card-body p,
body:not(.dark) .card-body li,
body:not(.dark) .card-body,
body:not(.dark) .list-group-item,
body:not(.dark) td,
body:not(.dark) th,
body:not(.dark) label,
body:not(.dark) .form-label {
    color: #000000 !important;
}

/* Hero text should be white in light mode when on dark backgrounds */
body:not(.dark) .hero-title,
body:not(.dark) .hero-subtext,
body:not(.dark) .hero-subtext.italic-subtext {
    color: #FFFFFF !important;
}

body.dark p,
body.dark .feature-text,
body.dark .hero-subtext,
body.dark .italic-subtext,
body.dark li,
body.dark span:not(.icon-sun):not(.icon-moon),
body.dark .stat-label,
body.dark .cta-text,
body.dark .card-text,
body.dark .card-body p,
body.dark .card-body li,
body.dark .card-body,
body.dark .list-group-item,
body.dark td,
body.dark th,
body.dark label,
body.dark .form-label {
    color: var(--text-muted) !important;
}

.italic-subtext {
    font-family: var(--font-subtext);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-muted);
    opacity: 0.9;
}

/* ===== LINKS ===== */
a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* ===== BUTTONS ===== */
.btn-neo {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 5);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.875rem;
    background: var(--color-primary);
    color: #FFFFFF;
    border: 2px solid var(--color-primary);
    border-radius: 24px;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.3);
    min-width: 140px;
    text-align: center;
}

.btn-neo:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.4);
    color: #FFFFFF;
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-neo:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
}

.btn-neo:focus {
    outline: 3px solid rgba(30, 58, 138, 0.3);
    outline-offset: 2px;
}

.btn-neo-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #FFFFFF;
    font-weight: 700;
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 16px rgba(30, 58, 138, 0.4);
}

.btn-neo-primary:hover {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.5);
}

.btn-neo-secondary {
    background: var(--bg-section);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.btn-neo-secondary:hover {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.35);
}

/* Dark mode button styles */
body.dark .btn-neo {
    background: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.3);
}

body.dark .btn-neo:hover {
    background: var(--color-secondary);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.4);
}

body.dark .btn-neo-secondary {
    background: var(--bg-section);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.dark .btn-neo-secondary:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* ===== CONTAINERS & SECTIONS ===== */
.container {
    padding-left: calc(var(--spacing-unit) * 2);
    padding-right: calc(var(--spacing-unit) * 2);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

section {
    padding: calc(var(--spacing-unit) * 4) 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-section);
    transition: background-color 0.3s ease;
}

/* Remove extra spacing before footer */
section:last-of-type {
    padding-bottom: calc(var(--spacing-unit) * 3);
    margin-bottom: 0;
}

body > section:last-of-type {
    padding-bottom: calc(var(--spacing-unit) * 3);
    margin-bottom: 0;
}

/* Consistent section alignment */
section .container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing-unit) * 2);
    padding-right: calc(var(--spacing-unit) * 2);
}

@media (min-width: 1200px) {
    section .container {
        padding-left: calc(var(--spacing-unit) * 3);
        padding-right: calc(var(--spacing-unit) * 3);
    }
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(30, 58, 138, 0.3) 50%, 
        transparent 100%);
    margin: calc(var(--spacing-unit) * 3) 0;
    position: relative;
}

body.dark .section-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(96, 165, 250, 0.3) 50%, 
        transparent 100%);
}

.section-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary);
}

/* ===== NEOMORPHISM CARDS ===== */
.neo-card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: calc(var(--spacing-unit) * 3);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--card-border);
    position: relative;
    overflow: hidden;
}

.neo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 50%);
    opacity: 0;
    transition: var(--transition-smooth);
}

.neo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.15);
    border-color: var(--color-primary);
}

body.dark .neo-card:hover {
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);
    border-color: var(--color-primary);
}

.neo-card:hover::before {
    opacity: 1;
}

.neo-card:active {
    transform: translateY(-2px);
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -4px -4px 8px rgba(255, 255, 255, 0.02);
}

/* Ensure all text in cards uses theme colors */
.neo-card p,
.neo-card .feature-text,
.neo-card .stat-label {
    color: var(--text-muted);
}

.neo-card h1,
.neo-card h2,
.neo-card h3,
.neo-card h4,
.neo-card h5,
.neo-card h6,
.neo-card .feature-title {
    color: var(--text-main);
}

/* Ensure card text is black in light mode */
body:not(.dark) .neo-card p,
body:not(.dark) .neo-card .feature-text,
body:not(.dark) .neo-card .stat-label,
body:not(.dark) .neo-card h1,
body:not(.dark) .neo-card h2,
body:not(.dark) .neo-card h3,
body:not(.dark) .neo-card h4,
body:not(.dark) .neo-card h5,
body:not(.dark) .neo-card h6,
body:not(.dark) .neo-card .feature-title,
body:not(.dark) .card h1,
body:not(.dark) .card h2,
body:not(.dark) .card h3,
body:not(.dark) .card h4,
body:not(.dark) .card h5,
body:not(.dark) .card h6,
body:not(.dark) .card-title,
body:not(.dark) .card-body h1,
body:not(.dark) .card-body h2,
body:not(.dark) .card-body h3,
body:not(.dark) .card-body h4,
body:not(.dark) .card-body h5,
body:not(.dark) .card-body h6 {
    color: #000000 !important;
}

body:not(.dark) .neo-card p,
body:not(.dark) .neo-card .feature-text,
body:not(.dark) .neo-card .stat-label {
    color: #000000 !important;
}

body.dark .neo-card p,
body.dark .neo-card .feature-text,
body.dark .neo-card .stat-label,
body.dark .neo-card h1,
body.dark .neo-card h2,
body.dark .neo-card h3,
body.dark .neo-card h4,
body.dark .neo-card h5,
body.dark .neo-card h6,
body.dark .neo-card .feature-title {
    color: var(--text-main) !important;
}

body.dark .neo-card p,
body.dark .neo-card .feature-text,
body.dark .neo-card .stat-label {
    color: var(--text-muted) !important;
}

/* ===== GLASSMORPHISM ===== */
.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(30, 58, 138, 0.2);
    border-radius: 24px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.dark .glass-panel {
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(96, 165, 250, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ===== UTILITIES ===== */
.text-copper {
    color: var(--color-secondary);
}

.bg-tungsten {
    background-color: var(--bg-section);
}

.bg-graphite {
    background-color: var(--color-primary);
}

.spacing-top { margin-top: calc(var(--spacing-unit) * 2); }
.spacing-bottom { margin-bottom: calc(var(--spacing-unit) * 2); }
.spacing-y { margin-top: calc(var(--spacing-unit) * 2); margin-bottom: calc(var(--spacing-unit) * 2); }

/* ===== COMPREHENSIVE LIGHT MODE TEXT OVERRIDES ===== */
/* Ensure ALL text is black in light mode - Universal override */
body:not(.dark) {
    color: #000000;
}

/* Specific text element overrides */
body:not(.dark) .lead-text,
body:not(.dark) .hero-description,
body:not(.dark) .brand-name,
body:not(.dark) .brand-subtitle,
body:not(.dark) .category-title,
body:not(.dark) .category-description,
body:not(.dark) .about-text,
body:not(.dark) .mission-text,
body:not(.dark) .vision-text,
body:not(.dark) .dashboard-title,
body:not(.dark) .dashboard-text,
body:not(.dark) .sidebar-link,
body:not(.dark) .sidebar-title,
body:not(.dark) .card-title,
body:not(.dark) .card-text,
body:not(.dark) .table td,
body:not(.dark) .table th,
body:not(.dark) label,
body:not(.dark) .form-label,
body:not(.dark) .form-text,
body:not(.dark) .alert,
body:not(.dark) .badge,
body:not(.dark) .list-group-item,
body:not(.dark) .course-title,
body:not(.dark) .course-description,
body:not(.dark) .facility-title,
body:not(.dark) .facility-description,
body:not(.dark) .placement-title,
body:not(.dark) .contact-info,
body:not(.dark) .login-text,
body:not(.dark) .form-control,
body:not(.dark) .form-select,
body:not(.dark) .input-group-text {
    color: #000000 !important;
}

/* Override titanium-silver and rgba colors in light mode */
body:not(.dark) [class*="titanium"],
body:not(.dark) [style*="color: rgba(209, 213, 219"],
body:not(.dark) [style*="color:rgba(209, 213, 219"] {
    color: #000000 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    section {
        padding: calc(var(--spacing-unit) * 4) 0;
    }
    
    .neo-card {
        padding: calc(var(--spacing-unit) * 2);
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

@media (max-width: 576px) {
    .container {
        padding-left: calc(var(--spacing-unit) * 1.5);
        padding-right: calc(var(--spacing-unit) * 1.5);
    }
    
    section {
        padding: calc(var(--spacing-unit) * 3) 0;
    }
}

/* ===== CURSOR GLOW (Desktop Only) ===== */
@media (min-width: 1025px) {
    .cursor-glow {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(circle, 
            rgba(30, 58, 138, 0.4) 0%, 
            rgba(30, 58, 138, 0) 70%);
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.3s ease, height 0.3s ease;
        display: block;
    }
    
    body.dark .cursor-glow {
        background: radial-gradient(circle, 
            rgba(96, 165, 250, 0.4) 0%, 
            rgba(96, 165, 250, 0) 70%);
    }
    
    .cursor-glow.hover {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 1024px) {
    .cursor-glow {
        display: none;
    }
}