/*
 * Custom Theme based on PicoCSS.min
 */


 :root {
    --font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --background-color: white;

    --border-color: #e2e8f0;
    --article-background-color: #fbfbfb;
    --secondary-text-color: #5d6b89;

    --border-radius: 0.2rem;

    --text-color: #2d3748;
    --primary-color: #0072ad;
    --primary-hover-color: #025787;
    --muted-color: #646b79;

    --header-background-color: rgb(255, 255, 255);
    --header-item-spacing: 1.0rem;
    --header-border-padding: 2.0rem;
    --header-text-padding: 1.2rem;

    --body-offset-top: 4.5rem;  /* adjust to set distance to header */
    --body-border-padding: 2.5rem;  /* horizontal distance to page */

    --course-item-actions-width: 200px;
    --course-item-padding: 1.5rem;

    /* course specific */
    --course-sidebar-border-color: rgb(231, 234, 239.5);  /* is this the same as --border-color? */
    --course-sidebar-width: 330px;
    --course-sidebar-hide-width: 1400px; /* if you change this then you'll also have to change max-width in the @media query in course.css */
    --course-sidebar-border-radius: 0.25rem;
    --course-sidebar-item-active-background: #0172ad;
    --course-sidebar-item-active-text: #fff;
    --course-sidebar-locked-item-text: var(--muted-color);

    /* auth-form */
    --auth-form-padding: 1.05rem;
    --auth-form-footer-padding: 0.75rem;
 }

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family);
    height: 100%;
    font-size: 1.3rem; /* Set the base font size for the entire document */
    margin: 0;
}

/* --- Responsive Font Scaling --- */
/* On smaller screens, reduce the root font size. This has the effect of scaling
   down all elements, padding, and margins that are defined using `rem` units,
   making the layout more comfortable on mobile devices. */
@media (max-width: 800px) {
    html {
        font-size: 1.1rem;
    }
}

body {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    height: 100%;
    margin: 0;  /* by default there's a non-zero margin, if we set height to 100% then this margin gets added so the content would overflow */
    overflow-x: hidden; /* Prevent horizontal scrollbars from appearing when sidebar is off-canvas */
}


/* --- Header --- */
body > header {
    /* position: fixed removes the element from the normal document flow.
       This means we can no longer use `margin: auto` for centering. */
    position: fixed;
    
    /* set a gap to the sides; we do need specify right,
       otherwise all header elements will be aligned on the left edge */
    top: 0;
    left: var(--header-border-padding);
    right: var(--header-border-padding);
    padding-top: var(--header-text-padding);
    padding-bottom: var(--header-text-padding);
    padding-left: var(--header-text-padding);
    padding-right: var(--header-text-padding);

    /* A high z-index to stay on top of other content like dropdowns */
    z-index: 1020;

    /* Ensure the header has a solid background so content doesn't show through when scrolling */
    background-color: var(--header-background-color);

    /* Add a border to the bottom for a clean separation */
    border-bottom: 2px solid #9c9e9f;
}

body > header a {
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap; /* Prevent nav links from wrapping to a second line */
}

body > header a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-hover-color);
    text-decoration-thickness: 0.05rem;
}

/* Style for the currently active navigation link */
.nav-link.current_page {
    /* color: #005a87; */
    text-decoration: underline;
}

body > header a:visited {
    color: var(--primary-color);
    text-decoration: none;
}

/* horizontal alignment of header */
body > header > nav,
body > header > nav .nav-right,
body > header > nav .language-switcher {
    display: flex;
}

body > header ul {
    display: flex;
}

body > header > nav {
    justify-content: space-between; /* Pushes left and right sections apart */
}

/* spacing between elements and between elements and the page */
body > header ul {
    list-style-type: none;
    padding: 0; /* Remove default padding for lists, would add additional space */
    margin: 0; /* Remove default margin for lists, would add additional space */
    gap: var(--header-item-spacing); /* Add space between list items */
}

.language-switcher {
    padding-left: var(--header-item-spacing);
}

/* When the header is fixed, it's removed from the document flow.
   We must add padding to the top of the main content area to prevent
   it from being hidden underneath the header. */
#content-container {
    /* padding-top: var(--body-offset-top); */
    min-height: 0; /* prevent overflow on some browsers */
    flex-grow: 1; /* This makes the container fill the remaining vertical space in the flex body */
    overflow-y: auto; /* Make the main content area scrollable */
    position: relative; /* Make this a positioning context for child elements like the sidebar toggle */
}

