@font-face {
    font-family: 'Switzer';
    src: url('../font/Switzer-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: var(--font-family-base);
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

h1, h2, h3 {
    margin: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.animate-item {
    opacity: 0;
    transform: translateY(20px);
}

.logo-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-center;
}
.location-text {
    color: var(--color-text-low);
    text-align: right;
    margin: 0;
    line-height: var(--line-height-base);
    }
.time-display {
        font-family: var(--font-family-base);
        display: inline-block;
        }

.hero-section {
            min-height: 100vh;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: var(--space-l);
            box-sizing: border-box;
            align-items: center;
            overflow-y: visible;
        }
        
.content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-3xl);
        }




/* Update CSS variables */
:root {
    --font-family-primary: 'Switzer', 'Inter', sans-serif;
    /* ...existing variables... */
}

.title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 4px);
}

/* Remove default margins from paragraphs */
p {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin: 0;
}

.logo svg {
    fill: var(--color-text-primary);
}

/* You can also add other common resets if needed */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

.right-column {
    padding-top: var(--font-size-ss);
    transition: opacity 0.2s ease-in-out;
}

.left-column {
    padding-top: var(--font-size-l);
}
/* Add this to your main.css */
.desktop-config-section {
    margin-top: auto;
    display: none;
}

/* Hide config section on mobile when viewing project details */
@media screen and (max-width: 767px) {
    .project-detail-view .config-section {
        display: none !important;
    }

    /* Mobile project detail view - make everything scrollable */
    .project-detail-view .hero-section {
        height: auto;
        min-height: 100vh;
        overflow-y: visible;
    }
    
    .project-detail-view .content-wrapper {
        overflow-y: visible;
    }
    
    .project-detail-view .left-column {
        position: static;
        height: auto;
    }
    
    .project-detail-view .right-column {
        height: 100%;
    }
}

/* ==========================================================================
   MOBILE STYLES (Default - up to 767px)
   ========================================================================== */

   @media screen and (max-width: 767px) {
    /* Hero Section Layout */
    .hero-section {
        position: relative;
        width: 100%;
        height: 100vh;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .content-wrapper {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
        height: calc(100vh - 48px - 100px);
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    /* Left side: Header only */
    .left-column {
        width: 100%; /* Half the screen */
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
        overflow: visible;
        padding-top: 0;
    }

    /* Right side: Video + Projects */
    .right-column {
        width: 100%; /* Keep as you specified - DO NOT CHANGE */
        display: flex;
        flex-direction: column; /* Video and projects NEXT TO each other */
        gap: var(--space-s);
        overflow-x: auto; /* Scroll happens here */
        padding-top: 0px;
    }


    .project-card {
        flex: 0 0 60vw; /* 60% of viewport width */
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        height: fit-content;
    }

    .project-image-container {
        width: 100%;
        aspect-ratio: 4/5;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.20);
    }

    /* Config section fixed at bottom - unchanged */
    .config-section {
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 24px;
        right: 24px;
        margin: 0;
        display: flex;
        justify-content: center;
        z-index: 4;
        height: fit-content;
        min-height: 60px;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        background-color: var(--color-background);
    }

    .config-left-mirror {
        width: 100%;
        display: flex;
        justify-content: start;
    }

    .config-right-mirror {
        display: none; /* Hide on mobile */
    }

    .config-controls {
        flex-direction: row; /* Horizontal layout for all config items */
        gap: var(--space-2xl);
        justify-content: start; /* Space items apart */
        width: 100vw;
        align-items: flex-start;
    }

    .config-row {
        display: flex; /* Ensure flexbox is applied */
        flex-direction: row; /* Keep label and options on same line */
        align-items: center;
        gap: var(--space-xs);
        text-align: center;
        flex: 1; /* Allow each config row to take equal space */
    }

    .config-section .config-label {
        font-size: var(--font-size-s);
        color: var(--color-text-low);
        white-space: nowrap; /* Prevent label wrapping */
    }

    .config-section .config-options {
        justify-content: center; /* Center the options within each item */
    }

    /* Navigation adjustments for mobile */
    .navigation {
        flex-direction: row;
        gap: var(--space-l);
        justify-content: flex-start;
    }

    .nav-circle,
    .nav-arrow {
        display: none; /* Hide decorative elements on mobile */
    }
}

/* ==========================================================================
   TABLET STYLES (768px and up)
   ========================================================================== */

@media screen and (min-width: 768px) {
    /* Hero Section Layout - Similar to desktop */
    .hero-section {
        position: relative;
        max-width: 90vw;
        height: 100vh;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--space-l);
        box-sizing: border-box;
        overflow: hidden;
        align-items: center;
    }

    .content-wrapper {
        flex: 1;
        flex-direction: row;
        gap: var(--space-3xl);
        height: calc(100vh - var(--space-l) * 2 - 160px); /* Increased space for config */
        justify-content: space-between;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 90vw;
    }

    /* Columns - Similar to desktop */
    .left-column {
        width: 35%; /* Slightly wider on tablet */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-m);
        overflow: hidden;
    }

    .right-column {
        width: 80%; /* Adjust for tablet */
        height: 100%;
        gap: var(--space-m);
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(160px + var(--space-l)); /* Match content wrapper calculation */
        margin-bottom: calc(-160px - var(--space-l)); /* Match padding */
        position: relative;
        z-index: 2;
    }

    /* Navigation - Use mobile style (horizontal) */
    .navigation {
        flex-direction: column; /* Horizontal like mobile */
        gap: var(--space-xl); /* Larger spacing for tablet */
        justify-content: flex-start;
        width: 100%;
        align-content: space-between;
    }

    /* Hide nav decorative elements */
    .nav-circle,
    .nav-arrow {
        display: none;
    }

    /* Config Section Mirrors - Similar to desktop */
    .config-section {
        width: 90vw;
        position: relative;
        margin: 0;
        padding: var(--space-l) 0;
        display: flex;
        justify-content: space-between;
        gap: var(--space-2xl);
        z-index: 1;
        height: fit-content;
        min-height: 100px; /* Sufficient space for 3 config rows */
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        display: none;
    }

    .config-left-mirror {
        width: 35%; /* Match left-column width */
        display: flex;
        align-items: flex-start;
    }

    .config-right-mirror {
        width: 80%; /* Match right-column width */
        display: flex;
        align-items: flex-start;
    }

    .desktop-config-section {
        display: block;
        padding-top: var(--space-xl);
    }

}

