/**
 * roclub Custom Theme for Bootstrap 5
 *
 * Custom color palette, button styles, alerts, and utilities
 * following roclub brand guidelines and accessibility standards.
 *
 * Brand Colors: Navy (#201C57), Bright Blue (#4F7CF7)
 */

/* ===================================
   CSS Custom Properties
   =================================== */

:root {
    /* Primary Brand Colors */
    --roclub-navy: #201C57;
    --roclub-blue: #4F7CF7;
    --roclub-light: #eef7fe;

    /* Semantic Colors */
    --roclub-success: #10b981;
    --roclub-warning: #f59e0b;
    --roclub-error: #ef4444;
    --roclub-gray: #4b4b4b;

    /* Lighter tints for backgrounds */
    --roclub-navy-light: #f0f0f9;
    --roclub-blue-light: #f0f6ff;
    --roclub-success-light: #f0fdf4;
    --roclub-warning-light: #fffbeb;
    --roclub-error-light: #fef2f2;
}

/* ===================================
   Base Typography
   =================================== */

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--roclub-navy);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--roclub-navy);
}

/* ===================================
   Background Utilities
   =================================== */

.bg-roclub-light {
    background: linear-gradient(135deg, #f8f9fa 0%, var(--roclub-light) 100%);
    min-height: 100vh;
}

.bg-roclub-navy {
    background-color: var(--roclub-navy) !important;
    color: white !important;
}

.bg-roclub-blue {
    background-color: var(--roclub-blue) !important;
    color: white !important;
}

/* ===================================
   Text Color Utilities
   =================================== */

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

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

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

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

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

/* ===================================
   Custom Button Styles
   =================================== */

/* Navy Button - Primary brand action */
.btn-roclub-navy {
    background: linear-gradient(135deg, var(--roclub-navy) 0%, var(--roclub-blue) 100%);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-roclub-navy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--roclub-blue) 0%, var(--roclub-navy) 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.btn-roclub-navy:hover {
    background: linear-gradient(135deg, var(--roclub-blue) 0%, var(--roclub-navy) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -5px rgba(79, 124, 247, 0.4);
}

.btn-roclub-navy:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px -5px rgba(79, 124, 247, 0.3);
}

.btn-roclub-navy:focus-visible {
    outline: 3px solid var(--roclub-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(79, 124, 247, 0.25);
}

/* Blue Button - Secondary brand action */
.btn-roclub-blue {
    background-color: var(--roclub-blue);
    border: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-roclub-blue:hover {
    background-color: #3d68e6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(79, 124, 247, 0.5);
}

.btn-roclub-blue:active {
    background-color: #2e57d5;
    transform: translateY(0);
}

.btn-roclub-blue:focus-visible {
    outline: 3px solid var(--roclub-navy);
    outline-offset: 2px;
}

/* Navy Outline Button */
.btn-outline-roclub-navy {
    color: var(--roclub-navy);
    border: 2px solid var(--roclub-navy);
    background-color: transparent;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-roclub-navy:hover {
    background-color: var(--roclub-navy);
    border-color: var(--roclub-navy);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -5px rgba(32, 28, 87, 0.3);
}

.btn-outline-roclub-navy:active {
    background-color: #1a1644;
    border-color: #1a1644;
    transform: translateY(0);
}

.btn-outline-roclub-navy:focus-visible {
    outline: 3px solid var(--roclub-blue);
    outline-offset: 2px;
}

/* Blue Outline Button */
.btn-outline-roclub-blue {
    color: var(--roclub-blue);
    border: 2px solid var(--roclub-blue);
    background-color: transparent;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-roclub-blue:hover {
    background-color: var(--roclub-blue);
    border-color: var(--roclub-blue);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -5px rgba(79, 124, 247, 0.3);
}

.btn-outline-roclub-blue:active {
    background-color: #2e57d5;
    border-color: #2e57d5;
    transform: translateY(0);
}

.btn-outline-roclub-blue:focus-visible {
    outline: 3px solid var(--roclub-navy);
    outline-offset: 2px;
}

/* ===================================
   Custom Alert Components
   =================================== */

/* Success Alert */
.alert-roclub-success {
    background-color: var(--roclub-success-light);
    border-left: 4px solid var(--roclub-success);
    border-radius: 8px;
    color: var(--roclub-success);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.alert-roclub-success .btn-close {
    filter: brightness(0.6);
}

/* Error Alert */
.alert-roclub-error {
    background-color: var(--roclub-error-light);
    border-left: 4px solid var(--roclub-error);
    border-radius: 8px;
    color: var(--roclub-error);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.alert-roclub-error .btn-close {
    filter: brightness(0.6);
}

/* Warning Alert */
.alert-roclub-warning {
    background-color: var(--roclub-warning-light);
    border-left: 4px solid var(--roclub-warning);
    border-radius: 8px;
    color: #b45309;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.alert-roclub-warning .btn-close {
    filter: brightness(0.6);
}

/* Info/Navy Alert */
.alert-roclub-navy {
    background-color: var(--roclub-navy-light);
    border-left: 4px solid var(--roclub-navy);
    border-radius: 8px;
    color: var(--roclub-navy);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.alert-roclub-navy .btn-close {
    filter: brightness(0.6);
}

/* Blue Alert */
.alert-roclub-blue {
    background-color: var(--roclub-blue-light);
    border-left: 4px solid var(--roclub-blue);
    border-radius: 8px;
    color: var(--roclub-blue);
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem 1.25rem;
}

.alert-roclub-blue .btn-close {
    filter: brightness(0.6);
}

/* ===================================
   Custom Card Styles
   =================================== */

.card-roclub {
    border-radius: 24px;
    border: none;
    box-shadow:
        0 4px 6px -1px rgba(32, 28, 87, 0.05),
        0 20px 50px -10px rgba(79, 124, 247, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-roclub:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 12px -2px rgba(32, 28, 87, 0.08),
        0 25px 60px -10px rgba(79, 124, 247, 0.2);
}

/* ===================================
   Badge Styles
   =================================== */

.badge-roclub-navy {
    background-color: var(--roclub-navy);
    color: white;
    font-weight: 600;
}

.badge-roclub-blue {
    background-color: var(--roclub-blue);
    color: white;
    font-weight: 600;
}

.badge-roclub-success {
    background-color: var(--roclub-success);
    color: white;
    font-weight: 600;
}

/* ===================================
   Spinner Customization
   =================================== */

.spinner-border.text-roclub-blue {
    color: var(--roclub-blue) !important;
}

.spinner-border.text-roclub-navy {
    color: var(--roclub-navy) !important;
}

/* ===================================
   Form Validation with roclub Colors
   =================================== */

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--roclub-success);
    background-image: none;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--roclub-success);
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--roclub-error);
    background-image: none;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--roclub-error);
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

.valid-feedback {
    color: var(--roclub-success);
}

.invalid-feedback {
    color: var(--roclub-error);
}

/* ===================================
   Link Styles
   =================================== */

a {
    color: var(--roclub-blue);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--roclub-navy);
}

a:focus-visible {
    outline: 2px solid var(--roclub-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===================================
   Accessibility Enhancements
   =================================== */

/* Focus indicators for all interactive elements */
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--roclub-blue);
    outline-offset: 2px;
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--roclub-navy);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* ===================================
   Alert Details Styling
   =================================== */

details summary {
    cursor: pointer;
    user-select: none;
}

details summary:hover {
    text-decoration: underline;
}

details pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
}

/* ===================================
   Utility Classes
   =================================== */

/* Font Weight Utilities */
.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* Transition Utilities */
.transition-all {
    transition: all 0.3s ease;
}

/* Shadow Utilities */
.shadow-roclub {
    box-shadow: 0 10px 30px -10px rgba(79, 124, 247, 0.2) !important;
}

.shadow-roclub-lg {
    box-shadow: 0 20px 60px -15px rgba(79, 124, 247, 0.3) !important;
}

/* ===================================
   Animations
   =================================== */

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

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===================================
   Responsive Adjustments
   =================================== */

@media (max-width: 768px) {
    .card-roclub {
        border-radius: 16px;
    }

    h1, .display-4 {
        font-size: 2rem !important;
    }
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .bg-roclub-light {
        background: white !important;
    }

    .card-roclub {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}