/* ======================= FONT IMPORT (OPTIONAL) ======================= */
@font-face {
    font-family: 'Dyson Sans';
    src: url('src/Dyson_sans.woff') format('woff'),
        url('src/Dyson_sans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* =============== RESET / BASE STYLES =============== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #000;
    /* black background */
    color: #EEE;
    font-family: sans-serif;
    /* Default site font */
    line-height: 1.5;
}

/* Increase font size for all headings */
h1 {
    font-size: 2.5rem;
    /* Adjust as needed */
}

h2 {
    font-size: 2rem;
    /* Adjust as needed */
}

h3 {
    font-size: 1.75rem;
    /* Adjust as needed */
}

h4 {
    font-size: 1.5rem;
    /* Adjust as needed */
}

h5 {
    font-size: 1.25rem;
    /* Adjust as needed */
}

h6 {
    font-size: 1rem;
    /* Adjust as needed */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Dyson Sans', sans-serif;
    /* Dyson Sans for headings */
}

/* =============== COLOR PALETTE (CSS VARIABLES) =============== */
:root {
    --bluish-purple: #5A4FCF;
    /* more 'blue-ish' purple */
    --red-accent: #eb232a;
    /* bright red accent */
    --dark-bg: #000;
}

/* =============== LINKS =============== */
a {
    color: var(--bluish-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--red-accent);
}

/* =============== HEADER =============== */
.site-header {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* GRADIENT BACKGROUND: purple -> red */
    background: linear-gradient(90deg, var(--red-accent) 0%, var(--bluish-purple) 100%);
    color: #FFF;

    padding: 1rem 2rem;
    border-bottom: 1px solid var(--bluish-purple);
    position: fixed;
    /* if you want hide-on-scroll logic */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    /* stays on top of page content */
}

.header-logo {
    display: flex;
    align-items: center;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #FFF;
    /* overrides link color so it’s visible on gradient */
}

.logo-text {
    font-size: 1.5rem;
    font-family: 'Dyson Sans', sans-serif;
    /* Dyson Sans for the logo text */
}

.logo-text:hover {
    color: var(--bluish-purple);
    text-shadow: 0 0 10px var(--bluish-purple);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* =============== MAIN NAVIGATION =============== */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}

.main-nav>ul>li {
    position: relative;
    display: inline-block;
    width: auto;
    /* Remove fixed width for dynamic sizing */
    text-align: center;
}

.main-nav>ul>li>a {
    display: block;
    padding: 0.5rem 1rem;
    background-color: var(--bluish-purple);
    /* default background: purple */
    color: #FFF;
    border: 1px solid var(--red-accent);
    border-radius: 3px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Dyson Sans', sans-serif;
    /* Dyson Sans for main nav */
    font-size: 1rem;
    /* Increased font size */
}

/* On hover, turn entire box from purple -> red */
.main-nav>ul>li>a:hover {
    background-color: var(--red-accent);
    color: #FFF;
}

.main-nav a.active {
    pointer-events: none;
    /* not clickable */
    background-color: var(--red-accent);
}

/* =============== DROPDOWN MENU =============== */
.has-submenu ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Auto width so submenu aligns under parent */
    width: 100%;
    background-color: var(--bluish-purple);
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
    visibility: hidden;
}

/* Reveal on hover */
.has-submenu:hover ul {
    max-height: 500px;
    visibility: visible;
}

/* Submenu items: default purple background, turn red on hover */
.has-submenu ul li a {
    display: block;
    padding: 0.5rem 1rem;
    background-color: var(--bluish-purple);
    color: #FFF;
    border: none;
    text-align: center;
    transition: background-color 0.3s ease;
    font-family: 'Dyson Sans', sans-serif;
    /* Dyson Sans for submenu */
}

.has-submenu ul li a:hover {
    background-color: var(--red-accent);
    color: #FFF;
}

/* =============== HERO SECTION =============== */
.hero {
    padding: 4rem 2rem;
    text-align: center;
    margin-top: 70px;
    /* offset for fixed header */
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("hero-image.jpg") center/cover no-repeat;
    color: #FFF;
}