/* ==========================================================================
   TABLET STYLES (768px to 1023px)
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        max-width: 100%;
        height: 100vh;
        padding: var(--space-l);
    }

    .content-wrapper {
        height: calc(100vh - var(--space-l) * 2 - 120px); /* Increased space for config */
        gap: var(--space-2xl);
    }

    .left-column {
        gap: var(--space-xl);
        height: 93%;
        padding-left: 5%;
    }

    .right-column {
        margin-bottom: calc(-1 * (var(--space-xl) + var(--space-l) * 2 + 20px));
        padding-right: 5% !important;
    }

    /* Config Section for Tablets */
    .config-section {
        gap: var(--space-2xl);
        max-width: 100%;
        position: relative;
        margin: 0;
        padding: var(--space-xl) 0; /* Increased padding */
        display: flex;
        justify-content: space-between;
        z-index: 1;
        height: 120px; /* Increased height */
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        display: none;
    }

    .config-left-mirror {
        display: flex;
        align-items: flex-start;
    }

    .config-right-mirror {
        display: flex;
        align-items: flex-start;
    }

    /* Adjust for large font size specifically */
    .font-size-l .config-section {
        height: 140px; /* Even more height for large font */
        padding: var(--space-2xl) 0;
    }

    .font-size-l .content-wrapper {
        height: calc(100vh - var(--space-l) * 2 - 140px); /* Adjust content wrapper too */
    }

    .desktop-config-section {
        display: block;
        padding-top: var(--space-xl);
    }
}

/* ==========================================================================
   LAPTOP STYLES (1024px and up)
   ========================================================================== */

