@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*-----------Header1, topheader.jsp, ((logo, cart, login))-----------------*/

/* =======================================================
 * MOBILE FIXED HEADER (CSS ONLY LAYOUT)
 * Combines Logo, Cart, and Menu into a single sticky bar.
 * Includes "Nuclear" fixes for background colors.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. BODY PADDING (Prevent Content Hiding) */
    /* Pushes content down so the fixed bar doesn't cover it */
    body {
        padding-top: 70px !important;
    }

    /* 2. THE BAR (Header 3 Wrapper) */
    /* Transforms the menu container into the main fixed white bar */
    /* Selector 'body #' used to win specificity wars */
    body #header3Wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px; 
        
        /* --- NUCLEAR BACKGROUND FIX --- */
        /* 1. Shorthand 'background' resets image/color/repeat at once */
        background: #f0f0f0 !important; 
        /* 2. Explicitly remove any background image */
        background-image: none !important; 
        
        /* 3. Remove default red border */
        border-top: 0 none !important;       
        
        /* --- Mobile Styling --- */
        box-shadow: 0 2px 10px rgba(0,0,0,0.4); /* Stronger shadow for visibility */
        z-index: 1000; 
        padding: 0 !important;
        border-bottom: 5px solid #8e2736; /* Maroon bottom border */
        
        /* Font settings (if text appears here) */
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        letter-spacing: -0.002rem;
    }

    /* 2b. INNER CONTAINER FIX (The Maroon Box Reset) */
    /* Forces the inner container to be transparent to show the white wrapper */
    #header3Wrapper #header3Container {
        /* --- COLOR FIX --- */
        background-color: transparent !important; 
        background: none !important; 
        
        /* --- LAYOUT RESET --- */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important; 
    }

    /* 2c. GLOBAL NAV BAR FIX (The Overlay Reset) */
    /* Chained selectors to force transparency on the nav element */
    body #header3Wrapper #header3Container nav#globalNavigationBar {
        /* --- FORCE TRANSPARENCY --- */
        background-color: transparent !important; 
        background: none !important; 
        
        /* --- RESET PROPERTIES --- */
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        min-height: 60px !important;
    }

    /* 3. THE LOGO (Moved from Header 1) */
    /* Pulls the logo link out of its normal place and fixes it to top-left */
    #schoolHeaderLogoWrapperLink {
        /* --- POSITIONING --- */
        position: fixed !important;
        top: 5px !important;       /* Vertically centered in 60px bar */
        left: 15px !important;     /* Left margin */
        z-index: 2001 !important;  /* HIGHER than the white bar (1000) to be clickable */
        
        /* --- CLICKABLE AREA & SIZE --- */
        display: block !important;
        width: 40px !important;    /* Adjust width based on your SVG aspect ratio */
        height: 40px !important;   /* Adjust height */
        
        /* --- VISUAL STYLE (SVG Background) --- */
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important; 
        
        cursor: pointer !important;
    }

    /* Hide the original <img> tag (we use background-image) */
    #schoolHeaderLogoWrapperLink img {
        display: none !important; 
    }
    
    /* Reset parent wrapper so it doesn't hide the fixed child */
    #schoolHeaderLogoWrapper {
        display: block !important;
        position: static !important; 
        width: 0 !important; 
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    
/* =======================================================
     * 4. THE CART (Positioned next to "MENU" text)
     * User adjusted 'right' to -25% for specific alignment.
     *========================================================*/

    /* We pull the cart icon out of its normal place */
    #cartInfo {
        position: fixed !important;
        top: 0;
        
        /* TUS AJUSTES: -25% */
        /* Nota: Verifica esto en pantallas muy anchas por si acaso */
        left: 65% !important; 
        
        z-index: 1002; /* Above the white bar */
        height: 60px; /* Match bar height */
        
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* Aseguramos que no tenga anchos raros heredados */
        width: auto !important; 
    }

    /* Styling the Cart Link/Icon */
    #cartInfo a#shoppingCartLink {
        font-size: 1.4rem !important; 
        color: #34111a !important; /* Maroon Color */
        position: relative;
        display: block;
        padding: 10px;
        text-decoration: none !important;
    }

    /* Styling the Badge (The number count) */
    #cartCount {
        position: absolute;
        top: 5px;   
        right: -5px; 
        background-color: #8e2736 !important;
        font-size: 0.7rem !important;
        padding: 3px 5px;
        border: 2px solid #fff !important; 
    }

/* =======================================================
     * 5. THE BURGER MENU (Fixed "MENU" + Stable Icon)
     * Fixed width on icon prevents text jumping during animation.
     *========================================================*/

    /* 1. Position and Layout Container */
    .navbar-toggler {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 15px !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        
        z-index: 1003;
        border: none !important; 
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        
        transition: all 0.3s ease;
    }

    /* 2. Hide Default SVG */
    .navbar-toggler .navbar-toggler-icon {
        display: none !important;
    }

    /* 3. THE TEXT (::before) - Always "MENU" */
    .navbar-toggler::before {
        content: "MENU"; 
        
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important; 
        font-size: 0.75rem !important; 
        color: #343434 !important;
        letter-spacing: 0.05rem !important;
        
        margin-right: 8px !important;
        margin-top: 2px !important;
        min-width: 40px; 
        text-align: right;
        
        transition: color 0.3s ease;
    }

    /* 4. THE ICON (::after) - Burger/X */
    .navbar-toggler::after {
        content: "\f0c9"; /* fa-bars */
        
        font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
        font-weight: 900;
        
        color: #343434 !important;
        font-size: 1.6rem !important; 
        line-height: 1 !important;
        
        /* --- ESTABILIZADOR (El Fix del Salto) --- */
        display: block !important;
        width: 30px !important;       /* Ancho fijo para que no cambie */
        text-align: center !important; /* Centra el icono en su caja fija */
        /* ---------------------------------------- */
        
        /* Animation Setup */
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.3s ease;
        transform-origin: center;
    }

    /* =======================================================
     * 5b. OPEN STATE (Animation)
     * Triggered when aria-expanded="true"
     *========================================================*/

    /* A. Change Text Color (Text stays immovable) */
    .navbar-toggler[aria-expanded="true"]::before {
        color: #8b2331 !important; /* MacEwan Red */
    }

    /* B. Swap Icon to "X" and Rotate */
    .navbar-toggler[aria-expanded="true"]::after {
        content: "\f00d"; /* fa-times (The X) */
        color: #8b2331 !important; 
        transform: rotate(90deg); 
    }

    /* C. Hover State */
    .navbar-toggler:hover::before,
    .navbar-toggler:hover::after {
        color: #8b2331 !important;
    }

    /* =======================================================
     * 6. THE DROPDOWN MENU (When opened)
     * Needs to drop DOWN below the fixed bar (60px)
     *========================================================*/
    .navbar-collapse {
        position: fixed !important;
        top: 60px; /* Starts exactly where the bar ends */
        left: 0;
        width: 100%;
        background-color: #fff !important;
        border-top: 0px solid #eee;
        max-height: calc(100vh - 60px); /* Full height minus bar */
        overflow-y: auto; /* Scrollable */
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    /* =======================================================
     * 7. MOBILE MENU LINKS (Styling & Typography)
     * Customizes the appearance of dropdown items.
     *========================================================*/

    /* A. General Link Style (High Specificity Fix) */
    /* Target: body + ID + class chain to override desktop styles */
    body #mainNavBarCollapsable .navbar-nav .nav-link {
        /* --- Typography & Color --- */
        color: #343434 !important; /* Dark Grey */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 600 !important; 
        font-size: 1rem !important;
        text-transform: none !important; /* Default state */
        
        /* --- Layout --- */
        padding: 12px 15px !important; /* Touch-friendly target */
        border-bottom: 1px solid #f0f0f0 !important; /* Subtle separator */
        position: relative !important;
    }

    /* B. Clean Hover State (No White Box, No Red Line) */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover,
    body #mainNavBarCollapsable .navbar-nav .nav-link:focus {
        color: #8b2331 !important; /* Text turns Red */
        
        /* Ensure transparency */
        background: transparent !important; 
        background-color: transparent !important;
        
        /* Remove decorations */
        text-decoration: none !important;
        box-shadow: none !important;
        
        /* Keep the original gray border (prevents jumping) */
        border-bottom: 1px solid #f0f0f0 !important; 
        border-top: none !important;
    }

    /* C. RED LINE KILLER (The ::after Fix) */
    /* Hides the desktop red underline animation */
    body #mainNavBarCollapsable .navbar-nav .nav-link::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
    }

    /* D. Divider Line Style */
    #mainNavBarCollapsable .divider {
        border-top: 1px solid #e9ecef !important;
        margin: 5px 0 !important;
        width: 100%;
        display: block;
    }

    /* =======================================================
     * 7b. MENU ITEM SPECIFIC TYPOGRAPHY
     * Differentiates Logins vs Main Links using IDs.
     *========================================================*/

    /* GROUP 1: Logins (Normal Weight) */
    /* IDs: #nav1 (Student), #nav2 (Instructor), #nav3 (Family) */
    body #mainNavBarCollapsable .navbar-nav #nav1,
    body #mainNavBarCollapsable .navbar-nav #nav2,
    body #mainNavBarCollapsable .navbar-nav #nav3 {
        font-weight: 400 !important;
        text-transform: none !important;
        font-size: 0.95rem !important;
    }

    /* GROUP 2: Main Links (Uppercase & Bold) */
    /* IDs: #nav4 (Courses), #nav6 (Programs) */
    body #mainNavBarCollapsable .navbar-nav #nav4,
    body #mainNavBarCollapsable .navbar-nav #nav6 {
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.05rem !important;
        font-size: 1.2rem !important;
    }
    }

    /* =======================================================
     * 8. MOBILE MENU LAYOUT (Reordering)
     * Uses Flexbox order to move Courses to top, Logins to bottom.
     *========================================================*/

    /* 1. Enable Flex Column Layout */
    body #mainNavBarCollapsable .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. ORDER 1: Main Links (Courses, Programs) -> Top */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav4), 
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
        order: 1 !important;
        border-bottom: 1px solid #e9ecef !important;
    }

    /* 3. ORDER 2: The Divider -> Middle */
    body #mainNavBarCollapsable .navbar-nav .divider {
        order: 2 !important;
    }

    /* 4. ORDER 3: Logins -> Bottom */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav1),
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav2),
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav3) {
        order: 3 !important;
        border-bottom: none !important; /* No border on last items */
    }


    /* =======================================================
     * 9. FIX DOUBLE BORDER (Programs Item)
     * Removes the border from the last item of the top group
     * so it doesn't clash with the divider line.
     *========================================================*/
    
    /* Target the List Item containing Programs */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
        border-bottom: none !important;
    }

    /* Target the Link inside Programs */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) .nav-link {
        border-bottom: none !important;
    }

    /* 10. CLEANUP */
    /* Hide desktop login info if it overlaps */
    #loginInfo {
        display: none !important;
    }

    /* =======================================================
 * DESKTOP RESTORE & STYLING (Min-Width 768px)
 * 1. Structural Restore: Resets mobile fixed positions & backgrounds.
 * 2. Layout: Centers menu items horizontally.
 * 3. Styling: Corporate typography + Red Line Animation.
 * 4. Clean Up: Hides mobile-specific elements.
 *========================================================*/

@media (min-width: 768px) {

    /* ==================================================
     * 1. STRUCTURAL RESTORE & VISUAL CLEANUP
     * Restores the Maroon Header background and 
     * un-hides desktop elements (Logo, Cart, Login).
     * ================================================== */

    /* A. HEADER WRAPPER (The Maroon Background) */
    /* We apply the background ONLY here to avoid cut-off strips */
    body #header3Wrapper {

    }
    
/* B. INNER CONTAINERS*/
    #header3Wrapper .container,
    #header3Wrapper .row,
    #header3Wrapper .col-lg-12,
    #header3Wrapper #header3Container {
        /* Tu color marrón */
        background-color: #34111A !important;
        background-image: none !important;        
        border: none !important;
        box-shadow: none !important;
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    /* C. RESTORE THE LOGO (Header 1) */
    /* Un-fix the logo and let it sit in its natural place */
    #schoolHeaderLogoWrapperLink {
        position: static !important; 
        display: inline-block !important; 
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        z-index: auto !important;
    }
    
    /* Ensure image tag is visible */
    #schoolHeaderLogoWrapperLink img {
        display: block !important; 
        width: auto !important;
        height: auto !important;
    }
    
    #schoolHeaderLogoWrapper {
        display: block !important;
    }

    /* D. RESTORE THE CART (Header 1) */
    /* Un-fix the cart from top-right */
    #cartInfo {
        position: static !important; 
        display: block !important;   
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
    }
    
    #cartInfo a#shoppingCartLink {
        font-size: 1rem !important;
        color: inherit !important;
        padding: 0 !important;
    }
    
    #cartCount {
        position: static !important; 
        display: inline-block !important;
    }

    /* E. RESTORE LOGIN DROPDOWN (Top Right) */
    /* Ensure the top-right login menu appears */
    #loginInfo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* F. RESTORE NAVBAR CONTAINER */
    .navbar-collapse,
    #mainNavBarCollapsable {
        position: static !important;
        display: block !important;
        background: transparent !important; /* Transparent to show maroon bg */
        box-shadow: none !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        border: none !important;
        margin-top: -25px !important;
    }
    
    /* Reset the inner nav tag */
    body #header3Wrapper #header3Container nav#globalNavigationBar {
        background: transparent !important;
        min-height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Hide Hamburger Button (Mobile Only) */
    .navbar-toggler {
        display: none !important;
    }


    /* ==================================================
     * 2. MENU LAYOUT (Horizontal & Centered)
     * ================================================== */

    /* Horizontal Row for Courses/Programs */
    body #mainNavBarCollapsable .navbar-nav {
        flex-direction: row !important; 
        align-items: center !important; 
        justify-content: center !important; /* Centered Alignment */
        width: 100% !important; 
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide Mobile-Specific Logins & Divider from the Maroon Bar */
    body #mainNavBarCollapsable .nav-item.d-md-none,
    body #mainNavBarCollapsable .divider {
        display: none !important;
    }

    /* Reset Item Spacing */
    body #mainNavBarCollapsable .navbar-nav .nav-item {
        width: auto !important;
        border: none !important;
        order: 0 !important; 
        margin-left: 30px !important; 
        margin-right: 30px !important;
    }

    /* ==================================================
     * 3. LINK STYLING (Typography & Animation)
     * ================================================== */

    /* A. Default Link Style */
    body #mainNavBarCollapsable .navbar-nav .nav-link {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05rem !important;
        font-style: normal !important;
        
        color: #ffffff !important; /* White Text */
        padding: 0.8rem 0 !important; 
        position: relative !important; 
        
        border: none !important;
        background: transparent !important;
        
        transition: color 0.3s ease !important;
    }

    /* B. Hover / Active Styling */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover,
    body #mainNavBarCollapsable .navbar-nav .nav-link.active {
        color: #D41F37 !important; /* Optional Text Color Change */
        background: transparent !important;
        text-decoration: none !important;
    }

    /* C. Red Line Animation (::after) */
    body #mainNavBarCollapsable .navbar-nav .nav-link::after {
        content: '' !important;
        position: absolute !important;
        display: block !important; 
        
        bottom: 0.4rem !important; 
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: #D41F37 !important;
        
        opacity: 0 !important;
        transition: opacity 0.6s ease !important;
    }

    /* D. Trigger Animation */
    body #mainNavBarCollapsable .navbar-nav .nav-link:hover::after,
    body #mainNavBarCollapsable .navbar-nav .nav-link.active::after {
        opacity: 1 !important;
    }

    /* ==================================================
     * 4. MOBILE OVERRIDES (Specificity Fixes)
     * Critical to stop mobile styles leaking to desktop.
     * ================================================== */
    
    /* Override the :has() selector from mobile */
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav4), 
    body #mainNavBarCollapsable .navbar-nav .nav-item:has(#nav6) {
        border-bottom: none !important;
        order: 0 !important; 
        width: auto !important;
        margin-left: 30px !important; 
        margin-right: 30px !important;
    }
}

/* ======================================================= */
/* 1. BASE STYLES (MOBILE-FIRST) */
/* ======================================================= */

.custom-nav-wrapper {
    display: flex;
    flex-direction: column; /* Stacked on mobile */
    width: 100%;
}

.custom-nav-wrapper ul.navbar-nav {
    display: flex;
    flex-direction: column; /* List items stack on mobile */
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%; /* Take full width on mobile */
}

/* --- Bar Styles (colors, fonts, etc.) --- */
#top-tools-nav {
    background: linear-gradient(to right, #fff, #f0f0f0 40%) !important;
    font-size: 80% !important;
}

/* FIX: Smooth transition for light-colored links 
  - '!important' is removed from 'color' to allow animation.
  - 'transition' is defined only on the base state.
*/
#top-tools-nav .nav-link {
    color: #6d6d6d; /* Base color WITHOUT !important */
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    outline-offset: -5px !important;
    border: 0;
    transition: color 0.3s ease; /* Transition defined ONLY here */
}

#top-tools-nav .nav-link:hover {
    color: #8b2331; /* Hover color WITHOUT !important */
    text-decoration: underline !important;
}

/* FIX: Smooth transition for dark links (CTA) 
  - 'transition' is added to the base state.
  - A :hover state is added.
*/
#top-cta-nav .nav-link {
    background-color: #343434;
    color: #fff !important;
    text-align: center;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease;
    font-size: 0.8rem !important;
}

#top-cta-nav .nav-link:hover {
    background-color: #8e2736 !important; /* Lighter background color on hover */
}

#top-cta-nav .nav-item {
    flex-grow: 1; /* Grow to fill space on mobile */
}

/* ======================================================= */
/* 2. GLOBAL FIXES (SPACING & SCROLLBAR) */
/* ======================================================= */

/* 1. HORIZONTAL SCROLLBAR FIX */
/* Hides the overflow caused by '100vw' on the body,
   not on a child container.
*/
body {
    overflow-x: hidden;
}

/* Global resets to remove unwanted spacing */
#customHeaderLinks {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#header1 {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

/* Removes vertical space between the two nav bars */
#top-tools-nav {
    margin-bottom: 0 !important;
}
#top-cta-nav {
    margin-top: 0 !important;
}


/* ======================================================= */
/* 3. DESKTOP STYLES (WITH "FULL-WIDTH BREAKOUT") */
/* ======================================================= */

@media (min-width: 768px) {
    
    /* 1. "FULL-WIDTH BREAKOUT" TECHNIQUE */
    /* Forces this element to be 100% of the viewport width (vw)
       and uses calc() to pull it to the left edge,
       "breaking" it out of its parent container.
    */
    #customHeaderLinks {
        position: static !important;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
    }

    /* 2. BOOTSTRAP PADDING FIX */
    /* Removes the default padding from the .col-12
       inside our full-width header.
    */
    #customHeaderLinks .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 3. REMOVE SPACER */
    /* Resets the padding that was used
       for the old 'position: fixed' solution.
    */
    #header1ContentWrapper {
        padding-top: 0 !important; 
    }

    /* 4. INTERNAL ALIGNMENT */
    /* Aligns the content (the two nav lists)
       to the far right of the full-width container.
    */
    .custom-nav-wrapper {
        display: flex;
        flex-direction: row; 
        justify-content: flex-end; /* Aligns all content to the right! */
        align-items: center; 
        padding-right: 0px; 
    }

    /* --- Other desktop layout styles --- */

    .custom-nav-wrapper ul.navbar-nav {
        flex-direction: row;
        width: auto;
    }
    
    #top-tools-nav {
        flex-grow: 0; 
        justify-content: flex-end; 
    }
    
    /* Removes horizontal space between the two lists */
    #top-cta-nav {
         margin-left: 0 !important;
    }
    
    /* Sets desktop-specific padding for the links */
    #top-tools-nav .nav-link {
        padding: 15px !important;
    }

    #top-cta-nav .nav-item .nav-link {
        padding: 15px 20px;
    }
}

/* ======================================================= */
/* 4. RESPONSIVE - HIDE ON TABLETS AND MOBILE */
/* ======================================================= */

/*
 * This media query targets all screens 1024px wide or narrower.
 * It hides the entire custom header links bar.
 * Using !important ensures this rule overrides any other
 * 'display' properties defined in the base or desktop styles.
*/
@media (max-width: 1024px) {
    
    /*
     * Hides the entire custom header links bar
     * on screens 1024px wide or narrower.
    */
    #customHeaderLinks {
        display: none !important;
    }

    /*
     * Resets the negative margin on the main header row.
     * This annuls the 'margin-top: -20px;' used on desktop,
     * preventing layout issues on mobile.
    */
    #header1ContentWrapper {
        margin-top: 0 !important;
    }
}

/* ======================================================= */
/* 5. HEADER LOGO - DESKTOP */
/* ======================================================= */

