/* ===== INDEX PAGE ENHANCEMENTS ===== */

/* Override any conflicting styles */
body {
    background: #f8fffe !important;
    font-family: "Inter", sans-serif !important;
}

/* Ensure header is always on top */
.professional-header {
    z-index: 9999 !important;
}

/* Fix any Bootstrap conflicts */
.hero-section .container-fluid,
.hero-section .container {
    max-width: none !important;
    padding: 0 !important;
}

/* Ensure proper spacing */
.hero-section {
    margin-top: 0 !important;
    padding-top: 120px !important;
}

/* Enhanced navbar spacing */
.nav-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
    max-width: 1400px !important;
    justify-content: space-between !important;
}

.nav-menu {
    justify-content: space-between !important;
    gap: 60px !important;
    flex: 1 !important;
    max-width: 800px !important;
    margin-left: auto !important;
}

.nav-links {
    gap: 40px !important;
    justify-content: center !important;
    flex: 1 !important;
}

/* Hero content spacing */
.hero-container {
    gap: 80px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.hero-badge {
    margin-bottom: 30px !important;
}

.hero-title {
    margin-bottom: 24px !important;
}

/* Floating cards positioning - Desktop only */
@media (min-width: 1025px) {
    .hero-visual {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Hide on tablets and mobile */
@media (max-width: 1024px) {
    .hero-visual {
        display: none !important;
    }
    
    .floating-card {
        display: none !important;
    }
}

.floating-card {
    gap: 15px !important;
}

.card-icon {
    flex-shrink: 0 !important;
}

.card-content p {
    margin: 0 !important;
}

/* Trust indicators */
.trust-indicators {
    display: flex !important;
    gap: 30px !important;
    margin-top: 20px !important;
}

.trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.trust-item i {
    display: inline-block !important;
    color: #007b5d !important;
    font-size: 18px !important;
}

/* Categories section spacing */
.categories-section {
    margin-top: 80px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.categories-grid {
    padding: 30px 0 !important;
}

/* Fix carousel indicators */
.carousel-indicators {
    position: static !important;
    margin: 20px 0 !important;
    justify-content: center !important;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #007b5d !important;
    border: none !important;
    margin: 0 5px !important;
    opacity: 0.5 !important;
}

.carousel-indicators button.active {
    opacity: 1 !important;
}

/* Enhanced button styles */
.btn-primary {
    background: #007b5d !important;
    border-color: #007b5d !important;
    color: white !important;
}

.btn-primary:hover {
    background: #005e46 !important;
    border-color: #005e46 !important;
    color: white !important;
}

.btn-secondary {
    background: transparent !important;
    border-color: #007b5d !important;
    color: #007b5d !important;
}

.btn-secondary:hover {
    background: #007b5d !important;
    border-color: #007b5d !important;
    color: white !important;
}

/* Teacher card buttons */
.btn-trial {
    background: #007b5d !important;
    color: white !important;
    border: 1px solid #007b5d !important;
}

.btn-trial:hover {
    background: #005e46 !important;
    border-color: #005e46 !important;
    color: white !important;
}

.btn-profile {
    background: transparent !important;
    color: #007b5d !important;
    border: 1px solid #007b5d !important;
}

.btn-profile:hover {
    background: #007b5d !important;
    border-color: #007b5d !important;
    color: white !important;
}

/* Ensure links inside buttons keep proper color */
a.btn-trial,
a.btn-trial:visited {
    color: white !important;
}

a.btn-trial:hover,
a.btn-trial:active,
a.btn-trial:focus {
    color: white !important;
}

a.btn-profile,
a.btn-profile:visited {
    color: #007b5d !important;
}

a.btn-profile:hover,
a.btn-profile:active,
a.btn-profile:focus {
    color: white !important;
}

/* Fix any text color issues */
.text-dark {
    color: #333 !important;
}

.text-muted {
    color: #666 !important;
}

/* Ensure proper link colors */
a {
    color: #007b5d;
    text-decoration: none;
}

a:hover {
    color: #005e46;
    text-decoration: none;
}

/* Fix any margin/padding issues */
.section {
    margin: 0 !important;
    padding: 80px 0 !important;
}

/* Ensure proper image sizing */
img {
    max-width: 100%;
    height: auto;
}

/* Fix any overflow issues */
.container,
.container-fluid {
    overflow-x: hidden;
}

/* Enhanced focus states for accessibility */
button:focus,
input:focus,
a:focus {
    outline: 2px solid #007b5d;
    outline-offset: 2px;
}

/* Loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #007b5d;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Print styles */
@media print {
    .professional-header,
    .mobile-menu-overlay,
    .floating-card {
        display: none !important;
    }
    
    .hero-section {
        padding-top: 20px !important;
    }
    
    body {
        background: white !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero-section {
        background: white !important;
    }
    
    .stat-card,
    .teacher-card-enhanced,
    .step-card {
        border: 2px solid #000 !important;
    }
    
    .category-tag,
    .subject-tag {
        border: 1px 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;
    }
    
    .floating-card {
        animation: none !important;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

/* Fix for older browsers */
.hero-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

@supports not (display: grid) {
    .stats-grid,
    .teachers-grid,
    .steps-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .stat-card,
    .teacher-card-enhanced,
    .step-card {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 300px;
        flex: 1 1 300px;
        margin: 10px;
    }
}

/* Internet Explorer fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .hero-container {
        display: -ms-flexbox;
        flex-direction: column;
        -ms-flex-direction: column;
    }
    
    .nav-container {
        display: -ms-flexbox;
        -ms-flex-pack: justify;
        -ms-flex-align: center;
    }
}

/* Safari fixes */
@supports (-webkit-appearance: none) {
    .search-input {
        appearance: none;
        -webkit-appearance: none;
    }
    
    .btn-trial,
    .btn-profile,
    .btn-signup,
    .btn-signin {
        appearance: none;
        -webkit-appearance: none;
    }
}

/* Firefox fixes */
@-moz-document url-prefix() {
    .floating-card {
        animation-fill-mode: both;
    }
}

/* Edge fixes */
@supports (-ms-ime-align: auto) {
    .hero-visual {
        position: relative;
        overflow: hidden;
    }
}

/* Additional responsive fixes */
@media (max-width: 1200px) {
    .hero-container {
        max-width: 100%;
        padding: 0 30px !important;
        gap: 60px !important;
    }
    
    .nav-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    .categories-section {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 992px) {
    .section-header {
        padding: 0 20px;
    }
    
    .stats-container,
    .section-container {
        padding: 0 20px;
    }
    
    .nav-links {
        gap: 25px !important;
    }
    
    .nav-menu {
        gap: 40px !important;
    }
}

@media (max-width: 768px) {
    .hero-container {
        padding: 0 20px !important;
        gap: 40px !important;
    }
    
    .nav-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .categories-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-top: 60px !important;
    }
    
    .categories-grid {
        padding: 20px 0 !important;
    }
}

@media (max-width: 576px) {
    .hero-container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 24px !important;
        line-height: 1.3;
    }
    
    .hero-description {
        font-size: 14px !important;
    }
    
    .search-container {
        padding: 10px !important;
    }
    
    .search-input {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .search-btn {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}

/* Landscape phone fixes */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 100px 0 40px !important;
    }
    
    .hero-title {
        font-size: 28px !important;
    }
    
    .floating-card {
        display: none;
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .hero-title {
        font-size: 20px !important;
    }
    
    .trust-indicators {
        flex-direction: column;
        align-items: center;
        gap: 10px !important;
    }
    
    .suggestion-tags {
        justify-content: center;
    }
}

/* Ensure smooth transitions */
* {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Fix any z-index issues */
.carousel {
    z-index: 1;
}

.dropdown-menu {
    z-index: 1000;
}

.modal {
    z-index: 1050;
}

.tooltip {
    z-index: 1070;
}

.popover {
    z-index: 1080;
}