/* =============== MAIN CONTENT =============== */
.main-content {
    max-width: 1200px;
    margin: 80px auto 0 auto;
    /* offset so content isn't hidden by fixed header */
    padding: 2rem;
}

/* =============== SECTION DIVIDER =============== */
.section-divider {
    border-bottom: 1px solid var(--bluish-purple);
    /* purple line instead of gray */
    margin: 2rem 0;
}

/* =============== "LATEST WORK" CARDS =============== */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.project-card {
    background-color: #000;
    /* or var(--dark-bg) */
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s ease;
}

.project-card:hover {
    transform: translateY(-3px);
}

.project-card img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.project-card h4 {
    color: var(--bluish-purple);
    margin-bottom: 0.5rem;
}

/* ============== WEEK GALLERY (Similar to "Latest Work" cards) ============== */
.week-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.week-card {
    background-color: #000;
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    text-align: center;
    transition: transform 0.2s ease;
}

.week-card:hover {
    transform: translateY(-3px);
}

.week-card a {
    display: block;
    /* entire card clickable */
    color: #EEE;
    padding: 1rem;
    text-decoration: none;
}

.week-card a:hover {
    color: #FFF;
    background-color: var(--red-accent);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.week-card img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.week-card h3 {
    margin-bottom: 0.5rem;
    color: var(--bluish-purple);
}

/* =============== FLOATING MENU (WEEK PAGES) =============== */
.menu-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    /* narrower so the menu can close on mouseout */
    height: 100vh;
    z-index: 1000;
    background: transparent;
}

/* Initially hide the floating menu */
.floating-menu {
    position: fixed;
    top: 100px;
    left: -200px;
    /* Hide the menu off-screen */
    width: 180px;
    background-color: #000;
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    padding: 1rem;
    transition: left 0.3s ease;
    /* Add transition for sliding effect */
}

.floating-menu h3 {
    margin-bottom: 1rem;
}

.floating-menu ul {
    list-style: none;
}

.floating-menu li {
    margin-bottom: 0.5rem;
}

.floating-menu a {
    display: block;
    padding: 0.5rem;
    color: var(--bluish-purple);
    border: 1px solid transparent;
    border-radius: 3px;
}

.floating-menu a:hover {
    background-color: var(--bluish-purple);
    color: #FFF;
}

/* Show the floating menu when hovering over the trigger area */
.menu-trigger:hover+.floating-menu,
.floating-menu:hover {
    left: 20px;
    /* Slide the menu in from the left */
}

/* =============== SPECIAL BOXES =============== */
/* PRO TIP: Use same gradient as header (purple -> red) */
.pro-tip {
    /* same gradient as site-header */
    background: linear-gradient(90deg,
            var(--red-accent) 0%,
            var(--bluish-purple) 100%);
    color: #FFF;
    padding: 1rem;
    border: 2px solid #FFF;
    /* or var(--bluish-purple)/var(--red-accent) */
    border-radius: 5px;
    margin: 1rem 0;
}

.pro-tip h4 {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.pro-tip p {
    margin: 0;
}

/* =============== WEEK IMAGES WITH CAPTIONS =============== */
.week-images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.week-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    overflow: hidden;
    background-color: #000;
    /* or var(--dark-bg) */
    color: #EEE;
    padding: 1rem;
    transition: transform 0.2s ease;
    max-width: 300px;
    /* Adjust as needed */
}

.week-image img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--bluish-purple);
    margin-bottom: 0.5rem;
}

.week-image:hover {
    transform: translateY(-3px);
}

.week-caption {
    font-family: 'Dyson Sans', sans-serif;
    font-size: 1rem;
    text-align: center;
    margin-top: 0.5rem;
    color: var(--bluish-purple);
}

/* =============== "FUSION CONTAINER" =============== */
.fusion-container {
    display: flex;
    justify-content: center;
    border: 1px solid #ccc;
    padding: 1rem;
    margin: 1rem auto;
}

/* =============== "SKILLS/INTERESTS" PHOTO SHOWCASE =============== */
.skills-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* =============== TABLE =============== */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #000;
    color: #EEE;
    margin: 1rem 0;
    font-size: 1rem;
    text-align: center;
    border: 2px solid var(--bluish-purple);
}