#schoolHeaderLogoWrapper img {
    /* Set the desired width */
    width: 450px !important;
    /* Ensure the height scales automatically to maintain aspect ratio */
    height: auto !important; 
}

/* ======================================================= */
/* 6. RESPONSIVE - MOBILE LOGO SWAP & FIXES (Final Version) */
/* ======================================================= */

@media (max-width: 767px) {
 
    /* A. Hide the large desktop <img> tag */
    #schoolHeaderLogoWrapper img {
        display: none !important;
    }

    /* B. Configure the Link as the new Fixed Logo */
    #schoolHeaderLogoWrapperLink {
        /* --- Fixed Positioning (In the white header) --- */
        position: fixed !important;
        top: 5px !important;       /* Centered vertically */
        left: 15px !important;     /* Left margin */
        z-index: 2001 !important;  /* On top of the bar */
        
        /* --- Sizing (Small Icon) --- */
        display: block !important;
        width: 40px !important;    
        height: 40px !important;
        
        /* --- Background Image (The Symbol) --- */
        background-image: url('https://macewantestpv.destinyone.moderncampus.net/images/logosymbol-macewan-sce.svg') !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-color: transparent !important;
        
        cursor: pointer !important;
    }

    /* C. LIGHTBOX CONFLICT FIX (Z-Index) */
    /* When a modal opens, push fixed elements to the back */
    body.modal-open #schoolHeaderLogoWrapperLink,
    body.modal-open #cartInfo {
        z-index: 0 !important; 
    }
}

/* ======================================================= */
/* 7. HEADER STYLES - GENERAL */
/* ======================================================= */

#header1Container {
    background-color: #FFFFFF; 
    width: 100%;
    color: #F0F0F0 !important;
 }  /* Middle of the languagebar.jsp ((logo, cart, login))*/

#header1Wrapper{
  background-color: #FFFFFF !important;
  color: #000000 !important;
 } /* sides of languagebar.jsp ((logo, cart, login))*/

 #cartInfo .glyphicon-shopping-cart{
    color: #8e2736 !important; /* cart color*/ 
  }

 #cartCount {
    background-color: #8e2736 !important;
    color: #ffffff;
    border: 2px solid #ffffff;
  }

/* 1. Target the main row container (#header1ContentWrapper) */
/* We need to use Flexbox to gain full control over horizontal positioning */
#header1ContentWrapper {
    display: flex !important;
    align-items: center !important; /* Centers items vertically within the row */
    width: 100% !important; /* Ensure it spans the full width of the container */
    margin-top: -20px;
}

/* 2. Target the specific column that holds the cart */
/* This is the key: we use margin-left: auto on the cart's column */
/* to push it away from all preceding elements (logo, empty space). */
#header1ContentWrapper > .col-lg-2 {
    /* Identificamos la columna del carrito por su contenido o por el orden */
    /* Usaremos el offset para el bloque de Login en su lugar para dar espacio */
    margin-left: auto !important; /* Pushes this element and everything after it to the right */
    
    /* Nota: Debido a que la columna del login es la siguiente en el HTML, 
       este margin-left: auto debería empujar la columna del carrito y la columna del login
       hacia la derecha, colocándolos uno al lado del otro en el extremo derecho. */
}

/* 3. Ensure the content inside the cart column is right-aligned */
.cartInfo {
    text-align: right !important;
    width: 100% !important;
}

/* 4. Small adjustment to the Login block to ensure no offset interference */
/* Si el Login tiene un offset, debemos asegurarnos de que no rompa el flujo */
/* Busca la clase del Login: .col-lg-3.offset-lg-2 y establece su margen izquierdo a 0 */
.offset-lg-2 {
    /* Esto anula el margen izquierdo que está empujando el Login */
    margin-left: 0 !important;
}

  #loginDropdownMenuLink{
    color: #000000 !important; /*Login link color*/
    font-size: 15px !important;
    font-weight: 400;
  }

  #logoutLinkWrapper{
    color: #000000 !important; 
    font-size: 15px !important;
    font-weight: 400;
  }
  
  .headerProfileLink{
    color: #000000 !important; 
    font-size: 15px !important;
    font-weight: 400;
  }
  
  #loginNameWrapper {
    color: #000000 !important; 
    font-size: 15px !important;
    font-weight: 400;
  }
  
  .headerStudentLoginLogoutLink{
    color: #000000 !important; 
    font-size: 15px !important;
    font-weight: 400;
  }
  
/*----------------------------------------------------------------------------*/

/*-------------------------Global nav, globalNavigationEmbeddable.jsp ------------------------------*/ 
/* * 1. Global Wrapper and Container Background and Alignment 
 * Targets the outer elements to ensure the background color covers the full width.
 */
#header3Wrapper {
background-image: url(https://www.macewan.ca/framework/images/rows/banner/banner_grey.jpg) !important;
    /* 1. KEY CHANGE: Repeats the image only horizontally */
    background-repeat: repeat-x !important;
    /* 2. KEY CHANGE: Ensures the image displays at its native size */
    background-size: auto !important; 
    border-top: 5.5px solid #d51f37 !important;
    background-position-y: bottom !important;
}

#header3Container {
  /* Center the content horizontally */
  display: flex;
  justify-content: center;
  /* Set background color for the container area */
  background-color: #34111A !important;
} 

/* * 2. Navigation Bar Component Styling
 * Targets the main navigation element with the specific ID.
 */
#globalNavigationBar {
  /* Set the background color for the main <nav> element */
  background-color: #34111A !important;
  /* Ensure the nav element uses the full width available within its container */
  width: 100%;
} 

/* * 3. Navigation Link Styling (Font, Color, and Size)
 */
.nav-item {
  /* Global nav item font size */
  font-size: 1.0625rem !important; /* ~17px using rem for accessibility */
  font-weight: 500 !important; /* Increased weight for better legibility */
  /* Preferred MacEwan-like font: Montserrat */
  font-family: 'Montserrat', sans-serif !important; 
}

.navbar-light .navbar-nav .nav-link {
    /* Color of navbar items/links */
    color: #FFFFFF !important;
    /* Use the designated font family */
    font-family: 'Montserrat', sans-serif !important;
    /* Add padding for better spacing between links */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    /* Remove default underline on hover (optional) */
    text-decoration: none !important; 
}

/* * 4. Mobile Divider Styling (Optional, for aesthetic cleanup)
 */
.divider.d-md-none {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* * 5. Hover Effect (Added for user experience)
 */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    /* Change color slightly on hover for visual feedback (e.g., MacEwan Red) */
    color: #9a1426 !important; 
    transition: color 0.3s ease; /* Smooth transition */
}

/* =======================================================
 * MAIN NAVIGATION STYLING
 * Targets the primary links like 'Courses' and 'Programs'
 *========================================================*/

/* --- 1. Main Nav Link Typography --- */
#mainNavBarCollapsable .navbar-nav .nav-link {
 /* Text styling */
 font-optical-sizing: auto !important;
 font-style: normal !important;
 letter-spacing: -.002rem !important;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 font-size: 1rem !important;
 font-weight: 600 !important;
 color: #fff !important; /* Default color */
 
 /* Remove the default underline */
 text-decoration: none;
 
 /* Spacing for the links */
 padding: 0.5rem 1rem;
 
 /* This is required for the underline animation */
 position: relative;
 
 /* Transition for the text color change */
 transition: color 0.3s ease;
}

/* --- 2. Text Color on Hover/Active --- */
#mainNavBarCollapsable .navbar-nav .nav-link:hover,
#mainNavBarCollapsable .navbar-nav .nav-link.active {
 color: #D41F37 !important; /* Your requested hover/active color */
}

/* --- 3. Underline Effect (::after element) --- */
#mainNavBarCollapsable .navbar-nav .nav-link::after {
 content: '';
 position: absolute;
 
 /* !! FIX 1: Move line closer to text !! */
 /* Increased value to reduce the gap shown in the screenshot */
 bottom: 0.45rem; 
 
 left: 0;
 
 /* Size and color */
 width: 100%;
 height: 2px;
 background-color: #D41F37 !important;
 
 /* !! FIX 2: Fade-in/out animation (starts invisible) !! */
 opacity: 0;
 
 /* This transition handles BOTH fade-in and fade-out */
 transition: opacity 0.6s ease;
}

/* --- 4. Animation Trigger --- */
/* Show the underline on hover or when the link is active */
#mainNavBarCollapsable .navbar-nav .nav-link:hover::after,
#mainNavBarCollapsable .navbar-nav .nav-link.active::after {
 /* Animate to full opacity (visible) */
 opacity: 1;
}

/*----------------------------------------------------------------------------------*/

/*----------------------Footer, bottomNavigation.jsp------------------------------------------------------*/
     

/* ==========================================================
 BASE STYLING & BICOLOR BACKGROUND
 ========================================================== */
footer {
  background-color: #34111a;
  color: #FFFFFF !important;
  padding: 20px;
  position: relative;
  z-index: 1;
}

footer:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 70%; 
  background: linear-gradient(to right, #9a1426, #8F323A);
  z-index: -1;
}

#footer1Wrapper {
  position: relative;
  z-index: 2;
}

/* Ocultar logo de Modern Campus */
#footer2Sub3 {
  display: none !important;
}

/* ==========================================================
 1. FORZAR LAYOUT (HACK DE POSICIONAMIENTO MANUAL)
 ========================================================== */
@media (min-width: 992px) {

  /* 1. Hacemos que el .row sea el 'ancla' para la Col 4 */
  #footerNav .row {
    position: relative !important;
    /* Damos una altura mínima para evitar colapso */
    min-height: 250px; 
  }

  /* 2. Alineamos las primeras 3 columnas con float */
  #footerNav .row > .col-lg-3 {
    float: left !important;
    padding: 35px 15px !important;
    box-sizing: border-box !important;
  }
  
  /* 3. Damos anchos a las primeras 3 columnas */
  #footerNav .row > .col-lg-3:nth-child(1) { /* Col 1: Treaty */
    width: 35% !important;
    max-width: 35% !important;
  }
  #footerNav .row > .col-lg-3:nth-child(2) { /* Col 2: Quick Links */
    width: 15% !important;
    max-width: 15% !important;
  }
  #footerNav .row > .col-lg-3:nth-child(3) { /* Col 3: Social */
    width: 15% !important;
    max-width: 15% !important;
  }

  /* 4. TOMAMOS LA COLUMNA 4 ROTA Y LA POSICIONAMOS */
  #footerNav .row > .col-lg-3:nth-child(4) {
    position: absolute !important;
    top: 0 !important; /* Alinear arriba */
    right: 0 !important; /* Alinear a la derecha */
    width: 35% !important; /* Tu ancho deseado */
    max-width: 35% !important;
    padding: 35px 15px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================
 2. ESTILOS DE FUENTES
 ========================================================== */

/* Estilos de Títulos */
#footer-message .title,
#footer-qlinks .title {
  font-weight: 700;
  color: #FFFFFF !important;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-family: Montserrat, sans-serif;
  text-decoration: none !important;
}

/* Estilos de texto "Izquierda" (Quick Links) */
.footerContact p,
.footerContact p a {
  color: #fff9 !important;
  font-size: .84rem;
  font-weight: 420; /* <-- Corregí el error 'S' */
  font-family: Montserrat, sans-serif !important;
  line-height: 1.4;
  letter-spacing: normal;
  margin-bottom: 0.25rem;
}
.footerContact p a {
  text-decoration: underline;
  text-decoration-color: #fff6;
}

/* Estilos de texto "Derecha" (Treaty, Contact) */
.footerAbout p,
.footerConnect p {
  color: white;
  font-family: Montserrat, sans-serif !important;
  font-size: .85rem;
  letter-spacing: -.002rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}
.footerAbout a,
.footerConnect a {
  color: white;
  font-family: Montserrat, sans-serif !important;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.002rem;
  line-height: 1.4;
  text-decoration: underline;
  margin-bottom: 0.25rem;
}

/* Fix márgenes Quick Links */
.footerContact .variable-content-item p { margin-left: 0 !important; }
.footerContact .variable-content-item a { padding-left: 0px; display: block; }

/* ==========================================================
 3. ICONOS SOCIALES (TU CÓDIGO FUNCIONAL)
 ========================================================== */

/* 1. Stack Positioning */
#footer-socialmedia .fa-stack {
 position: relative !important;
 display: inline-block !important;
 width: 2em;
 height: 2em;
 line-height: 2em;
 vertical-align: middle;
}
#footer-socialmedia .fa-stack .fa-stack-1x,
#footer-socialmedia .fa-stack .fa-stack-2x {
 position: absolute !important;
 left: 0 !important;
 width: 100% !important;
 text-align: center !important;
}
#footer-socialmedia .fa-stack .fa-stack-1x { font-size: 1em; line-height: inherit; }
#footer-socialmedia .fa-stack .fa-stack-2x { font-size: 2em; }

/* 2. Neutralize the base <span> */
#footer-socialmedia .fa-stack .icon-bg,
#footer-socialmedia .fa-stack .icon-fg {
 color: transparent !important;
}

/* 3. Draw/Color Background Circle */
#footer-socialmedia .fa-stack .icon-bg::before {
 content: "\f111" !important;
 font-family: "Font Awesome 6 Pro", "Font Awesome 6 Solid", "Font Awesome 5 Pro", "Font Awesome 5 Solid", "Font Awesome 5 Free", sans-serif !important;
 font-weight: 900 !important;
 color: #8b2331 !important; /* Default Red */
 transition: color 0.3s ease !important;
 display: inline-block;
 line-height: 1; 
}

/* 4. Draw/Color Foreground Icon */
#footer-socialmedia .fa-stack .icon-fg::before {
 font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", sans-serif !important;
 font-weight: 400 !important;
 color: #34111A !important; /* Default Brown */
 transition: color 0.3s ease !important;
 display: inline-block;
 line-height: 1;
}

/* 5. Hover Effect */
#footer-socialmedia .fa-stack:hover .icon-bg::before {
 color: #CF002F !important; /* Bright Red */
}
#footer-socialmedia .fa-stack:hover .icon-fg::before {
 color: #34111A !important; /* No change */
}

/* 6. Specific Icon Overrides */
#footer-socialmedia .fa-stack .fa-x-twitter.icon-fg::before {
 content: "\f099" !important;
 font-family: "Font Awesome 5 Brands" !important;
 color: #34111A !important;
}
#footer-socialmedia .fa-stack .fa-tiktok.icon-fg::before {
 content: "" !important;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%2334111A' d='M544.5 273.9C500.5 274 457.5 260.3 421.7 234.7L421.7 413.4C421.7 446.5 411.6 478.8 392.7 506C373.8 533.2 347.1 554 316.1 565.6C285.1 577.2 251.3 579.1 219.2 570.9C187.1 562.7 158.3 545 136.5 520.1C114.7 495.2 101.2 464.1 97.5 431.2C93.8 398.3 100.4 365.1 116.1 336C131.8 306.9 156.1 283.3 185.7 268.3C215.3 253.3 248.6 247.8 281.4 252.3L281.4 342.2C266.4 337.5 250.3 337.6 235.4 342.6C220.5 347.6 207.5 357.2 198.4 369.9C189.3 382.6 184.4 398 184.5 413.8C184.6 429.6 189.7 444.8 199 457.5C208.3 470.2 221.4 479.6 236.4 484.4C251.4 489.2 267.5 489.2 282.4 484.3C297.3 479.4 310.4 469.9 319.6 457.2C328.8 444.5 333.8 429.1 333.8 413.4L333.8 64L421.8 64C421.7 71.4 422.4 78.9 423.7 86.2C426.8 102.5 433.1 118.1 442.4 131.9C451.7 145.7 463.7 157.5 477.6 166.5C497.5 179.6 520.8 186.6 544.6 186.6L544.6 274z'%3E%3C/path%3E%3C/svg%3E") !important;
 background-size: 80% !important;
 background-repeat: no-repeat !important;
 background-position: 50% 50% !important;
 width: 1.1em !important;
 height: 1.1em !important;
 display: inline-block !important; 
 line-height: 1 !important;
 color: transparent !important;
}

/* 7. Hashtag Styling */
#footer-socialmedia p.title {
 font-family: Montserrat, sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-weight: 700;
 letter-spacing: -.02rem;
 padding-bottom: 0;
 padding-left: .4rem;
 text-transform: lowercase;
}


/* ==========================================================
 4. FOOTER LOGO STYLING (MODIFICADO)
 ========================================================== */
#footer-contact-image {

  width: 100% !important;
  height: auto;
  max-width: 100%;
  margin-bottom: 20px;
}

/* ==========================================================
 5. ESTILOS ADICIONALES (TUS REGLAS)
 ========================================================== */
#sidebar1Module1,
.nav-pills,
footer a,
footer > a {
  color: white !important;
}

#sidebar1Wrapper{
  background-color: white;
}

/* CUIDADO: Este ID se romperá en producción */
#variableContentBlockPG0156 {
  color: #34111A !important; 
  font-size: 18px !important; 
  font-weight: 500 !important; 
  padding-top: 35px !important; 
  padding-bottom: 20px !important; 
  display: flex;
  -ms-flex-align: center;
}

  /*******************************************************
 * GLOBAL MAIN CONTENT PADDING
 * Applies vertical padding to the main content area of the page 
 * to create separation from global elements (like the site header/footer).
 *******************************************************/
#mainContent {
    /* 40px of space top and bottom */
    padding-top: 10px; 
    padding-bottom: 40px;
    
    /* Retains the original horizontal padding (if any) */
    /* If you want to eliminate any side padding: padding-left: 0; padding-right: 0; */
}

/* One-line alternative, if you don't want to modify the horizontal padding: */
/* #mainContent { padding: 40px 0; } */

  /*******************************************************
 * CONTENT TYPOGRAPHY BASE (Montserrat Font)
 * Applies Montserrat to ALL text elements within the main content area for consistency.
 *******************************************************/
#mainContent h1,
#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent h5,
#mainContent h6,
#mainContent p,
#mainContent div, 
#mainContent li,
#mainContent blockquote {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- */

/*******************************************************
 * HEADING STANDARDIZATION: COLOR, SIZE, AND SPACING
 * Applies brand colors and consistent typography hierarchy.
 * Cleans up redundant CSS properties.
 *******************************************************/

/* Universal Heading Styles (Applies color, consistent spacing, and standard weight) */
#mainContent h1, #mainContent h2, #mainContent h3, 
#mainContent h4, #mainContent h5, #mainContent h6 {
    /* Base color for most headings */
    color: #343434 !important; 
    
    /* BEST PRACTICE ADJUSTMENT: Use 700 for clear "Bold" effect. */
    font-weight: 400 !important; 

    /* Consistent Spacing (using REM for scalability) */
    margin-top: 1.5rem !important; 
    margin-bottom: 0.5rem !important; 
    padding: 0 !important;
    
    /* Clean up: Removed font-optical-sizing as it was redundant/unnecessary */
}

/* Standardized Font Sizes and Specific Styles (based on Cascade CMS values) */

/* H1: Largest heading (Primary Title) */
#mainContent h1 {
    font-size: 3.125rem !important;
    letter-spacing: .05rem !important;
    text-transform: uppercase !important;
    /* BEST PRACTICE ADJUSTMENT: Increased from 1 to 1.1 to prevent text clipping. */
    line-height: 1.1 !important; 
    font-style: normal !important; 
}

/* H2: Secondary heading */
#mainContent h2 {
    font-size: 2.1756rem !important;
    letter-spacing: -.002rem !important;
    line-height: 1.142 !important;
    font-style: normal !important;
}

/* H3: Tertiary heading (Uses specific brand color) */
#mainContent h3 {
    font-size: 1.7rem !important;
    line-height: 1.089 !important;
}

/* H4: Smaller heading */
#mainContent h4 {
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;
    text-transform: uppercase !important;
}

/* H5 and H6: Smallest headings */
#mainContent h5 {
    font-size: 1.1025rem !important;
    font-style: normal !important;
}
#mainContent h6 {
    font-size: 1rem !important;
}

/* =======================================================
 * MOBILE TYPOGRAPHY OPTIMIZATION (Max-Width 767px)
 * Reduces heading sizes by approx 20-25% for better
 * readability on small screens without affecting desktop.
 *========================================================*/

