/* =================================== */
/* 0. GLOBAL SETTINGS & CUSTOM PROPERTIES
/* =================================== */
/* =================================== */
/* 0. Global Settings & Custom Properties
/* =================================== */

:root {
    /* Fonts */
    --font-primary: Georgia, serif;
    --font-handwritten: 'Beth Ellen', cursive;

    /* Core Colors */
    --color-text-body: #5D5D5D;
    --color-text-light: #FFF0F5;    /* LavenderBlush for text on dark backgrounds */
    --color-text-white: #FFFFFF;
    --color-text-accent: #DB7093;   /* PaleVioletRed */
    --color-text-accent-darker: #C15C7E;

    --color-bg-sticky-note: #FFFACD;  /* LemonChiffon - a classic sticky note yellow */
    --color-sticky-note-shadow: rgba(0, 0, 0, 0.1); /* Softer shadow to match cards */
    --color-todo-checkmark: var(--color-text-accent); /* Use your theme's accent color */
    --color-todo-label-disabled: #aaa;
    --color-todo-label-checked: #888;
    --color-todo-checkbox-border: var(--color-text-accent-darker);
    --color-todo-checkbox-border-hover: var(--color-text-accent);
    --color-todo-checkbox-focus-outline: var(--color-text-accent);
    --color-todo-checkbox-disabled-border: #ccc;
    --color-todo-checkbox-disabled-bg: #f0f0f0;
    
    /* Background Colors */
    --color-bg-body: #FFF0F5;       /* LavenderBlush */
    --color-bg-header-footer: #FFC0CB; /* Pink */
    --color-bg-section: #FFFAFA;    /* Snow */
    --color-bg-card: #FFF5EE;       /* SeaShell */

    /* Border Colors */
    --color-border-header-footer: #FBC4AB; /* Pastel Pink-Orange */
    --color-border-section: #FFE4E1;      /* MistyRose */
    --color-border-section-h2: #FBC4AB;  /* Pastel Pink-Orange (dotted) */
    --color-border-card: #FFD1DC;         /* Light Pink "Pink Lace" (dashed) */
    --color-border-selfie: #FFC0CB;       /* Pink */
    --color-border-nav-active: #FBC4AB;   /* Pastel Pink-Orange */
    --color-border-nav-hover: #FFFFFF;

    /* Shadow Colors (using rgba for opacity) */
    --color-shadow-section: rgba(219, 112, 147, 0.15); /* PaleVioletRed base */
    --color-shadow-card: rgba(219, 112, 147, 0.1);
    --color-shadow-selfie: rgba(219, 112, 147, 0.2);
    --color-shadow-button: rgba(0, 0, 0, 0.2);

    /* Component Specific Colors */
    --color-button-btt-bg: #FFC0CB;           /* Pink */
    --color-button-btt-bg-hover: #DB7093;    /* PaleVioletRed */
    --color-flowchart-line: #DB7093;         /* PaleVioletRed */

    /* Transitions & Animations */
    --transition-duration: 0.3s;
    --animation-wiggle-duration: 0.45s;
    
    --color-bg-notepad: #FEF9E7; /* A soft, classic notepad yellow (LightGoldenrodYellow) */
    /* Or you could use --color-bg-sticky-note: #FFFACD; if you prefer LemonChiffon */
    --color-notepad-line-blue: #A9CCE3; /* Light blue for ruled lines */
    --color-notepad-line-red: #E74C3C;  /* Red for margin/header lines */
    --color-notepad-shadow: rgba(0, 0, 0, 0.1);
    --line-height-notepad: 1.8em; /* Controls spacing between lines of text AND ruled lines */
}

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

body {
    font-family: var(--font-primary);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-body);
    color: var(--color-text-body);
}

/* =================================== */
/* 1. LAYOUT & TYPOGRAPHY
/* =================================== */

.site-header { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg-header-footer);
    padding: 1em 2em; 
    border-bottom: 2px solid var(--color-border-header-footer);
    position: relative;
}

.site-branding a { 
    color: var(--color-text-white);
    font-weight: bold; 
    font-size: 1.2em; 
    text-decoration: none;
}

header h1 {
    margin: 0;
    color: var(--color-text-white);
    font-weight: normal;
    font-size: 2.5em;
}