@media screen and (min-width: 1024px) {
    /* Hero Section Layout */
    .hero-section {
        position: relative;
        max-width: 100vw;
        height: 100vh;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--space-l);
        box-sizing: border-box;
        overflow: hidden;
    }


    /* Hide nav decorative elements */
    .nav-circle,
    .nav-arrow {
        display: none;
    }

    .content-wrapper {
        max-width: 100%;
        gap: var(--space-2xl);
        flex: 1;
        flex-direction: row;
        height: calc(100vh - var(--space-l) * 2 - 80px);
        justify-content: space-between;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
    }
    .navigation {
        flex-direction: row; /* Keep vertical layout */
        gap: 24px;
        justify-content: flex-start;
        width: 100%;
        align-content: space-between;
    }
    /* Columns */
    .left-column {
        height: 95%;
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-xl);
        overflow: hidden;
        padding-left: 10%;
    }

    .right-column {
        width: 80%;
        height: 100%;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(80px + var(--space-l));
        margin-bottom: calc(-80px - var(--space-l));
        position: relative;
        z-index: 2;
    }

    /* Config Section Mirrors */
    .config-section {
        gap: var(--space-2xl);
        max-width: 90%;
        width: 100%;
        position: relative;
        margin: 0;
        padding: var(--space-xl) 0;
        display: flex;
        justify-content: space-between;
        z-index: 1;
        height: 80px;
        align-items: center;
        box-sizing: border-box;
        flex-shrink: 0;
        display: none;
    }

    .config-left-mirror {
        display: flex;
        width: 30%; /* Match left-column width */
        align-items: flex-start;
    }

    .config-right-mirror {
        display: flex;
        width: 80%; /* Match right-column width */
        align-items: flex-start;
    }

    /* Adjust for large font size on desktop too */
    .font-size-l .config-section {
        height: 100px;
        padding: var(--space-xl) 0;
    }

    .font-size-l .content-wrapper {
        height: calc(100vh - var(--space-l) * 2 - 100px);
    }

    .desktop-config-section {
        display: block;
        padding-top: var(--space-xl);
    }
}

/* ==========================================================================
   DESKTOP STYLES (1440px and up)
   ========================================================================== */

@media screen and (min-width: 1440px) {
    .hero-section {
        max-width: 100%;
    }

    .content-wrapper {
        width: 100%;
        height: calc(100vh - var(--space-l) * 2 - 100px);
        gap: var(--space-3xl);
    }

    .left-column {
        gap: var(--space-xl);
        padding-left: 10%;
    }

    .right-column {
        margin-bottom: calc(-1 * (var(--space-2xl) + var(--space-l) * 2 + 20px));
    }

    /* Desktop Config Mirrors */
    .config-section {
        gap: var(--space-3xl);
        max-width: 93.33vw;
        width: 100%;
    }
}


/* Page transition styles */
main {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.page-transition-out {
    opacity: 0;
}

.page-transition-in {
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Optional: Add a subtle blur effect during transition */
.page-transition-out {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(0px);
}

.page-transition-in {
    opacity: 0;
    filter: blur(0px);
    transform: translateY(0px);
    animation: fadeInWithBlur 0.3s ease-out forwards;
}

@keyframes fadeInWithBlur {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: translateY(0px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0px);
    }
}

/* Page transition styles - target only the right column content */
.right-column {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    padding-right: 10%;
}

.right-column.page-transition-out {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(0px);
}

.right-column.page-transition-in {
    opacity: 0;
    filter: blur(0px);
    transform: translateY(0px);
    animation: fadeInWithBlur 0.3s ease-out forwards;
}

/* **ENHANCED: Exclude the page title and title group from transitions** */
.right-column.page-transition-out #page-title,
.right-column.page-transition-in #page-title,
.right-column.page-transition-out .title-group,
.right-column.page-transition-in .title-group {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* **ENHANCED: Exclude all title-related elements from transitions** */
.right-column.page-transition-out .parent-folder,
.right-column.page-transition-in .parent-folder,
.right-column.page-transition-out .current-project,
.right-column.page-transition-in .current-project,
.right-column.page-transition-out .branch-title,
.right-column.page-transition-in .branch-title {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* **NEW: Exclude navigation from transitions** */
.right-column.page-transition-out main-navigation,
.right-column.page-transition-in main-navigation,
.right-column.page-transition-out nav,
.right-column.page-transition-in nav,
.right-column.page-transition-out .nav-container,
.right-column.page-transition-in .nav-container,
.right-column.page-transition-out nav-item,
.right-column.page-transition-in nav-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Ensure config, navigation, and header are excluded from transitions */
.config,
.navigation,
.header,
nav,
header,
#page-title,
.title-group,
main-navigation,
nav-item {
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.logo-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.logo {
    width: 80px;
    height: 40px;
}

.time-display {
    font-family: var(--font-family-base);
    display: inline-block;
}

.title {
    color: var(--color-text-primary);
    margin: 0;
    line-height: 150%;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

@media screen and (max-width: 767px) {
    .header-content {
        gap: var(--space-m);
    }
}