@media (max-width: 767px) {

    /* H1: Primary Title
     * Desktop: 3.125rem (~50px) -> Mobile: 2.25rem (~36px)
     * Increased line-height slightly for multi-line readability.
     */
    #mainContent h1 {
        font-size: 2.25rem !important; 
        line-height: 1.2 !important; 
        letter-spacing: 0.02rem !important; /* Tighter spacing for mobile */
    }

    /* H2: Secondary Heading
     * Desktop: 2.17rem (~35px) -> Mobile: 1.75rem (~28px)
     */
    #mainContent h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* H3: Tertiary Heading
     * Desktop: 1.7rem (~27px) -> Mobile: 1.4rem (~22px)
     */
    #mainContent h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* H4: Quaternary Heading
     * Desktop: 1.28rem (~20px) -> Mobile: 1.15rem (~18px)
     * Keeping it slightly larger than body text (16px)
     */
    #mainContent h4 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    /* H5 & H6: Smallest Headings
     * These are already close to body text size, so we maintain 
     * readability by not shrinking them below 1rem (16px).
     */
    #mainContent h5 {
        font-size: 1.05rem !important;
    }

    #mainContent h6 {
        font-size: 1rem !important; /* Keep readable minimum */
        font-weight: 700 !important; /* Add weight to distinguish from p */
    }
    
    /* Optional: Adjust margins for tighter mobile layouts */
    #mainContent h1, #mainContent h2, #mainContent h3, 
    #mainContent h4, #mainContent h5, #mainContent h6 {
        margin-top: 1.2rem !important; /* Slightly less vertical space */
        margin-bottom: 0.5rem !important;
    }
}

/* 2. Specific adjustments for links and table cells */
/* Links (<a>) often inherit or are explicitly styled by Bootstrap, so they need a dedicated rule */
#mainContent a {
    font-family: 'Montserrat', sans-serif !important;
}

/* 3. Specific adjustments for table cells */
/* Table data (<td>) and table headers (<th>) might need this explicit rule */
#mainContent td,
#mainContent th {
    font-family: 'Montserrat', sans-serif !important;
}

/* 4. Ensuring the text inside the Accordion Headers is Montserrat */
/* Targets the text inside the panel header and the program link */
#programAreasAccordion .card-title,
#programAreasAccordion .programArea a {
     font-family: 'Montserrat', sans-serif !important;
}

/* 5. Ensuring the button uses Montserrat */
#mainContent .btn {
    font-family: 'Montserrat', sans-serif !important;
}

#certificateOfficalDescription a {
    /* Base Link Color */
    color: #8b2331 !important; 
    
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    
    /* Optional: Make the text slightly bolder for emphasis */
      font-weight: 700 !important;
        
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

#certificateOfficalDescription a:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important; 
    
    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

#certificateOfficalDescription a:visited {
    /* Optional: Style for visited links (can be the same as base color or a different shade) */
    color: #8b2331; 
}

/* =======================================================
 * PROGRAM DESCRIPTION TABLE STYLES (FINAL VERSION)
 * Scoped specifically to #programAreaDescription
 * Includes: Layout, Custom Header, and Zebra Striping
 *========================================================*/

/* 1. Estilo General de la Tabla */
#programAreaDescription table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem;
    
    /* Tipografía Base */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* 2. Cabecera (Thead) - Estilo Marrón/Blanco */
#programAreaDescription table thead th {
    background-color: rgb(52, 17, 26) !important; /* Marrón Oscuro */
    color: rgb(255, 255, 255) !important; /* Blanco */
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    padding: 13px 18px !important;
    vertical-align: middle !important;
    
    /* Bordes de cabecera */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important; /* Separador gris */
}

/* Quitar el borde derecho del último encabezado */
#programAreaDescription table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Cuerpo (Tbody) - Zebra Striping */

/* FILAS IMPARES (1, 3, 5...) -> Gris Claro */
#programAreaDescription table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* FILAS PARES (2, 4, 6...) -> Blanco */
#programAreaDescription table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* Estilo de las celdas individuales */
#programAreaDescription table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important; /* Borde gris suave entre celdas */
    color: rgb(23, 23, 23) !important;
}

/* =======================================================
 * DESCRIPTION TABLES STYLING (Unified)
 * Targets tables in both Program Areas AND Program Streams
 * ID 1: #programAreaDescription (Professional Health Ed)
 * ID 2: #programStreamDescription (Emergency Nursing - NUEVO)
 *========================================================*/

/* 1. Configuración General de la Tabla */
#programAreaDescription table,
#programStreamDescription table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 1.5rem;
    
    /* Tipografía */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    line-height: 1.5 !important;
    text-align: left !important;
    
    /* Eliminar bordes por defecto de Bootstrap */
    border: none !important; 
}

/* 2. Cabecera (Thead) - Estilo Marrón */
#programAreaDescription table thead th,
#programStreamDescription table thead th {
    background-color: rgb(52, 17, 26) !important; /* Marrón Corporativo */
    color: white !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    padding: 13px 18px !important;
    vertical-align: middle !important;
    
    /* Bordes Personalizados */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important; /* Separador Gris */
    border-bottom: none !important;
}

/* Quitar borde derecho del último encabezado */
#programAreaDescription table thead th:last-child,
#programStreamDescription table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Cuerpo (Tbody) - Efecto Zebra */

/* Filas Impares (Gris Claro) */
#programAreaDescription table tbody tr:nth-of-type(odd),
#programStreamDescription table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Filas Pares (Blanco) */
#programAreaDescription table tbody tr:nth-of-type(even),
#programStreamDescription table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. Celdas (Td) */
#programAreaDescription table tbody td,
#programStreamDescription table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    
    /* Bordes suaves entre celdas */
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    
    color: rgb(23, 23, 23) !important;
}

/* 5. Negritas dentro de la tabla */
#programAreaDescription table tbody td strong,
#programStreamDescription table tbody td strong {
    font-weight: 700 !important;
    color: inherit !important;
}

/* =======================================================
 * PAGE: PROGRAM AREA (Program Streams List)
 * Adapts the 'white card' look & feel to the #programAreaCourses section
 * (Comments are in English)
 *========================================================*/

/* 1. Container Styling (Grey Background) */
#programAreaCoursesAndCertificates {
    background-color: #EBE5E9 !important;
    padding: 20px; 
    border-radius: 4px;
}

/* Remove default card styles from the inner panel */
#programAreaCourses {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Style the Rows (<tr>) as "White Cards" */
#programAreaCourses table.table tr {
    display: block; 
    margin-bottom: 15px; /* Space between cards */
    
    background-color: white !important; 
    border-radius: 4px; 
    overflow: hidden; /* Clips the corners */
    
    /* Positioning for hover effects */
    position: relative;
    z-index: 1;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Clean up cell borders */
#programAreaCourses table.table td {
    border-top: none !important; 
    padding: 0 !important; 
    border: none !important;
}

/* 3. Style the Links (<a>) - The Flex Container */
#programAreaCourses table.table a {
    display: flex;
    justify-content: flex-start; /* Align text to left */
    align-items: center; /* Vertically center text */
    width: 100%; 
    
    /* Padding: Top/Bottom=12px, Right=40px (for arrow), Left=45px (for icon) */
    padding: 12px 40px 12px 45px; 
    
    /* Typography */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #34111a !important; /* MacEwan Dark Brown */
    text-decoration: none !important;
    
    position: relative; 
    background-color: transparent !important;
}

/* 4. The Icon Box (::before) - Using the robust fix */
#programAreaCourses table.table a::before {
    /* Icon: Layer Group (representing streams) or use \f02d for Book */
    content: "\f5fd"; 
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif; 
    font-weight: 900; 
    
    /* === ROBUST POSITIONING FIX === */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; /* Stretches to full height of the card */
    width: 35px; 
    
    background-color: #34111a; /* Maroon Background */
    color: white; 
    border-radius: 4px 0 0 4px;
    
    /* Center the icon inside the bar */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

/* 5. The Arrow Icon (::after) */
#programAreaCourses table.table a::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900; 
    
    /* Absolute positioning on the right */
    position: absolute;
    right: 15px;
    top: 50%;
    
    font-size: 1rem;
    color: #34111a;
    
    /* Animation Setup */
    opacity: 0; 
    transform: translateY(-50%) translateX(5px);
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

/* 6. Hover Effects */
#programAreaCourses table.table tr:hover {
    transform: scale(1.02);
    /* Remove this line if you don't want the shadow */
    /* box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.14); */ 
    z-index: 10;
    overflow: visible; 
}

#programAreaCourses table.table tr:hover a::after {
    opacity: 1;
    /* Slide arrow in */
    transform: translateY(-50%) translateX(0); 
}

/* 7. Header Styling (Optional - Matches your other headers) */
#programAreaCourses .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding-left: 0;
}

#programAreaCourses .card-header h2 {
    color: #54141d !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

/* =======================================================
 * 8. FULL WIDTH OVERRIDE (Fixes the 50% Bootstrap issue)
 * Forces the .col-lg-6 inside this container to take 
 * 100% width instead of half.
 *========================================================*/

#programAreaCoursesAndCertificates .row > .col-lg-6 {
    /* Override Bootstrap's flex basis */
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    
    /* Override Bootstrap's max-width */
    max-width: 100% !important;
}

/* =======================================================
 * 9. SCROLLBAR FIX & TABLE WIDTH
 * Prevents horizontal scrollbar caused by hover scaling
 *========================================================*/

#programAreaCourses .table-responsive {
    /* 1. Ocultar la barra de scroll forzosamente */
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permitir que se vea la sombra vertical */
    
    /* 2. Asegurar que el contenedor ocupe todo el espacio */
    width: 100% !important;
    
    /* 3. Padding extra abajo para que la sombra no se corte */
    padding-bottom: 15px !important; 
}

/* Ajuste opcional de la tabla interna para dar margen lateral */
#programAreaCourses table.table {
    /* * Le damos un 98% de ancho en lugar de 100%
     * para dejar 1% de espacio a cada lado para el efecto zoom.
     */
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =======================================================
 * MOBILE FIX: TEXT WRAPPING
 * Permite que los títulos largos fluyan a dos líneas en móvil
 *========================================================*/

@media (max-width: 767px) {
    
    /* 1. Target al enlace flex */
    #programAreaCourses table.table a {
        /* Permite que el texto baje a la siguiente línea */
        white-space: normal !important; 
        
        /* Deja que la altura sea automática (crezca) */
        height: auto !important; 
        
        /* Ajusta el interlineado para que se lea bien en bloque */
        line-height: 1.4 !important;
        
        /* (Opcional) Si sientes que el texto queda muy pegado a los bordes arriba/abajo */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* 2. Asegurar que la fila contenedora también crezca */
    #programAreaCourses table.table tr {
        height: auto !important;
        overflow: visible !important; /* Para que no corte nada extra */
    }
}

/*******************************************************
 * HEADING STANDARDIZATION: FONT, COLOR, SIZE, AND SPACING
 * Applies CMS-defined styles (Montserrat, Color, Exact REM Sizes, 
 * Letter Spacing, etc.) to the specific content profile areas.
 *******************************************************/

/* 1. Universal Styles (Color, Font, and Spacing) */
/* Targets all headings in the course profile and certificate profile areas. */
#courseProfile h1, #courseProfile h2, #courseProfile h3, 
#courseProfile h4, #courseProfile h5, #courseProfile h6,
#certProfile h1, #certProfile h2, #certProfile h3, 
#certProfile h4, #certProfile h5, #certProfile h6 {
    /* Base Color */
    color: #343434 !important; 
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important; /* Standardized Bold Weight */

    /* Consistent Spacing */
    margin-top: 1.5rem !important; 
    margin-bottom: 0.5rem !important; 
    padding: 0 !important;
}

/* 2. Standardized Font Sizes and Specific Styles (based on CMS values from #mainContent) */

/* H1: Largest heading (Primary Title) */
#courseProfile h1, #certProfile h1 {
    font-size: 3.125rem !important;
    letter-spacing: .05rem !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important; /* Adjusted for safety */
    font-style: normal !important; 
}

/* H2: Secondary heading */
#courseProfile h2, #certProfile h2 {
    font-size: 2.1756rem !important;
    letter-spacing: -.002rem !important;
    line-height: 1.142 !important;
    font-style: normal !important;
}

/* H3: Tertiary heading (Uses specific brand color) */
#courseProfile h3, #certProfile h3 {
    font-size: 1.7rem !important;
    line-height: 1.089 !important;
}

/* H4: Smaller heading */
#courseProfile h4, #certProfile h4 {
    font-size: 1.2838rem !important;
    line-height: 1.24 !important;
    text-transform: uppercase !important;
}

/* H5 and H6: Smallest headings */
#courseProfile h5, #certProfile h5 {
    font-size: 1.1025rem !important;
    font-style: normal !important;
}
#courseProfile h6, #certProfile h6 {
    font-size: 1rem !important;
}

/* =======================================================
 * MOBILE TYPOGRAPHY: COURSE & CERTIFICATE PROFILES
 * Applies responsive font sizing (approx 25% smaller) 
 * to specific profile IDs to prevent text wrapping issues.
 * Scoped to max-width 767px.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Universal Spacing Adjustment */
    /* Reduce top margin slightly to save vertical space on mobile */
    #courseProfile h1, #courseProfile h2, #courseProfile h3, 
    #courseProfile h4, #courseProfile h5, #courseProfile h6,
    #certProfile h1, #certProfile h2, #certProfile h3, 
    #certProfile h4, #certProfile h5, #certProfile h6 {
        margin-top: 1.2rem !important; 
    }

    /* 2. H1: Primary Title (Course Name) */
    /* Desktop: 3.125rem -> Mobile: 2.25rem */
    #courseProfile h1, #certProfile h1 {
        font-size: 2.25rem !important; 
        line-height: 1.2 !important; /* Increased line-height for wrapping */
        letter-spacing: 0.02rem !important; /* Tighter spacing */
    }

    /* 3. H2: Secondary Heading */
    /* Desktop: 2.17rem -> Mobile: 1.75rem */
    #courseProfile h2, #certProfile h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* 4. H3: Tertiary Heading */
    /* Desktop: 1.7rem -> Mobile: 1.4rem */
    #courseProfile h3, #certProfile h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* 5. H4: Quaternary Heading (Uppercase) */
    /* Desktop: 1.28rem -> Mobile: 1.15rem */
    #courseProfile h4, #certProfile h4 {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    /* 6. H5: Smallest Heading */
    /* Desktop: 1.10rem -> Mobile: 1.05rem */
    #courseProfile h5, #certProfile h5 {
        font-size: 1.05rem !important;
    }

    /* 7. H6: Label / Disclaimer */
    /* Kept at 1rem to ensure readability (don't go smaller than body text) */
    #courseProfile h6, #certProfile h6 {
        font-size: 1rem !important;
    }
}

/* 2. Add Margin to Paragraphs and List Items */
/* This ensures paragraphs and list items maintain separation between them. */
#courseProfile p,
#courseProfile ul,
#courseProfile ol,
#courseProfile blockquote {
        /* Brand Color (NOTE: Adjust #171717 if your primary color is different) */
    color: #171717 !important; 
    /* 1em or 1.5em ensures good spacing between blocks of text. */
    margin-bottom: 1.5em !important;
}

/* OPTIONAL: Specific correction for <h2> followed immediately by generic text (like in your example) */
/* The general rule above usually fixes this, but if the H2 needs extra separation: */
#courseProfile h2 + div,
#courseProfile h2 + p {
        /* Brand Color (NOTE: Adjust #171717 if your primary color is different) */
    color: #171717 !important; 
    margin-top: 0.5em !important;
}

/* =======================================================
 * MOBILE READ MORE LINK & ANIMATION
 * Styles the toggle link and animates the content reveal.
 * Scoped to mobile only (max-width 767px).
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Link Styling (Corporate Look) */
    a.morelink,
    .readMore {
        /* Typography & Color */
        color: #8b2331 !important; /* MacEwan Red */
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 700 !important; /* Bold */
        font-size: 0.9rem !important;
        
        /* Decoration */
        text-decoration: underline !important;
        text-decoration-color: #8b2331 !important;
        
        /* Transition */
        transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
        
        /* Layout */
        display: inline-block !important;
        margin-top: 10px !important; 
        cursor: pointer !important;
    }

    /* 2. Hover/Active State */
    a.morelink:hover,
    a.morelink:hover .readMore,
    .readMore:hover {
        color: #34111a !important; /* Dark Brown */
        text-decoration-color: #34111a !important;
    }

    /* 3. Smooth Reveal Animation */
    /* This triggers when the element changes from display:none to block */
    .allcontent {
        animation: fadeInContent 0.6s ease-in-out;
    }

    /* Define the Keyframes */
    @keyframes fadeInContent {
        from { 
            opacity: 0; 
            transform: translateY(-10px); /* Starts slightly above */
        }
        to { 
            opacity: 1; 
            transform: translateY(0); /* Settles in place */
        }
    }
}


/*******************************************************
 * COURSE LIST LINKS STYLES (Targeted Customization)
 * Applies custom SCE link styling only to course titles 
 * within the '.certificateStreamItems' list to prevent 
 * global link interference.
 *******************************************************/

.certificateStreamItems .certificateStreamItemHeader {
    /* Base Link Color */
    color: #8b2331 !important; 
    
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    
    /* Optional: Make the text slightly bolder for emphasis */
    
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

.certificateStreamItems .certificateStreamItemHeader:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important; 
    
    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/* Optional: Styling for the course code span within the link */
.certificateStreamItems .certificateStreamItemHeader .courseCode {
    /* Makes the course code bold */
    font-weight: 700 !important;
    /* color: #333333;  <-- Uncomment and adjust if a specific color is needed for the code */
}

/*******************************************************
 * CERTIFICATES APPLYING TOWARDS LINKS
 * Ensures links within the list of related certificates 
 * use the SCE branding color, isolated by the container ID.
 *******************************************************/

#courseProfileCertificates a {
    /* Base Link Color (SCE Primary Color: #8b2331) */
   /* Base Link Color */
    color: #8b2331 !important; 
    
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    
    /* Optional: Make the text slightly bolder for emphasis */
    
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
    
    /* Optional: Font weight adjustment */
    font-weight: 700 !important;
}

#courseProfileCertificates a:hover {
    /* Hover Link Color (Darker SCE shade) */
    color: #34111a !important; 
    
    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/*******************************************************
 * GENERIC COURSE SECTION LINKS (Applies to all sections)
 * Targets text links inside the collapsible section details panel.
 *******************************************************/

/* Targets any anchor tag (a) that is NOT a button inside a panel-collapse */
.panel-collapse a:not(.btn) {
    /* Base Link Color (SCE Primary Color: #8b2331) */
    color: #8b2331 !important; 
    
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
    
    /* Font weight adjustment for visibility */
    font-weight: 700 !important;
}

.panel-collapse a:not(.btn):hover {
    /* Hover Link Color (Darker SCE shade: #34111a) */
    color: #34111a !important; 
    
    /* Maintain or slightly intensify underline on hover */
    text-decoration: underline !important;
}

/*******************************************************
 * GENERIC COURSE SECTION LABELS
 * Applies a bold font weight to labels within the course 
 * section details (e.g., "Section Title", "Course Fee(s)", etc.).
 *******************************************************/
.courseSectionDescription .labelSpanStyle {
    /* Use 700 for a clear bold effect */
    font-weight: 700 !important; 
}

/*******************************************************
 * BUTTON ACTION BLOCK SPACING
 * Applies consistent vertical padding to the container holding 
 * the course enrollment action buttons for clear separation.
 *******************************************************/
.courseSectionEnrollmentActions {
    /* Uses !important to ensure this overwrites the inline style 
       and any low-specificity styles applied by the CMS/Bootstrap. */
    padding: 50px 0 !important; 
    
    /* Good practice: ensure default margins are reset if necessary */
    margin: 0 !important;
}

/*******************************************************
 * SOLUTION 1: PADDING ON #breadcrumb (Most Reliable Container)
 * Adds internal vertical padding to the entire navigation block.
 *******************************************************/
#breadcrumb {
    /* Add internal space above and below the content */
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/*******************************************************
 * SEARCH BREADCRUMB CUSTOMIZATION
 * Styles for the "Search Results" and "Search Again" links 
 * and their separator to match SCE branding.
 *******************************************************/

 /* 1. Link Color and Size */
#searchBreadcrumb a {
    color: #171717 !important; /* Apply SCE branding color */
    display: inline;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .77rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: -.002rem !important;
    padding: 0 .6rem 0 .7rem !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    transition: color .4s, -webkit-text-decoration .3s;
    transition: color .4s, text-decoration .3s;
    transition: color .4s, text-decoration .3s, -webkit-text-decoration .3s;
}

#searchBreadcrumb a:hover {
    color: #8b2331 !important;
    -webkit-text-decoration: undertine !important;
    text-decoration: underline !important;
}

/* 2. Back Icon Color */
#searchBreadcrumb #searchBreadcrumbBackIcon {
    color: #171717 !important; /* Match the icon color to the link color */
    font-size: 1rem !important;
    margin-right: -3px !important; /* Add slight spacing after the icon */
}

/* =======================================================
 * PAGE: CERTIFICATE PROFILE (Stream Details)
 * Styles the accordion and course lists on the certificate page.
 * Selectors are unique to this page to avoid conflicts.
 *========================================================*/

