/* Harding Academy Custom CSS */

/* Navigation Hover States - Use Secondary Blue Color */
@media (min-width: 992px) {
    /* Header nav main links hover state */
    #header .header-nav .header-nav-main nav > ul > li:hover > a,
    #header .header-nav .header-nav-main nav > ul > li.open > a {
        color: var(--secondary) !important;
    }

    /* Nav pills hover state for Bootstrap nav-pills */
    #header .header-nav .header-nav-main nav > ul.nav-pills > li:hover > .nav-link,
    #header .header-nav .header-nav-main nav > ul.nav-pills > li > .nav-link:hover {
        color: var(--secondary) !important;
        background-color: transparent !important;
    }

    /* Header nav links specific styling */
    #header .header-nav.header-nav-links nav > ul > li:hover > a,
    #header .header-nav.header-nav-links nav > ul > li > a:hover {
        color: var(--secondary) !important;
    }

    /* Override primary color hover effects */
    #header .header-nav-main nav > ul > li > a:hover,
    #header .header-nav-main nav > ul > li:hover > a {
        color: var(--secondary) !important;
    }

    /* Additional specificity for nav-link class */
    #header .nav-pills .nav-link:hover,
    #header .nav-pills .nav-link:focus {
        color: var(--secondary) !important;
        background-color: transparent !important;
    }

    /* Dropdown menu item styling */
    #header .dropdown-menu .dropdown-item:hover,
    #header .dropdown-menu .dropdown-item:focus {
        color: var(--secondary) !important;
    }
}

/* Mobile hamburger button styling - change from yellow to secondary blue */
.header-btn-collapse-nav {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--secondary-inverse) !important;
}

/* Mobile hamburger button hover/focus/active states */
.header-btn-collapse-nav:hover,
.header-btn-collapse-nav:focus,
.header-btn-collapse-nav:active {
    background-color: var(--secondary-100) !important;
    border-color: var(--secondary-100) !important;
    color: var(--secondary-inverse) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 74, 173, 0.25) !important;
}

/* Override text-color-hover-primary to use light blue instead of yellow */
.text-color-hover-primary:hover {
    color: #002C69 !important;
}

/* Feature Box Styling - Green Background */
.feature-box-primary .feature-box-icon {
    background-color: #FFFFFF !important; /* Bootstrap success green */
}

/* WhatsApp Icon Styling */
.whatsapp-icon {
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
    /* Ensure the icon is visible by removing filters that might cause issues */
    filter: none !important;
}

/* For SVG icons in feature boxes, ensure they're visible */
.feature-box-icon img,
.feature-box-icon picture img {
    max-width: 100%;
    height: auto;
}

/* Full-time page link styling */
/* Programs navigation sidebar links */
.nav-list .nav-link:hover,
.nav-list .nav-link:focus {
    color: var(--secondary) !important;
}

/* Breadcrumb links */
.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--secondary) !important;
}

/* Responsive text sizing for Parallax social media section */
@media (max-width: 767.98px) {
    #this .fs-5 {
        font-size: 0.875rem !important; /* smaller than fs-6 */
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--secondary);
    color: var(--secondary-inverse);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 9999;
    font-weight: bold;
    transition: top 0.3s;
    opacity: 0;
    visibility: hidden;
}

.skip-link:focus {
    top: 6px;
    opacity: 1;
    visibility: visible;
}

/* Enhanced focus indicators */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.nav-link:focus,
.btn:focus {
    outline: 3px solid var(--secondary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.3) !important;
}

/* High contrast focus for dark backgrounds */
.bg-dark a:focus,
.bg-dark button:focus,
.bg-primary a:focus,
.bg-primary button:focus {
    outline: 3px solid #FFE066 !important;
    box-shadow: 0 0 0 3px rgba(255, 224, 102, 0.5) !important;
}

/* Remove focus outline for mouse users, keep for keyboard users */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Enhanced button and link states - only for specific elements */
.btn:hover:not(.btn-close):not(.btn-with-arrow-solid),
.header-btn-collapse-nav:hover {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Screen reader only text */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-color-hover-primary:hover {
        color: #000080 !important; /* Darker blue for high contrast */
    }

    .header-btn-collapse-nav {
        border: 2px solid #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover:not(.btn-close):not(.btn-with-arrow-solid),
    .header-btn-collapse-nav:hover {
        transform: none !important;
    }
}

/* Enhanced text contrast */
.text-muted {
    color: #495057 !important; /* Darker muted text for better contrast */
}

/* Ensure minimum touch target size for mobile */
@media (max-width: 767.98px) {
    .btn,
    .nav-link {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    /* Only apply to interactive buttons and navigation, not all links */
    .header-btn-collapse-nav,
    .btn-close {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Improved error and validation states */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.invalid-feedback {
    color: #dc3545 !important;
    font-weight: bold !important;
}

/* Enhanced table accessibility */
table {
    border-collapse: collapse !important;
}

th {
    background-color: #f8f9fa !important;
    font-weight: bold !important;
}

/* FAQ Section Contrast Improvements */
.toggle-faqs .toggle-content {
    color: #212529 !important; /* Dark text for better contrast on light gray background */
}

.toggle-faqs .toggle-content p,
.toggle-faqs .toggle-content li {
    color: #212529 !important; /* Ensure all text content has good contrast */
}

/* Print styles for accessibility */
@media print {
    .no-print {
        display: none !important;
    }

    a[href]:after {
        content: " (" attr(href) ")" !important;
    }
}