/* --- 🎨 Color Palette & Font Variables --- */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    /* Light Mode (default) */
    --bg-color: #fdf6e3;         /* Muted, yellowish white */
    --text-color: #586e75;       /* Muted dark text */
    --header-bg: #f5eeda;
    --accent-color: #268bd2;     /* A pleasant blue */
    --code-bg: #eee8d5;          /* Background for code blocks */
    --border-color: #d3cbb7;
    --visited-color: #551a8b; /* A traditional purple for light mode */
}

body.dark-mode {
    /* Dark Mode */
    --bg-color: #2d323b;         /* Muted dark gray */
    --text-color: #cdd3da;       /* Lighter text */
    --header-bg: #272c34;
    --accent-color: #61afef;     /* A nice blue for dark mode */
    --code-bg: #21252b;          /* Darker background for code */
    --border-color: #3f4651;
    --visited-color: #be99ff; /* A lighter purple for dark mode */
}

/* --- 💻 General Layout & Typography --- */
body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    transition: background-color 0.2s, color 0.2s;
}

.site-header {
    background-color: var(--header-bg);
    padding: 0.5rem 2rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.main-nav {
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
    padding: 0.5rem 2rem;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);

    position: sticky;
    top: 0;
    z-index: 1000;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.main-nav a { text-decoration: none; color: var(--accent-color); font-weight: bold; }
.nav-links > li > a {
    font-size: 1.2rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.nav-links > li > a.hover {
    background-color: var(--code-bg);
    color: var(--text-color);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px; /* Same as .content */
    margin: 0 auto;   /* This centers it */
    padding: 0 1rem;  /* Same as .content */
}

.nav-controls { display: flex; align-items: center; gap: 1rem; }
#theme-switcher { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
#login-link { background: none; border: none; font-size: 1.5rem; cursor: pointer; }

.content {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* --- 🔗 Content Link Styling --- */

/* Default state for all links in the content area */
.content a {
    color: var(--accent-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px; /* Puts a little space between the text and the line */
    transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

/* Style for links that the user has already visited */
.content a:visited {
    color: var(--visited-color);
}

/* Style for when the user hovers over or focuses on a link */
.content a:hover, .content a:focus {
    color: var(--text-color); /* On hover, make the link match the body text */
    text-decoration-color: var(--accent-color); /* Make the underline pop with the accent color */
    text-decoration-thickness: 2px;
}

/* Make images take up the full width */
.content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Class for full-width elements --- */

.fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

img.fullwidth {
    max-width: 100vw;
}

/* --- 🦶 Site Footer Styling --- */

.site-footer {
    text-align: center;
    margin: 2rem auto 0; /* Adds significant space above the footer */
    padding: 2rem 1rem;
    /*border-top: 1px solid var(--border-color);*/
    font-size: 0.85rem; /* Makes the text smaller than the body text */
    color: var(--border-color); /* Uses a muted color to reduce prominence */
    max-width: 800px;
}

/* Style the link within the footer */
.site-footer a {
    color: var(--border-color);
    text-decoration: underline;
}

.site-footer a:hover {
    color: var(--accent-color);
}

/* --- Agenda table --- */

.agenda-table-minimal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-left: 20px;
  font-family: sans-serif;
  line-height: 1.5;
  border-top: 1px solid;
  padding-top: 15px;
}

.table-row {
  display: flex;
  margin-bottom: 15px; /* Adds space between rows */
  padding-bottom: 15px;
  border-bottom: 1px solid;
}

.table-cell {
  padding-right: 20px; /* Provides space between columns */
}

.date-col {
  flex: 0 0 25%; /* Fixed width for the date column */
  font-weight: bold; /* Bold the date to distinguish it */
}

.agenda-col {
  flex: 1; /* Takes up the remaining space */
}

/* --- 📦 Code Blocks & Inline Code --- */
/* This makes code "pop" */
code:not(pre > code) { /* Inline code */
    background-color: var(--code-bg);
    color: var(--accent-color);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: var(--font-mono);
}

pre { /* Code blocks */
    background-color: var(--code-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
}

pre code {
    font-family: var(--font-mono);
}

/* --- 👇 Collapsible Elements Styling --- */
details {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin: 1.5em 0;
}
details[open] {
    background-color: var(--code-bg);
}
summary {
    cursor: pointer;
    padding: 0.8em;
    font-weight: bold;
    color: var(--accent-color);
}
.details-content {
    padding: 0 1.2em 1.2em 1.2em;
    border-top: 1px solid var(--border-color);
}

/* --- Dropdown Menu Styling --- */

/* The container for the dropdown */
.dropdown {
    position: relative; /* This is crucial for positioning the dropdown content */
    display: inline-block;
}

/* The hidden content of the dropdown */
.dropdown-content {
    display: none; /* Hide the dropdown by default */
    position: absolute; /* Position it relative to the .dropdown container */
    background-color: var(--header-bg);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; /* Make sure it appears on top of other content */
    border-radius: 4px;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Make the entire area clickable */
    text-align: left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: var(--code-bg);
}

/* The magic! Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --- 📱 Mobile & Responsive Styles --- */

/* Style the hamburger button itself */
#hamburger-btn {
    display: none; /* Hide it by default on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

#hamburger-btn span {
    width: 2rem;
    height: 0.25rem;
    background-color: var(--text-color);
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Media Query: Styles for screens 768px or smaller */
@media screen and (max-width: 768px) {
    .main-nav {
        /* Allow items to wrap and stack */
        flex-wrap: wrap;
    }

    #hamburger-btn {
        display: flex; /* Show the hamburger button */
    }

    .main-nav .nav-links {
        display: none; /* Hide the navigation links by default */
        width: 100%;
        flex-direction: column; /* Stack the links vertically */
        text-align: center;
        margin-top: 1rem;
    }
    
    .main-nav .nav-links.active {
        display: flex; /* Show the links when the menu is toggled */
    }

    .nav-links li {
        padding: 0.5rem 0;
    }
    
    /* Make the dropdown work better on mobile */
    .dropdown-content {
        position: static; /* Remove absolute positioning */
        display: none; /* Keep it hidden by default */
        box-shadow: none;
        background-color: var(--code-bg);
    }
    
    .dropdown:hover .dropdown-content {
       /* On mobile, we want to click to open, not hover */
       /* JS will handle showing this if we want a click-to-expand feature */
    }
}