#certificateNumRequired {
 /* * MUST DO: 'inline-block' allows the <span> to have
  * padding, margins, and a background color properly.
  */
 display: inline-block; 
 
 /* Background & Text Styling */
 background-color: #EBE5E9; /* Light grey background */
 color: #34111A; /* Dark text color */
 font-family: 'Montserrat', sans-serif;
 font-weight: 700; /* Bold text */
 font-size: 0.9rem;
 
 /* Spacing and shape */
 padding: 8px 12px 8px 10px; /* Top, Right, Bottom, Left */
 margin-bottom: 20px; /* Space below the badge */
 margin-top: 15px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-right-radius: 50px;
 border-bottom-left-radius: 4px;
}


/* =======================================================
 * PAGE: CERTIFICATE PROFILE (Stream Details) - v2
 * Styles the accordion and course lists on the certificate page.
 * (v2: Fixes background conflict and H2 specificity)
 *========================================================*/

/* 1. Main Container (NEW)
 * This is where the grey background and padding go.
 *******************************************************/
#certificateStreams {
 background-color: #f0f0f0;
 padding: 15px 15px 5px 15px; /* Added top padding for the H2 */
 border-radius: 4px;
 margin-top: 0px !important;
}

/* 2. Main Title Style ("Courses")
 * H2 Container (remains transparent)
 *******************************************************/
#certificateStreams .sectionHeader {
 padding: 0 !important;
 margin-bottom: 1rem;
 background-color: transparent !important; /* Correct: lets the grey show through */
 border: none !important;
}

/* The H2 (MODIFIED to win specificity) */
#certificateStreams h2 {
 /* --- Vertical Bar --- */
 border-left: 3px solid #8b2331;
 padding-left: 0.5rem !important;
 display: inline-block;

 /* --- Font Styles (Now win) --- */
 font-family: 'Montserrat', sans-serif !important;
 font-size: 1.1025rem !important;
 font-weight: 700 !important;
 font-style: normal !important;
 letter-spacing: normal !important;
 line-height: 1.2 !important;
 margin-top: 1.5rem !important; /* Remove default margins */
}

/* 3. Accordion Panel Style (Shadow and Background)
 * (No changes)
 *******************************************************/
#certificateStreamsContainer .certificateStreamContainer {
 border: none !important;
 margin-bottom: 1rem !important;
 box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
 border-radius: 8px !important;
 overflow: hidden;
 background: #fff !important; 
}

#certificateStreamsContainer .card-header {
 background-color: transparent !important;
 border-bottom: none !important;
}

/* =======================================================
 * 3b. ACCORDION CONTENT STYLE (MODIFIED)
 * Targets the .card-body INSIDE the collapsible panel
 *========================================================*/
#certificateStreamsContainer .panel-collapse .card-body {
 /* We force the content area background to be GREY */
 background-color: transparent !important;
 
 /* We give padding so the boxes don't touch the edges */
 padding: 15px !important;
 
 /* 'border: none' was moved to rule 3c */
}

/* =======================================================
 * 3c. BOOTSTRAP BORDER FIX (NEW RULE!)
 * Targets the .card that is the collapsible panel
 *========================================================*/
#certificateStreamsContainer .panel-collapse.card {
  /*
   * This overrides Bootstrap's 'border: 1px solid ...'
   * by targeting the 'div' that has BOTH classes.
   */
  border: none !important;
}


/* 4. Accordion Icons (Global)
 * (No changes - if you already have it, don't repeat it)
 *******************************************************/
.panelHeaderIcon.glyphicon-plus::before {
 content: "\f078" !important; 
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
 font-weight: 900 !important; 
}
.panelHeaderIcon.glyphicon-minus::before {
 content: "\f077" !important; 
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
 font-weight: 900 !important;
}

/* 5. Course Style (White Boxes)
 * (Switched to robust 'position: absolute' logic)
 *******************************************************/
#certificateStreamsContainer .certificateStreamItem {
    display: block; 
    margin-bottom: 10px; 
    background-color: white !important; 
    border-radius: 4px; 
    overflow: hidden; /* This is key */
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #EBE5E9;
}

#certificateStreamsContainer .certificateStreamItems {
    padding-left: 0;
    margin-top: 10px; 
}

/* === MODIFIED RULE (The <a> tag) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader {
    /* * We use 'display: block' instead of 'flex'.
     * This makes the <a> a simple block container.
     */
    display: block !important;
    
    /* * 'position: relative' is the anchor for
     * the ::before and ::after elements.
     */
    position: relative !important; 
    
    /* * The padding defines the height AND makes room.
     * 12px top/bottom = height
     * 45px left = room for the maroon bar
     * 40px right = room for the chevron arrow
     */
    padding: 12px 40px 12px 45px !important; 
    
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    color: #34111a !important;
    text-decoration: none !important;
    background-color: transparent !important;
}

/* === MODIFIED RULE (The ::before element) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader::before {
    content: "\f02d"; /* fa-book */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif; 
    font-weight: 900; 
    
    /* --- THIS IS THE FIX --- */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    
    /* * This forces the bar to be 100% of the <a> tag's
     * height, no matter how tall the <a> gets.
     */
    height: 100% !important;
    
    width: 35px !important; 
    background-color: #EBE5E9 !important;
    color: #34111A !important; 
    border-radius: 4px 0 0 4px !important;
    
    /* * We use flexbox here just to center the icon
     * INSIDE the maroon bar.
     */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1rem !important;
}

/* === NEW RULE (Spacing for Text) === */
/* * This adds a small gap between the course code
 * and the course title, since they are both inline.
 */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader .courseCode {
    margin-right: 0.5em;
}


/* === MODIFIED RULE (The ::after arrow) === */
#certificateStreamsContainer .certificateStreamItem a.certificateStreamItemHeader::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900; 
    font-size: 1rem;
    color: #34111a;
    
    /* * Position the arrow on the right side
     * and center it vertically.
     */
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    
    /* Fade-in animation */
    opacity: 0; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

/* (Hover rules modified) */
#certificateStreamsContainer .certificateStreamItem:hover {
    transform: scale(1.02);
    /* box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.14); */ /* <-- LÍNEA ELIMINADA O COMENTADA */
    z-index: 10;
    overflow: visible; 
    border: 1px solid #EBE5E9;
}

#certificateStreamsContainer .certificateStreamItem:hover a.certificateStreamItemHeader::after {
    opacity: 1;
    /* Animate arrow, but keep vertical centering */
    transform: translateY(-50%) translateX(0); 
}

/*
 * 6. CERTIFICATE ACCORDION - HEADER TITLE
 * Styles the <h3> title inside each accordion panel
 *******************************************************/

#certificateStreamsContainer h3.certificateStreamHeader {

  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  color: #34111A; /* Color oscuro */
  
  /* Quitar cualquier estilo de 'card-title' de Bootstrap */
  margin-bottom: 0 !important; 
}

/* =======================================================
 * 7. ACCORDION ALIGNMENT FIX (Flexbox) - v2
 * Vertically centers the title and icon
 *========================================================*/

/* 1. Target the .row inside the header */
/* This .row is ALREADY a flex container (from Bootstrap) */
#certificateStreamsContainer .card-header .row {
    
    /*
     * This is the magic rule: It tells the flex row
     * to vertically center its children (the .col-10 and .col-2)
     */
    align-items: center !important; 
}

/* 2. (Recommended) Clean up margins */
/* This removes any default margins that offset the centering */

#certificateStreamsContainer .card-header h3 {
    margin-bottom: 0 !important;
    margin-top: 0.5rem !important;
}

#certificateStreamsContainer .panelHeaderIcon {
    /* This removes your 'magic number' hack */
    margin-top: 0 !important; 
}

/* =======================================================
 * 8. CERTIFICATE "MINIMUM REQUIRED" STYLE
 * Makes the "Minimum Required" label bold.
 * (Comments are in English)
 *========================================================*/

/*
 * By targeting .minRequiredLabel INSIDE #certificateStreamsContainer,
 * we ensure this rule only applies to this specific page
 * and won't conflict with other pages.
 */
#certificateStreamsContainer .minRequiredLabel {
    font-weight: 700 !important;
}

/*
 * This adds the icon to the LEFT side.
 * (Tú pediste ::after, pero ::before es para la izquierda)
 */
#certificateNumRequired::before {
 /* Icon: Using fa-book (un libro) */
 content: "\f02d"; 
 
 /* Font Awesome family */
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
 font-weight: 900; /* Solid icon */
 
 /* Spacing and color */
 margin-right: 8px; /* Space between icon and text */
 color: #8e2736; /* MacEwan red for the icon */
}


/* If the separator is applied via content (common practice): */
.searchBreadcrumbSeparator:after {
    content: "/"; /* Assuming the separator character is '|' */
    color: #171717 !important; /* Use the SCE color for the separator */
    font-size: .77rem !important;
    opacity: 0.8 !important; /* Make it slightly transparent for subtlety */
}

/* =======================================================
 * CUSTOM TAB STYLING (for Program Streams)
 * (Revised to style the new JavaScript sliding indicator)
 *========================================================*/

/* 1. The Tab Bar Container (the <ul>)
 * This adds the full-width, 1px dividing line.
 * !! MUST be position: relative for the indicator !!
 */
.sce-tabs {
 /* Positioning */
 position: relative; /* This is the anchor for the indicator */
 
 /* Layout: Center the tabs */
 justify-content: center;
 
 /* The 1px full-width bottom border */
 border-bottom: 0px solid #8E8F90;
 
 /* Remove default Bootstrap bottom border */
 border-top: none;
 border-left: none;
 border-right: none;
 
 /* Space below the tab bar */
 margin-bottom: 2rem;
}

/* 2. The Tab Links (the <a>)
 * Defines the new font styles.
 */
.sce-tabs .nav-link {
 /* Remove all default Bootstrap borders */
 border: none !important;
 border-radius: 0 !important;
 
 /* New Font Styles */
 font-family: 'Montserrat', sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 color: #171717; /* Dark text color */
 
 /* Sizing and Spacing */
 padding: 0.75rem 1.5rem;
 
 /* KEY: Pull the tab down to sit *on* the 1px line */
 margin-bottom: -1px;
 
 transition: color 0.3s ease;
}

/* 3. The Hover State (for INACTIVE tabs only) */
.sce-tabs .nav-link:not(.active):hover {
 color: #171717; 
 background-color: transparent;
}

/* 4. The Active Tab */
.sce-tabs .nav-link.active {
 color: #8b2331; /* Active text color */
 background-color: transparent;
}

/* 5. THE NEW SLIDING INDICATOR 
 * This is the <div> added by the JavaScript.
 */
.sce-tab-indicator {
 /* Sizing and Color */
 height: 5px;
 background-color: #8b2331;
 
 /* Positioning */
 position: absolute;
 bottom: -1px; /* Sits on top of the grey 1px line */
 
 /* !! THE ANIMATION !! */
 /* Animate 'left' and 'width' changes smoothly */
 transition: left 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
       width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* =======================================================
 * STYLING FOR "COURSES" AND "CERTIFICATES" TABLES
 * (FINAL v4: Fixes background on non-tabbed pages)
 *========================================================*/

/* 0. Style the Tab Content Area (The parent)
 * This works for the TABBED page.
 */
#programStreamCoursesAndCertificates {
 /* This container ONLY provides the grey background on the tabbed page */
 background-color: #EBE5E9;
 padding: 20px; 
 border-radius: 4px;
 
 /* Fixes shadow clipping on tabbed page */
 overflow: visible; 
}

/* 1. Target BOTH table containers
 * This rule works for BOTH tabbed and non-tabbed pages.
 */
#programStreamCourses,
#programStreamCertificates {
 /* Ensures the .card styles don't add unwanted backgrounds/borders */
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 
 /* !! KEY FIX !!
  * Add this so non-tabbed pages (like your screenshot)
  * ALSO get the grey background and padding.
  */
 background-color: #EBE5E9 !important;
 /*padding: 20px; */
 border-radius: 4px;
 overflow: visible !important; /* Allows shadow to show */
}

/*
 * Add horizontal padding to the scroll container
 * to absorb the 'scale' and prevent scrollbars.
 */
#programStreamCourses .table-responsive,
#programStreamCertificates .table-responsive {
 /* Add 10px padding on the sides */
 padding-left: 10px;
 padding-right: 10px;
 /* Hide any potential overflow */
 overflow-x: hidden;
}

/* 2. Style the Table Rows (<tr>) as "Boxes" */
#programStreamCourses table.table tr,
#programStreamCertificates table.table tr {
 display: block; 
 margin-bottom: 15px; /* Increased margin for shadow space */
 
 /* White background is ON THE ROW (Fixes inconsistent widths) */
 background-color: white !important; 
 
 /* Rounding and clipping are ON THE ROW */
 border-radius: 4px; 
 overflow: hidden; /* This clips the ::before icon box */
 
 /* Anchor for the hover effect */
 position: relative;
 z-index: 1;
 
 /* Transition for the hover effects */
 transition: transform 0.2s ease, 
       box-shadow 0.2s ease,
       overflow 0s 0.2s; /* Delay overflow change */
}

/* 3. Style the Table Cells (<td>) and Links (<a>) */
#programStreamCourses table.table td,
#programStreamCertificates table.table td {
 border-top: none; 
 padding: 0; 
 border: none;
}

#programStreamCourses table.table a,
#programStreamCertificates table.table a {
 /* Layout: Use Flexbox */
 display: flex;
 justify-content: space-between; /* Pushes arrow to the right */
 align-items: center;
 width: 100%; 
 
 /* Sizing: Make space on the left for the icon box */
 padding: 12px 15px 12px 45px; 
 
 /* Typography */
 font-weight: 500;
 font-size: 1rem;
 color: var(--macewan-blue-dark, #34111a);
 text-decoration: none !important;
 
 /* Positioning Anchor for the icon box */
 position: relative; 
 
 /* The <a> tag is transparent */
 background-color: transparent !important;
}

/* 4. The Icon Box (Generated with ::before) */
#programStreamCourses table.table a::before,
#programStreamCertificates table.table a::before {
 /* Use fa-book or fa-file-certificate */
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif; 
 font-weight: 900; 
 
 /* Box Positioning */
 position: absolute;
 left: 0; top: 0; bottom: 0;
 width: 35px; 
 
 /* Box Style */
 background-color: var(--macewan-blue-dark, #34111a);
 color: white; 
 border-radius: 4px 0 0 4px; /* Rounded left corners */
 
 /* Icon Centering */
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1rem;
}

/* 5. Set the icon for "Courses" (fa-book) */
#programStreamCourses table.table a::before {
 content: "\f02d"; /* fa-book */
}

/* 6. Set the icon for "Certificates" (fa-file-certificate) */
#programStreamCertificates table.table a::before {
 content: "\f5f3"; /* fa-file-certificate */
}

/* 7. The Arrow Icon (Generated with ::after) */
#programStreamCourses table.table a::after,
#programStreamCertificates table.table a::after {
 content: "\f054"; /* fa-chevron-right */
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
 font-weight: 900; 
 display: inline-block; 
 font-size: 1rem;
 color: var(--macewan-blue-dark, #34111a);
 
 /* Animation Start State: Hidden and shifted */
 opacity: 0; 
 transform: translateX(5px);
 
 transition: opacity 0.3s ease, transform 0.3s ease; 
}

/* 8. Hover Effects for the Row */
#programStreamCourses table.table tr:hover,
#programStreamCertificates table.table tr:hover {
transform: scale(1.02);
/* box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.14);*/
 z-index: 10;
 
 /* !! KEY FIX: Un-clip the overflow ON HOVER !! */
 overflow: visible;
 
 /* Make overflow change happen *instantly* */
 /* !! TYPO FIX: Removed 's' before overflow !! */
 transition: transform 0.2s ease, 
       box-shadow 0.2s ease,
       overflow 0s 0s; 
}

/* 9. Hover Effect for the Arrow */
#programStreamCourses table.table tr:hover a::after,
#programStreamCertificates table.table tr:hover a::after {
 opacity: 1; /* Show the arrow */
 transform: translateX(15px); /* Slide it into place */
}

/* =======================================================
 * PROGRAM STREAM - FULL-WIDTH OVERRIDE
 * Overrides Bootstrap's .col-lg-6 to force 100% width
 * on non-tabbed program pages.
 *========================================================*/

/*
 * By using .programStream as a parent, this selector
 * (0,2,0) becomes stronger than Bootstrap's .col-lg-6 (0,1,0).
 * This forces both 'Courses' and 'Certificates' columns
 * to be 100% wide, stacking them vertically.
 */
.programStream .col-lg-6 {
 /* Annul Bootstrap's 50% width restrictions */
 flex: 0 0 100% !important;
 max-width: 100% !important;
}

/* =======================================================
 * MOBILE OPTIMIZATION: Programs & Streams Tables
 * Forces 100% width and fixes text wrapping/clipping
 *========================================================*/

@media (max-width: 767px) {
    
    /* 1. Force Table Width to 100% */
    #programStreamCourses table.table,
    #programAreaCourses table.table {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 2. Allow Text Wrapping (Multi-line) & Dynamic Height */
    #programStreamCourses table.table a,
    #programAreaCourses table.table a {
        /* Allow text to wrap to next line */
        white-space: normal !important; 
        
        /* Allow container to grow vertically */
        height: auto !important;        
        
        /* Adjust readability */
        line-height: 1.4 !important;
        
        /* Add padding to let text breathe */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        
        /* Ensure text doesn't overlap the arrow on the right */
        padding-right: 40px !important; 
    }

    /* 3. Fix Chevron Position (Absolute Center) */
    /* Keeps the arrow vertically centered even if text is 3 lines tall */
    #programStreamCourses table.table a::after,
    #programAreaCourses table.table a::after {
        top: 50% !important;
        transform: translateY(-50%) !important; /* Perfect vertical center */
        right: 15px !important; /* Fixed distance from right edge */
        position: absolute !important; /* Keep it absolute for stability */
    }

    /* 4. Ensure Row Grows & Doesn't Clip */
    #programStreamCourses table.table tr,
    #programAreaCourses table.table tr {
        height: auto !important;
        /* Important: Allows shadows and content to show fully */
        overflow: visible !important; 
    }
}


/* =======================================================
 * PROGRAM STREAM HEADER REDESIGN (COURSES)
 * Replaces the static 'Courses' title with "Explore all →".
 *========================================================*/

/* 1. Style the Header Container (the <div>) */
#programStreamCourses .card-header {
 background-color: transparent !important;
 border: none !important;
 padding: 0;
 margin-bottom: 1rem;
}

/* 2. Target the Original H2 Element */
#programStreamCourses .card-header h2 {
 /* "Hides" the original "Courses" text */
 font-size: 0 !important; 
 color: transparent;
}

/* 3. Create the New Text (using ::after) */
#programStreamCourses .card-header h2::after {
 /* This creates the new text */
 content: "Explore courses →"; 
 
 /* Apply your requested font styles */
 color: #54141d !important;
 font-size: 1.2838rem !important;
 line-height: 1.24 !important;
 
 /* Add back standard font settings */
 font-family: 'Montserrat', sans-serif;
 font-weight: 700; /* Bold */
 
 /* Ensure it renders correctly */
 display: inline-block;
}

/* =======================================================
 * PROGRAM STREAM HEADER REDESIGN (CERTIFICATES)
 * Replaces the static 'Certificates' title.
 *========================================================*/

/* 1. Style the Header Container (the <div>) */
#programStreamCertificates .card-header {
 background-color: transparent !important;
 border: none !important;
 padding: 0;
 margin-bottom: 1rem;
}

/* 2. Target the Original H2 Element */
#programStreamCertificates .card-header h2 {
 /* "Hides" the original "Certificates" text */
 font-size: 0 !important; 
 color: transparent;
}

/* 3. Create the New Text (using ::after) */
#programStreamCertificates .card-header h2::after {
 /* This creates the new text */
 content: "Prepare for an industry certification"; 
 
 /* Apply your requested font styles */
 color: #54141d !important;
 font-size: 1.2838rem !important;
 line-height: 1.24 !important;
 
 /* Add back standard font settings */
 font-family: 'Montserrat', sans-serif;
 font-weight: 700; /* Bold */
 
 /* Ensure it renders correctly */
 display: inline-block;
}

/*******************************************************
 * ICON REPLACEMENT: CHEVRON LEFT to HOME (Specific)
 * Forces the 'Home' icon (Unicode \f015) using the 
 * unique ID to prevent global alteration of other icons.
 *******************************************************/

#searchBreadcrumbBackIcon {
    /* 1. Ensure the correct Font Family is used (Font Awesome) */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important; /* Home is usually a solid/bold icon */
    /* 2. Force the content to be the HOME icon Unicode */
    content: "\f015" !important; 
    /* 3. Ensure the icon inherits the link color */
    color: #171717 !important; 
    font-size: 1.1em !important;
}

/* If the element is still using the glyphicon class, this is the most defensive CSS: */
#searchBreadcrumbBackIcon.glyphicon.glyphicon-chevron-left::before {
    content: "\f015" !important;
}

  /* ==========================================================
   FORM BUTTONS OVERRIDES 
   ========================================================== */

