/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* ---- General Body & Layout Styles ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    line-height: 1.6;
}
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}
a {
    text-decoration: none;
    color: #007bff;
}

/* ---- Header and Navigation ---- */
header {
    background: #333;
    color: #fff;
    padding: 0.5rem 0;
    border-bottom: #0779e4 3px solid;
}
header a {
    color: #fff;
}
header #branding {
    float: left;
    display: flex;
    align-items: center;
    height: 50px;
}
.logo-image {
    max-height: 50px;
    width: auto;
    vertical-align: middle;
}
header nav {
    float: right;
}
header nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
header nav ul li {
    display: inline;
    padding: 0 20px 0 20px;
}
header nav ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
header nav ul li a:hover {
    text-decoration: none;
}

/* ---- Forms, Buttons, General Cards ---- */
.form-container { background: #fff; padding: 30px; margin-top: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; }
.form-container h2 { text-align: center; margin-bottom: 20px; color: #333; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="tel"], .form-group select {
    width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box;
}
.btn { display: inline-block; background: #0779e4; color: #fff; padding: 10px 20px; border: 0; border-radius: 5px; cursor: pointer; text-align: center; font-size: 16px; text-decoration: none; font-weight: bold; }
.btn:hover { background: #056ab2; }
.card { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }

/* --- Course Page Lesson List --- */
.module-list, .lesson-list { list-style: none; padding: 0; }
.module-list li { background: #e9ecef; margin-bottom: 10px; padding: 15px; border-radius: 5px; }
.module-list h4 { margin: 0 0 10px 0; }
.lesson-list li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
.lesson-list li:last-child { border-bottom: none; }
.lesson-list .status { padding: 5px 10px; border-radius: 15px; color: #fff; font-size: 12px; }
.status.complete { background: #28a745; }
.status.locked { background: #6c757d; }

/* ---- Basic Mobile Display ---- */
.hamburger-menu { display: none; }
@media (max-width: 768px) {
    header nav { display: none; }
    .hamburger-menu {
        display: block; font-size: 30px; color: white; background: none;
        border: none; cursor: pointer; float: right; padding: 10px;
    }
    .lesson-list li {
        flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .lesson-list li > div {
        width: 100%; text-align: right;
    }
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.mt-2 { margin-top: 20px; }


/* --- FINAL, TARGETED FIXES FOR DASHBOARD STYLING --- */

/* 1. Fixes the Welcome Blurb layout and Icon style */
.welcome-header {
    display: flex;
    flex-direction: column; /* This stacks the icon above the text */
    align-items: center;    /* This centers them horizontally */
    text-align: center;     /* This centers the "Welcome..." text */
    gap: 10px;              
}
.welcome-icon {
    width: 64px;
    height: 64px;
    fill: #495057; /* A professional dark grey for the icon */
    padding: 12px;
    border: 2px solid #e9ecef; /* A light, clean border */
    border-radius: 50%;       /* Makes the border a perfect circle */
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* A soft shadow */
}


/* 2. Fixes the Course Blurb title headers */

/* This sets a SINGLE, UNIFORM style for ALL course card title headers */
.item-card .item-card-header {
    background-color: #343a40 !important; /* A professional dark slate color */
    padding: 15px 20px;
}

/* This makes the text inside ALL title headers white */
.item-card .item-card-header h4 {
    color: #ffffff !important; 
}

/* This removes the special grey background from completed courses to ensure uniformity */
.item-card.completed-card .item-card-header {
    background-color: #343a40 !important;
}

/* --- NEW COURSERA-STYLE CARD DESIGN --- */

/* This targets the grid on the dashboard */
.dashboard-grid .item-card {
    display: flex;       /* This is the key: makes items go side-by-side */
    flex-direction: row; /* Horizontal layout */
    align-items: stretch;/* Makes both sides equal height */
    padding: 0;
    overflow: hidden;    /* Important for rounded corners */
}

/* The image container on the left */
.item-card-image {
    width: 35%; /* The image takes up about 1/3 of the card */
    flex-shrink: 0; /* Prevents the image from shrinking */
    background-size: cover;
    background-position: center;
}

/* The text content container on the right */
.item-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column; /* Stacks title, description, and button vertically */
    width: 65%;
}

/* Overriding old title styles for the new layout */
.item-card-body h4 {
    background-color: transparent; /* Remove the old header bar */
    border-bottom: none;
    padding: 0;
    margin-bottom: 10px;
}
.item-card-body p {
    padding: 0;
    flex-grow: 1; /* Pushes the button to the bottom */
}
.item-card-body .actions {
    padding: 0;
    margin-top: 20px;
    border: none;
    background: none;
}
.item-card-body .actions .btn {
    width: auto; /* Let the button be its natural size */
    padding: 8px 25px;
}

/* Responsive: On mobile, stack the image on top of the text */
@media (max-width: 600px) {
    .dashboard-grid .item-card {
        flex-direction: column; /* Stack vertically on mobile */
    }
    .item-card-image {
        width: 100%;
        height: 180px; /* Give the image a fixed height on mobile */
    }
    .item-card-body {
        width: 100%;
    }
}

/* --- Clickable Card Title Style --- */
.item-card-body a {
    text-decoration: none;
    color: inherit; /* This makes the link take the color of the H4 tag */
}

.item-card-body a h4:hover {
    color: #007bff; /* On hover, change the title color to blue for feedback */
}

/* Also make the image a clickable link */
.card-image-link {
    display: block;
}

/* --- FINAL, VETTED STYLES FOR ALL DASHBOARD COURSE CARDS --- */

/* This is the new, unified "Blurb" style for ALL course cards */
.dashboard-grid .item-card {
    background: #ffffff; /* 1. White background for contrast */
    border: 1px solid #e9ecef; /* 2. A subtle shadow-border */
    border-radius: 5px; /* 3. The 5px rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column; /* This is key for aligning the button */
    overflow: hidden; /* Ensures the header's rounded corners are visible */
    padding: 0; /* We reset padding to control it precisely inside */
}

/* The distinct title header within the blurb */
.item-card-header {
    background-color: #f8f9fa; /* A very light, clean background for the title area */
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px; /* 4. Correct padding for the title */
}
.item-card-header h4 {
    margin: 0;
    font-size: 18px;
    color: #343a40; /* Dark, professional text for the title */
}

/* The main content area for the description */
.item-card-content {
    padding: 20px; /* 4. Correct padding for the description */
    flex-grow: 1; /* This pushes the button to the bottom */
}
.item-card-content p {
    margin: 0;
    font-size: 15px;
    color: #555;
}

/* The container for the button at the bottom */
.item-card .actions {
    padding: 0 20px 20px 20px;
    margin-top: 10px;
}
.item-card .actions .btn {
    width: 100%;
    margin: 0;
    padding: 12px;
    color: #ffffff !important; /* 5. Forces the button text to be white */
}

/* A special visual tweak for COMPLETED courses */
.item-card.completed-card {
    opacity: 0.8; /* Fades out completed courses slightly */
}
.item-card.completed-card .item-card-header {
    background-color: #6c757d; /* A neutral grey header for completed */
}
.item-card.completed-card .item-card-header h4 {
    color: #fff;
}
.item-card.completed-card:hover {
    opacity: 1;
}

/* --- NEW COURSERA-STYLE CARD DESIGN --- */

/* This targets the grid to ensure proper layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; /* Each card takes a full row */
    gap: 25px; /* Space between the cards */
}

/* The base style for the new horizontal card */
.dashboard-grid .item-card {
    display: flex;       /* This is the key: makes items go side-by-side */
    flex-direction: row; /* Horizontal layout */
    align-items: stretch;/* Makes both sides equal height */
    background: #ffffff;
    border-radius: 5px;  /* The rounded corners you wanted */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    padding: 0;
}

/* The image container on the left */
.item-card-image {
    width: 30%;
    min-width: 200px; /* Ensures image doesn't get too squished */
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

/* The text content container on the right */
.item-card-body {
    padding: 20px 25px;
    display: flex;
    flex-direction: column; /* Stacks title, description, and button */
    width: 70%;
}
.item-card-body a {
    text-decoration: none;
    color: inherit; /* Makes the title link use the h4 color */
}
.item-card-body h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #343a40;
    transition: color 0.2s ease;
}
.item-card-body a h4:hover {
    color: #007bff; /* Add a hover effect for the title */
}
.item-card-body p {
    margin: 0;
    flex-grow: 1; /* Pushes the button to the bottom */
}
.item-card-body .actions {
    padding: 0;
    margin-top: 20px;
}
.item-card-body .actions .btn {
    width: auto; /* Let the button be its natural size */
    padding: 8px 25px;
}

/* Responsive: On mobile, stack the image on top of the text */
@media (max-width: 768px) {
    .dashboard-grid .item-card {
        flex-direction: column; /* Stack vertically on mobile */
    }
    .item-card-image {
        width: 100%;
        height: 180px;
    }
    .item-card-body {
        width: 100%;
        box-sizing: border-box; /* Ensures padding is included in width */
    }
}


/* --- NEW STYLES FOR MULTI-COLUMN DASHBOARD GRID --- */

/* This turns the main container into a grid */
.dashboard-grid {
    display: grid;
    /* This creates responsive columns: they will automatically fit as many cards
       as possible, with each card being at least 320px wide. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px; /* The space between the cards */
}

/* This overrides the old card styles to be VERTICAL (image on top) */
.dashboard-grid .item-card {
    display: flex;
    flex-direction: column; /* This is the key change */
    height: 100%; /* Ensures cards in a row are the same height */
}

/* This styles the image to be on top */
.item-card-image {
    width: 100%;
    height: 180px; /* A fixed height for all card images */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #e9ecef;
}

/* This ensures the text content below the image is styled correctly */
.item-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This pushes the button to the bottom */
}
.item-card-body h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
}
.item-card-body p {
    margin: 0;
    font-size: 15px;
    flex-grow: 1; /* Pushes the button to the bottom */
}
.item-card-body .actions {
    margin-top: 20px;
}
.item-card-body .actions .btn {
    width: 100%;
    padding: 12px;
}


/* --- FINAL, TARGETED FIXES FOR DASHBOARD LAYOUT & TEXT COLOR --- */

/* 1. Fixes the blue link color inside the cards */
/* This tells the title and description to ignore the parent link color */
.item-card h4,
.item-card p {
    color: #343a40; /* A dark, professional text color */
}

/* We can add a hover effect back to the title for a better user experience */
.item-card:hover h4 {
    color: #007bff;
}


/* 2. Fixes the layout of the section titles (e.g., "My Enrolled Courses") */
/* This tells the section titles AND the "no courses" paragraphs to take up the full width of the grid,
   forcing the cards to always appear underneath them. */
.dashboard-grid > h3,
.dashboard-grid > p {
    grid-column: 1 / -1;
}

/* --- DEFINITIVE PATCH TO FIX MENU AND FORM STYLES (UPDATED) --- */

/* ---- 1. Fix for Desktop Header & Nav ---- */
header {
    background-color: #333 !important; /* Restore dark background */
}
header nav ul li a {
    color: #ffffff !important;         /* Restore white text */
    font-weight: normal !important;    /* Set font weight to normal */
}

/* ---- 2. Fix for Mobile Menu Overlay AND ICONS ---- */

/* This new rule makes the hamburger icon (☰) visible on the dark header */
.hamburger-menu {
    color: #ffffff !important;
}

.mobile-nav-overlay {
    background-color: rgba(44, 62, 80, 0.98) !important; /* Restore dark cover bg */
}
.mobile-nav-overlay .close-menu-btn {
    display: block !important;         /* Make the 'X' icon visible */
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 45px !important;        /* Make it large and easy to tap */
    color: white !important;           /* Ensure it's white */
}
.mobile-nav-overlay nav ul li a {
    font-size: 18px !important;        /* Reduce font size */
    font-weight: normal !important;    /* Set font weight to normal */
}

/* ---- 3. Fix for Login/Register Forms ---- */
main .form-container {
    background: #fff !important;
    padding: 30px !important;
    margin-top: 30px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}
main .form-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* --- PATCH FOR DASHBOARD 'SEE ALL' LINKS --- */

/* This creates a container for the section title and the "See all" link */
.section-header {
    display: flex;
    justify-content: space-between; /* Pushes title and link to opposite ends */
    align-items: baseline;       /* Aligns them nicely on the same line */
    grid-column: 1 / -1;         /* Ensures it spans the full width of the grid */
    margin-bottom: -5px;
    margin-top: 15px;
}

/* Style for the "See all" link itself */
.section-header .see-all-link {
    font-size: 14px;
    font-weight: bold;
}


/* --- PATCH TO FIX DASHBOARD SECTION HEADERS ON MOBILE --- */

/* This targets the container for the section titles and "See all" links */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    grid-column: 1 / -1; /* This ensures it spans the full width of the grid */
    margin-bottom: -5px;
    margin-top: 15px;
}

/* This is the style for the "See all" link itself */
.section-header .see-all-link {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; /* Prevents the link from breaking into two lines */
}

/* On mobile, stack the "See all" link below the title */
@media (max-width: 480px) {
    .section-header {
        flex-direction: column;   /* Stack items vertically */
        align-items: flex-start;  /* Align to the left */
        gap: 5px;                 /* Add space between title and link */
        margin-bottom: 10px;      /* Add more space below the whole block */
    }
}

/* --- PATCH TO FIX DASHBOARD SECTION HEADERS ON MOBILE --- */

/* This targets the container for the section titles and "See all" links */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    grid-column: 1 / -1; /* This ensures it spans the full width of the grid */
    margin-bottom: -5px;
    margin-top: 15px;
}

/* This is the style for the "See all" link itself */
.section-header .see-all-link {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; /* Prevents the link from breaking into two lines */
}

/* On mobile, stack the "See all" link below the title */
@media (max-width: 480px) {
    .section-header {
        flex-direction: column;   /* Stack items vertically */
        align-items: flex-start;  /* Align to the left */
        gap: 5px;                 /* Add space between title and link */
        margin-bottom: 10px;      /* Add more space below the whole block. */
    }
}


/* --- PATCH FOR HEADER NOTIFICATION ICON --- */

/* This new container will hold the nav and icons together */
.header-actions {
    display: flex;
    align-items: center;
    gap: 25px; /* Space between nav links and new icons */
}

/* Style for the notification icon link */
.notification-icon {
    position: relative; /* This is crucial for positioning the badge */
    color: #ffffff; /* Make the icon white */
    font-size: 24px;
    line-height: 1; /* Helps with vertical alignment */
}
.notification-icon:hover {
    color: #a9cce3; /* A light blue for hover */
}

/* The red circle badge with the count */
.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #dc3545; /* Red */
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    line-height: 1;
    border: 2px solid #333; /* Matches the header background */
}

/* --- PATCH FOR A REUSABLE WIDE PAGE LAYOUT --- */

/* This new class can be added to any page's main container */
.container-wide {
    width: 95% !important;
    max-width: 1400px !important;
}

/* --- PATCH FOR HEADER ICONS SPACING --- */

/* This targets the container for the nav links and the icons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds a small space between the main nav and the icon group */
}

/* This new container will hold just the icons */
.header-icon-group {
    display: flex;
    align-items: center;
    gap: 20px; /* The space between the bell and message icons */
}

/* =========================================
   MOBILE-ONLY Layout & Style Adjustments
   ========================================= */

/* These rules will ONLY apply on screens smaller than 768px */
@media (max-width: 767.98px) {

    /* 1. Adjust main container width on mobile */
    /* This sets the main content area to 95% of the screen width, creating small margins. */
    .container {
        width: 95%;
    }

    /* 2. Improve Course Card appearance on mobile */
    .card-title {
        font-size: 1.2rem; /* Make card titles slightly larger on mobile */
    }

    /* Target the course description paragraph */
    .card-text {
        font-size: 1rem; /* Ensures the text is a standard, readable size */
        line-height: 1.6; /* Improves spacing between lines of text */
    }

    .card .btn {
        width: 100%; /* Make buttons full-width for easier tapping */
        margin-bottom: 0.5rem; /* Add some space between buttons if they stack */
    }
    
    /* We need to adjust the button container on the cards to stack them */
    .card .mt-auto {
        display: flex;
        flex-direction: column;
    }
}

/* --- New Style for Full-Width, Sharp-Cornered Card Buttons --- */
.btn-full-width {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border-radius: 0 !important; /* This makes the corners sharp */
}

/* --- Universal Style Fix for Textareas --- */
/* This makes all textareas use the same font as the rest of the page */
textarea.form-control,
textarea {
    font-family: inherit; /* Use the default page font (e.g., Arial, etc.) instead of monospace */
    font-size: 1rem;      /* Ensures a standard, readable font size */
}

/* --- PATCH: Remove underlines from all header/menu links --- */

/* This targets links in the desktop header nav */
header .desktop-nav ul li a {
    text-decoration: none;
}

/* This targets links in the mobile slide-in menu */
.mobile-nav-overlay nav ul li a {
    text-decoration: none;
}

/* --- Styles for the new visible mobile close button --- */

/* This hides the original button so it doesn't get in the way */
#main-close-btn {
    display: none;
}

/* This styles your new visible button */
.visible-close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.2); /* A semi-transparent square background */
    border-radius: 8px;
    
    /* Styles for the 'X' inside */
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 40px; /* Vertically centers the 'X' */
    cursor: pointer;
    z-index: 1002; /* Ensures it appears on top */
    transition: background-color 0.2s;
}

.visible-close-button:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Darker on hover */
}

/* --- Custom Menu Font & Style Patch --- */

/* Part 1: Change the font for all menu links (desktop and mobile) */
/* This uses the 'Montserrat' font we already added for the slider for consistency. */
.desktop-nav ul li a,
.mobile-nav-overlay nav ul li a {
    font-family: 'Arial', sans-serif;
    font-weight: 700; /* Makes the font bold. Use 400 for regular weight. */
}

/* Part 2: Make the text uppercase ONLY on mobile screens */
@media (max-width: 992px) { /* This targets tablets and phones */
    .mobile-nav-overlay nav ul li a {
        text-transform: uppercase;
        letter-spacing: 1px; /* Adds a little space between letters for readability */
    }
}