/* This placeholder div is added at the top of each page partial to create the
   necessary space below the fixed header. */
.page-offset-placeholder {
    height: var(--body-offset-top);
    flex-grow: 0;
    flex-shrink: 0;
}

/* Hide the scrollbar on the main content container while the window is being resized
   to prevent layout jank and flashing scrollbars. */
body.is-resizing #content-container {
    overflow-y: hidden;
}

/* Make the side navigation sections rigid, so they don't shrink. */
#nav-collapsible-content .nav-left,
#nav-collapsible-content .nav-right {
    flex-shrink: 0;
}

/* Style for the contextual title (e.g., course title) in the header */
#header-context-title {
    /* Hidden by default, made visible by JavaScript on course pages */
    display: none;
    font-style: italic;
    color: var(--muted-color);

    text-align: center;
    flex-grow: 1;
    min-width: 0;

    /* Prevent long titles from breaking the layout or wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Responsive Header --- */

/* The container for all links that will collapse on mobile */
#nav-collapsible-content {
    display: flex;
    align-items: center;
    gap: var(--header-item-spacing);
    flex-grow: 1; /* Allows context title to sit in the middle */
    justify-content: space-between;
    /* This is crucial for nested flex containers. It allows this container
       to shrink below the combined minimum width of its children, which in
       turn allows the flexible title inside it to shrink and show an ellipsis. */
    min-width: 0;
}

/* The container for mobile-only controls */
#mobile-controls {
    display: none; /* Hidden by default on large screens */
    align-items: center;
    gap: 1rem; /* Space between language switcher and hamburger */
}

.mobile-switcher { display: none; } /* Hide mobile switcher by default */

/* --- Hamburger Menu (DIV-based) --- */

/* This is the clickable container for the hamburger icon.
   It replaces the old <button> element. */
.menu-button-container {
    height: 1.3rem; /* Use rem to scale with root font size */
    width: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for positioning the bars inside */
    z-index: 1030;
}

/* These rules create the three horizontal bars of the hamburger icon. */
.menu-button,
.menu-button::before,
.menu-button::after {
    display: block;
    background-color: var(--text-color);
    position: absolute;
    height: 0.15rem; /* Use rem for scaling */
    width: 1.2rem;  /* Use rem for scaling */
    border-radius: 2px;
}
.menu-button::before {
    content: '';
    margin-top: -0.35rem; /* Use rem for scaling */
}
.menu-button::after {
    content: '';
    margin-top: 0.35rem; /* Use rem for scaling */
}

/* Media query for smaller screens */
@media (max-width: 800px) {
    #nav-header {
        /* On mobile, center the visible controls (language switcher and hamburger) */
        justify-content: center;
    }

    #mobile-controls {
        display: flex;       /* Ensure items inside are aligned horizontally */
        align-items: center; /* Vertically center the hamburger and flag */
    }

    #nav-collapsible-content {
        /* Keep it as a flex container, but hide it with opacity and transform */
        display: flex;
        position: absolute;
        top: 100%; /* Position it right below the header's bottom border */
        left: calc(-1 * var(--header-text-padding)); /* Align with the edge of the header */
        right: calc(-1 * var(--header-text-padding));
        background-color: var(--header-background-color);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Add a more prominent shadow */
        padding: 1rem var(--header-text-padding);
        
        /* Stack all nav sections vertically */
        flex-direction: column;
        align-items: center;
        gap: 1.5rem; /* Increase gap for vertical layout */

        /* --- Transition Properties --- */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px); /* Start slightly above its final position */
    }

    /* Only apply the transition when the body is NOT being resized.
       This prevents the menu from animating during window resize. */
    body:not(.is-resizing) #nav-collapsible-content {
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    /* When the menu is open, show the content */
    #nav-collapsible-content.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Adjust the inner containers for vertical stacking */
    #nav-collapsible-content .nav-left,
    #nav-collapsible-content .nav-right,
    #nav-collapsible-content ul {
        flex-direction: column;
        /* align-items: flex-start; */
        align-items: center;
        width: 100%;
    }

    #nav-collapsible-content .desktop-switcher {
        display: none; /* Hide the language switcher from inside the collapsed menu */
    }
}
/* --- Header --- */


/* --- Main --- */
main {
    padding-left: var(--body-border-padding);
    padding-right: var(--body-border-padding);
    /* font-size: 1.3em; */
    line-height: 1.55;
    transition: filter 0.3s ease-in-out; /* Add transition for the blur effect */
}