/* 1. Botones de Acción Principales (clase Bootstrap) */
/* Aplica el marrón de SCE a los botones con la clase 'btn-primary' */
.btn-primary {
    background-color: #d51f37 !important; 
    border-color: #d51f37 !important;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
}

/* Opcional: Estilo al pasar el ratón para el marrón */
.btn-primary:hover {
    background-color: #54141d !important;
    border-color: #54141d !important;
}

/* 2. Botones de Formulario Nativos (<input type="submit/button">) */
/* Aplica el marrón de SCE a los botones nativos que son de acción */
/* Si se les aplica la clase .btn o .btn-primary, heredan el estilo anterior. 
   Si no, es buena práctica cubrirlos también: */
input[type="submit"], 
input[type="button"] {
    /* Aquí podrías necesitar reglas adicionales si no usan las clases .btn */
    /* Pero si tienen la clase .btn-primary, las reglas de arriba se aplican */
}

/* Neutraliza el color de fondo para los botones de icono dentro de .btn-group */
.btn-group .btn {
    /* Fondo transparente y borde transparente */
    background-color: transparent !important;
    border-color: transparent !important;
    
    /* Color del icono/texto. Usa un gris o el color de texto por defecto */
    color: #333333; 
}

/* Opcional: Estilo al pasar el ratón para los iconos */
.btn-group .btn:hover {
    background-color: #EEEEEE !important; /* Un fondo muy ligero al pasar el ratón */
    border-color: #EEEEEE !important;
    color: #000000;
}

/*******************************************************
 * SECONDARY BUTTON CUSTOMIZATION (Global override for .btn-secondary)
 * This will affect ALL buttons with the .btn-secondary class.
 *******************************************************/

.btn-secondary {
    background-color: #8b2331 !important; /* Marrón de SCE (ej.) */
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
}

.btn-secondary:hover {
    background-color: #54141d !important;
    border-color: #54141d !important;
}

/*******************************************************
 * MODAL TYPOGRAPHY BASE (Montserrat Font) 
 * Applies Montserrat globally but excludes the close icon and button.
 *******************************************************/

/* Targets the main content wrapper and general text containers. */
.modal-content, 
.modal-content div, 
/* Modificado: Excluye cualquier 'span' que sea descendiente del botón '.close' */
.modal-content span:not(.close span) { 
    font-family: 'Montserrat', sans-serif !important;
}

/* Specific exclusion for the button itself if it contains text */
.modal-content .close {
    font-family: inherit !important;
}

/* Explicitly targets the modal title for safety. */
.modal-title {
    font-family: 'Montserrat', sans-serif !important;
}

/*******************************************************
 * MODAL SPACING AND SPECIFIC STYLES CORRECTIONS
 * Corrects tight spacing and applies specific formatting.
 *******************************************************/

/* A. Headings Spacing (Separates heading from subsequent content) */
.modal-content h1, 
.modal-content h2, 
.modal-content h3, 
.modal-content h4, 
.modal-content h5, 
.modal-content h6 {
    /* Uses 'em' for dynamic spacing based on the heading size */
    margin-bottom: 0.5em !important; 
    margin-top: 1em !important; 
}

/* B. Paragraph and List Spacing (Separates content blocks from each other) */
.modal-content p,
.modal-content ul,
.modal-content ol {
    /* Ensures sufficient vertical separation between text blocks */
    margin-bottom: 1em !important; 
}

/* C. Specific Label Style (as established in previous steps) */
/* Ensures the 'Number of Sessions' and similar labels are bold */
.modal-content .labelSpanStyle {
    font-weight: 700 !important;
}

/* D. Table Header Text Styling (Ensures bold text and alignment for readability) */
.modal-content table th {
    text-align: left !important; 
    font-weight: 700 !important; 
}

/* E. Table Cell Styling (Ensures standard spacing and top alignment for multi-line content) */
.modal-content table td {
    padding: .75rem !important; 
    vertical-align: top !important;
}

/*******************************************************
 * COOKIE CONSENT BANNER STYLING
 * Applies the application's global font, background, and button styles.
 *******************************************************/

/* 1. Global Font and Background */
.cc-window {
    /* Set the background color to match your application's theme. 
       (e.g., if your main brand color is blue: #007bff) */
    background-color: #34111a !important; /* <--- CHANGE THIS */
    /* Apply the Montserrat font to the entire banner */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8em !important;
    /* Ensure text color is readable against the new background */
    color: #fff !important; /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.43);
-webkit-box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.43);
-moz-box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.43);
}

/* 2. Link Styling inside the banner */
.cc-window .cc-message a {
    /* Style links to match your app's link color */
    /* Base Link Color */
    color: #8b2331 !important; 
    /* Ensure the link is underlined for clear visibility */
    text-decoration: underline !important;
    /* Optional: Make the text slightly bolder for emphasis */
      font-weight: 700 !important;
    /* Smooth transition effect for hover state changes */
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

.cc-window .cc-message a:hover {
    /* Style links to match your app's link color */
    /* Base Link Color */
    color: #fff !important; 
    /* Ensure the link is underlined for clear visibility */
    text-decoration: none !important;
}

.cc-window .cc-message a:visited {
    /* Optional: Style for visited links (can be the same as base color or a different shade) */
    color: #fff !important; 
}

/* 3. Button Styling (Deny and Accept) */
.cc-window .cc-btn {
    /* Uniform font and button styling */
   background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important; /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-btn:hover {
    background-color: #54141d !important;
    border-color: #54141d !important;
}

/* 4. Accept Button (Primary/Highlight style) */
.cc-window .cc-allow {
    /* Use your application's primary button color for 'Accept' */
    /* Uniform font and button styling */
   background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important; /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-allow:hover {
    background-color: #54141d !important;
    border-color: #54141d !important;
}

/* 5. Deny Button (Secondary/Outline style) */
.cc-window .cc-deny {
    /* Use a secondary, subtle, or outline style for 'Deny' */
    background-color: #8b2331 !important;
    border-color: #8b2331 !important;
    border-radius: 0 !important;
    color: #fff !important; /* <--- CHANGE THIS (e.g., #ffffff for light text) */
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    transition: background-color .3s !important;
    text-decoration: none !important;
}

.cc-window .cc-deny:hover {
    background-color: #54141d !important;
    border-color: #54141d !important;
}

/*******************************************************
* PAGE: COURSE PROFILE (Section Details)
 * Component: .sectionHeader Padding Override
 * Reduces Bootstrap's '.card-body' (1.25rem) padding
 * to bring the <h2> title closer to the container edge.
 *******************************************************/

 /*
 * Apply background to the main course accordion container
 */
#courseProfileSections {
    background-color: #f0f0f0;
    padding: 0px 15px 5px 15px;
    border-radius: 4px;
    margin-top: 20px;
}

/* 1. Reduce the padding on the .card-body container itself */
/* We target elements with BOTH classes for high specificity */
.card-body.sectionHeader {
    /* Reduce vertical padding (top/bottom) */
    padding-top: 0px !important;    
    padding-bottom: 0px !important;
    
    /* Keep horizontal padding for alignment */
    padding-left: 5px;
    padding-right: 5px;
    
    /* Ensure the container adapts to the new tight padding */
    line-height: 1.3 !important; 
}

/*
 * Overrides the default Bootstrap '.card' styles
 * for the 'Enroll Now' section header.
 */
#sectionEnrollmentHeader {
 /* Removes the white card background to let the parent bg show through */
 background-color: transparent;
 
 /* Removes the card border for a seamless look */
 border: none;
 
 /* Optional: Removes the shadow if Bootstrap adds one */
 box-shadow: none;
}

/* =======================================================
 * MODAL TABLE: SCHEDULE DATES
 * Standardizes the pop-up schedule table to match the
 * corporate look (Maroon Header + Zebra Striping).
 * Scoped to #sectionSchedulePopupDatesTable
 *========================================================*/

/* 1. General Table Layout */
#sectionSchedulePopupDatesTable {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    
    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important; /* Slightly smaller for modals */
    color: rgb(23, 23, 23) !important;
    border: none !important;
}

/* 2. Header Styling (Maroon) */
#sectionSchedulePopupDatesTable thead th {
    background-color: rgb(52, 17, 26) !important; /* Maroon */
    color: white !important;
    
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important; /* Compact header */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    padding: 12px 15px !important;
    vertical-align: middle !important;
    
    /* Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important;
    border-bottom: none !important;
}

/* Remove right border from last header cell */
#sectionSchedulePopupDatesTable thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* 3. Zebra Striping (Odd/Even Rows) */
#sectionSchedulePopupDatesTable tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important; /* Light Grey */
}

#sectionSchedulePopupDatesTable tbody tr:nth-of-type(even) {
    background-color: #ffffff !important; /* White */
}

/* 4. Cell Styling */
#sectionSchedulePopupDatesTable tbody td {
    padding: 10px 15px !important;
    vertical-align: middle !important;
    border: 1px solid #dee2e6 !important;
    color: rgb(23, 23, 23) !important;
}

/* 5. Specific Column Tweaks (Optional) */
/* Center the Date and Time for better readability */
.sectionSchedulePopupDate,
.sectionSchedulePopupTime {
    white-space: nowrap !important; /* Prevent ugly wrapping */
}

/* =======================================================
 * SECTION: TOTAL SESSIONS BADGE
 * Wraps label and value in a grey pill with calendar icon.
 * Includes manual optical alignment fix.
 *========================================================*/

/* 1. Parent Container (The Pill Shape) */
.sectionTotalSessions {
    /* Layout */
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    
    /* Appearance */
    background-color: #EBE5E9 !important; 
    color: #34111A !important; 
    
    /* Shape */
    /* Reduced top/bottom padding slightly to compensate for the text padding */
    padding: 6px 15px !important; 
    margin-bottom: 10px !important;
    
    /* Border Radius */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;
    
    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* 2. The Icon (Calendar) */
.sectionTotalSessions::before {
    content: "\f073"; /* fa-calendar-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    
    margin-right: 8px !important;
    color: #8e2736 !important; 
    font-size: 1rem !important;
}

/* 3. The Label ("Number of Sessions") - YOUR FIX INCLUDED */
.sectionTotalSessions .labelSpanStyle {
    font-weight: 700 !important;
    margin-right: 5px !important;
    background: transparent !important;
    
    /* Optical Alignment Fix */
    margin-top: 0 !important;
    padding-top: 4px !important; /* Pushes text down to align visually */
    line-height: 1 !important;
}

/* =======================================================
 * APPLICATION HEADER STYLING
 * Applies the maroon vertical bar and custom font
 * to the "Application" header (scoped to #courseApplication).
 *========================================================*/

/* 1. Reset the default card/section header styles */
#courseApplication .sectionHeader {
    background-color: transparent !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1rem;
}

/* 2. Apply the Custom Style to the H2 element */
#courseApplication .sectionHeader h2 {
    /* --- Layout/Design (Vertical Bar) --- */
    border-left: 3px solid #8b2331; /* The maroon vertical bar */
    padding-left: 0.5rem !important; /* Space between bar and text */
    display: inline-block; /* Allows the background/border to wrap the text */

    /* --- Typography (User Requirements) --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1025rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    
    /* Ensure the text color is correct (assuming dark color) */
    color: #34111a !important; 
    
    /* Remove default H2 margins that interfere with vertical bar */
    margin: 25px 0px 0px 0px  !important;
}

/* =======================================================
 * COURSE APPLICATION CARD STYLING
 * Applies background and border to the application card
 * without affecting other cards on the page.
 *========================================================*/

/* Target the specific card inside the Application container */
#courseApplication .card.panel-default {
    /* Background and bottom border (user requirements) */
    background-color: #FFFFFF !important;
        border: none !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* =======================================================
 * APPLICATION INFO LABEL STYLING
 * Makes the "Name" label bold without affecting the value.
 *========================================================*/

/* Target the specific label span inside the application info row */
.courseApplicationInformationContainer .courseApplicationInfo .labelSpanStyle {
    font-weight: 700 !important;
}

/*******************************************************
 * ACCORDION STYLING (COURSE SECTIONS)
 * Overrides default Bootstrap .card styles for headers
 * and adds a modern shadow to each panel.
 *******************************************************/

/* 1. Accordion Panel Shadow & Spacing */
/* We target the individual .card elements inside the main accordion
   to give each section its own shadow, rather than one shadow on the group. */
#courseSectionsAccordion .card {
    border: none !important; /* Remove the default border to rely on the shadow */
    margin-bottom: 1rem !important; /* Add space between accordion items */
    
    /* This shadow is a standard, clean Bootstrap shadow */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
    border-radius: 8px !important; /* Optional: adds rounded corners */
    overflow: hidden; /* Ensures content respects the rounded corners */
}

/* 2. Accordion Header Background */
/* Targets the header div (which has both .card-header and .panelHeadingToggle) */
#courseSectionsAccordion .card-header {
    background-color: #FFFFFF !important; /* Set background to white */
    border-bottom: 1px solid #e9ecef !important; /* Add a subtle bottom border */
}

/* 3. (OPTIONAL) Ensure header text color remains dark on white background */
#courseSectionsAccordion .card-header .courseSectionTitle {
    color: #a6a6a6 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;
}

/* Remove all margins from the H2 tag */
/* This is often the main cause of excessive space */
.sectionHeader h2 {
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Overrides the default section header title styles
 * This selector (#id .class) is stronger than the platform's (.class .class)
 */
#sectionEnrollmentHeader .sectionHeaderTitle {
 
 /* --- Vertical Border --- */
 /* Adds the 3px brown vertical line */
 /* (Using the project's established #8b2331) */
 border-left: 3px solid #8b2331;
 
 /* Adds spacing between the new line and the text */
 padding-left: 0.5rem;
 
 /* Ensures the border/padding apply correctly as a block */
 display: inline-block;

 /* --- Font Overrides --- */
 /* We MUST use !important here to win against the platform's !important rules */
 font-family: 'Montserrat', sans-serif !important;
 font-size: 1.1025rem !important;
 font-weight: 700 !important;
 font-style: normal !important;
 
 /* Resetting other properties from the original rule */
 letter-spacing: normal !important;
 line-height: 1.2 !important; /* A sensible line-height for multi-line text */
}

/* =======================================================
 * COURSE AVAILABILITY STATUS (Icon, Text, and Styled Background)
 * Enhances the "Available" status with a checkmark icon,
 * custom-shaped green background, and specific font size,
 * while also adding a calendar icon to "Future Offering".
 *========================================================*/

/* 1. Base styling for all availability statuses */
/* This ensures the text and icon are styled together */
.courseProfileSectionAvailability {
  /* Use flexbox to align icon and text */
  display: inline-flex;
  align-items: center;
  
  /* Set base font size for the text content */
   font-size: 0.7rem; /* Adjusted text size */
  font-family: 'Montserrat', sans-serif; /* Recommended font */
  font-weight: 600; /* Medium bold */
    text-transform: uppercase;
  /* Add some horizontal padding to the overall container */
  padding: 4px 12px;
  
  /* Smooth transition for background color changes */
  transition: background-color 0.2s ease, color 0.2s ease;
}


/* 2. Styling for the "Available" status (Icon, Text, and Green Background) */
.courseProfileSectionAvailability_available {
  /* Green Background */
  background-color: #3EC3A4; /* Standard green */
  color: white; /* White text for contrast */
  /* Custom Border Radius */
border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 4px;
}

/* 3. Add the Checkmark Icon for "Available" */
.courseProfileSectionAvailability_available::before {
  /* Font Awesome Unicode for 'check-circle' */
  content: "\f058";
  
  /* Ensure it uses the Font Awesome font family */
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
  font-weight: 900 !important; /* Use 'solid' weight */
  
  /* Style the icon */
  font-size: 1em; /* Icon size relative to parent font-size */
  margin-right: 0.5em; /* Space between icon and text */
  vertical-align: middle; /* Align icon vertically */
  color: #fff; /* White icon to match text */
}


/* 4. Styling for "Future Offering" (Adds Calendar Icon, keeps original text) */
.courseProfileSectionAvailability_future_offering {

  background-color: #971A2F; /* Standard green */
  color: #EBE5E9; /* White text for contrast */
  /* Custom Border Radius */
border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 4px;
}

/* 5. Add the Calendar Icon for "Future Offering" */
.courseProfileSectionAvailability_future_offering::before {
  /* Font Awesome Unicode for 'calendar-alt' */
  content: "\f073";
  
  /* Ensure it uses the Font Awesome font family */
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
  font-weight: 900 !important;
  
  /* Style the icon */
  font-size: 1.2em; /* Icon size relative to parent font-size */
  color: #EBE5E9; /* Neutral grey color for the icon */
  margin-right: 0.5em; /* Space between icon and text */
  vertical-align: middle;
}

/* =======================================================
 * DYNAMIC DELIVERY ICONS
 * Requires the JS snippet to add .mode-online, etc.
 *========================================================*/

/* 1. Base Icon Style */
.courseSectionDelivery::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
    margin-right: 8px;
    font-size: 1rem;
    width: 20px; /* Fixed width for alignment */
    display: inline-block;
    text-align: center;
}

/* 2. Icon for ONLINE (Laptop) */
.courseSectionDelivery.mode-online::before {
    content: "\f109"; /* fa-laptop */
    color: #171717; 
}

/* 3. Icon for HYBRID (Exchange/Arrows) */
.courseSectionDelivery.mode-hybrid::before {
    content: "\f362"; /* fa-exchange-alt */
    color: #171717; 
}

/* 4. Icon for IN PERSON (Map Marker) */
.courseSectionDelivery.mode-inperson::before {
    content: "\f3c5"; /* fa-map-marker-alt */
    color: #171717; /* Red */
}

/*******************************************************
 * ACCORDION ICON OVERRIDE (Plus to Chevron-Down)
 * Changes the default Bootstrap 'plus' icon to a 'chevron-down'
 * icon for expandable panel headers.
 *******************************************************/

/* 1. Target the icon when the panel is COLLAPSED (shows chevron-down) */
.panelHeaderIcon.glyphicon-plus::before {
    content: "\f078" !important; 
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important; 
}

/* 2. Target the icon when the panel is EXPANDED (shows chevron-up) */
.panelHeaderIcon.glyphicon-minus::before {
    content: "\f077" !important; 
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* =======================================================
 * ACCORDION ICON HOVER (Tooltip and Background)
 * (FINAL VERSION with text size, no-wrap, and fade-in)
 *========================================================*/

/* 1. Style the hoverable link (the <a> tag) */
/* This defines the "hitbox" (hover area) */
.sectionHeaderChevronContainer a {
 /* Sizing and Shape: Make the hover area big */
 padding: 5px 10px;
 border-radius: 100px;
 
 /* Behavior */
 display: inline-block; /* Makes padding work */
 vertical-align: middle; 
 text-decoration: none;
 
 /* Make the background transparent by default */
 background-color: transparent;
 
 /* Smooth transition for the background */
 transition: background-color 0.2s ease;
}

/* 2. Style the icon itself */
.sectionHeaderChevronContainer a .panelHeaderIcon {
 vertical-align: middle; 
 margin-top: 4px;
}

/* 3. Create the hover text using ::after */
.sectionHeaderChevronContainer a::after {
 /* Use the site's main font, NOT Font Awesome */
 font-family: 'Montserrat', sans-serif;
 
 /* !! NEW: Smaller font size !! */
 font-size: 0.7rem;
 font-weight: 600;
 color: #58565A; /* Dark brown text */
 margin-left: 10px;
 margin-right: 10px;
 vertical-align: middle;
 
 /* !! NEW: Prevent text from wrapping !! */
 white-space: nowrap;
 
 /* !! NEW: Smooth fade-in effect !! */
 content: "";
 opacity: 0;
 transition: opacity 0.2s ease;
}


/* =======================================================
 * DESKTOP HEADER LAYOUT FIX
 * (Restores date layout AND fixes chevron jump/layering)
 *========================================================*/

@media (min-width: 992px) {

 /* --- 1. Repositioning the Date (Restored) --- */
 
 /* Make the card-title the anchor */
 .card-header .card-title {
  position: relative;
  width: 100%; 
 }
 
 /* Stack items vertically (This was missing) */
 .card-header .form-row {
  flex-direction: column;
  align-items: flex-start; 
 }

 /* --- 2. Fix Date Text Wrapping (Restored) --- */
 
 /* Force vertical items to take full width (This was missing) */
 .card-header .form-row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important; 
  flex-basis: 100% !important;
 }

 /* --- 3. Stacking & Order --- */
 
 /* Force all re-ordered items into a stacking context */
 .sectionHeaderSemesterContainer,
 .sectionHeaderCourseCodeContainer,
 .sectionHeaderDeliveryContainer,
 .sectionHeaderChevronContainer {
  position: relative;
 }

 /* Use 'order' to change the visual sequence */
 .sectionHeaderSemesterContainer { 
  order: 1; /* Date goes first */
 }
 .sectionHeaderCourseCodeContainer { 
  order: 2; /* Title goes second */
 }
 .sectionHeaderDeliveryContainer { 
  order: 3; /* Delivery method goes third */
 }
 .sectionHeaderChevronContainer { 
  order: 4; /* Chevron goes last */
  
  /* Position the chevron without 'jumping' */
  position: absolute;
  top: 35px; 
  right: 15px;
  
  /* Bring this container to the front layer */
  z-index: 10;
 }

 /* --- 4. Styling the Date Text --- */
 
 .courseSectionSemester {
  color: #343434 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-optical-sizing: auto !important;
  font-size: 1.2838rem !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  text-transform: uppercase !important;
  text-align: left !important;
 }

 /* --- 5. DESKTOP-ONLY HOVER EFFECTS --- */
 /* These rules are now INSIDE the media query */

 /* When the user hovers the ENTIRE header (on desktop)... */
 .card-header.panelHeadingToggle:hover .sectionHeaderChevronContainer a {
  /* ...apply the background frame to the <a> tag */
  background-color: #f0f0f0;
  text-decoration: none;
 }

 /* When the header is COLLAPSED and hovered (on desktop)... */
 .card-header.collapsed:hover .sectionHeaderChevronContainer a::after {
  /* ...show "Open" text */
  content: "Open";
  opacity: 1; /* Fade in */
 }

 /* When the header is EXPANDED and hovered (on desktop)... */
 .card-header:not(.collapsed):hover .sectionHeaderChevronContainer a::after {
  /* ...show "Close" text */
  content: "Close";
  opacity: 1; /* Fade in */
 }
}

