/* Mobile Layout Fixes - Add to your main.css or include separately */

/* Ensure rotating text is always visible on mobile */
@media (max-width: 768px) {
    /* Fix rotating text visibility */
    .rotating-text span {
        color: #E1E9EB !important;
        opacity: 1 !important;
    }
    
    /* Ensure clock aligns with navigation start position */
    .clock {
        position: absolute !important;  /* Scrolls with page */
        width: auto;
        max-width: calc(50vw - 3rem);
    }
    
    /* Force equal columns for centered gap */
    .sidebar {
        grid-template-columns: 1fr 1fr !important;  /* Equal columns = centered gap */
        gap: 1.5rem !important;  /* Adjust this for gap width */
    }
    
    /* Control padding between content and center */
    .sidebar .bio,
    .sidebar .rotating-bio {
        padding-right: 1rem;  /* Space from bio to center */
    }
    
    /* Ensure nav stays at the right of its column */
    .sidebar nav {
        justify-self: end;
        white-space: nowrap;
        padding-left: 1rem;  /* Space from center to nav */
    }
    
    /* Project grid adjustments */
    .project-info h3 {
        font-size: 0.7rem;
    }

    .project-info p {
        font-size: 0.55rem;
    }
}

/* Prevent any gray text on rotating bio */
.rotating-bio .rotating-text {
    color: inherit !important;
}