.main-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1em;
}

.main-navigation ul li {
    display: block;
    margin: 0;
}

main {
    padding: 1.5em 2em;
}

section {
    padding: 2em 1.5em; /* Default section padding */
    margin-bottom: 2.5em;
    background-color: var(--color-bg-section);
    border-radius: 12px;
    box-shadow: 0 3px 6px var(--color-shadow-section);
    border: 1px solid var(--color-border-section);
}

section h2 { /* Default style for H2 within sections */
    color: var(--color-section-h2);
    border-bottom: 2px dotted var(--color-border-section-h2);
    padding-bottom: 0.4em;
    margin-top: 0;
    font-size: 1.8em;
    font-weight: normal;
}

.site-footer {
    text-align: left;
    padding: 3em 2em;
    background-color: var(--color-bg-header-footer);
    color: var(--color-text-light);
    font-size: 0.9em;
    border-top: 2px solid var(--color-border-main);
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

/* =================================== */
/* 2. NAVIGATION & LINKS
/* =================================== */

/* Hide hamburger button on desktop */
.nav-toggle {
    display: none;
}

.site-branding a {
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
}

/* Base style for ALL links in the navigation */
.main-navigation a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-text-white); /* Sets default color for all nav links */
    padding: 0.5em;
    transition: color var(--transition-duration) ease, text-shadow var(--transition-duration) ease, background-color var(--transition-duration) ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--color-text-white);
    border-bottom: 1px dashed var(--color-text-white);
}

/* Wiggle animation */
.main-navigation > ul > li:not(.has-dropdown) > a:not(.nav-resume-link):hover,
.main-navigation > ul > li:not(.has-dropdown) > a:not(.nav-resume-link):focus {
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.9),
        0 0 15px rgba(219, 112, 147, 0.7);
    animation: wiggle 0.45s ease-in-out 1;
}

.main-navigation a.active-link {
    font-weight: bold;
    border-bottom: 2px solid var(--color-border-main) !important;
}

/* Resumé Download Link */
.nav-resume-link {
    border: 1px solid var(--color-text-light);
    border-radius: 15px;
    padding: 0.4em 0.8em !important;
}

.nav-resume-link:hover,
.nav-resume-link:focus {
    background-color: var(--color-text-light);
    color: var(--color-bg-header-footer);
    border-bottom: 1px solid var(--color-text-light) !important;
}

/* --- Desktop Dropdown Menu --- */
.nav-item.has-dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 0.8em;
    margin-left: 0.3em;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.nav-item.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-header-footer);
    border: 1px solid var(--color-border-header-footer);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.5em 0;
    list-style-type: none;
    margin: 0;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu li {
    display: block;
    margin: 0;
}

/* Links within the DESKTOP dropdown */
.dropdown-menu li a {
    display: block;
    padding: 0.6em 1.2em;
    white-space: nowrap; /* This rule now only affects the desktop dropdown */
    font-size: 0.95em;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
    background-color: rgba(219, 112, 147, 0.2);
    border-bottom: none;
}

/* =================================== */
/* 3. COMPONENTS & PAGE-SPECIFIC STYLES
/* =================================== */

/* --- Hero & Intro Sections --- */
section#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: var(--color-bg-body);
    padding: 2em;
    border: none;
    box-shadow: none;
    position: relative;
}

.hero-greeting {
    font-size: 3em;
    color: var(--color-text-accent);
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0 0 0.25em 0;
}

.hero-selfie {
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border-selfie);
    vertical-align: middle;
}

.hero-subheading {
    font-size: 1.8em;
    margin: 0;
    font-weight: normal;
}

.hero-tagline {
    font-size: 1.1em;
    margin-top: 1.5em;
    line-height: 1.6;
    max-width: 65ch;
}

.hero-tagline em {
    color: var(--color-text-accent);
}

.scroll-down-arrow {
    position: absolute;
    bottom: 30px;
    left: 50%;
    color: var(--color-text-accent);
    font-size: 2em;
    text-decoration: none;
    animation: bounce 2s infinite ease-in-out;
}

section#intro {
    background-color: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
    padding-top: 3em;
    padding-bottom: 3em;
}

section#intro h2 {
    display: inline-block;
}

