/* =========================
   DCDA 40833 Skills Portfolio Template
   Main stylesheet for the portfolio website.
   This file controls the site's overall visual identity,
   including colors, layout, spacing, typography, responsive behavior,
   dark mode, portfolio cards, tables, and code block styling.
   ========================= */

/* =========================
   CSS Variables (Color Scheme)
   These variables create a consistent visual system across the site.
   Instead of hard-coding colors repeatedly, I defined them once here
   so I can reuse them throughout the stylesheet and update them more easily.
   ========================= */
:root {
    /* Core neutral colors used for major structure, such as navigation
       and larger text elements. These keep the site grounded and readable. */
    --primary-color: #2b2b2b;        /* Soft black, used for strong contrast areas */
    --secondary-color: #7a746a;      /* Warm taupe-gray, used for softer emphasis */

    /* Accent colors used more sparingly for visual interest,
       hover states, highlights, and details. */
    --accent-color: #8b1e1e;         /* Muted oxblood red for emphasis */
    --accent-soft: #e6cfcf;          /* Light blush tone for subtle highlights and hover states */

    /* Main text colors for body copy and secondary/supporting text. */
    --text-color: #1f1f1f;           /* Main readable body text color */
    --text-secondary: #6f6f6f;       /* Softer gray used for captions and secondary information */

    /* Background colors for the page and alternate section styling. */
    --bg-color: #f8f3ec;             /* Main page background, warm paper-like cream */
    --bg-alt: #efe7dd;               /* Alternate light neutral used for subtle variation */

    /* Utility colors used in several places across the site. */
    --white: #ffffff;                /* Used for card/section backgrounds and contrast areas */

    /* This variable is not in your original file, but it is referenced later.
       Adding it here prevents broken borders where var(--border-color) is used. */
    --border-color: #d8c9b8;         /* Soft neutral border tone */
}

/* =========================
   Dark Mode Overrides
   When the html element gets the class "dark-mode",
   these variable values replace the default light theme values above.
   This approach keeps dark mode cleaner because I can swap colors
   without rewriting every selector from scratch.
   ========================= */
html.dark-mode {
    --primary-color: #e8e0d6;        /* Lightened primary tone for dark backgrounds */
    --secondary-color: #4a4540;      /* Dark muted neutral for structure */
    --accent-color: #d4726a;         /* Warmer accent color that stands out better in dark mode */
    --accent-soft: #3d2626;          /* Deeper soft accent for backgrounds/hover effects */
    --text-color: #e4ddd4;           /* Main light text for readability on dark backgrounds */
    --text-secondary: #a8a096;       /* Softer secondary light text */
    --bg-color: #1a1816;             /* Main dark page background */
    --bg-alt: #242120;               /* Alternate dark background for subtle contrast */
    --white: #2a2724;                /* Reused utility variable now becomes a dark card/section background */
}

/* =========================
   Dark Mode Toggle Button
   This styles the button users click to switch between light and dark mode.
   It is designed to stay visually simple and fit inside the navigation bar.
   ========================= */
#dark-mode-toggle {
    background: none;                /* Keeps the button transparent by default */
    border: 2px solid rgba(255, 255, 255, 0.4);  /* Soft visible border against the nav */
    color: white;                    /* White text/icon for contrast in dark nav */
    font-size: 1.2rem;               /* Slightly larger for readability */
    cursor: pointer;                 /* Shows that the element is clickable */
    padding: 0.3rem 0.6rem;          /* Adds breathing room around the icon/text */
    border-radius: 8px;              /* Soft rounded corners to match the site style */
    line-height: 1;                  /* Prevents extra vertical spacing */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth hover effect */
    margin-left: auto;               /* Pushes the toggle toward the right side in flex layouts */
    flex-shrink: 0;                  /* Prevents the button from shrinking too much on small screens */
}

/* Hover state for the dark mode button.
   This gives the user visual feedback that the button is interactive. */
#dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
}

/* =========================
   Dark Mode Adjustments for Specific Elements
   These selectors handle elements that still rely on literal/light colors
   and therefore need direct correction in dark mode.
   ========================= */

/* Makes section backgrounds adapt to dark mode instead of staying bright white. */
html.dark-mode main section {
    background-color: var(--white);
}

/* Makes tables consistent with dark mode card/section backgrounds. */
html.dark-mode table {
    background: var(--white);
}

/* Alternating table rows still need contrast in dark mode. */
html.dark-mode tr:nth-child(even) {
    background: var(--bg-alt);
}

/* Inline code needs special styling so it stays readable in dark mode. */
html.dark-mode p code,
html.dark-mode li code {
    background: #2a2724;
    color: #e87878;
}

/* Portfolio cards also need background updates in dark mode. */
html.dark-mode .portfolio-card {
    background: var(--white);
    color: var(--text-color);
}

/* Paragraph text inside cards gets a softer secondary tone in dark mode. */
html.dark-mode .portfolio-card p {
    color: var(--text-secondary);
}