/* =======================================================
 * MOBILE CHEVRON ALIGNMENT
 * Vertically centers the chevron icon on tablet and
 * mobile views where the header is taller.
 *========================================================*/

/*
 * Targets all screens *below* the 992px desktop breakpoint
 */
@media (max-width: 991.98px) {
 
 /*
 * 1. Tell the parent row to vertically center ALL its children
 * (the title block and the chevron block).
 * We add !important to ensure it wins.
 */
 .card-header .form-row {
  vertical-align: middle !important;
 }
 
 /*
 * 2. We MUST override the .float-right class,
 * as 'float' conflicts with 'align-items: center'.
 */
 .sectionHeaderChevronContainer {
  float: none !important;
 }
}

/************************************************************/
/* LANDING PAGE PROGRAMS - CARDS MAIN SECTION
(https://codepen.io/creativemanner/pen/NWrNWrd) */
/************************************************************/

/* --- Style Variables --- */
:root {
    --macewan-blue-dark: #54141d; /* Maroon used in your test */
    --macewan-accent-red: #D41F37; /* Accent red for the badge */
    --card-min-height: 450px;
    /* Cubic transitions for smooth movement */
    --fast-transition: 500ms cubic-bezier(0.19, 1, 0.22, 1);
    --slow-transition: 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- Base Card Styles (.sce-bg-card) --- */
.sce-bg-card {
    border: none;
    overflow: hidden;
    position: relative;
    border-radius: 4px; 
    min-height: var(--card-min-height); 
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);

    /* Transition animation for the main card (zoom) */
    transition: var(--fast-transition); 

    /* Background Image Styles */
    background-size: cover; 
    background-repeat: no-repeat;
    /* Solution: Prioritize the top part of the image */
    background-position: center top; 
}

/* Standard Media Queries (Mobile Adaptation) */
@media (max-width: 768px) {
    .sce-bg-card { min-height: 350px; }
}
@media (max-width: 420px) {
    .sce-bg-card { min-height: 300px; }
}

/* --- Image Layer (Grayscale and Initial Overlay) --- */
/* :before will handle the Grayscale and the initial dark overlay */
.sce-bg-card:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: inherit; 
    
    /* Grayscale Effect */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: var(--slow-transition); /* Transition for Grayscale */
    
    /* Base Dark Overlay (Your initial dark gradient) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 100%);
    opacity: 1; /* Full opacity for this overlay */
    z-index: 1; 
    border-radius: 4px;
}

/* --- NEW LAYER: Color Overlay (for smooth transition) --- */
.sce-bg-card:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    
    /* Desired Gradient Color (FINAL State) */
    background: linear-gradient(0deg, var(--macewan-blue-dark) 0%, rgba(84, 20, 29, 0.9) 70%, rgba(84, 20, 29, 0) 100%);
    
    /* KEY: Starts invisible, opacity transition is smooth */
    opacity: 0; 
    transition: opacity var(--slow-transition);
    
    z-index: 1; 
    border-radius: 4px;
}


/* --- Content Containers --- */
.sce-bg-card .card-img-overlay {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    transition: var(--slow-transition); 
    padding: 1rem; /* Padding is key here. */
}

/* Text Containers: Will animate on hover */
.sce-bg-card .card-body {
    margin-top: 0; 
    transition: var(--slow-transition);
}

/* Footer: Doesn't need a transform, it will be pushed by the body's margin */
.sce-bg-card .card-footer {
    background: none;
    border-top: none;
    padding: 0;
    margin-bottom: 0;
    transition: var(--slow-transition);
}


/* --- Hover Effects --- */
.sce-bg-card:hover {
    /* 1. Card Zoom Out (5% smaller) */
    transform: scale(0.96);
    box-shadow: 0 0 5px -2px rgba(0,0,0,0.3);
    
    /* 2. Background Image Zoom In (130%) */
    background-size: cover; /* Enlarged size */
    background-position: center top; 
    transition: var(--fast-transition);
    cursor: pointer;
}

/* 3. Disable Grayscale and Change Overlay on Hover */
.sce-bg-card:hover:before {
    -webkit-filter: grayscale(0%); /* Full color image */
    filter: grayscale(0%);
    opacity: 1;
    
    /* Disable initial gradient so :after takes control */
    background: none; 
}

/* 4. KEY: Make Color Overlay Visible on Hover (Smooth Transition) */
.sce-bg-card:hover:after {
    opacity: 1; 
}

/* 5. KEY: "Downward" Content Movement Effect for Card Body */
.sce-bg-card:hover .card-body {
    /* Shifts the content downwards (or towards the center) */
    margin-top: 60px; 
}

/* 6. The footer moves implicitly due to the body's margin-top */
/* No additional style needed here */


/* --- Typography and Final Details (Red Badge) --- */

.sce-bg-card .card-title {
    font-weight: 700;
}

.sce-bg-card .card-title a {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.sce-bg-card .card-meta {
    /* Red badge color */
    background-color: var(--macewan-accent-red); /* #D41F37 */
    color: white !important;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px !important; 
    transition: background-color 0.3s ease;
}

.sce-bg-card:hover .card-meta {
    background-color: #D41F37; /* Slightly lighter red */
}

/************************************************************/
/* IMPROVED AND FINAL CSS ACCORDION (PROGRAMS STYLE)        */
/* Includes: 2-Col Layout, SVG Icons, and Level 2 Fixes.    */
/************************************************************/

:root {
    --macewan-blue-dark: #54141d; /* Red/Maroon */
    --macewan-accent-red: #D41F37; /* Accent Red */
    --macewan-light-grey: #f8f8f8; /* Light Gray */
    --smooth-transition: 300ms cubic-bezier(0.19, 1, 0.22, 1); 
}

/* 1. MAIN CONTAINER LAYOUT */
/* Sets up the Flexbox grid for the cards */
#programAreasAccordion {
    display: flex !important;
    flex-wrap: wrap !important; 
    gap: 20px !important; /* Space between columns */
    
    border: none !important;
    box-shadow: none !important;
}

/* 2. HIDE BOOTSTRAP COLLAPSE ICON */
/* Targets the column usually containing the (+) or (-) */
#programAreasAccordion .col-2,
#programAreasAccordion .col-sm-2 {
    display: none !important;
}

/* =======================================================
 * LEVEL 1 ICONS: STACKED BOOKS (SVG)
 * Applied to all program streams by default
 *========================================================*/
#programAreasAccordion table.table .programStream a::before {
    /* 1. Clear Content */
    content: "" !important; 
    
    /* 2. Layout Box (Fixed width on the left) */
    position: absolute !important;
    left: 0 !important; 
    top: 0 !important; 
    bottom: 0 !important;
    width: 50px !important; 
    
    /* 3. The SVG Image */
    background-image: url('/images/stacked-books-icon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 30px auto !important;
    
    /* 4. Clean up background color/borders */
    background-color: transparent !important; 
    border: none !important; 
}

/* =======================================================
 * LEVEL 2 SUB-ITEMS: ARROW FIX
 * Solves conflict by explicitly removing the SVG background.
 * Scoped to [aria-level="2"]
 *========================================================*/
#programAreasAccordion table.table tr [aria-level="2"] a::before {
    /* 1. Set the Character */
    content: "↳" !important;
    
    /* 2. CRITICAL FIX: Kill the SVG Background from Level 1 */
    background-image: none !important; 
    
    /* 3. Reset Layout (Undo absolute positioning) */
    position: static !important; 
    width: auto !important;
    height: auto !important;
    
    /* 4. Styling the Arrow */
    /* Note: Use #EBE5E9 if background is Dark, or #8b2331 if background is White */
    color: #EBE5E9 !important; 
    font-size: 1.5rem !important;
    text-decoration: none !important;
    
    /* 5. Spacing */
    margin-right: 5px !important;
    display: inline-block !important;
}

/* =======================================================
 * LEVEL 2 LINK PADDING ADJUSTMENT
 *========================================================*/
#programAreasAccordion table.table tr [aria-level="2"] a {
    /* Remove underline from parent link */
    text-decoration: none !important; 
    
    /* Reduce the left padding (since there is no big icon box) */
    padding-left: 15px !important; 
}


/* =======================================================
 * 2. Base Styles for Each Card/Panel (Column Width) 
 * CARD STYLING: PROGRAM AREAS ACCORDION
 * Layout: 2 Columns (flex)
 * Background: Dark Futuristic Mesh (Static)
 *========================================================*/

/* =======================================================
 * ANIMATED MESH GRADIENT DEFINITIONS (Dark Mode)
 * Includes MacEwan Maroon + High Contrast Pink/Magenta
 *========================================================*/

/* Position Variables (Coordinates X/Y) */
@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 90%; }
@property --x-2 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --y-2 { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --x-3 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --y-3 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }

/* Color Variables (Allows color shifting) */
/* Bright Red (MacEwan) */
@property --c-0 { syntax: '<color>'; inherits: false; initial-value: rgba(212, 31, 55, 0.5); }
/* Deep Plum (MacEwan) */
@property --c-1 { syntax: '<color>'; inherits: false; initial-value: rgba(74, 21, 59, 0.7); }
/* CONTRAST: Electric Pink/Magenta */
@property --c-2 { syntax: '<color>'; inherits: false; initial-value: hsla(320, 90%, 60%, 0.3); } 
/* Soft White Light */
@property --c-3 { syntax: '<color>'; inherits: false; initial-value: rgba(255, 255, 255, 0.05); }

/* 2. The Animation Keyframes (The "Dance") */
@keyframes dark-mesh-flow {
    0% {
        --x-0: 90%; --y-0: 10%; /* Red starts top-right */
        --x-1: 10%; --y-1: 90%; /* Plum starts bottom-left */
        --x-2: 50%; --y-2: 50%; /* Pink starts center */
        --x-3: 20%; --y-3: 20%; /* Light starts top-left */
        transform: scale(1);
    }
    25% {
        --x-0: 70%; --y-0: 80%; /* Red moves down */
        --x-1: 30%; --y-1: 20%; /* Plum moves up */
        --x-2: 80%; --y-2: 40%; /* Pink moves right */
        --x-3: 10%; --y-3: 50%;
    }
    50% {
        --x-0: 20%; --y-0: 90%; /* Red moves bottom-left */
        --x-1: 80%; --y-1: 10%; /* Plum moves top-right */
        --x-2: 20%; --y-2: 60%; /* Pink moves left */
        --x-3: 90%; --y-3: 80%;
    }
    75% {
        --x-0: 40%; --y-0: 20%; 
        --x-1: 60%; --y-1: 80%; 
        --x-2: 50%; --y-2: 20%; /* Pink moves top */
        --x-3: 50%; --y-3: 90%;
    }
    100% {
        --x-0: 90%; --y-0: 10%; /* Return to start */
        --x-1: 10%; --y-1: 90%;
        --x-2: 50%; --y-2: 50%;
        --x-3: 20%; --y-3: 20%;
        transform: scale(1);
    }
}

#programAreasAccordion .card {
    /* --- LAYOUT --- */
    flex: 1 1 calc(50% - 10px) !important; 
    min-width: 300px !important;
    margin-bottom: 0 !important;
    
    /* --- SHAPE --- */
    border-radius: 4px !important; 
    border: 0px solid rgba(255, 255, 255, 0.1) !important; 
    overflow: hidden !important;
    
    /* --- ANIMATED BACKGROUND CONFIG --- */
    background-color: #34111A !important; /* Deep Base */
    
    /* Defined using the variables from Step 1 */
    background-image: 
        /* 1. Bright Red Orb (Variable 0) */
        radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 0%, transparent 40%),
        
        /* 2. Deep Plum Cloud (Variable 1) */
        radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 0%, transparent 50%),
        
        /* 3. ELECTRIC PINK/CONTRAST (Variable 2) - The Pop! */
        radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 0%, transparent 45%),
        
        /* 4. Soft White Light (Variable 3) */
        radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 0%, transparent 30%) 
        !important;
        
    /* Screen blend mode makes the Pink glow nicely against the Maroon */
    background-blend-mode: screen, normal, normal, normal !important;
    
    /* Animation: 15s loop */
    animation: dark-mesh-flow 60s infinite ease-in-out !important;
    
    /* --- CONTENT VISIBILITY --- */
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* =======================================================
 * 3. Header Style (The Accordion "Button") 
 * UPDATED for Dark Background Contrast
 *========================================================*/
#programAreasAccordion .card-header {
    background-color: transparent !important; /* Let the dark mesh show through */
    padding: 20px;
    cursor: pointer;
    border-bottom: none; 
    transition: background-color 0.3s ease;
    border-radius: 12px; 
}

#programAreasAccordion .card-header:hover {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle light hover */
}

/* 4. Active Header Style (Opened) */
#programAreasAccordion .card-header:not(.collapsed) {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Darken slightly when open */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle separator */
}

/* =======================================================
 * 5. Typography and Link Adjustments (Dark Mode)
 * Enforces White Text on the Dark Background
 *========================================================*/

#programAreasAccordion .programArea a {
    text-decoration: none;
    font-weight: 700;
    color: #FFFFFF !important; /* White Text for contrast */
    transition: color 0.3s ease;
    font-size: 1.2rem; /* Slightly larger for impact */
}

/* Ensure text stays white when opened */
#programAreasAccordion .card-header:not(.collapsed) .programArea a {
    color: #FFFFFF !important; 
}

/* Icon Color (Plus Sign) */
#programAreasAccordion .panelHeaderIcon {
    color: #D41F37 !important; /* Bright Red Accent */
}

/* =======================================================
 * 6. Inner Content Panel (Reset to White)
 * Ensures the table inside is readable on white background
 *========================================================*/
#programAreasAccordion .panel-collapse {
    color: #333333 !important;
}

/* =======================================================
 * ACCORDION HEADER - ADD ARROW ICON (AFTER TEXT)
 * (Corrected to use the existing \f061 icon from FA 5.6.1)
 *========================================================*/

/*
 * This rule targets the <a> tag's ::after pseudo-element
 * to place the icon *after* the text.
 */
#programAreasAccordion .programArea a::after {
 /* !! UPDATED: Font Awesome 5.6.1 unicode for 'fa-arrow-right' !! */
 /* This icon code (\f061) is confirmed in the platform's CSS file */
 content: "\f061"; 
 
 /*
  * Use the FA5 font family (from platform CSS file)
  */
 font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
 
 /*
  * KEY (from platform CSS file):
  * This icon is 'solid', which REQUIRES font-weight: 900.
  */
 font-weight: 900 !important; 
 
 /* Add space between the text and the new icon */
 margin-left: 10px;
 
 /* Style the icon */
 font-size: 0.9em;
 
 /* Use the requested dark maroon color */
 color: #fff; 
}

/* 6. Icons (+/-) */
#programAreasAccordion .col-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#programAreasAccordion .panelHeaderIcon {
    font-size: 1.2rem;
    color: #333;
}
#programAreasAccordion .card-header:not(.collapsed) .panelHeaderIcon {
    color: white; 
}

/* 7. Collapsible Content (Light Blue Background) */

/* Targets the DIV containing the table INSIDE ANY panel-collapse */
#programAreasAccordion .panel-collapse > div {
    background-color: transparent !important; /* Ensure it applies */
    border-top: none; 
    padding: 20px; 
}

/* **OPTIONAL:** Maintain original rule for Bootstrap compatibility */
#programAreasAccordion .panel-collapse.show > div,
#programAreasAccordion .panel-collapse.in > div {
    /* We keep the structure for Bootstrap, even if the rule above does the work */
    background-color: #EBE5E9; 
    border-top: none; 
    padding: 20px; 
}

/* 8. Table Styles (The Program List) */
#programAreasAccordion table.table {
    border-collapse: separate; 
    border-spacing: 0;     
    width: 100%;
    margin-top: 0; 
    margin-bottom: -10px; /* Negative margin compensating for 10px below */
}
/* Ensure uniform white background (disables table-striped) */
#programAreasAccordion .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: white !important; 
}

/* 9. Row Styles (<tr>) - White Background, Rounded, and Effects */
#programAreasAccordion table.table tr {
    display: block; 
    margin-bottom: 10px !important; /* Space between rows */
    background-color: white !important; 
    border-radius: 4px; 
    overflow: hidden; 
    transition: var(--smooth-transition); 
    cursor: pointer !important;
}

/* 10. Cell (<td>) and Link Styles (ARROW FIX) */
#programAreasAccordion table.table td {
    border-top: none; 
    padding: 0; 
    border: none;
}

#programAreasAccordion table.table .programStream a {
    font-weight: 500;
    font-size: 1rem;
    color: var(--macewan-blue-dark);
    text-decoration: none !important;
    
    /* IMPORTANT: Ensure ::before works with position: absolute */
    position: relative; 
    
    /* FLEXBOX FIX: Aligns text left and arrow right */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    
    /* KEY: Space on the left for the box (45px) */
    padding: 12px 15px 12px 50px; 
    transition: all 0.2s ease;
}

/* 11. Arrow Icon (Generated with ::after) */
#programAreasAccordion table.table .programStream a::after {
    /* FIX 1: Use backslash '\' for unicode, NOT forward slash '/' */
    content: "\f054"; 
    
    /* FIX 2: Essential! Define the Font Awesome family */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important; /* Ensure 'Solid' weight */
    
    /* FIX 3: Use inline-block to ensure 'transform' works reliably */
    display: inline-block; 
    
    position: static; 
    font-size: 1rem;
    color: #34111A !important; 
    text-decoration: none !important; 
    
    /* Animation Start State: Hidden and shifted left */
    opacity: 0; 
    transform: translateX(-10px); /* Start 10px to the left */
    
    /* Explicit transition for smooth effect */
    transition: opacity 0.3s ease, transform 0.3s ease; 
    
    margin-left: 15px;
}

/* 12. Hover Effect on Rows */
#programAreasAccordion table.table tr:hover {
    color: var(--macewan-accent-red) !important; 
    
    /* Show and Return to position 0 */
    opacity: 1; 
    transform: translateX(0px); /* Returns 10px to its final position */
    transform: scale(1.02); /* 2% Zoom */
    box-shadow: 2px 2px 19px 0px rgba(0,0,0,0.14);
}

/* Apply smooth arrow slide on hover */
#programAreasAccordion table.table tr:hover .programStream a::after {
    color: #34111A !important; 
    
    /* KEY 3: Show the arrow */
    opacity: 1; 
    
    /* KEY 4: Returns to position 0, completing the 10px slide */
    transform: translateX(0px); 
    
    text-decoration: none !important;
}

/************************************************************/
/* LAST RESORT SOLUTION (FORCE OPEN WITH CSS)       */
/************************************************************/

/* Forces content to display (overrides 'collapse' class) */
#programAreasAccordion .panel-collapse.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

/* Forces header style to "Open" (Red color) */
#programAreasAccordion .card-header.collapsed {
    background-color: transparent !important;
    color: #54141d !important;
}

/* Forces title link style to "Open" (White color) */
#programAreasAccordion .card-header.collapsed .programArea a {
    color: #fff !important;
     font-size: 1.2838rem !important;
    line-height: 1.24 !important;
}

/* Forces icon to appear as open (White color) */
#programAreasAccordion .card-header.collapsed .panelHeaderIcon {
    color: white !important;
}


/*******************************************************
 * MODERN MACEWAN SIDEBAR (CSS-ONLY ENHANCEMENT)
 * Transforms the default Bootstrap list into a modern,
 * sticky sidebar using MacEwan corporate colors.
 *******************************************************/