/* --- About Section & Story --- */
section#about {
    display: flex;
    align-items: center;
    gap: 25px;
}

.about-text {
    flex: 1;
}

.origin-story::first-letter {
    color: var(--color-text-accent);
    font-weight: bold;
    font-size: 4em;
    float: left;
    line-height: 0.8;
    margin: 0.05em 0.05em 0 0;
}

.pull-quote {
    display: block;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
    color: var(--color-text-accent);
    margin: 1.5em 0;
}

/* --- Polaroid Component --- */
.polaroid-frame {
    background-color: var(--color-bg-section); /* Using your "Snow" background color */
    border: 2.5px solid var(--color-border-section); /* Using your "MistyRose" border color */
    padding: 15px 15px 60px 15px; /* Top, Right, Bottom, Left padding - Bottom is thickest */
    box-shadow: 3px 3px 8px var(--color-shadow-card);
    width: 200px; /* Set the total width of the polaroid */
    transform: rotate(2.5deg); /* A slight, playful rotation */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.polaroid-frame:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 5px 5px 12px var(--shadow-card);
    z-index: 10;
}

.polaroid-frame img {
    width: 100%;
    display: block;
    border: 1px solid #ddd;
}

.polaroid-caption {
    text-align: center;
    font-size: 1.1em;
    margin: 15px 0 0 0;
    font-family: var(--font-handwritten);
}

/* --- Flowchart, Project & Publication Cards --- */
.goals-flowchart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em 0;
}

.flowchart-node {
    background-color: var(--color-bg-card);
    border: 2px dashed var(--color-border-card);
    border-radius: 10px;
    padding: 1em 1.5em;
    box-shadow: 0 2px 4px var(--shadow-card);
    position: relative;
    width: 90%;
    max-width: 550px;
    margin-bottom: 2.5em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s);
}

.flowchart-node.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.flowchart-node .node-title a,
.flowchart-node .node-title a:visited { 
    color: var(--color-text-accent); 
    text-decoration: none; 
    display: block;
    transition: color var(--transition-duration) ease;
}

.flowchart-node .node-title a:hover,
.flowchart-node .node-title a:focus {
    color: var(--color-text-accent-darker);
    text-decoration: underline; 
}

.goal-subheading {
    font-style: italic;
    font-size: 0.95em;
    color: var(--color-text-subtle);
    line-height: 1.6;
    margin-top: 0.25em;
}

.purpose-node {
    text-align: center;
}

.goal-nodes-container {
    display: contents;
}

.goal-node {
    text-align: center;
}

.purpose-node::after, .goal-node::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-color: var(--color-flowchart-line);
}

.purpose-node::after { bottom: -1.5em; height: 1.5em; }
.goal-node::before { top: -1.25em; height: 1.25em; }

/* --- Projects & Poetry Showcase (index.html) --- */
section#projects-showcase h2, section#poetry h2 {
    text-align: center;
    margin-bottom: 1.5em;
}

.projects-intro-text a {
    color: var(--color-text-accent);
}

.goal-group, .publications-grid {
    margin-bottom: 3em;
}

.flowchart-node.goal-as-header { /* Goal headers on projects showcase */
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 800px;
    margin-bottom: 1.5em;
    text-align: center;
    padding: 1em 1.5em; /* Symmetrical padding */
}

.flowchart-node.goal-as-header::before { /* Remove connector line for these */
    display: none;
}

.flowchart-node.goal-as-header .goal-subheading { /* Subheading under ~1~, ~2~ */
    font-size: 1em; /* Ensure readability, may differ from flowchart's .goal-subheading */
    font-style: italic; /* Explicitly ensuring it's italic if not inherited */
    color: #505050;
}

.projects-under-goal, .publications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5em;
    padding: 0 1em;
}

