/*
|--------------------------------------------------------------------------
| TAA CUSTOM STYLES (To Override LMSZai Defaults)
|--------------------------------------------------------------------------
| NOTE: This CSS must be loaded AFTER the LMSZai main CSS file (app.css)
*/

/* 1. TAA Branding Colors */
:root {
    --taa-red: #B40000; /* Primary Red (High-Contrast CTA) */
    --dark-blue: #0A1931; /* Primary Dark Blue (Foundation) */
    --light-red: #FEECEB; /* Light background for red elements */
    --light-blue: #EBF4F8; /* Light background for blue elements */
    --bg-light-blue-secondary: #e6f0ff; /* A clean, very light blue */
}

/* 2. Custom Utility Color Classes (Overriding default colors) */
.text-taa-red { color: var(--taa-red) !important; }
.bg-taa-red { background-color: var(--taa-red) !important; }
.bg-dark-blue { background-color: var(--dark-blue) !important; }
.bg-light-red { background-color: var(--light-red) !important; }
.bg-light-blue { background-color: var(--light-blue) !important; }

/* 3. Hero Slider Styles (To restore custom full-screen slider appearance) */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 650px; 
    overflow: hidden;
    padding-top: 0;
}
.hero-slide-img {
    height: 100vh;
    object-fit: cover;
}
.overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65); 
    z-index: 1;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    padding-bottom: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
    max-width: 900px;
    width: 90%; 
    color: white !important;
}
.carousel-caption h1 {
    font-size: 4.5rem;
    font-weight: 700;
}
.carousel-caption p.lead {
    font-size: 1.25rem;
}

/* --- MOBILE OVERRIDES (Max Width 768px) --- */
@media (max-width: 768px) {
    /* 1. Reduce the minimum height of the entire section */
    .hero-section {
        /* Prevents content from being pushed down off-screen on short phones */
        min-height: 400px;
        /* Use a smaller viewport height to save space if 100vh is too aggressive */
        height: 70vh; 
    }
    
    /* 2. Reposition the caption to sit higher on the screen */
    .carousel-caption {
        /* Moving the content up from 40% to 30% of the screen height */
        top: 40%; 
        /* Ensure the width remains responsive */
        width: 95%;
    }
    
    .hidmv{
        display:none !important;
    }
    
    .lead002{
        width:80%;
    }

    /* 3. Drastically reduce H1 font size and line height */
    .carousel-caption h1 {
        /* Reduce font size from 4.5rem to 2.2rem */
        font-size: 2.2rem;
        /* Tighten the line spacing (the original problem!) */
        line-height: 1.1; 
        /* Reduce top/bottom margin */
        margin: 5px 0;
    }

    /* 4. Reduce paragraph font size */
    .carousel-caption p.lead {
        /* Reduce font size from 1.25rem to 1rem */
        font-size: 1rem;
        width:80%;
    }
}


/* 4. TAA Button Reskin (Overrides to match LMSZai theme-btn) */

/* Primary CTA (theme-btn equivalent) */
.theme-btn, .theme-btn:focus {
    background-color: var(--taa-red);
    border-color: var(--taa-red);
    color: white;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(217, 48, 37, 0.3);
}
.theme-btn:hover {
    background-color: #A9261E; /* Darker Red on hover */
    border-color: #A9261E;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(217, 48, 37, 0.5);
}

/* Red Outline Button (used in dark sections like #mission) */
.theme-btn-outline-red {
    border: 2px solid var(--taa-red) !important;
    color: var(--taa-red) !important;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.3s;
    background-color: transparent !important;
}
.theme-btn-outline-red:hover {
    background-color: var(--taa-red) !important;
    color: white !important;
}

/* White Buttons for Dark Sections (CTA) */
.theme-btn-white {
    background-color: white !important;
    color: var(--taa-red) !important;
    border-color: white !important;
    font-weight: 700;
}
.theme-btn-white:hover {
    background-color: #f0f0f0 !important;
    color: var(--taa-red) !important;
}
.theme-btn-outline-white {
    border: 2px solid white !important;
    color: white !important;
    background-color: transparent !important;
}
.theme-btn-outline-white:hover {
    background-color: white !important;
    color: var(--dark-blue) !important;
    border-color: white !important;
}

