/* styles2025.css */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;900&ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');

/* Basic Reset & Global Styles */
*,\
*::before,\
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    margin: 0;
    padding-top: 100px; /* Adjusted to accommodate the new initial nav height */
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    background-color: #ffffff;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
    overscroll-behavior: none;
}

/* Nav Styles - MODIFIED for scroll-driven animation */
nav {
    background-color: #ffffff;
    color: #333;
    padding: 40px 50px; /* Adjusted initial vertical padding to 40px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Styling for your name - BOLD, NO HOVER/SELECTED EFFECTS */
.site-branding .your-name {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #222;
    text-decoration: none !important;
    letter-spacing: 0.2em;
}

/* Ensure no hover effects on your name, explicitly targeting the ::after pseudo-element */
.site-branding .your-name:hover {
    color: #222;
    text-decoration: none !important;
}

.site-branding .your-name:hover::after {
    content: none !important;
}

/* Also explicitly remove any pseudo-elements for your name by default */
.site-branding .your-name::after {
    content: none !important;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

nav li {
    margin-left: 30px;
}

/* General nav link styling */
nav a {
    color: #555;
    text-decoration: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.1em;
    padding-bottom: 5px;
    position: relative;
    cursor: pointer;
}

/* General nav link hover styling */
nav a:hover {
    color: #D4191C;
    text-decoration: none;
}

/* Underline effect for the current nav item */
nav a.current-page::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #D4191C;
    transform: scaleX(1);
    transform-origin: left;
    /* Transition only for current page, not hover out */
    transition: transform 0.1s ease;
}

/* Underline on hover for other nav items */
nav a:not(.current-page)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #D4191C;
    transform: scaleX(0); /* Hidden by default */
    transform-origin: left;
    /* No transition here, it will snap back */
}

nav a:not(.current-page):hover::after {
    transform: scaleX(1); /* Visible on hover */
    transition: transform 0.1s ease; /* Animate only on hover in */
}

/* New Grid Container for Sections */
.sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 20px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 0;
    background-color: #ffffff;
}

.section-content-container {
    background-color: transparent;
    border-radius: 40px;
    width: 100%;
    min-height: 800px;
    position: relative;
    overflow: hidden;
}

.section-image-placeholder {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.section-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* New wrapper for text content */
.section-text-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 2;
    text-align: left;
    padding: 0;
}

.headline {
    /* Keep headline as a container, but remove visual styling */
    margin-bottom: 10px;
    line-height: 1;
    text-align: left;
    position: relative; /* Keep relative positioning for absolute pseudo-element */
    display: inline-block; /* Keep inline-block to wrap content correctly and allow width property for underline */
}

/* Reduce space between headline and paragraph ONLY for index.html */
.sections-grid .headline {
    margin-bottom: 0px; /* Space reduced to zero */
}

/* Increase headline text size ONLY for index.html */
.sections-grid .headline a {
    font-size: 1.5em; /* Headline text size increased */
}

/* Base styling for the link inside the headline */
.headline a {
    font-size: 1.5em; /* This is relative to .headline's font-size, so keep 1em if h1 is already sized */
    font-weight: 500;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: #333333; /* Default color for the link */
    text-decoration: none; /* Remove default underline */
    position: relative; /* For the ::after pseudo-element positioning */
    display: inline-block; /* Important for width to be recognized for the underline */
    padding-bottom: 5px; /* Adjust if needed to match spacing with underline */
}

/* Headline link hover effect for color and underline */
.headline a:hover {
    color: #D4191C; /* Red color on hover */
    transition: color 0.1s ease; /* Animate color change on hover in */
}

/* Underline for the link inside the headline */
.headline a::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position at the bottom of the link */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #D4191C; /* Red underline color */
    transform: scaleX(0); /* Hidden by default */
    transform-origin: left;
}