.project-item, .publication-item {
    background-color: var(--color-bg-card);
    padding: 1.5em;
    border: 1px dashed var(--color-border-card);
    border-radius: 10px;
    box-shadow: 0 2px 4px var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.project-item h3, .publication-item h3 {
    margin-top: 0;
    color: var(--color-card-h3);
    font-size: 1.4em;
    font-weight: normal;
}

.project-item a, .publication-item a {
    color: var(--color-card-link);
    text-decoration: none;
    font-weight: bold;
}

.project-item a:hover, .project-item a:focus,
.publication-item a:hover, .publication-item a:focus {
    color: var(--color-link-card-hover);
    text-decoration: underline;
}

.publication-journal {
    font-size: 0.9em;
    margin: -0.75em 0 1em 0;
}

.publication-item blockquote {
    border-left: 3px solid var(--color-text-accent);
    padding-left: 1em;
    margin: 0 0 1em 0;
    font-style: italic;
    flex-grow: 1;
}

/* --- Connect Links & Footer --- */
.intro-connect-links {
    display: flex;
    justify-content: center;
    gap: 1.5em;
    margin-top: 2em;
}

.intro-connect-links a {
    color: var(--color-text-accent);
    transition: transform 0.2s ease-out;
}

.intro-connect-links a:hover,
.intro-connect-links a:focus {
    color: var(--color-text-accent-darker);
    transform: translateY(-3px);
}

.intro-connect-links .fa-brands, .footer-social-links .fa-brands {
    font-size: 28px;
}

.footer-social-links .fa-brands {
    font-size: 24px;
}

.footer-connect {
    text-align: center;
    margin-bottom: 2em;
}

.footer-title {
    font-size: 1.5em;
    font-weight: normal;
    color: var(--color-text-white);
    margin: 0 0 0.75em 0;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.connect-text {
    max-width: 65ch;
    margin: 0 auto 1.5em auto;
    line-height: 1.6;
    font-size: 1.05em;
    opacity: 0.9;
}

.footer-social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5em;
}

.footer-social-links a {
    display: flex;
    align-items: center;
    gap: 0.6em;
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.5em 1.2em;
    border: 1px solid rgba(219, 112, 147, 0.3);
    border-radius: 20px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.footer-social-links a:hover,
.footer-social-links a:focus {
    background-color: rgba(219, 112, 147, 0.2);
    border-color: rgba(219, 112, 147, 0.5);
}

.footer-copyright {
    text-align: center;
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(219, 112, 147, 0.3);
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- Other Components --- */
#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    border: none;
    outline: none;
    background-color: var(--color-bg-header-footer);
    color: var(--color-text-white);
    cursor: pointer;
    padding: 12px 15px;
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: 16px;
    box-shadow: 0 4px 8px var(--shadow-button);
    transition: background-color var(--transition-duration) ease, opacity var(--transition-duration) ease;
}

#backToTopBtn:hover {
    background-color: var(--color-button-btt-bg-hover);
}

/* --- Sticky Note To-Do List --- */

.sticky-note-section h3 {
    text-align: center;
    border-bottom: none;
    margin-bottom: 0.5em;
}

.sticky-note-todo-container {
    display: flex;
    justify-content: center;
    padding: 1em 0;
}

.sticky-note-todo {
    background-color: var(--color-bg-sticky-note);
    padding: 1em 1.5em 1.5em 1.5em;
    border-radius: 4px;
    box-shadow: 3px 3px 8px var(--color-sticky-note-shadow);
    transform: rotate(-1.5deg);
    width: fit-content;
    min-width: 260px;
    max-width: 320px;
    margin: 1em;
    font-family: var(--font-handwritten);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    position: relative;
}

.sticky-note-todo:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 6px 6px 12px var(--color-sticky-note-shadow);
    z-index: 10;
}

.sticky-note-title {
    font-size: 1.1em;
    color: var(--color-text-body);
    text-align: center;
    margin-top: 0;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px dashed rgba(219, 112, 147, 0.4);
    font-weight: bold;
}

.todo-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.todo-list li {
    margin-bottom: 0.75em;
    display: flex;
    align-items: flex-start;
    font-size: 0.95em;
    font-family: var(--font-primary); /* Use primary font for readability */
    color: var(--color-text-body);
    position: relative;
}

/* Custom Checkbox Styling */
.todo-checkbox {
    opacity: 0;
    position: absolute;
    width: 1px; height: 1px;
}

.todo-list label {
    cursor: pointer;
    padding-left: 28px;
    position: relative;
    line-height: 1.4;
    user-select: none;
    transition: color 0.2s ease;
}

.todo-list label::before { /* The custom checkbox box */
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-todo-checkbox-border);
    background-color: var(--color-text-white);
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0.15em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.todo-list li:hover label::before {
    border-color: var(--color-todo-checkbox-border-hover);
}