/* 1. Sidebar Container Styling */
#studentMenu {
    width: 100% !important;
    background-color: #1B3768 !important; /* MacEwan Dark Blue */
    border-radius: 3px !important;
    padding: 15px 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    z-index: 100 !important;
    /* ADDED: Bottom spacing to prevent menu from touching footer when scrolling ends */
    margin-bottom: 20px !important;
}

/* 2. Base Link Styling (Inactive State) */
#studentMenu .nav-pills .nav-link,
#studentMenu .nav-link { /* Added generic .nav-link selector for better coverage */
    color: #EAEAEA !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 0.7rem !important; /* Slight bump for readability if needed, originally 0.7rem */
    padding: 10px 15px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    border-left: 5px solid transparent !important; /* Pre-allocate space for border to prevent jumps */
}

/* 3. Hover State */
#studentMenu .nav-pills .nav-link:hover,
#studentMenu .nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #FFFFFF !important;
    transform: translateX(5px);
}

/* 4. Active State (Generic & Parent Items) */
#studentMenu .nav-pills .nav-item.active > .nav-link,
#studentMenu .nav-link.active,
#studentMenu .nav-link[aria-current="page"] {
    background-color: #FFFFFF !important;
    color: #1B3768 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* 4.1 SPECIFIC ACTIVE BORDER FIX (Replaces Red Border) */
/* Targets links that are active either via class or aria attribute */
#studentMenu .nav-pills .nav-item.active > .nav-link,
#studentMenu .nav-link.active,
#studentMenu .nav-link[aria-current="page"] {
    border-left: 5px solid #00A0DD !important; /* MacEwan Light Blue instead of Red */
}

/* 5. Submenu Styling */
#studentMenu .subMenu {
    margin-left: 10px !important;
    margin-top: 5px !important;
    border-radius: 6px !important;
    padding: 5px !important;
}

#studentMenu .subMenu .nav-link {
    font-size: 0.8rem !important; /* Slightly smaller than main links */
    padding: 8px 12px !important;
    color: #CCCCCC !important;
    border-left: 3px solid transparent !important; /* Smaller border space for submenus */
}

#studentMenu .subMenu .nav-link.active,
#studentMenu .subMenu .nav-link[aria-current="page"] {
    background-color: transparent !important;
    color: #8B2331 !important; /* Keep Burgundy for active sub-items if desired, or change to #00A0DD too */
    font-weight: 700 !important;
    border-left: 3px solid #8B2331 !important; /* Burgundy accent for sub-items */
    border-radius: 0px 6px 6px 0px !important; /* Squared off left side for border */
}

/* ==========================================================================
   MACEWAN OVERRIDES - STUDENT PORTAL
   ========================================================================== */

/**
 * MODULE 1 LINKS (Standardized to SCE Burgundy)
 */
#contentModule1 .variable-content a {
    /* Base Link Color - SCE Burgundy */
    color: white !important; 
    /* Underline for accessibility & visibility */
    /*text-decoration: underline !important;*/
    /* Bold for emphasis */
    font-weight: 700 !important;
    /* Smooth transition for hover effects */
    transition: color 0.3s, text-decoration-color 0.3s, opacity 0.3s !important;
}

#contentModule1 .variable-content a:hover {
    /* Hover State - Darker shade for interaction feedback */
    /*color: white !important;*/
    text-decoration: underline !important;
}

#contentModule1 a:visited {
    /* Visited State - Keeps base color to maintain visual consistency */
    color: #8b2331 !important; 
}

/*******************************************************
 * INSTRUCTOR PORTAL THEME (Example: Burgundy Primary)
 * Specific colors for the Instructor Menu.
 * Change these hex codes to whatever you need.
 *******************************************************/

/* Instructor Container Theme */
#instructorMenu {
    background-color: #8B2331 !important; /* EXAMPLE: Burgundy Background */
    border-radius: 3px !important;
    padding: 15px 10px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    top: 20px !important;
    /* ADDED: Bottom spacing to prevent menu from touching footer when scrolling ends */
    margin-bottom: 20px !important;
    z-index: 100 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    width: auto !important; /* Deja que el contenido o el padre definan el ancho inicial */
    max-width: 100% !important; /* Asegura que no se desborde de su columna */
}

/* Instructor Link Colors (Inactive) */
#instructorMenu .nav-link {
       color: #EAEAEA !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal !important;
    font-size: 0.7rem !important; /* Slight bump for readability if needed, originally 0.7rem */
    padding: 10px 15px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    white-space: normal !important;
    border-left: 5px solid transparent !important; /* Pre-allocate space for border to prevent jumps */

}

/* Instructor Hover Theme */
#instructorMenu .nav-link:hover {
    background-color: rgba(0,0,0,0.2) !important; /* Slightly different hover effect example */
    color: #FFFFFF !important;
    transform: translateX(5px);
}

/* Instructor Active Theme */
#instructorMenu .nav-pills .nav-item.active > .nav-link,
#instructorMenu .nav-link.active,
#instructorMenu .nav-link[aria-current="page"] {
    background-color: #FFFFFF !important;
    color: #8B2331 !important; /* Burgundy Text */
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border-left: 5px solid #1B3768 !important; /* EXAMPLE: Dark Blue Border Accent */
}

/* Instructor Submenu Active Theme */
#instructorMenu .nav-pills .nav-item.active > .nav-link,
#instructorMenu .nav-link.active,
#instructorMenu .nav-link[aria-current="page"] {
    border-left: 5px solid #4A153B !important; /* MacEwan Light Blue instead of Red */
}


/* =======================================================
 * SEARCH RESULTS: LIST VIEW (Table Styling)
 * Includes Table Layout, Typography, and Image Placeholder
 * Scoped to #courseSearchResult_list
 *========================================================*/

/* 1. General Table Style */
#courseSearchResult_list table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    box-sizing: border-box !important;
    
    /* Typography */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgb(23, 23, 23) !important;
    
    /* Remove default borders */
    border: none !important;
}

/* 2. Header Styling (Thead) - Dark Maroon */
#courseSearchResult_list table.table thead th {
    background-color: rgb(52, 17, 26) !important; /* Corporate Maroon */
    color: white !important;
    
    /* Font styling for headers */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    padding: 13px 18px !important;
    vertical-align: middle !important;
    
    /* Custom Borders */
    border: 1px solid rgb(52, 17, 26) !important;
    border-right: 1px solid rgb(221, 221, 221) !important; /* Grey Separator */
    border-bottom: none !important;
}

/* Remove right border from the last header cell */
#courseSearchResult_list table.table thead th:last-child {
    border-right: 1px solid rgb(52, 17, 26) !important;
}

/* Style links inside header (sorting arrows) */
#courseSearchResult_list table.table thead th a {
    color: white !important;
    text-decoration: none !important;
}

/* 3. Body Styling (Tbody) - Zebra Striping */

/* Odd Rows (1, 3...) -> Light Grey */
#courseSearchResult_list table.table tbody tr:nth-of-type(odd) {
    background-color: #f0f0f0 !important;
}

/* Even Rows (2, 4...) -> White */
#courseSearchResult_list table.table tbody tr:nth-of-type(even) {
    background-color: #ffffff !important;
}

/* 4. Cell Styling (Td) */
#courseSearchResult_list table.table tbody td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    
    /* Soft borders between cells */
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
    
    color: rgb(23, 23, 23) !important;
}

/* 5. Specific column fixes */
/* Ensure the first column (Image/Title) aligns correctly */
#courseSearchResult_list table.table tbody td.firstColumn {
    display: flex; 
    align-items: center;
    border: none !important; 
    background-color: inherit !important; /* Maintain row background color */
}

/* Style the course title link inside the table */
#courseSearchResult_list .courseName a {
    color: #34111a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 8px !important; /* Spacing from image */
}

/* =======================================================
 * LIST VIEW: AVAILABILITY STATUS (Green Pill)
 * Styles the 'Available' badge with icon and custom shape
 * Scoped to #courseSearchResult_list
 *========================================================*/

/* 1. The Badge Container (Green Shape) */
#courseSearchResult_list .courseAvailability_available {
    /* --- Background & Color --- */
    background-color: #3EC3A4 !important; /* Green */
    color: white !important;
    
    /* --- Custom Border Radius (The Shape) --- */
    /* Top-Left, Top-Right, Bottom-Right, Bottom-Left */
    border-top-left-radius: 50px !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-bottom-left-radius: 4px !important;
    
    /* --- Layout & Spacing --- */
    display: inline-block !important; /* Essential for padding to work */
    padding: 6px 15px 6px 12px !important; /* Gives the text room to breathe */
    white-space: nowrap !important; /* Prevents breaking on small screens */
    
    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important; /* Bold */
    font-size: 0.7rem !important; /* Adjusted size for table context */
    text-transform: uppercase !important;
    line-height: 1 !important;
}

/* 2. The Icon (Check Circle) */
#courseSearchResult_list .courseAvailability_available::before {
    /* --- Font Awesome Icon --- */
    content: "\f058"; /* check-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
    font-weight: 900 !important; /* Solid style */
    
    /* --- Sizing & Alignment --- */
    font-size: 1em !important; /* Slightly larger than text */
    margin-right: 6px !important; /* Space between icon and text */
    vertical-align: -1px !important; /* Optical alignment fix */
    color: #fff !important;
}

/* =======================================================
 * SEARCH RESULTS: LIST VIEW LINKS
 * Standardizes links inside table cells
 *========================================================*/

/* 1. Default Link State */
#courseSearchResult_list table.table tbody td a {
    color: #8b2331 !important; /* MacEwan Red */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    transition: color .3s, text-decoration-color .3s, opacity .3s !important;
}

/* 2. Hover State */
#courseSearchResult_list table.table tbody td a:hover {
    color: #34111a !important; /* MacEwan Dark Brown */
    text-decoration: underline !important;
    text-decoration-color: #34111a !important;
}

/* =======================================================
 * SEARCH RESULTS: LIST VIEW IMAGE PLACEHOLDER
 * Replaces missing image with Graduation Cap Icon
 *========================================================*/

/* 1. Hide the original "Not Available" image */
#courseSearchResult_list img.noImage {
    display: none !important;
}

/* 2. Fix for Image Links (Remove underline from the box itself) */
/* We target the link that wraps the image */
#courseSearchResult_list table.table a:has(img) {
    text-decoration: none !important;
    border: none !important;
}

/* 3. Style the Container (The <a> tag acting as box) */
#courseSearchResult_list table.table a:has(img.noImage) {
    display: block !important;
    position: relative !important;
    
    /* Sizing for List View */
    width: 100px !important; 
    height: 60px !important;
    
    /* Appearance */
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    
    cursor: pointer !important;
}

/* =======================================================
 * LIST VIEW: COURSE CODE TYPOGRAPHY
 * Custom styling for the course code (e.g., NURS 0162)
 * Scoped to #courseSearchResult_list
 *========================================================*/

#courseSearchResult_list .courseCode {
    /* --- Color --- */
    color: #a6a6a6 !important; /* Light Grey */
    
    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important; /* Bold */
    
    /* --- Text Transform --- */
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;
    
    /* Optional: Block display to ensure it sits on its own line if needed */
    display: block !important; 
    margin-top: 2px !important;
        margin-left: 8px !important; /* Spacing from image */

}

/* 4. Inject the Icon */
#courseSearchResult_list table.table a:has(img.noImage)::before {
    content: "\f19d"; /* Graduation Cap */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    
    /* Absolute Centering */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Styling */
    font-size: 1.8rem !important; 
    color: #e0e0e0 !important;
    
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 5. Hover Effect for the Icon */
#courseSearchResult_list table.table a:has(img.noImage):hover::before {
    color: #8b2331 !important;
    transform: translate(-50%, -50%) scale(1.1) !important; 
}

/* =======================================================
 * SEARCH RESULTS VIEW TABS (List / Grid)
 * Custom styling for the toggle tabs (v3 - Smooth Fix)
 *========================================================*/

/* 1. Base Style (Inactive State) */
#courseSearchResult_container .nav-tabs .nav-link {
    /* --- Background Grey for inactive --- */
    background-color: #f0f0f0 !important;
    
    /* --- Text (Inactive keeps grey for hierarchy) --- */
    color: #555555 !important; 
    
    /* --- Typography (Uppercase) --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.58 !important;
    text-transform: uppercase !important; 
    
    /* --- Borders and Spacing --- */
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    margin-right: 2px !important;
    padding: 8px 15px !important;
    padding-left: 0.6rem !important;

    /* --- Border Top (Invisible in inactive state) --- */
    /* We set a transparent border first so the transition has a starting point */
    border-top: 3px solid transparent !important;
    /* Adjust padding to match the active state's height logic */
    padding-top: 6px !important; 
    
    /* --- SMOOTH TRANSITION --- */
    /* We animate specific properties. Note: removed '!important' from inside transition syntax */
    transition: background-color 0.3s ease, color 0.3s ease, border-top-color 0.3s ease !important;
}

/* 2. Active Style (Selected State) */
#courseSearchResult_container .nav-tabs .nav-link.active {
    /* --- White Background --- */
    background-color: #FFFFFF !important;
    
    /* --- Text Color #171717 --- */
    color: #171717 !important; 
    
    /* --- Maroon Top Bar (3px) --- */
    border-top-color: #8b2331 !important; /* We change color, not width, for smoother effect */
    
    /* --- Other Borders --- */
    border-bottom: 1px solid #ffffff !important;
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
    
    /* Typography consistency */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}

/* 3. Icons inside Tabs */
#courseSearchResult_container .nav-link .glyphicon {
    margin-right: 5px;
    font-size: 0.9em;
}

/* 4. Tab Container Cleanup */
#courseSearchResult_container .nav-tabs {
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 15px !important;
}

/* =======================================================
 * SEARCH RESULTS: GRID VIEW COMPLETE STYLING
 * Structure: Modern Cards (White Box, Shadow, Hover)
 * Typography: Corporate Fonts, Colors, and Layout
 * Scoped to #courseSearchResult_grid
 *========================================================*/

/* 1. Grid Container Setup */
#courseSearchResult_grid ul.grid {
    display: grid !important;
    /* Responsive columns: As many as fit (min 280px wide) */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; 
    gap: 30px !important; 
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important; 
}

/* 2. The Card Item (The White Box) */
#courseSearchResult_grid ul.grid li {
    /* --- RESET BOOTSTRAP/SYSTEM STYLES (The Fix) --- */
    float: none !important;       /* Disable float */
    width: auto !important;       /* Let CSS Grid control the width */
    padding: 0 !important;        /* Remove the 15px padding */
    margin: 0 !important;         /* Remove bottom margins (Gap handles this) */
    border: none !important;      /* Reset potential borders */
    
    /* --- Appearance --- */
    background-color: #FFFFFF !important; 
    border: 1px solid #dee2e6 !important; /* Re-apply our border */
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    border-radius: 4px !important;
    
    /* --- Layout (Flex Column) --- */
    display: flex !important;
    flex-direction: column !important; 
    overflow: hidden !important; 
    height: 100% !important; 
    
    /* --- Animation --- */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover Effect: Lift and Deep Shadow */
#courseSearchResult_grid ul.grid li:hover {
    transform: translateY(-5px) !important; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; 
}

/* 3. The Card Image */
#courseSearchResult_grid ul.grid li img {
    width: 100% !important;
    height: 180px !important; /* Fixed height for uniformity */
    object-fit: cover !important; /* Crop center, don't stretch */
    border-bottom: 1px solid #eee !important;
}

/* 4. Typography: Course Title (with Maroon Bar) */
#courseSearchResult_grid .courseName {
    display: block !important;
    padding: 15px 15px 5px 15px !important; /* Spacing around title */
}

#courseSearchResult_grid .courseName a {
    /* --- Layout (Vertical Bar) --- */
    border-left: 3px solid #8b2331 !important;
    padding-left: 0.5rem !important;
    display: inline-block !important;
    
    /* --- Font Styling --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    
    /* --- Color --- */
    color: #34111a !important; 
    text-decoration: none !important;
    
    margin-bottom: 5px !important;
}

/* 5. Typography: Course Code (Grey Uppercase) */
#courseSearchResult_grid .courseCode {
    display: block !important;
    padding: 0 15px 10px 15px !important; /* Spacing */
    
    /* --- Font Styling --- */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.79rem !important;
    font-weight: 700 !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01rem !important;
    
    /* --- Color --- */
    color: #a6a6a6 !important; 
}

/* 6. Typography: Links (Location / Delivery) */
/* Targets links inside .courseCampuses or .courseDelivery */
#courseSearchResult_grid .courseCampuses, 
#courseSearchResult_grid .courseDelivery {
    padding: 0 15px 15px 15px !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    
    /* Pushes the footer to the bottom if content is short */
    flex-grow: 1 !important; 
}

#courseSearchResult_grid .courseCampuses a,
#courseSearchResult_grid .courseDelivery a,
#courseSearchResult_grid a[id^="linkinstructionMethod"] {
    color: #8b2331 !important; /* Red Link */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    transition: color .3s, text-decoration-color .3s !important;
}

/* Link Hover State */
#courseSearchResult_grid .courseCampuses a:hover,
#courseSearchResult_grid .courseDelivery a:hover,
#courseSearchResult_grid a[id^="linkinstructionMethod"]:hover {
    color: #34111a !important; /* Dark Brown Hover */
    text-decoration-color: #34111a !important;
}

/* 7. Availability Footer (Sticky Bottom) */
#courseSearchResult_grid .courseAvailability {
    display: block !important;
    margin-top: auto !important; /* Sticks to bottom */
    padding: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    border-top: 1px solid #eee !important;
    background-color: #f9f9f9 !important; /* Light footer bg */
}

/* Specific State Colors (Optional enhancement) */
#courseSearchResult_grid .courseAvailability_available {
    color: #3EC3A4 !important; /* Green text for available */
    background-color: #fff !important; /* Light green bg */
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 15px;
    font-size: 0.7rem !important;
}

/* =======================================================
 * OPTION B: REPLACE MISSING IMAGE WITH ICON
 * Style: Centered Thumbnail (90% width, 80px height)
 * uses absolute positioning for icon alignment.
 *========================================================*/

/* 1. Hide the original "Not Available" image */
#courseSearchResult_grid ul.grid li img.noImage {
    display: none !important;
}

/* 2. Style the container (the <a> tag) */
#courseSearchResult_grid ul.grid li a:has(img.noImage) {
    /* Use block display, but position relative is vital for the child */
    display: block !important;
    position: relative !important; 
    
    /* --- Sizing (Thumbnail Look) --- */
    width: 90% !important;
    height: 80px !important;
    
    /* --- Decoration --- */
    background-color: #f9f9f9 !important; 
    /* border-bottom: 1px solid #eee !important; */ /* Optional: Removed for cleaner thumbnail look */
    border-radius: 8px !important;
    
    /* --- Positioning within the card --- */
    margin-top: 15px !important; /* Push down from top */
    margin-left: auto !important; /* Auto margin centers the 90% width */
    margin-right: auto !important; /* Auto margin centers the 90% width */
    margin-bottom: 0 !important;
    
    /* --- Cursor --- */
    cursor: pointer !important;
    text-decoration: none !important;
}

/* 3. Inject the Font Awesome Icon (The Fix) */
#courseSearchResult_grid ul.grid li a:has(img.noImage)::before {
    content: "\f19d"; /* Graduation Cap */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    
    /* --- ABSOLUTE CENTERING TRICK --- */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* This moves the icon back by 50% of its own width/height to center it perfectly */
    transform: translate(-50%, -50%) !important; 
    
    /* --- Styling (Adjusted for 80px height) --- */
    font-size: 2.5rem !important; /* Reduced from 4rem to fit nicer */
    color: #e0e0e0 !important;
    
    /* Transition needs to handle transform too */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 4. Hover Effect (Updated for Absolute Position) */
#courseSearchResult_grid ul.grid li:hover a:has(img.noImage)::before {
    color: #8b2331 !important; 
    
    /* !! IMPORTANT !! */
    /* We must keep the translate(-50%, -50%) and ADD the scale */
    transform: translate(-50%, -50%) scale(1.1) !important; 
}

/* =======================================================
 * MOBILE FIX: LIST VIEW ALIGNMENT
 * Fixes the "hanging indent" issue on long titles.
 *========================================================*/

@media (max-width: 767px) {

    /* 1. Target the DIV that wraps Course Name & Code */
    /* This is the second child of the first column (after the image) */
    #courseSearchResult_list table.table tbody td.firstColumn > div {
        /* Force the text block to fill the remaining width */
        flex: 1 !important; 
        
        /* Apply the spacing HERE instead of on the text itself */
        padding-left: 15px !important; 
        
        /* Ensure strict left alignment */
        text-align: left !important;
        
        /* Prevent the box from collapsing */
        min-width: 0 !important; 
    }

    /* 2. RESET margins on the individual text elements */
    /* We remove the old margin so it doesn't double up or indent wrongly */
    #courseSearchResult_list .courseName a {
        margin-left: 0 !important;
        display: block !important; /* Ensures it behaves as a block */
    }

    #courseSearchResult_list .courseCode {
        margin-left: 0 !important;
        text-align: left !important;
    }
}