/* 5. Icon/Feature Card Consistency */
.feature-card .icon-circle, .solution-card .icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    background-color: white; /* Default background for icons */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.feature-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 1rem;
    height: 100%;
    padding: 2.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 6. Mobile Responsiveness Fixes */

/* -------------------------------------- */
/* NEW: Course Card with Red Overlay Styling */
/* -------------------------------------- */

.course-card {
    /* Base styling for the card, ensuring it contains the overlay */
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    overflow: hidden;
    /* Optional: Fixed height for visual consistency */
    min-height: 250px; 
    display: flex; /* Helps align content */
    align-items: flex-end; /* Pushes content to the bottom */
}

.course-card-overlay {
    /* The overlay element */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Place above the background image */
    
    /* Overlay Color: TAA Red with 80% opacity */
    background-color: rgba(217, 48, 37, 0.4); /* Using the RGB for var(--taa-red) */
    
    /* Fallback/Transition: Ensures content is visible */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Content aligns to the bottom */
}

/* Ensure the content (h3, p, icon) is above the overlay */
.course-card-overlay > * {
    position: relative;
    z-index: 2; 
    color: white !important; /* Force all nested text elements to white */
}

/* Specific text color override for the icon, using a darker shade of red if possible
   or simply white since we're using a red overlay. 
   The original HTML used 'text-taa-red' which is likely D93025. 
   If we use D93025 on the D93025 overlay, it will disappear.
   Let's change the icon to white for contrast.
*/
.course-card-overlay i {
    color: white !important; /* Icon must be white to stand out */
}

/* Override for hover effect (optional: slightly lighten the overlay on hover) */
.course-card:hover .course-card-overlay {
    background-color: rgba(217, 48, 37, 0.4); /* Lighter red on hover */
}

/* -------------------------------------- */
/* NEW: III. INTRODUCTORY SECTION (About TAA) */
/* -------------------------------------- */

.about-taa-image-container {
    position: relative;
    /* Optional: Add a slight padding to create space for a pseudo-element border/design accent */
    padding: 1rem; 
}

.taa-intro-img {
    width: 100%;
    /* Fixed height for desktop to make columns visually even */
    height: 450px; 
    object-fit: cover;
    border-radius: 1rem !important;
}

/* Optional: Design Accent (Creates a red corner border offset from the image) */
.about-taa-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background-color: transparent;
    border-right: 10px solid var(--taa-red);
    border-bottom: 10px solid var(--taa-red);
    border-radius: 0 0 1rem 0;
    z-index: 0;
}

/* Responsive adjustment for mobile */
@media (max-width: 992px) {
    .taa-intro-img {
        height: 350px; /* Shorter image height on tablets/mobile */
    }
    .about-taa-image-container::after {
        display: none; /* Hide the design accent on mobile */
    }
    /* Reverse the order on smaller screens for better flow: text then image */
    .row {
        flex-direction: column-reverse; 
    }
}

/* Custom styles for the countdown display */
    
    /* FIX 1 & 2: AGGRESSIVE BACKGROUND AND TEXT COLOR OVERRIDE */
   
   .ititbg{
            background-color: #F8F6F0!important;
            color: var(--taa-red) !important;
        }
        
        /* Ensure all text within the red section is white */
        #itit-countdown, 
        #itit-countdown h2, 
        #itit-countdown h3, 
        #itit-countdown p, 
        #itit-countdown strong,
        #itit-countdown .lead {
            color: white !important; /* Force all text elements white */
        }
        
        /* FIX 3: ENLARGED DIGITS */
        .countdown-unit {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 100px;
        }

        .countdown-digit {
            font-size: 5rem !important; /* FORCED LARGE SIZE */
            font-weight: 900;
            line-height: 1;
            padding: 0.5rem 0.25rem;
            background-color: white; 
            color: var(--taa-red) !important; /* Use the TAA Red variable */
            border-radius: 0.75rem; 
            width: 100%;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); 
            transition: all 0.3s ease;
        }

        .countdown-label {
            margin-top: 0.5rem;
            font-size: 0.9rem;
            text-transform: uppercase;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8) !important;
        }

        /* Adjust layout for smaller screens */
        @media (max-width: 576px) {
            .countdown-unit {
                min-width: 75px;
            }
            .countdown-digit {
                font-size: 2.75rem !important; /* Adjusted for mobile view */
            }
        }
        
        /* Styling for the Expired Message (hidden by default) */
        #expired-message {
            background-color: white;
            color: var(--taa-red); /* Use the TAA Red variable for text */
            padding: 1.5rem;
            border-radius: 0.75rem;
            font-size: 1.25rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        
        /* Custom button styling (using Tailwind classes for simplicity) */
        .theme-btn-white {
            background-color: white;
            color: var(--taa-red); /* Use the TAA Red variable for text */
            border: 2px solid white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .theme-btn-white:hover {
            background-color: #f0f0f0;
        }
    
    /* -------------------------------------- */
/* NEW: Mandate Section Icon Styling */
/* -------------------------------------- */
.taa-mandate-card {
    transition: transform 0.3s, box-shadow 0.3s;
}

.taa-mandate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.icon-circle-red-accent {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-red); /* Very light red background */
    color: var(--taa-red); /* Red icon color */
}