.todo-checkbox:checked + label {
    text-decoration: line-through;
    color: var(--color-todo-label-checked);
}

.todo-checkbox:checked + label::before {
    background-color: var(--color-todo-checkmark);
    border-color: var(--color-todo-checkmark);
}

.todo-checkbox:checked + label::after { /* The checkmark itself */
    content: '✔';
    position: absolute;
    left: 3px;
    top: 0.05em;
    font-size: 13px;
    color: var(--color-text-white);
    font-weight: bold;
}

.todo-checkbox:focus + label::before {
    outline: 2px solid var(--color-todo-checkbox-focus-outline);
    outline-offset: 1px;
}

.todo-label-disabled {
    color: var(--color-todo-label-disabled);
    text-decoration: none !important;
}

.todo-checkbox:disabled + label {
    cursor: not-allowed;
}

.todo-checkbox:disabled + label::before {
    border-color: var(--color-todo-checkbox-disabled-border);
    background-color: var(--color-todo-checkbox-disabled-bg);
}


/* --- Yellow Notepad Reflection Styles --- */
.notepad-layout-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em;
    margin-top: 1.5em;
    margin-bottom: 2em;
}

.notepad-reflection {
    background-color: var(--color-bg-notepad);
    border: 1px solid #E5E0C6;
    border-top: 1px solid #DAD5BC;
    padding: 1.5em;
    padding-top: calc(var(--line-height-notepad) * 2.5);
    box-shadow: 2px 2px 7px var(--color-notepad-shadow);
    max-width: 500px;
    margin: 0; /* Let flexbox handle margins */
    line-height: var(--line-height-notepad);
    position: relative;
    transition: transform var(--transition-duration) ease-out, box-shadow var(--transition-duration) ease-out;
}

/* Specific rule for notepads inside the side-by-side container */
.notepad-layout-container .notepad-reflection {
    flex: 1 1 calc(50% - 2em);
    min-width: 280px;
}

/* Specific rule for when a notepad is used as a single, centered element */
.notepad-reflection-container .notepad-reflection {
    margin: 1.5em auto;
}

.notepad-reflection:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 4px 6px 12px var(--color-notepad-shadow);
    z-index: 10;
}

.notepad-reflection::before { /* Top double red lines */
    content: '';
    position: absolute;
    top: calc(var(--line-height-notepad) * 1.2);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-notepad-line-red);
    box-shadow: 0 3px 0 var(--color-notepad-line-red);
}

.notepad-reflection::after { /* Vertical red margin line */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.5em;
    width: 1px;
    background-color: var(--color-notepad-line-red);
}

.notepad-title {
    font-size: 1.2em;
    color: var(--color-text-body);
    margin: calc(-1 * var(--line-height-notepad) * 0.5) 0 var(--line-height-notepad) 0;
    font-weight: bold;
    text-align: left;
    padding-left: calc(2.5em + 10px);
    position: relative;
    font-family: var(--font-handwritten);
}

.notepad-content {
    padding-left: calc(2.5em + 10px);
    background-image: repeating-linear-gradient(
        var(--color-bg-notepad) 0,
        var(--color-bg-notepad) calc(var(--line-height-notepad) - 1px),
        var(--color-notepad-line-blue) calc(var(--line-height-notepad) - 1px),
        var(--color-notepad-line-blue) var(--line-height-notepad)
    );
    background-size: 100% var(--line-height-notepad);
    background-position-y: 0.4em;
}

.notepad-content p {
    margin-bottom: var(--line-height-notepad);
    color: var(--color-text-body);
    font-size: 1em;
}