table th,
table td {
    border: 1px solid var(--bluish-purple);
    padding: 0.75rem;
}

/* Table header with purple background and white text */
table th {
    background-color: var(--bluish-purple);
    color: #FFF;
}

/* Optional row striping */
table tr:nth-child(even) {
    background-color: #111;
}

/* Hover effect */
table tr:hover {
    background-color: #222;
}

.skills-list li {
    position: relative;
    /* to hold a hover image absolutely */
    background-color: #000;
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

/* Indent bullet points */
ul,
ol {
    margin-left: 2rem;
    /* or padding-left: 2rem; adjust as necessary */
}

/* =============== CODE SNIPPET STYLING =============== */
.code-snippet {
    margin: 1rem 0;
}

.code-title {
    background-color: #001100;
    /* same background as code block */
    color: #00FF00;
    /* same text color as code block */
    padding: 1rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: "Fira Code", monospace;
    /* same font as code block */
    font-size: 1.1rem;
    /* slightly bigger font size */
    border: 1px solid #009900;
    /* same border as code block */
    border-bottom: none;
    display: flex;
    justify-content: space-between;
}

.code-title strong {
    margin-right: 0.5rem;
}

.repo-link {
    color: #00ff00 !important;
    text-decoration: underline;
}

.repo-link:hover {
    color: var(--red-accent);
    text-decoration: underline;
    text-shadow: 0 0 5px var(--red-accent);
}

pre code {
    display: block;
    background-color: #001100;
    /* matrix-y dark green background */
    color: #00FF00;
    /* bright green text */
    padding: 1rem;
    margin: 0;
    border: 1px solid #009900;
    /* bright green border */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-x: auto;
    /* allow horizontal scroll if code is wide */
    font-family: "Fira Code", monospace;
    /* optional: use a monospace font for code */
}

/* =============== This is for syntax highlighting =============== */

.hljs {
    background-color: #001100 !important;
    color: #00FF00 !important;
    border: 1px solid #009900;
    border-radius: 5px;
    padding: 1rem;
}

/* =============== TWO-COLUMN "ABOUT SECTION" =============== */
.about-section {
    display: flex;
    flex-wrap: wrap;
    /* allow wrapping if screen is small */
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.about-image {
    flex: 1 1 300px;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    border: 2px solid var(--bluish-purple);
    border-radius: 8px;
}

.about-text {
    flex: 2 1 400px;
    /* bigger portion for text */
}

.printer-gallery {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.printer-card {
    background-color: #111;
    /* slightly lighter than #000 */
    border: 1px solid var(--bluish-purple);
    border-radius: 5px;
    padding: 1.5rem;
    text-align: left;
    transition: transform 0.2s ease;
}

.printer-card:hover {
    transform: translateY(-3px);
}

.printer-card img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.printer-details h4 {
    color: var(--bluish-purple);
    margin-bottom: 0.5rem;
}

.printer-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.printer-details li {
    margin-bottom: 0.5rem;
    color: #EEE;
}

ol {
    padding-left: 1.5rem;
}

ol li {
    margin-bottom: 0.5rem;
}

ol li ul {
    padding-left: 1.5rem;
}

/* Equation block styling */
.equation-block {
    background-color: #111;
    border-left: 4px solid var(--bluish-purple);
    padding: 1rem;
    margin: 1rem 0;
    font-style: italic;
}

/* =============== File download =============== */
.download-button {
    margin-top: 1rem;
}

.download-button a {
    display: inline-block;
    background-color: var(--bluish-purple);
    color: #FFF;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.download-button a:hover {
    background-color: var(--red-accent);
}

/* Container for download buttons */
.download-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1rem;
    margin: 1rem 0;
    align-items: center;
}

/* =============== FOOTER =============== */
.site-footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--bluish-purple);
    margin-top: 2rem;
    color: #999;
    background-color: #000;
    /* or var(--dark-bg) */
}

/* =============== RESPONSIVE DESIGN =============== */
@media (max-width: 768px) {

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        /* Stack items vertically */
    }

    .main-nav>ul>li {
        width: 100%;
    }
}