/* When the mobile menu is open, blur the main content to focus on the menu. */
body.menu-is-open main {
    filter: blur(4px);
    /* Prevent interaction with the blurred content */
    pointer-events: none;
}

main h3 {
    margin-bottom: 1.0rem;
    /* margin-top: 0; */
    color: #424750;
}

main h3:first-of-type {
    margin-top: 0;
}

main h4 {
    font-size: 1.25em;
    margin-bottom: 0.75rem;
    color: #4d535e;
}

main h4:first-of-type {
    margin-top: 0;
}

main p {
    /* font-size: 0.99rem; */
    margin-top: 0.0rem;
    margin-bottom: 1.0rem;
}

main blockquote {
    border-left: 4px solid var(--border-color);
    padding-left: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-left: 0;
    /* color: var(--secondary-text-color); */
}

main article {
    padding: 1.25rem;   /* gap between article boundaries and article text. */
    margin-bottom: 1.0rem;  /* spacing between articles */
    font-size: 0.9rem; /* Set a slightly smaller base font for main content articles */
    box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
}

/* Remove top margin from the first element inside an article for consistent spacing */
article > :first-child {
    margin-top: 0;
}

/* Remove bottom margin from the last element inside an article for consistent spacing */
article > :last-child {
    margin-bottom: 0;
}

a:link {
    color: var(--primary-color);
}

a:visited {
    color: var(--secondary-text-color);
}

a:hover {
    color: var(--primary-hover-color);
}

input {
    padding: 0.95rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid #cfd6e2;
    margin-bottom: 1rem;
    font-size: 1rem;
}

input:focus {
    outline: none;
    padding: 0.95rem 1rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1rem;
}

hgroup h1 {
    font-size: 2.0rem;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.0;
}

hgroup h2 {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #646b78;
    line-height: 1.4;
}

#my-courses-container h3,
#course-list-container h3 {
    font-size: 1.5rem;
    color: #424750;
}

/* --- Details & Summary Elements --- */
/* Styles for the collapsible <details> element, used on the home page. */

details > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between arrow and text */
    cursor: pointer;
    list-style: none; /* Hide the default browser marker */
    color: #424751;
}

details > summary::-webkit-details-marker {
    display: none; /* Hide the default marker in WebKit browsers */
}

details > summary::before {
    content: '►'; /* Custom arrow marker */
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

details[open] > summary::before {
    transform: rotate(90deg); /* Rotate arrow when open */
}

/* Remove default margins from headings inside a summary to ensure proper alignment */
details > summary > h3 {
    margin: 0;
}

/* My Accounts page */
.account-wrapper {
    margin-top: 0.5rem;
}

.account-wrapper > h1 {
    margin-top: 0rem;
    margin-bottom: 0;
    line-height: 1.0;
}

#account-details-container {
    margin-top: 0;
    /* margin-bottom: 0; */
}

.account-wrapper article h2 {
    border-bottom: 1px solid var(--border-color);
}

#account-details-container .account-details-grid dt {
    color: var(--secondary-text-color);
}

.delete-confirmation-form input[type="password"] {
    width: 100%;
}

/* --- Danger Zone Button Styles --- */

/* This ensures all buttons within the danger zone have a consistent size. */
#danger-zone-content button {
    padding: 0.75rem 1.5rem;
}

.button-danger {
    background-color: #d32f2f; /* A standard danger red */
    border-color: #d32f2f;
}

.button-danger:hover {
    background-color: #b71c1c; /* A darker red for hover */
    border-color: #b71c1c;
}

/* Style for all action buttons in the account details section */
.button-outline,
.edit-button,
.save-button {
    /* Change to primary button style */
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.button-outline:hover,
.edit-button:hover,
.save-button:hover {
    background-color: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: white;
}

/* --- Global Tooltip --- */
.tooltip-container {
    position: fixed; /* Position relative to the viewport, taking it out of the layout flow. */
    background-color: hsl(210, 10%, 25%);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    white-space: nowrap; /* Keep the tooltip on a single line as requested */
    z-index: 1050; /* Ensure it's on top of all other content */
    
    /* Hidden by default and non-interactive */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.tooltip-container.is-visible {
    opacity: 1;
    visibility: visible;
}



#nav-links-left, #auth-links {
    /* Smoothly transition the opacity over 0.15 seconds */
    transition: opacity 0.15s ease-in-out;
}

#nav-links-left.is-updating, #auth-links.is-updating {
    /* This class will be used by JavaScript to make the element transparent */
    opacity: 0;
}