/* =======================================================
 * CART HEADER STYLING (Fixed Layout)
 * Uses Flexbox 'stretch' for full-height borders.
 * Relies on Bootstrap classes for widths.
 *========================================================*/

/* 1. The Header Row Container (The Maroon Bar) */
.cartContainerColumnHeaders {
    /* --- Appearance --- */
    background-color: rgb(52, 17, 26) !important; /* Maroon */
    color: white !important;
    border: 1px solid rgb(52, 17, 26) !important; /* Outer border */
    border-bottom: none !important;
    
    /* --- Layout Engine --- */
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevents columns from dropping */
    
    /* !! CRITICAL FIX FOR BORDERS !! */
    /* Forces all columns to be exactly the same height */
    align-items: stretch !important; 
    
    /* Reset Bootstrap margins/paddings to prevent overflow */
    margin-bottom: 10px !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 2. The Columns (Direct divs inside the header) */
.cartContainerColumnHeaders > div {
    /* --- RESET WIDTHS (Let Bootstrap Decide) --- */
    /* We do NOT set width here. We let .col-lg-5, etc. work */
    flex-basis: auto !important; 
    
    /* --- Content Alignment --- */
    display: flex !important;
    align-items: center !important; /* Centers text vertically */
    padding: 13px 18px !important;  /* Padding inside the cell */
    
    /* --- The Right Border (Separator) --- */
    /* Applied to the DIV, so it stretches full height */
    border-right: 1px solid rgb(221, 221, 221) !important;
    
    /* Ensure no other borders interfere */
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* 3. Remove border from the last column (Subtotal) */
.cartContainerColumnHeaders > div:last-child {
    border-right: none !important;
}

/* 4. Typography Styling (Spans) */
/* Ensures the text inside matches your font specs */
.cartContainerColumnHeaders .cartHeader,
.cartContainerColumnHeaders span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: white !important;
}



/* =======================================================
 * CART ITEM STYLING
 * Typography and Links styling to match Search Results.
 *========================================================*/

/* 1. Main Link Styling (Course Title) */
.cartItemDescriptionContainer .cartItemName a {
    /* --- Typography & Color --- */
    color: #8b2331 !important; /* MacEwan Red */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important; /* Bold */
    font-size: 0.9rem !important; /* Slightly larger for importance */
    
    /* --- Decoration --- */
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    
    /* --- Transition --- */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
}

/* Hover State */
.cartItemDescriptionContainer .cartItemName a:hover {
    color: #34111a !important; /* Dark Brown */
    text-decoration-color: #34111a !important;
}

/* 2. "Remove" Link Styling */
.cartItemUpdateLinksContainerItemColumn .cartRemoveItem a {
    color: #8b2331 !important; 
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important; /* Semi-bold */
    font-size: 0.9rem !important;
    
    text-decoration: underline !important;
    text-decoration-color: #8b2331 !important;
    
    transition: color 0.3s ease !important;
}

/* Remove Link Hover */
.cartItemUpdateLinksContainerItemColumn .cartRemoveItem a:hover {
    color: #34111a !important;
    text-decoration-color: #34111a !important;
}

/* 3. Course Code Styling (Grey & Uppercase) */
/* Matches the style from the Grid View */
.cartItemDescriptionContainer .cartItemCode {
    color: #a6a6a6 !important;
    font-family: Montserrat, sans-serif !important;
    font-optical-sizing: auto !important;
    font-size: .79rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .01rem !important;
    text-transform: uppercase !important;
    margin-top: 5px !important;
}

/* 4. Badge Styling (Optional - "Course" Label) */
.cartItemDescriptionContainer .label-courseBadge {
    background-color: #EBE5E9;
    color: #34111A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 4px 10px 4px 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 50px;
}

.cartItemDescriptionContainer .label-courseBadge::before {
    content: "\f02d";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    margin-right: 8px;
    color: #8e2736;
}

/* =======================================================
 * CART FEE ALIGNMENT: STACKED & LEFT ALIGNED
 * Stacks "Fee" on top of details, aligned to the left edge.
 *========================================================*/

/* 1. The Main Container (Fieldset) */
/* Controls the vertical stacking */
.cartItemFeeGroup fieldset {
    display: flex !important;
    flex-direction: column !important; /* Stack items vertically */
    align-items: flex-start !important; /* Align everything to the LEFT */
    width: 100% !important;
}

/* 2. The Header ("Fee") */
.cartItemFeeHeader {
    width: 100% !important;
    text-align: left !important; /* Force left alignment */
    margin-bottom: 2px !important; /* Minimal space between title and content */
    padding: 0 !important;
}

.cartItemFeeHeader legend {
    text-align: left !important;
    font-weight: 700 !important; /* Bold for "Fee" */
    margin-bottom: 0 !important;
}

/* 3. The Content Row ("Tuition and Fees $399.00") */
.cartItemFeeGroup .panelSection, 
.cartItemFeeGroup .panelRow {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important; /* Push content to the LEFT */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. The Description Text & Price Container */
.feeDescriptionContainer {
    display: flex !important;
    flex-direction: row !important; /* Keep text and price side-by-side */
    justify-content: flex-start !important; /* Left align */
    align-items: center !important;
    flex-wrap: wrap !important; /* Allow wrapping if screen is tiny */
}

/* 5. Spacing adjustments */
/* Remove left margin from the first item to align perfectly with "Fee" */
.feeDescriptionContainer > span:first-child {
    margin-left: 0 !important;
}

/* Add space between "Tuition..." and the Price */
.feeDescriptionContainer > span {
    margin-right: 5px !important;
}

/* =======================================================
 * CART IMAGE PLACEHOLDER (Reused Logic)
 * Replaces 'image_not_available' with the Graduation Cap Icon.
 * Scoped to .cartItemFeaturedImageContainer
 *========================================================*/

/* 1. Hide the original "Not Available" image */
/* We target the specific image class inside the container */
.cartItemFeaturedImageContainer img[src*="image_not_available"] {
    display: none !important;
}

/* 2. Style the Container (The Box) */
/* Using :has() to apply styles ONLY when the bad image is present */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"]) {
    display: block !important;
    position: relative !important;
    
    /* --- Sizing (Adjusted for Cart Column) --- */
    width: 100% !important;
    height: 100px !important; /* Fixed height creates the box shape */
    
    /* --- Decoration --- */
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    
    /* Ensure content doesn't spill out */
    overflow: hidden !important;
}

/* 3. Inject the Icon (Graduation Cap) */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"])::before {
    content: "\f19d"; /* Graduation Cap Icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    
    /* --- ABSOLUTE CENTERING --- */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* --- Styling --- */
    font-size: 2.5rem !important; /* Good size for the cart */
    color: #e0e0e0 !important;    /* Subtle Grey */
    
    /* Smooth Transitions */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

/* 4. Hover Effect (Zoom + Red Color) */
.cartItemFeaturedImageContainer:has(img[src*="image_not_available"]):hover::before {
    color: #8b2331 !important; /* MacEwan Red */
    
    /* Zoom effect (keeping centered) */
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* =======================================================
 * CHECKOUT BUTTON ICON SWAP
 * Replaces the default 'Lock' glyphicon with Font Awesome 'Cart'
 *========================================================*/

/* Target the specific span inside the checkout button */
.cartCheckoutButton .cartCheckoutLockIcon::before {
    /* 1. Change the icon Unicode (fa-shopping-cart) */
    content: "\f07a" !important; 
    
    /* 2. Switch Font Family from Glyphicons to Font Awesome */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
    font-weight: 900 !important; /* Solid style */
    
    /* 3. Visual Tweaks */
    margin-right: 5px !important; /* Space between icon and text */
    font-size: 1.1em !important;  /* Slightly larger for emphasis */
    vertical-align: middle !important;
    
    /* Optional: Ensure color matches text or is distinct */
    color: inherit !important; 
}

/* =======================================================
 * GLOBAL MOBILE BUTTON OPTIMIZATION
 * Standardizes ALL buttons (.btn) for small screens.
 * Reduces padding/size to prevent overlapping.
 * Does NOT affect desktop.
 *========================================================*/

@media (max-width: 767px) {

    /* Target ALL Bootstrap button types generically */
    /* This ensures consistency across Login, Cart, Search, etc. */
    .btn, 
    .btn-primary, 
    .btn-secondary, 
    .btn-default,
    .cartCheckoutButton, /* Keep specific classes just in case */
    button[type="submit"],
    input[type="button"] {
        
        /* 1. COMPACT PADDING (The main fix) */
        /* Reduces the massive desktop padding (was 1.25rem) */
        padding: 0.9rem !important; 
        
        /* 2. ADJUST FONT SIZE */
        /* Make text slightly smaller to fit better on narrow screens */
        font-size: 0.85rem !important; 
        
        /* 3. SAFETY LAYOUT */
        /* Prevents the button from being wider than the screen */
        max-width: 100% !important;
        
        /* 4. TEXT WRAPPING */
        /* Allow long text (e.g. "Notify Me...") to wrap to 2 lines */
        /* instead of forcing the button to expand horizontally */
        white-space: normal !important; 
        height: auto !important; /* Allows button to grow taller if text wraps */
        
        /* 5. ALIGNMENT */
        /* Fixes text/icon alignment inside the compact button */
        vertical-align: middle !important;
        line-height: 1.3 !important;
    }
    
    /* Optional: Fix Icons inside buttons so they don't look huge */
    .btn .glyphicon, 
    .btn .fa,
    .cartCheckoutButton span {
        margin-right: 5px !important;
        font-size: 1em !important; 
    }
}

/* =======================================================
 * LOGIN PAGE REDESIGN (Split Card Style)
 * Transforms the two login columns into a unified modern card.
 *========================================================*/

/* 1. The Main Container (Simulates .card-group) */
#studentLoginOptionsContainer {
    display: flex;
    flex-wrap: wrap;
    max-width: 900px; /* Limit width for better aesthetics */
    margin: 40px auto; /* Center on page */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Unified Shadow */
    overflow: hidden; /* Clip corners */
}

/* 2. LEFT COLUMN: Existing User (White Background) */
#existingStudentDiv {
    padding: 40px !important;
    background-color: #ffffff !important;
}

/* 3. RIGHT COLUMN: New User (Maroon Background) */
#newStudentDiv {
    padding: 40px !important;
    background-color: #34111A !important; /* Corporate Maroon */
    color: white !important;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

/* =======================================================
 * TYPOGRAPHY & HEADERS
 *========================================================*/

/* Left Header (I have an account) */
#existingStudentDiv h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #34111A !important;
    font-size: 1.8rem !important;
    margin-bottom: 10px !important;
    border: none !important; /* Remove default borders */
}

/* Right Header (I am a new user) */
#newStudentDiv h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* White text */
    font-size: 1.8rem !important;
    margin-bottom: 20px !important;
    border: none !important;
}

/* Helper Text (Variable Content) */
#variableContentBlockPG0014, 
#variableContentBlockPG0015 {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 20px;
    line-height: 1.5;
}

#newStudentDiv #variableContentBlockPG0015 {
    color: rgba(255,255,255, 0.8) !important; /* Semi-transparent white */
}

/* =======================================================
 * FORM ELEMENTS
 *========================================================*/

/* Reset Card Headers inside columns */
.userForm .sectionHeader {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Input Fields Styling */
.userForm .form-control {
    height: 50px !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
}

/* Right Side Inputs (On Maroon Bg) */
#newStudentDiv .form-control {
    background-color: rgba(255,255,255, 0.1) !important; /* Transparent styling */
    border: 1px solid rgba(255,255,255, 0.2) !important;
    color: white !important;
}

#newStudentDiv .form-control::placeholder {
    color: rgba(255,255,255, 0.6) !important;
}

#newStudentDiv label {
    color: rgba(255,255,255, 0.9) !important;
}

/* =======================================================
 * BUTTONS
 *========================================================*/

/* Left Button (Primary Action) */
#buttonContinueCheckoutExisting {
    width: 100% !important;
    margin-top: 10px !important;
    background-color: #8b2331 !important; /* MacEwan Red */
    border: none !important;
    transition: all 0.3s ease !important;
}

#buttonContinueCheckoutExisting:hover,
#buttonContinueCheckoutExisting:focus {
    background-color: #34111A !important; /* Dark Brown */
    color: #FFFFFF !important;
}


/* =======================================================
 * CREATE ACCOUNT BUTTON (New User Section)
 * Style: Red Background -> Dark Brown Hover
 * Scoped to #buttonContinueCheckout
 *========================================================*/

/* 1. Base State (Red) */
#buttonContinueCheckout {
    /* --- Colors --- */
    background-color: #8b2331 !important; /* MacEwan Red */
    border-color: #8b2331 !important;
    color: #FFFFFF !important; /* White Text */
    
    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    width: 100% !important; 
    transition: all 0.3s ease !important;
}

/* 2. Hover State (Dark Brown) */
#buttonContinueCheckout:hover,
#buttonContinueCheckout:focus {
    background-color: #54141d !important; /* Dark Brown */
    border-color: #54141d !important;
    color: #FFFFFF !important;
}

/* =======================================================
 * LOGIN LINKS (Forgot Password/Username)
 * Style: Brown Base -> Red Hover
 *========================================================*/

.forgot-credential-container a {
    /* --- Base State (Brown) --- */
    color: #8b2331 !important; /* MacEwan Dark Brown */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 0.9rem !important;
    
    /* Decoration */
    text-decoration: underline !important;
    
    /* Smooth Transition */
    transition: color 0.3s ease, text-decoration-color 0.3s ease !important;
}

.forgot-credential-container a:hover,
.forgot-credential-container a:focus {
    /* --- Hover State (Red) --- */
    color: #34111a !important; /* MacEwan Red */
}

/* =======================================================
 * RESPONSIVE (Mobile Stack)
 *========================================================*/
@media (max-width: 767px) {
    #studentLoginOptionsContainer {
        flex-direction: column !important;
        margin: 20px 10px !important; /* Less margin on mobile */
    }
    
    #existingStudentDiv, #newStudentDiv {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* =======================================================
 * LOGIN UX IMPROVEMENT: REORDER INPUTS & LINKS
 * Moves "Forgot..." links below their respective inputs.
 * Uses Flexbox Order + :has() selector.
 *========================================================*/

/* 1. Enable Reordering on the Form */
#portalNativeLoginPanel form {
    display: flex !important;
    flex-direction: column !important;
}

/* --- GROUP A: USERNAME --- */

/* Step 1: The Input (Visual Position 1) */
/* We find the div that contains the #userName input */
#portalNativeLoginPanel .form-group:has(#userName) {
    order: 1 !important;
    margin-bottom: 5px !important; /* Small gap between input and link */
}

/* Step 2: The Link (Visual Position 2) */
/* We find the div that contains the #forgotUserNameLink */
#portalNativeLoginPanel .forgot-credential-container:has(#forgotUserNameLink) {
    order: 2 !important;
    text-align: right !important; /* Align to right for standard pattern */
    margin-bottom: 20px !important; /* Space before next section */
    width: 100% !important;
}

/* --- GROUP B: PASSWORD --- */

/* Step 3: The Input (Visual Position 3) */
#portalNativeLoginPanel .form-group:has(#password) {
    order: 3 !important;
    margin-bottom: 5px !important;
}

/* Step 4: The Link (Visual Position 4) */
#portalNativeLoginPanel .forgot-credential-container:has(#forgotPasswordLink) {
    order: 4 !important;
    text-align: right !important;
    margin-bottom: 20px !important;
}

/* --- GROUP C: ACTION --- */

/* Step 5: The Login Button (Visual Position 5) */
#portalNativeLoginPanel .buttons {
    order: 5 !important;
}

/* Ensure any introductory text stays at the very top */
#portalNativeLoginPanel > div:not(.form-group):not(.forgot-credential-container):not(.buttons) {
    order: 0 !important;
}

/* =======================================================
 * FORGOT USERNAME FORM STYLING
 * matches the "Log-In" white card aesthetic.
 * Scoped to #portalForgotUserNameForm
 *========================================================*/

/* 1. The Form Container (The Card) */
#portalForgotUserNameForm {
    /* --- Card Appearance --- */
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 8px !important;
    
    /* --- Shadow & Border --- */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border: 1px solid #e9ecef !important;
    
    /* --- Layout (Centered Box) --- */
    max-width: 600px !important; /* Constrain width for readability */
    margin: 40px auto !important; /* Center horizontally */
    display: block !important;
}

/* 2. Instructional Text */
#portalForgotUserNameForm .variable-content-item {
    font-family: 'Montserrat', sans-serif !important;
    color: #555555 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

/* 3. Labels (Email) */
#portalForgotUserNameForm label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    color: #34111a !important; /* Dark Brown */
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

/* 4. Input Fields */
#portalForgotUserNameForm .form-control {
    height: 50px !important;
    border-radius: 4px !important;
    border: 1px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    color: #343434 !important;
    padding-left: 15px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

/* Input Focus State */
#portalForgotUserNameForm .form-control:focus {
    border-color: #8b2331 !important; /* Red Border on focus */
    background-color: #fff !important;
}

/* 5. Buttons Container */
#portalForgotUserNameForm .buttons {
    display: flex !important;
    justify-content: flex-end !important; /* Align buttons to right */
    gap: 15px !important; /* Space between buttons */
    margin-top: 30px !important;
    border-top: none !important; /* Remove any default lines */
    padding-top: 0 !important;
}

/* 6. Primary Button (Continue) */
#portalForgotUserNameForm .btn-primary {
    background-color: #8b2331 !important; /* MacEwan Red */
    border-color: #8b2331 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important; /* Generous padding */
    min-width: 150px !important;
}

#portalForgotUserNameForm .btn-primary:hover {
    background-color: #34111a !important; /* Dark Brown Hover */
    border-color: #34111a !important;
}

/* 7. Secondary Button (Cancel) */
#portalForgotUserNameForm .btn-secondary {
    background-color: #ffffff !important;
    color: #8b2331 !important;
    border: 1px solid #8b2331 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
      transition: all 0.3s ease !important;
}

#portalForgotUserNameForm .btn-secondary:hover {
    background-color: #d51f37 !important;
    border: 1px solid #d51f37 !important;
    color: #fff !important;
}

/* =======================================================
 * PAGE: PG0033 (Advanced Search)
 * Styles the new 2-column flex layout (v4)
 * (Comments are in English)
 *========================================================*/

/* =======================================================
 * GLOBAL SECONDARY ACTIONS (Reset / Cancel)
 * Style: White bg with Red Border -> Red Fill on Hover
 * Targets: #buttonReset, #buttonCancel, and value="Reset"
 *========================================================*/

/* 1. Selectores Globales para Reset y Cancelar */
#buttonReset,
#buttonCancel,
button[value="Reset"],
button[value="Cancel"] {
    /* --- Base State (Outlined) --- */
    background-color: #ffffff !important;
    color: #8b2331 !important;       /* MacEwan Red Text */
    border: 1px solid #8b2331 !important; /* Red Border */
    
    /* --- Typography --- */
    font-family: 'Montserrat', sans-serif !important;

    
font-optical-sizing: auto !important;
    font-size: .942rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    padding: 1.25rem 1.9rem !important;
    text-transform: uppercase !important;
    
    /* --- Animation --- */
    transition: all 0.3s ease !important;
}

/* 2. Hover State (Filled) */
#buttonReset:hover,
#buttonCancel:hover,
button[value="Reset"]:hover,
button[value="Cancel"]:hover {
    /* --- Change to Solid Bright Red --- */
    background-color: #d51f37 !important; /* Lighter/Bright Red */
    border-color: #d51f37 !important;
    color: #ffffff !important; /* White Text */
    cursor: pointer !important;
}

/* 1. The Flex Container */
#search-layout-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    align-items: flex-start; /* Aligns tops of columns */
    gap: 30px; /* Creates a gutter between columns */
}

/* 2. The Filter Column (Left) */
#search-layout-wrapper > .card.card-info {
    flex: 2; 
    min-width: 450px; 
}

/* 3. The Featured Column (Right) 
 * === THIS SELECTOR IS NOW UPDATED ===
 * It targets the <section> tag directly
 */
#search-layout-wrapper > .sce-cards-wrapper {
    flex: 1;
    min-width: 300px; 
    
    /* 4. Padding reset for the <section> */
    /* This overrides the .py-5 class */
    padding-top: 0 !important;
    padding-bottom: 0 !important; 
}

/* 5. Override the unwanted .container
 * === THIS SELECTOR IS ALSO UPDATED ===
 */
#search-layout-wrapper > .sce-cards-wrapper .container {
    width: 100% !important;
    max-width: none !important; /* Removes the max-width limit */
    padding: 0 !important; /* Removes Bootstrap padding */
    margin: 0 !important; /* Removes Bootstrap centering */
}