/* Framework callout gets a darker gradient so it still feels visually distinct. */
html.dark-mode .framework-callout {
    background: linear-gradient(135deg, #2a2230, #1e1528);
}

/* Keeps header text white for strong contrast on the darker header background. */
html.dark-mode header {
    color: white;
}

/* =========================
   Basic Reset & Typography
   This section removes inconsistent browser defaults
   and establishes the site's basic text system.
   ========================= */

/* Universal reset:
   Removes default browser margin/padding and makes sizing more predictable
   by including padding and border inside an element's declared width/height. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Enables smooth animated scrolling when jumping to anchor links on the page. */
html {
    scroll-behavior: smooth;
}

/* Body styles apply to most text and the site's global background.
   This sets the overall tone and readability of the page. */
body {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
    line-height: 1.6;                /* Improves readability of paragraph text */
    color: var(--text-color);        /* Uses the main text variable */
    background-color: var(--bg-color); /* Uses the page background variable */
}

/* =========================
   Header & Navigation
   These selectors define the top structure of the website:
   the page title area and the persistent navigation menu.
   ========================= */

/* Styles the main page header using the semantic header tag.
   This creates a centered banner with strong visual separation from the rest of the site. */
header {
    background-color: var(--secondary-color);
    color: white;
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Main name/title inside the header. */
header h1 {
    color: white;
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
}

/* Course information or subtitle inside the header. */
header p {
    margin: 0;
    opacity: 0.9;                    /* Slightly softens the secondary line */
    font-size: 1.1rem;
}

/* Navigation bar styles.
   This section uses flexbox so the nav links and buttons can align neatly.
   Sticky positioning keeps navigation visible as the user scrolls. */
nav {
    background-color: var(--primary-color);
    padding: 0.75rem;
    display: flex;                   /* Makes nav children align in a flexible row */
    justify-content: center;         /* Centers the main content horizontally */
    align-items: center;             /* Vertically aligns nav items */
    gap: 0.5rem;                     /* Space between child elements inside nav */
    position: sticky;                /* Keeps nav attached to the top of the screen while scrolling */
    top: 0;
    z-index: 100;                    /* Ensures nav stays above page content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;                 /* Allows wrapping on smaller screens */
}

/* Styles the unordered list that holds the navigation links. */
nav ul {
    list-style: none;                /* Removes bullet points */
    padding: 0;
    margin: 0;
    display: flex;                   /* Places list items in a row */
    flex-direction: row;             /* Explicitly keeps desktop nav horizontal */
    justify-content: center;
    gap: 1rem;                       /* Space between links */
    flex-wrap: wrap;                 /* Allows links to wrap if needed */
}

/* Extra insurance to make sure no bullets appear on list items. */
nav li {
    list-style: none;
}

/* Individual nav links.
   These are styled like buttons for better clickability and appearance. */
nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease;
    border-radius: 4px;
}

/* Hover state for nav links.
   This gives users feedback and creates a more interactive feel. */
nav a:hover {
    background-color: var(--accent-soft);
    color: var(--primary-color);
}

/* Wrapper used for navigation links on lab pages when JavaScript reorganizes them.
   This keeps direct links aligned consistently even outside the ul structure. */
.nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

/* =========================
   Main Content
   This section controls the width and spacing of the central page content.
   It also standardizes the appearance of content sections.
   ========================= */

/* Constrains the main content column so lines of text do not become too wide,
   which improves readability. Also centers the entire content area on the page. */
main {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Gives all sections inside main a consistent card-like appearance. */
main section {
    background-color: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styles major section headings so they feel visually separated and important. */
main section h2 {
    color: var(--primary-color);
    border-bottom: 3px solid var(--accent-soft);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.875rem;
}

/* Styles h3 subheadings within sections. */
main section h3 {
    color: var(--text-color);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

/* Standard paragraph spacing and line height inside content sections. */
main section p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

/* Standard spacing for unordered and ordered lists inside sections. */
main section ul,
main section ol {
    margin: 1rem 0 1rem 2rem;
    line-height: 1.8;
}

/* Adds vertical spacing between list items for readability. */
main section li {
    margin-bottom: 0.5rem;
}

/* =========================
   Figures and Images
   These rules style standalone visual content like screenshots,
   headshots, charts, and captions.
   ========================= */

/* Centers figures and adds vertical breathing room. */
figure {
    text-align: center;
    margin: 2rem auto;
}

/* Ensures images are responsive and visually polished. */
figure img {
    max-width: 100%;                 /* Prevents images from overflowing their container */
    height: auto;                    /* Preserves aspect ratio */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styles figure captions as softer supporting text. */
figure figcaption {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* =========================
   Data Visualizations
   These classes help structure charts, screenshots, and visual outputs
   so they are presented clearly and consistently.
   ========================= */

/* General visualization container for single charts or images. */
.viz-container {
    margin: 2rem 0;
    text-align: center;
}

/* Makes images inside visualization containers responsive and polished. */
.viz-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem;
}

/* Caption styling for visuals. */
.viz-container figcaption {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Grid layout for displaying multiple visuals side by side when space allows.
   auto-fit with minmax makes this responsive without hard-coding column counts. */
.viz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* =========================
   Data Tables
   This section styles structured tabular data,
   such as comparison charts, experiment results, or summaries.
   ========================= */

/* General table styling. */
table {
    width: 100%;
    border-collapse: collapse;       /* Merges borders for a cleaner table look */
    margin: 1.5rem 0;
    background: white;
}

/* Shared cell styling for both header cells and regular data cells. */
th,
td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--border-color);
}

/* Header row styling. */
th {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Zebra striping makes long tables easier to scan row by row. */
tr:nth-child(even) {
    background: #f8f9fa;
}

/* Specialized styling for result-oriented tables that should be narrower and more compact. */
.results-table {
    font-size: 0.95rem;
    margin: 1.5rem auto;
    max-width: 700px;
}

/* Centers most cells in the results table. */
.results-table td {
    text-align: center;
}

/* First column stays left-aligned because it often contains labels/categories. */
.results-table td:first-child {
    text-align: left;
    font-weight: 500;
}

/* Highlight row for especially important results. */
.results-table tr.highlight {
    background: #fff3cd;
    font-weight: bold;
}

/* =========================
   Portfolio Cards
   This section creates the card-based layout used on the homepage
   to showcase and link to each lab project.
   ========================= */

/* Grid container for the cards.
   Responsive columns let the layout adapt automatically to screen width. */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Individual card styling.
   Each card is an anchor tag, so the whole card is clickable. */
.portfolio-card {
    display: block;
    background: white;
    border: 2px solid var(--accent-soft);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;           /* Removes default link underline */
    color: var(--text-color);
    transition: all 0.3s ease;       /* Smooth hover animation */
    position: relative;
}

/* Hover state lifts the card slightly and deepens emphasis,
   making the card feel more interactive and polished. */
.portfolio-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 16px rgba(77, 25, 121, 0.15);
    transform: translateY(-4px);
}

/* Card title styling. */
.portfolio-card h3 {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

/* Card description styling. */
.portfolio-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0.75rem 0 0 0;
    line-height: 1.5;
}

/* Small badge used to identify the lab number. */
.lab-tag {
    display: inline-block;
    background: var(--secondary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================
   Footer
   The footer closes the page with attribution and useful links.
   ========================= */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1.5rem;
    margin-top: 2rem;
}

/* Footer links get a softer accent color for contrast. */
footer a {
    color: var(--accent-soft);
    text-decoration: none;
}

/* Underline on hover makes it clear the footer link is interactive. */
footer a:hover {
    text-decoration: underline;
}

/* =========================
   Hamburger Menu Button
   This is the mobile navigation trigger.
   It stays hidden on larger screens and appears on smaller screens.
   ========================= */
#hamburger-toggle {
    display: none;                   /* Hidden on desktop because full nav is visible */
    background: none;
    border: none;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    line-height: 1;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    order: -1;                       /* Moves button toward the left in the flex layout */
}

/* Hover feedback for the hamburger button. */
#hamburger-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* =========================
   Responsive Design (Mobile)
   These styles activate on smaller screens to improve usability,
   spacing, tap targets, and navigation behavior.
   ========================= */
@media (max-width: 768px) {

    /* Reduces the main header title size so it fits better on phones. */
    header h1 {
        font-size: 1.5rem;
    }

    /* Shows the hamburger button once the screen is small enough
       that the full desktop nav would become crowded. */
    #hamburger-toggle {
        display: block;
    }

    /* Allows nav elements to wrap more naturally on small screens. */
    nav {
        font-size: 0.9rem;
        flex-wrap: wrap;
    }

    /* Hides nav links by default on mobile until the hamburger menu is activated.
       This works for both ul-based nav and JS-generated direct link wrappers. */
    nav ul,
    nav .nav-links {
        display: none;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0.25rem;
        padding: 0.5rem 0;
    }

    /* When JavaScript adds the "nav-open" class, the hidden links become visible. */
    nav.nav-open ul,
    nav.nav-open .nav-links {
        display: flex;
    }

    /* Makes each nav link fill the width more like a mobile menu button,
       which is easier for tapping. */
    nav a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.6rem 1rem;
    }

    /* Keeps the dark mode toggle visible and aligned within the mobile nav row. */
    #dark-mode-toggle {
        order: 1;
        margin-left: auto;
    }

    /* Reduces padding inside sections so the content fits more comfortably on small screens. */
    main section {
        padding: 1rem;
    }

    /* Forces visual grids into a single column on mobile so content does not feel cramped. */
    .viz-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   Print Styles
   These styles simplify the site when someone prints it.
   Navigation is removed and heavy decorative effects are reduced.
   ========================= */
@media print {

    /* Hides navigation because it is not useful on paper. */
    nav {
        display: none;
    }

    /* Removes shadows and tries to keep sections from splitting awkwardly across pages. */
    main section {
        box-shadow: none;
        page-break-inside: avoid;
    }
}