.headline a:hover::after {
    transform: scaleX(1); /* Visible on hover */
    transition: transform 0.1s ease; /* Animate only on hover in */
}

/* Headline Colors for Index.html Sections */

/* Default Dark Headline Color (can explicitly set 1B1C1E if current #333333 isn't exactly it) */
.sections-grid .section-text-content .headline a {
    color: #333333;
}

/* Light Headline Color (White) */
.sections-grid .section-text-content.light-headlines .headline a {
    color: #FFFFFF; /* White headline text */
}

/* Ensure hover color also adapts */
.sections-grid .section-text-content.light-headlines .headline a:hover {
    color: #FFFFFF;
}

/* Paragraph text color for sections */
/* Default Dark Paragraph Color (can explicitly set 1B1C1E if current #333333 isn't exactly it) */
.sections-grid .section-text-content p {
    color: #333333; /* Your current dark gray, or change to #1B1C1E */
}

/* Light Paragraph Color (White) */
.sections-grid .section-text-content.light-headlines p {
    color: #FFFFFF; /* White paragraph text */
}

.section-text-content p {
    font-size: 1.2em;
    line-height: 1.5;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 100;
    color: #333333;
    text-align: left;
    padding: 0;
}

/* --- Styles for googlematerial.html content area --- */

/* Container for the standalone title */
.case-study-title-container {
    max-width: 1400px;
    margin: 40px auto 40px;
    padding: 0 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.case-study-title-container h1 {
    grid-column: 2 / 3;
    font-size: 2.5em;
    margin-bottom: 0;
    color: #333333;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

/* Main container for the overall page content, excluding the main title */
.case-study-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw 80px;
}

/* Style for each image-text pair, creating a "row" */
.content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 60px;
}

.image-container {
    justify-self: end;
    width: 100%;
    max-width: 800px;
}

.image-placeholder {
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    font-size: 0.9em;
    text-align: center;
    border-radius: 40px;
    overflow: hidden;
}

.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-content p {
    font-size: 1.1em;
    line-height: 2.2;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 1.5em;
    color: #333333;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
}

.text-content p:first-child {
    margin-top: 0;
}

.image-placeholder-ref {
    font-size: 0.85em;
    color: #555;
    text-align: right;
    margin-top: -0.5em;
    margin-bottom: 1.5em;
}

/* Add responsive styles for these new sections as well, usually added under @media queries */
@media (max-width: 1200px) {
    /* Responsive for googlematerial.html title container */
    .case-study-title-container {
        padding: 0 5vw;
        margin-top: 20px;
        margin-bottom: 20px;
        display: block; /* Changes to block layout for mobile */
    }
    .case-study-title-container h1 {
        font-size: 2em;
/*        grid-column: auto; /* Resets grid column */*/
    }
}

