/**
 * St. Julian Sports Academy - Main CSS
 * 
 * Main styles with St. Julian colors and design system
 */

:root {
    --primary-orange: #f34e21;    /* St. Julian brand color */
    --dark-charcoal: #231f1e;     /* Text and headers */
    --deep-purple: #312f92;       /* Accent and secondary elements */
    --light-gray: #f8f9fa;        /* Background */
    --medium-gray: #6c757d;       /* Secondary text */
    --dark-gray: #495057;         /* Body text */
    --success-green: #28a745;     /* Success states */
    --warning-yellow: #ffc107;    /* Warning states */
    --danger-red: #dc3545;        /* Error states */
    --info-blue: #17a2b8;         /* Info states */
}

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-charcoal);
    font-weight: 600;
}

/* White headings for dark backgrounds */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
section[style*="background"] h1, section[style*="background"] h2, section[style*="background"] h3, 
section[style*="background"] h4, section[style*="background"] h5, section[style*="background"] h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6 {
    color: white !important;
}

/* Specific override for sections with gradient backgrounds */
section[style*="linear-gradient"] h1, section[style*="linear-gradient"] h2, 
section[style*="linear-gradient"] h3, section[style*="linear-gradient"] h4, 
section[style*="linear-gradient"] h5, section[style*="linear-gradient"] h6 {
    color: white !important;
}

/* Display class font sizes - clean approach */
.display-1,
.display-4,
.display-5 {
    font-size: 2.2rem !important;
}

/* Button font sizes - clean approach */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-sm,
.btn-lg {
    font-size: 1rem !important;
}

/* More targeted approach for Bootstrap RFS override */
h1.display-1,
h1.display-4,
h1.display-5,
h2.display-1,
h2.display-4,
h2.display-5,
h3.display-1,
h3.display-4,
h3.display-5,
h4.display-1,
h4.display-4,
h4.display-5,
h5.display-1,
h5.display-4,
h5.display-5,
h6.display-1,
h6.display-4,
h6.display-5 {
    font-size: 2.2rem !important;
}

/* Target specific button contexts */
.navbar .btn,
.navbar .btn-primary,
.navbar .btn-secondary,
.navbar .btn-success,
.navbar .btn-danger,
.navbar .btn-warning,
.navbar .btn-info,
.navbar .btn-light,
.navbar .btn-dark,
.navbar .btn-outline-primary,
.navbar .btn-outline-secondary,
.navbar .btn-outline-success,
.navbar .btn-outline-danger,
.navbar .btn-outline-warning,
.navbar .btn-outline-info,
.navbar .btn-outline-light,
.navbar .btn-outline-dark {
    font-size: 1rem !important;
}

/* Target display classes in specific contexts */
.container .display-1,
.container .display-4,
.container .display-5,
.row .display-1,
.row .display-4,
.row .display-5,
.col .display-1,
.col .display-4,
.col .display-5 {
    font-size: 2.2rem !important;
}

/* Maximum specificity for display classes */
body .container .display-1,
body .container .display-4,
body .container .display-5,
body .row .display-1,
body .row .display-4,
body .row .display-5,
body .col .display-1,
body .col .display-4,
body .col .display-5,
body .navbar .display-1,
body .navbar .display-4,
body .navbar .display-5,
body .card .display-1,
body .card .display-4,
body .card .display-5,
body .section .display-1,
body .section .display-4,
body .section .display-5 {
    font-size: 2.2rem !important;
}

/* Maximum specificity for buttons */
body .navbar .btn,
body .navbar .btn-primary,
body .navbar .btn-secondary,
body .navbar .btn-success,
body .navbar .btn-danger,
body .navbar .btn-warning,
body .navbar .btn-info,
body .navbar .btn-light,
body .navbar .btn-dark,
body .navbar .btn-outline-primary,
body .navbar .btn-outline-secondary,
body .navbar .btn-outline-success,
body .navbar .btn-outline-danger,
body .navbar .btn-outline-warning,
body .navbar .btn-outline-info,
body .navbar .btn-outline-light,
body .navbar .btn-outline-dark,
body .container .btn,
body .container .btn-primary,
body .container .btn-secondary,
body .container .btn-success,
body .container .btn-danger,
body .container .btn-warning,
body .container .btn-info,
body .container .btn-light,
body .container .btn-dark,
body .container .btn-outline-primary,
body .container .btn-outline-secondary,
body .container .btn-outline-success,
body .container .btn-outline-danger,
body .container .btn-outline-warning,
body .container .btn-outline-info,
body .container .btn-outline-light,
body .container .btn-outline-dark {
    font-size: 1rem !important;
}

/* Header Styles */
.navbar {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark-charcoal) !important;
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 80px;
    margin-right: 10px;
}

.navbar-brand:hover {
    color: var(--primary-orange) !important;
}

.navbar-nav .nav-link {
    color: var(--dark-charcoal) !important;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin: 0 0.2rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-orange) !important;
    background-color: rgba(243, 78, 33, 0.1);
}

/* Additional spacing for navbar items */
.navbar-nav .nav-item {
    margin: 0 0.3rem;
}

/* Dropdown Styles */
.dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.dropdown-item {
    color: var(--dark-charcoal);
    font-weight: 500;
    padding: 0.8rem 1.5rem;
    transition: all 0.3s ease;
    margin: 0.1rem 0;
}

.dropdown-item:hover {
    background-color: rgba(243, 78, 33, 0.1);
    color: var(--primary-orange);
}

/* Button Styles */
.btn-primary {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    border-radius: 6px;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #e03d1a;
    border-color: #e03d1a;
    transform: translateY(-1px);
}

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

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

/* Primary Orange Button */
.btn-primary-orange {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary-orange:hover {
    background-color: #e03d1a;
    border-color: #e03d1a;
    color: white;
    transform: translateY(-1px);
}

/* Card Styles */
.card {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}

/* Form Styles */
.form-control {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    font-size: 16px;
}

.form-control:focus {
    border-color: var(--primary-orange);
    box-shadow: 0 0 0 0.2rem rgba(243, 78, 33, 0.25);
}

/* Utility Classes */
.text-primary-orange {
    color: var(--primary-orange) !important;
}

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

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

/* Footer Styles */
footer a:hover {
    color: var(--primary-orange) !important;
    transition: color 0.3s ease;
}

footer .social-links a:hover {
    color: var(--primary-orange) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

footer .text-light:hover {
    color: var(--primary-orange) !important;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    .navbar-brand img {
        height: 60px;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: #f8f9fa;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 50px;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
}

/* Ensure proper spacing for fixed header */
body {
    padding-top: 100px;
}

/* Container max width */
.container {
    max-width: 1100px;
}