/*
 * Tiger4Code Website - Custom CSS
 * 
 * This file contains all custom styles for the Tiger4Code website.
 * It's organized into clear sections for easy customization.
 * Modify the CSS variables at the top to quickly change colors, fonts, and spacing.
 */

/* ============================================
   1. CSS VARIABLES (CUSTOMIZE HERE!)
   ============================================ */

:root {
    /* Primary Brand Colors - Strong Professional Teal */
    --primary-color: #0E7490;      /* Strong cyan/teal */
    --primary-dark: #155E75;       /* Deep teal */
    --primary-light: #06B6D4;      /* Bright cyan accent */

    /* Secondary Colors - Strong & Professional */
    --secondary-color: #64748B;    /* Professional slate gray */
    --success-color: #059669;      /* Strong emerald green */
    --danger-color: #DC2626;       /* Strong red */
    --warning-color: #D97706;      /* Strong amber */
    --info-color: #0891B2;         /* Strong cyan */
    
    /* Background Colors */
    --bg-light: #F8FAFC;           /* Cool light gray */
    --bg-white: #FFFFFF;
    --bg-dark: #0F172A;            /* Deep slate for contrast */
    
    /* Text Colors - Strong Contrast */
    --text-primary: #0F172A;       /* Deep slate for readability */
    --text-secondary: #475569;     /* Medium slate */
    --text-muted: #94A3B8;         /* Light slate */
    --text-white: #FFFFFF;
    
    /* Fonts */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-headings: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Font Sizes */
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-sm: 0.875rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    
    /* Border Radius */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}


/* ============================================
   2. BOOTSTRAP COLOR OVERRIDES
   ============================================ */

/* Override Bootstrap's primary color with our custom color */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

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

.text-primary {
    color: var(--primary-color) !important;
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Make Bootstrap icons white on primary backgrounds */
.bi {
    color: white !important;
}

/* ============================================
   3. GENERAL & TYPOGRAPHY
   ============================================ */

body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    line-height: 1.6;
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}


/* ============================================
   4. NAVIGATION BAR
   ============================================ */

.navbar {
    padding: var(--spacing-md) 0;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform var(--transition-fast);
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Navbar scroll effect */
.navbar.scrolled {
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow);
}


/* ============================================
   5. PAGE HEADER SECTIONS
   ============================================ */

.page-header {
    padding-top: 120px;
    min-height: 300px;
}

.page-header h1 {
    margin-bottom: var(--spacing-lg);
}


/* ============================================
   6. HERO SECTION
   ============================================ */

.hero-section {
    padding-top: 80px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--text-white);
}

.hero-section h1 {
    animation: fadeInUp 0.8s ease-out;
}

.hero-section p {
    animation: fadeInUp 1s ease-out;
}

.hero-section .btn {
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================
   6. BUTTONS
   ============================================ */

.btn {
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    transition: all var(--transition-base);
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
    transform: translateY(-2px);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.btn-link {
    text-decoration: none;
    font-weight: 600;
}


/* ============================================
   7. CARDS
   ============================================ */

.card {
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}


/* ============================================
   8. ICON BOXES
   ============================================ */

.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: 1.5rem;
}

.icon-box-large {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    font-size: 2rem;
}

.icon-box-xl {
    width: 100px;
    height: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    font-size: 3rem;
}

.cert-icon-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.5rem;
}


/* ============================================
   9. PROFILE IMAGES & PLACEHOLDERS
   ============================================ */

.profile-image-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10rem;
    line-height: 1;
}


/* ============================================
   10. SECTIONS & SPACING
   ============================================ */

section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    margin-bottom: var(--spacing-xl);
}


/* ============================================
   11. FOOTER
   ============================================ */

footer {
    background-color: var(--bg-dark);
    color: var(--text-white);
}

footer a {
    transition: color var(--transition-fast);
}

footer a:hover {
    color: var(--text-white) !important;
    opacity: 1;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}


/* ============================================
   12. FORMS
   ============================================ */

.form-control,
.form-select {
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.form-label {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}


/* ============================================
   13. BADGES
   ============================================ */

.badge {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    border-radius: var(--border-radius);
}


/* ============================================
   14. ACCORDION
   ============================================ */

.accordion-button {
    font-weight: 600;
    font-size: 1.1rem;
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
    color: var(--text-white);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--primary-color);
}


/* ============================================
   15. ALERTS
   ============================================ */

.alert {
    border-radius: var(--border-radius);
    border: none;
}


/* ============================================
   16. UTILITIES
   ============================================ */

/* Background utilities */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Text utilities */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Spacing utilities - add as needed */
.pt-6 { padding-top: 5rem; }
.pb-6 { padding-bottom: 5rem; }
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }


/* ============================================
   17. RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablets and below */
@media (max-width: 991px) {
    .hero-section {
        padding-top: 100px;
    }
    
    .page-header {
        padding-top: 100px;
        min-height: 250px;
    }
    
    .display-1 { font-size: 3rem; }
    .display-3 { font-size: 2.5rem; }
    .display-4 { font-size: 2rem; }
    .display-5 { font-size: 1.75rem; }
    .display-6 { font-size: 1.5rem; }
}

/* Mobile devices */
@media (max-width: 767px) {
    .hero-section {
        padding-top: 80px;
    }
    
    .page-header {
        padding-top: 80px;
        min-height: 200px;
    }
    
    .btn-lg {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-base);
    }
    
    .icon-box-xl {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
    
    .profile-image-placeholder {
        width: 150px;
        height: 150px;
        font-size: 7rem;
    }
    
    .display-1 { font-size: 2.5rem; }
    .display-3 { font-size: 2rem; }
    .display-4 { font-size: 1.75rem; }
    .display-5 { font-size: 1.5rem; }
    .display-6 { font-size: 1.25rem; }
}


/* ============================================
   18. ANIMATIONS & TRANSITIONS
   ============================================ */

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from right */
@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply smooth transitions to interactive elements */
a, button, .btn, .card, .nav-link {
    transition: all var(--transition-base);
}


/* ============================================
   19. ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

/* Skip to main content link (for screen readers) */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}


/* ============================================
   20. PRINT STYLES
   ============================================ */

@media print {
    .navbar,
    footer,
    .btn,
    .social-links {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
    }
}


/* ============================================
   END OF CUSTOM STYLES
   
   To customize:
   1. Start by modifying the CSS variables at the top
   2. Adjust spacing, colors, and fonts to match your brand
   3. Add new sections as needed following the same pattern
   4. Keep styles organized and well-commented
   ============================================ */