/*
    Copyright MyEkonomy.com 2025
    
    Index page specific CSS styles
    - Landing page specific styling
    - Hero section styling
    - Carousel and card styling
    - Dark/light mode support for index page
*/

/* Index page specific styles */
/* Note: Most styling is handled by styles-common.css which is shared */

/* Hero section specific styling */
.hero-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
}

.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Carousel specific styling */
.card-carousel {
    margin: 2rem 0;
}

.carousel-item {
    transition: all 0.3s ease;
}

/* Card styling for index page */
.card-bg-expenses {
    background-image: url('../img/caraousel/high_res/Indian_Man_Wondering_Expenses.jpeg');
    background-size: cover;
    background-position: center;
}

.card-bg-expense-tracking {
    background-image: url('../img/caraousel/high_res/Track_Expenses.png');
    background-size: cover;
    background-position: center;
}

.card-bg-goal-setting {
    background-image: url('../img/caraousel/high_res/Indian_Man_Thinking_Retirement.jpeg');
    background-size: cover;
    background-position: center;
}

.card-bg-debt-management {
    background-image: url('../img/caraousel/high_res/Indian_Man_Thinking_House.jpeg');
    background-size: cover;
    background-position: center;
}

.card-bg-investment-overview {
    background-image: url('../img/caraousel/high_res/Indian_Man_Invested_Right_Funds.jpeg');
    background-size: cover;
    background-position: center;
}

/* Card overlay for better text readability */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.75rem;
}

.card-content {
    position: relative;
    z-index: 1;
    color: white;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Modal styling for login/signup */
.modal-custom {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal-content-custom {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.dark-mode .modal-content-custom {
    background-color: #1e1e1e;
    color: #ffffff;
}

/* Tab styling for login/signup modal */
.tab-button {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.tab-button.active {
    border-bottom-color: #0d6efd;
    color: #0d6efd;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Social login buttons */
.social-login-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.google-btn {
    background-color: #db4437;
    color: white;
}

.apple-btn {
    background-color: #000000;
    color: white;
}

.twitter-btn {
    background-color: #1da1f2;
    color: white;
}

.facebook-btn {
    background-color: #4267b2;
    color: white;
}

.social-login-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Close button for modal */
.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    transition: color 0.3s ease;
}

.close-button:hover {
    color: #dc3545;
}

/* All header text colors - change to #6b21a8 with higher specificity */
header * {
    color: #6b21a8 !important;
}

/* Header navigation link colors with higher specificity to override common.css */
body header .nav-link,
body:not(.dark-mode) header.bg-dark .nav-link,
body.dark-mode header.bg-dark .nav-link {
    color: #6b21a8 !important;
}

body header .nav-link:hover,
body:not(.dark-mode) header.bg-dark .nav-link:hover,
body.dark-mode header.bg-dark .nav-link:hover {
    color: #8b5cf6 !important; /* Slightly lighter purple on hover */
}

/* Ensure header nav links are visible on dark background */
body header .navbar-nav .nav-link,
body:not(.dark-mode) header.bg-dark .navbar-nav .nav-link,
body.dark-mode header.bg-dark .navbar-nav .nav-link {
    color: #6b21a8 !important;
    font-weight: 500 !important;
}

body header .navbar-nav .nav-link:hover,
body:not(.dark-mode) header.bg-dark .navbar-nav .nav-link:hover,
body.dark-mode header.bg-dark .navbar-nav .nav-link:hover {
    color: #8b5cf6 !important;
}

/* Target specific header navigation elements */
body header .navbar .nav-link,
body:not(.dark-mode) header.bg-dark .navbar .nav-link,
body.dark-mode header.bg-dark .navbar .nav-link {
    color: #6b21a8 !important;
}

body header .navbar .nav-link:hover,
body:not(.dark-mode) header.bg-dark .navbar .nav-link:hover,
body.dark-mode header.bg-dark .navbar .nav-link:hover {
    color: #8b5cf6 !important;
}

/* Target all text elements in header */
body header span,
body header button,
body header a,
body header .navbar-brand,
body header .text-white,
body header .btn {
    color: #6b21a8 !important;
}

/* Button text colors in header */
body header .btn-outline-secondary,
body header .btn-outline-light,
body header .btn-outline-danger,
body header .btn-success {
    color: #6b21a8 !important;
}

/* User greeting text */
body header #user-greeting {
    color: #6b21a8 !important;
}

/* Dark mode toggle icon */
body header .dark-mode-icon {
    color: #6b21a8 !important;
}

/* Responsive adjustments for index page */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .modal-content-custom {
        width: 95%;
        padding: 1.5rem;
    }
    
    .card-content {
        padding: 1rem;
    }
}