@media (max-width: 768px) {
    /* Mobile: googlematerial.html content rows */
    .case-study-wrapper {
        padding: 0 5vw;
    }
    .content-row {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }
    .image-container {
        order: 1;
        justify-self: center;
        max-width: 100%;
    }
    .text-content {
        order: 2;
    }
    .text-content p {
        font-size: 1em;
    }
    .image-placeholder-ref {
        text-align: left;
    }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .section-text-content {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    /* Set initial padding for smaller screens if different from desktop */
    nav {
        padding: 40px 20px; /* Adjusted initial padding for smaller screens */
        flex-direction: column;
        align-items: flex-start;
    }

    .site-branding {
        margin-bottom: 15px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    nav li {
        margin-left: 0;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    /* Mobile: Switch to 1-column layout */
    .sections-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin: 20px;
    }

    .section {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .section-content-container {
        width: 100%;
        padding: 0;
        min-height: 600px;
    }

    .section-text-content {
        bottom: 20px;
        left: 20px;
        right: 20px;
        max-width: 90%;
        color: #333333;
    }

    .headline {
        font-size: 2em;
        padding-bottom: 5px; /* Ensure padding for underline remains on mobile */
    }

    .section-text-content p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .headline {
        font-size: 1.8em;
    }
    .section-text-content {
        bottom: 15px;
        left: 15px;
        right: 15px;
        max-width: 100%;
    }
}

.your-name .circle-separator {
    font-size: 0.7em;
    vertical-align: 0.25em;
    margin: 0 0.1em;
    line-height: 1;
    display: inline-block;
    color: #FFBB00;
}

/* Footer Styles */
footer {
    height: 160px;
    background-color: #ffffff;
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.9em;
    padding: 20px;
}

.goat-emoji {
    font-family: 'Noto Emoji';
    font-size: 2em;
    line-height: 1;
    margin-top: 5px;
}

/* Styles for about.html page */

/* General wrapper for about page content */
.about-content-wrapper {
    max-width: 1000px; /* Adjust as needed for your desired text width */
    margin: 40px auto 80px; /* Center the content */
    padding: 0 5vw; /* Consistent horizontal padding */
}

/* Container for the text and the floated image */
.about-text-section {
    font-size: 1.1em;
    line-height: 2.2;
    color: #333333;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
}

/* New style for images with an inside stroke */
.image-with-stroke {
    border: 1px solid #CCCCCC; /* Thin, 1px grey stroke */
    display: inline-block; /* Essential for border to wrap content tightly */
    /* If you want the stroke to always be a fixed distance from the image: */
    /* padding: 1px; */
}


/* Specific Styles for about.html's image within the two-column layout */
.image-container.about-image-column {
    /* Override initial justification from .image-container for this specific usage */
    justify-self: end; /* This pushes the image container itself to the right within its grid cell */
    
    /* Ensure no fixed max-width on the container if not desired, or adjust */
    max-width: 100%; /* Allows the image to be 200px without being constrained by a smaller container default */
    width: auto; /* Reset width to allow inner image to dictate, or explicitly manage grid column */
}

.image-container.about-image-column img {
    max-width: 360px; /* Limits the maximum width of the image */
    max-height: 360px; /* Limits the maximum height of the image */
    width: auto; /* Allow image to scale down but not up beyond max-width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Essential for margin: auto to work */
    margin-left: auto; /* Pushes the image to the right within its column */
    margin-right: 0; /* Ensures it stays on the right */
    object-fit: contain; /* Prevents cropping, will "letterbox" if aspect ratio differs */
    border-radius: 50%; /* Makes the image circular */
}

/* Responsive adjustments for about.html's image */
@media (max-width: 992px) {
    .image-container.about-image-column {
        justify-self: center; /* Center the image in its column on mobile */
    }

    .image-container.about-image-column img {
        margin-left: auto; /* Keep centered on mobile */
        margin-right: auto;
    }
}

.section-content-container {
    cursor: pointer; /* Change cursor to hand on hover over the entire container */
}

/* --- Resume Section Styles for about.html --- */

.resume-intro-title {
    font-size: 2.5em;
    margin-bottom: 0;
    padding-top: 40px;
    color: #333333;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

.resume-content {
    padding: 0 0px; /* Adjust or remove horizontal padding if inner text-content already handles it */
    margin-top: 40px; /* Provides vertical space from the previous text content */
}

.resume-section-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: #D4191C; /* Red hover color */
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: none;
    padding-bottom: 0;
}

.resume-item {
    margin-bottom: 25px; /* Space between each job/education entry */
}

.resume-content .resume-job-title,
.resume-content .resume-school,
.resume-content .resume-talk-title,
.resume-content .resume-patent-title,
.resume-content .resume-course-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    color: #333333;
    margin-bottom: 5px; /* This margin will now correctly apply */
    line-height: 1.1; /* Remains tight */
}

/* Increased Specificity for Resume Text to Override .text-content p */
.resume-content .resume-dates {
    font-family: 'Lexend', sans-serif;
    font-size: 0.9em;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10px;
    line-height: 1.1; /* Made tighter */
}

/* Increased Specificity for Resume Text to Override .text-content p */
.resume-content .resume-degree,
.resume-content .resume-body-text {
    font-family: 'Lexend', sans-serif;
    font-size: 0.9em;
    line-height: 1.4; /* Made much tighter for body text and degrees */
    color: #888888;
    margin-bottom: 10px;
}

/* Download Resume Button */
.download-button {
    display: inline-block; /* Allows padding and width/height */
    padding: 16px 24px; /* Top/bottom 20px, left/right 32px */
    border: 1px solid #888888; /* Red outline */
    border-radius: 32px; /* Rounded corners */
    background-color: transparent; /* Transparent inside */
    color: #888888; /* Red text */
    text-decoration: none; /* Remove underline for links */
    font-family: 'Bricolage Grotesque', sans-serif; /* Consistent with other text */
    font-size: 1.1em; /* Adjust font size as needed */
    font-weight: 700; /* Bold text */
    cursor: pointer; /* Indicates it's clickable */
    transition: all 0.1s ease; /* Smooth transition for hover effects */
    margin-top: 20px; /* Space above the button from the title */
    margin-bottom: 0px; /* Space below the button before resume content */
}

.download-button:hover {
    color: #D4191C; /* White text on hover */
    border: 1px solid #D4191C; /* Red outline */
}


@media (max-width: 992px) {
    body {
        padding-top: 120px; /* Adjust body padding for fixed nav on mobile (common case) */
    }
    nav {
        padding: 40px 20px; /* Smaller padding for nav */
    }
    nav ul {
        gap: 20px; /* Smaller gap in nav */
    }
    nav a {
        font-size: 1em;
    }
    .site-branding .your-name {
        font-size: 1.0 em; /* Shrinks to half of 1.5em */
    }
    .case-study-title-container {
        padding: 0 4vw;
        margin: 30px auto;
    }
    .case-study-title-container h1 {
        font-size: 2em; /* Smaller headline on mobile */
    }
    .content-row {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
        gap: 40px; /* Reduce gap when stacked */
        margin-bottom: 40px;
    }

    .image-container.about-image-column {
        order: -1; /* Place image above text on mobile */
        margin-bottom: 20px; /* Space below image */
    }

    .text-content {
        padding: 0 4vw; /* Add padding to text content on mobile */
        font-size: 1em;
    }

    /* Resume Specific Adjustments for Mobile */
    .resume-intro-title {
        font-size: 1.8em; /* Adjust for mobile */
        margin-top: 40px;
        margin-bottom: 25px;
    }
    .resume-content {
        padding: 0; /* Remove inner padding as text-content handles it */
        margin-top: 30px; /* Adjust spacing as needed */
    }
    .resume-section-title {
        font-size: 1.5em;
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .resume-item {
        margin-bottom: 20px;
    }

    /* Increased Specificity for Resume Titles on Mobile */
    .resume-content .resume-job-title,
    .resume-content .resume-school,
    .resume-content .resume-talk-title,
    .resume-content .resume-patent-title,
    .resume-content .resume-course-title {
        font-size: 1em; /* Adjust title size for mobile */
    }

    /* Increased Specificity for Resume Text on Mobile */
    .resume-content .resume-dates,
    .resume-content .resume-degree,
    .resume-content .resume-body-text {
        font-size: 0.9em; /* Adjust body text size for mobile */
    }

    /* Download button adjustments for mobile */
    .download-button {
        padding: 15px 24px; /* Slightly smaller padding on mobile */
        font-size: 1em; /* Adjust font size */
        margin-top: 15px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    nav {
        padding: 30px 20px; /* Smaller horizontal padding */
    }
    body {
        padding-top: 120px; /* Body padding for this range */
    }
    nav ul {
        gap: 5px; /* Smaller gap in nav */
    }
    nav a {
        font-size: 1em;
        white-space: nowrap; /* Prevent link text from wrapping */
    }
    .site-branding .your-name {
        font-size: 0.75em; /* Shrinks to half of 1.5em */
    }

    .case-study-title-container h1 {
        font-size: 1.8em;
    }

    /* Resume Mobile Adjustments for smaller screens */
    .resume-intro-title {
        font-size: 1.5em;
        margin-top: 30px;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    nav {
        padding: 10px 10px; /* Even smaller horizontal padding */
    }
    body {
        padding-top: 120px; /* Body padding for this range */
    }
    nav ul {
        gap: 5px;
    }
    .site-branding .your-name {
        font-size: 0.65em; /* Shrinks to half of 1.3em */
    }

    .case-study-title-container h1 {
        font-size: 1.5em;
    }
}

/* --- Landing Page Specific Styles --- */

/* Ensures the body for the landing page doesn't have the fixed nav padding */
body.landing-page-body {
    padding-top: 0; /* Remove padding-top for this specific page */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make sure it takes full viewport height */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within its container */
    background-color: #ffffff; /* Ensure consistent background */
    overflow-y: auto; /* Allow scrolling if content overflows */
    overflow-x: hidden;
}

/* Specific main container for the landing page content */
.landing-page-container {
    padding: 20px;
    max-width: 500px; /* Constrain width for better readability */
    margin: auto; /* Center the container */
    flex-grow: 1; /* Allows container to take available space for vertical centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landing-headshot-container {
    margin-bottom: 20px;
}

.landing-headshot {
    max-width: 150px;
    border-radius: 50%; /* Makes the image circular */
    display: block; /* Remove extra space below image */
}

.landing-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2.2em;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
    line-height: 1.2;
}

.landing-tagline {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2em;
    line-height: 1.5;
    color: #555555;
    margin-bottom: 30px;
    max-width: 400px; /* Constrain tagline width */
}

.landing-button-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between buttons */
    width: 100%; /* Make buttons take full width of container */
    max-width: 200px; /* Limit button group width */
    margin-bottom: 30px;
}

.landing-button {
    display: flex; /* Changed to flex to align icon and text */
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* UPDATED: Align content to the left */
    padding: 15px 20px;
    border: 0px solid #888888; /* Changed from 2px to 1px */
    border-radius: 9999px; /* Changed from 16px to a large value for pill shape */
    background-color: #F3F3F3;
    color: #333333;
    text-decoration: none;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1em;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Removed text-align: center as flexbox now controls alignment */
}

.landing-button:hover {
    color: #333333;
    border-color: #D4191C;
}

/* Styles for the button icons */
.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Standard icon size */
    height: 24px; /* Standard icon size */
    margin-right: 10px; /* Space between icon and text */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Specific style for the yellow dot icon */
.yellow-dot-icon {
    background-color: #FFBB00; /* Yellow color */
    border-radius: 50%; /* Make it a perfect circle */
}

.greeting-message {
    font-family: 'Lexend', sans-serif;
    font-size: 1em;
    color: #555555;
    margin-top: 20px;
}

/* --- Footer Styles --- */
footer {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-family: 'Lexend', sans-serif;
    font-size: 0.9em;
    color: #888888;
    margin-top: auto; /* Pushes the footer to the bottom */
}

footer p {
    margin-bottom: 5px;
}

.goat-emoji {
    font-family: 'Noto Emoji', sans-serif;
    font-size: 1.2em;
}

/* Adjustments for smaller screens for landing page */
@media (max-width: 480px) {
    .landing-name {
        font-size: 1.8em;
    }

    .landing-tagline {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .landing-button {
        padding: 12px 15px;
        font-size: 1em;
    }

    .greeting-message {
        font-size: 0.8em;
    }

    .button-icon {
        width: 20px; /* Slightly smaller icons on mobile */
        height: 20px;
        margin-right: 8px;
    }
}