/*
=========================================
PATRICK DUNN PORTFOLIO - MAIN STYLESHEET
=========================================
Retro 80s computer game aesthetic
-----------------------------------------
*/

/*
=========================================
FONTS
=========================================
- Press Start 2P: Pixel font for nav and labels
- Orbitron: Sci-fi/retro for the main title
- VT323: Terminal/monospace for the tagline
*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&family=VT323&family=Space+Mono:wght@400;700&family=Silkscreen&display=swap');

/*
RESET & BASE STYLES
These remove default browser styling so everything looks consistent
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Makes width/height calculations easier */
}

html, body {
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    font-family: 'Arial', sans-serif;
    color: white;
    background-color: #000; /* Fallback if video doesn't load */
}


/*
=========================================
VIDEO BACKGROUND
=========================================
This makes the video fill the entire screen and stay behind everything
*/
.video-background {
    position: fixed;        /* Stays in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Fills the screen, cropping if needed (like background-size: cover) */
    z-index: -1;            /* Puts it behind all other content */
}


/*
=========================================
TV SCREEN CONTAINER
=========================================
Invisible container positioned to match the TV screen area in the video background.
Uses percentage-based positioning so it scales with viewport.
*/
.tv-screen-container {
    position: relative;
    width: 100%;
    height: 65vh;           /* Total height for TV area + margin for content below */
}

/*
=========================================
TV HEADER
=========================================
The text overlay that appears on top of the TV in the video
Positioned using percentages to match TV screen in background video
Contains: Name, tagline, and navigation links
*/
.tv-header {
    position: absolute;

    /* Position to match TV screen in video (percentage-based) */
    /* Widened container and adjusted left to keep it centered */
    left: 35%;              /* Moved left to accommodate wider container */
    top: 21%;               /* Distance from top edge */
    width: 32%;             /* Wider to fit text in Chrome (was 26%) */
    height: 46%;            /* Height of TV screen area */

    /* Center content inside the container */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 10;
    overflow: visible;      /* Allow text to extend beyond container if needed */

    /* DEBUG: Uncomment border below to see container boundaries */
    /* border: 2px dashed red; */
}

/* Make links clickable even though parent has pointer-events: none */
.tv-header a {
    pointer-events: auto;
}

/* Main title: PATRICK DUNN */
.site-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 28px;                         /* Pixel-based for cross-browser consistency */
    letter-spacing: 4px;                     /* Pixel-based */
    color: white;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.3),
        2px 2px 0px rgba(0, 0, 0, 0.7);     /* Drop shadow for depth */
    margin-bottom: 10px;
    position: relative;

    /* Cross-browser text normalization */
    -webkit-font-smoothing: antialiased;    /* Smoother fonts on Mac/Safari */
    -moz-osx-font-smoothing: grayscale;     /* Smoother fonts on Firefox Mac */
    text-rendering: geometricPrecision;      /* More consistent letter shapes */
    line-height: 1.2;                        /* Explicit line-height */
    white-space: nowrap;                     /* Prevent unexpected line breaks */
}

/* Separator line under name - narrower than the text */
.site-title::after {
    content: '';
    position: absolute;
    bottom: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;                             /* Narrower than full width */
    height: 3px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Tagline: EDITING DUNN RIGHT */
.site-tagline {
    font-family: 'VT323', monospace;        /* Terminal/CRT style font */
    font-size: 24px;                         /* Pixel-based for cross-browser consistency */
    letter-spacing: 3px;                     /* Pixel-based */
    color: white;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.4),
        0 0 15px rgba(255, 255, 255, 0.2),
        1px 1px 0px rgba(0, 0, 0, 0.7);     /* Glow + drop shadow */
    margin-bottom: 30px;

    /* Cross-browser text normalization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    line-height: 1.2;
    white-space: nowrap;
}

/* Navigation container - default (inside TV header) */
.main-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Navigation fixed at top of page */
.main-nav.top-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

/* Individual nav links */
.nav-link {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;                             /* Bigger for better visibility */
    color: white;
    text-decoration: none;
    padding: 5px 8px;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);  /* Drop shadow for readability */

    /* Cross-browser text normalization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    line-height: 1.5;
}

/* Hover state for nav links */
.nav-link:hover {
    color: #4ECDC4;
    text-shadow:
        0 0 10px rgba(78, 205, 196, 0.7),
        1px 1px 0px rgba(0, 0, 0, 0.7);
}

/* Active/current page nav link */
.nav-link.active {
    color: #4ECDC4;
    text-shadow:
        0 0 10px rgba(78, 205, 196, 0.7),
        1px 1px 0px rgba(0, 0, 0, 0.7);
}


/*
=========================================
MAIN CONTENT
=========================================
Everything that sits on top of the video background
*/
.content {
    position: relative;     /* Allows z-index to work */
    z-index: 1;             /* Above the video */
    min-height: 100vh;      /* At least full screen height */
    padding-top: 0;         /* No padding needed - header is part of content flow now */
}


/*
=========================================
PROJECT GRID SECTION
=========================================
The "Everything Reality" section with all the show buttons
*/
.project-grid-section {
    padding: 20px;
    max-width: 1100px;      /* ~30% larger grid for bigger cards (was 850px) */
    margin: 0 auto;         /* Centers the section */
    padding-bottom: 60vh;   /* Extra scroll room so bottom projects can scroll higher */
}

/* "Everything Reality" label */
.section-label {
    font-family: 'Press Start 2P', cursive;  /* Retro pixel font */
    font-size: 0.9rem;      /* Smaller because pixel fonts read larger */
    font-weight: normal;
    margin-bottom: 15px;
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);  /* Subtle shadow for readability */
}