.notepad-content p:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for notepads */
@media (max-width: 800px) {
    .notepad-layout-container {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .notepad-layout-container .notepad-reflection {
        flex-basis: auto;
        width: 90%;
        margin: 0 auto 2em auto;
    }

    .notepad-layout-container .notepad-reflection:last-child {
        margin-bottom: 0;
    }
}

/* Fixing any issues of unhighlighted links */

.back-to-projects-link {
    display: inline-block; /* Needed to apply padding and border correctly */
    color: var(--color-text-accent);
    background-color: transparent;
    border: 1px solid var(--color-text-accent-rgba-faint, rgba(219, 112, 147, 0.4)); /* A subtle border */
    padding: 0.5em 1.2em; /* Padding to create the button shape */
    border-radius: 20px;  /* This creates the pill shape */
    text-decoration: none;
    font-weight: bold;
    transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
}

.back-to-projects-link:hover,
.back-to-projects-link:focus {
    background-color: var(--color-text-accent); /* Fill with accent color on hover */
    border-color: var(--color-text-accent); /* Make border solid on hover */
    color: var(--color-text-white); /* Make text white on hover */
    text-decoration: none; /* No need for an underline with this effect */
}

.project-links a {
    display: inline-block; 
    color: var(--color-text-accent);
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}

/* =================================== */
/* 4. ANIMATIONS
/* =================================== */

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-20px); }
    60% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes temporaryHighlight {
    50% { box-shadow: 0 0 20px 8px rgba(219, 112, 147, 0.7); }
}

.project-item.highlighted-project,
.flowchart-node.goal-as-header.highlighted-project {
    animation: temporaryHighlight 2.5s ease-out;
}

.anim-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s);
}

.anim-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =================================== */
/* 5. RESPONSIVE ADJUSTMENTS
/* =================================== */

@media (max-width: 768px) {
    /* --- Responsive Navigation --- */
    
    /* Show and style the hamburger button on mobile */
    .nav-toggle {
        display: block;
        position: absolute;
        top: 1.25em;
        right: 1.5em;
        z-index: 2000;
        background: transparent;
        border: 0;
        padding: 0.5em;
        cursor: pointer;
    }

    .hamburger {
        display: block;
        position: relative;
        width: 24px;
        height: 2px;
        background: var(--color-text-white);
        transition: transform 0.3s ease;
    }

    .hamburger::before,
    .hamburger::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--color-text-white);
        transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, opacity 0.3s ease;
    }

    .hamburger::before { top: -8px; }
    .hamburger::after { bottom: -8px; }

    .nav-open .hamburger { transform: rotate(45deg); }
    .nav-open .hamburger::before { top: 0; transform: rotate(90deg); }
    .nav-open .hamburger::after { bottom: 0; opacity: 0; }
    
    body.nav-open {
        overflow: hidden;
    }
    
    /* Hide the desktop nav list */
    .main-navigation ul {
        display: none;
    }
    
    /* Show the mobile nav list as a dropdown when open */
    .nav-open .main-navigation ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-header-footer);
        padding: 0.5em 0;
        border-top: 1px solid var(--color-border-header-footer);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    
    /* Main links in the mobile dropdown */
    .main-navigation ul li a {
        display: block;
        text-align: center;
        padding: 0.8em 1em;
        font-size: 1.1em;
    }

    section#portfolio ul li a {
        display: inline-block; 
        color: #5D5D5D;
        background-color: transparent;
        text-decoration: none !important;
        font-weight: bold;
    }

    
    /* The container for the "Projects" submenu on mobile */

    .nav-item.has-dropdown .dropdown-menu {
        position: relative;
        left: 95px;
        display: block;
        background: rgba(0, 0, 0, 0.1); /* Adds the slightly darker background */
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
    }

    /* Links inside the "Projects" submenu on mobile */
    .dropdown-menu li a {
        white-space: normal;
        text-align: center; /* This is the missing property that centers the text */
        font-size: 0.9em;
        color: var(--color-text-light);
        padding: 0.6em 1em; /* This adds comfortable spacing around the text */
    }

    .dropdown-arrow { display: none; }
    
    /* --- Other General Responsive Styles --- */
    
    .site-branding a {
        font-size: 1.1em;
    }

    .hero-greeting { font-size: 2.5em; }
    .hero-subheading { font-size: 1.5em; }
}

@media (max-width: 600px) {
    section#about {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .polaroid-frame {
        margin: 1.5em 0;
        transform: rotate(0deg); /* Straighten on mobile */
    }

    .origin-story::first-letter { font-size: 3.2em; }
    .pull-quote { font-size: 1.1em; margin: 1.2em 0; }
}

@media (max-width: 480px) {
    .purpose-node, .goal-node { width: 90%; }
    .projects-under-goal, .publications-grid { grid-template-columns: 1fr; }
}