/* -------------------------------------- */
/* DEFINITIVE FIX: Leadership Card Styling */
/* -------------------------------------- */

.leader-card {
    overflow: hidden !important; /* Forces the image and content to stay within the rounded borders */
    transition: transform 0.3s, box-shadow 0.3s;
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

/* THE ABSOLUTE FIX: Enforce Image Sizing and Containment */
.leader-photo {
    width: 100% !important; 
    height: 250px !important; /* Consistent height for uniformity */
    object-fit: cover !important; /* Crucial: Ensures the image fills the area without distortion or overflow */
    display: block;
}

/* General Styles (Included for completeness) */
.bg-charcoal-black {
    background-color: #1A1A1A !important;
}

.social-links a {
    font-size: 1.1rem;
    color: var(--dark-blue);
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--taa-red);
}

.theme-btn-lg {
    padding: 0.75rem 2rem !important;
    font-size: 1.1rem !important;
}

/* -------------------------------------- */
/* DEFINITIVE FIX: Leadership Card Spacing, Image, and Alignment */
/* -------------------------------------- */

.bg-charcoal-black {
    background-color: #1A1A1A !important;
}

/* 1. IMAGE AND CARD CONTAINMENT */
.leader-card {
    /* Guarantees the card stays contained and centered */
    margin: 0 auto; 
    overflow: hidden !important; 
    transition: transform 0.3s, box-shadow 0.3s;
}

.leader-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

.leader-photo {
    width: 100% !important; 
    height: 250px !important; 
    object-fit: cover !important; 
    display: block;
}

/* 2. SPACING OVERRIDE (Desktop/Laptop View Only) */
@media (min-width: 992px) {
    
    /* A. FORCE HORIZONTAL SPACE (LEFT/RIGHT) */
    /* We force space onto the COLUMNS which wrap the cards */
    #leadership .col-lg-4 {
        /* This ensures 30px of space between each card (15px from the right of one, 15px from the left of the next) */
        padding-left: 15px !important; 
        padding-right: 15px !important;
        
        /* Ensure the container is aligned and has vertical spacing */
        margin-bottom: 30px !important; 
        
        /* Ensure the row is not eating space */
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
    }
    
    /* B. FORCE ROW MARGINS TO COMPENSATE */
    /* We must reset the row margin to compensate for the padding added to the columns */
    #leadership .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
        /* Ensure the row grows to accommodate content */
        width: calc(100% + 30px) !important;
    }
}


/* --- Other necessary styles (Ensure these are present) --- */
.theme-btn-lg {
    padding: 0.75rem 2rem !important;
    font-size: 1.1rem !important;
}

.social-links a {
    font-size: 1.1rem;
    color: var(--dark-blue);
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--taa-red);
}

/* Media Query for mobile devices (screens 768px wide or less) */
@media (max-width: 768px) {
    /* Target the H1 element inside your slider/header area */
    h1 {
        /* Reduce the space between lines (line-height) */
        line-height: 1.1em !important;
        /* Reduce the overall font size so less space is needed */
        font-size: 1.8em !important;
    }
}
.carousel-control-prev,
.carousel-control-next {
   
    z-index: 100 !important; 
   
}