/* The "Reality" part in a different color */
.section-label .highlight {
    color: #4ECDC4; /* Teal/cyan accent color */
    text-decoration: underline;
}


/*
=========================================
CATEGORY FILTER BUTTONS
=========================================
Clickable category buttons above the project grid
Clicking a button filters to show only projects in that category
*/
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;                     /* Center the filter buttons */
}

/* Individual filter button - matches nav link styling */
.filter-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;                             /* Same size as nav links */
    background: transparent;
    border: none;
    color: white;                                /* Match nav links - solid white */
    cursor: pointer;
    padding: 5px 8px;
    transition: all 0.2s ease;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); /* Same shadow as nav links */

    /* Cross-browser text consistency */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    line-height: 1.5;
}

/* Active/selected filter - matches nav active state */
.filter-btn.active {
    color: #4ECDC4;                              /* Teal accent */
    text-shadow:
        0 0 10px rgba(78, 205, 196, 0.7),
        1px 1px 0px rgba(0, 0, 0, 0.7);
}

/* Hover state - matches nav hover */
.filter-btn:hover {
    color: #4ECDC4;
    text-shadow:
        0 0 10px rgba(78, 205, 196, 0.7),
        1px 1px 0px rgba(0, 0, 0, 0.7);
}

/* Hidden project card (filtered out) */
.project-card.hidden {
    display: none;
}


/*
=========================================
PROJECT GRID
=========================================
3-column grid of clickable project buttons
*/
.project-grid {
    display: flex;
    flex-wrap: wrap;            /* Wrap cards into rows */
    justify-content: center;   /* Center incomplete rows */
    gap: 4px;                  /* Small gap between items (like your Wix site) */
}

/* Each card takes up ~1/3 of the row (minus gap) */
.project-card {
    width: calc(33.333% - 3px); /* 3 columns with gap accounted for */
}

/* Individual project card/button */
.project-card {
    display: block;
    overflow: hidden;       /* Clips the image to the box */
    background-color: #000; /* Black background if image doesn't load */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

/* The image inside each card */
.project-card img {
    width: 100%;
    height: auto;           /* Let image determine its own height (natural aspect ratio) */
    display: block;
}

/* Hover effect - subtle zoom and glow */
.project-card:hover {
    transform: scale(1.02); /* Slightly larger */
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.5); /* Teal glow */
    z-index: 10;            /* Pop above neighbors */
}


/*
=========================================
RESPONSIVE DESIGN
=========================================
Adjustments for different screen sizes
*/

/* Tablets and smaller */
@media (max-width: 768px) {
    .project-grid {
        gap: 3px;
    }

    .project-card {
        width: calc(50% - 2px); /* 2 columns instead of 3 */
    }

    .section-label {
        font-size: 1rem;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .project-grid {
        gap: 2px;
    }

    .project-card {
        width: calc(50% - 1px); /* Keep 2 columns on mobile */
    }

    .section-label {
        font-size: 0.9rem;
    }
}


/*
=========================================
ABOUT & CONTACT PAGE STYLES
=========================================
*/

/* Adjust content positioning for inner pages */
.page-content {
    padding-top: 0;  /* No padding needed - header is part of content flow now */
}

.page-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(0, 0, 0, 0.7);  /* Semi-transparent black box for readability */
    border-radius: 8px;
    margin-bottom: 60vh;             /* Extra scroll room so content can scroll higher */
}

.page-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
}

/* About page */
.about-content {
    margin-bottom: 30px;
}

.about-text {
    font-family: Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

/* Contact page */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-heading {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.8rem;
    color: #4ECDC4;
    margin-bottom: 20px;
}

.contact-detail {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.contact-detail a {
    color: #4ECDC4;
    text-decoration: none;
}

.contact-detail a:hover {
    text-decoration: underline;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.form-group input,
.form-group textarea {
    padding: 12px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: white;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4ECDC4;
}

.submit-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    padding: 15px 30px;
    background: #4ECDC4;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.submit-btn:hover {
    background: #3dbdb5;
}

/* Back link */
.back-link {
    display: inline-block;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.6rem;
    color: white;
    text-decoration: none;
    margin-top: 30px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.back-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4ECDC4;
    color: #4ECDC4;
}

/* Responsive for inner pages */
@media (max-width: 768px) {
    .page-section {
        padding: 20px;
        margin: 0 15px;
    }

    .page-title {
        font-size: 1rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }
}