/* ==========================================================================
   1. GLOBAL SETTINGS & FONTS
   This section handles the high-level settings that affect the whole site.
   ========================================================================== */

/* Loads your custom "Raitor-Regular" font for use in the logo */
@font-face {
    font-family: 'Raitor-Regular';
    src: url('fonts/Raitor-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset: This removes default browser spacing so your design is pixel-perfect */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Removes bullet points from all lists (like your navigation menus) */
ul, li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

/* Base Body: Controls the background color, default text color, and main font */
body {
    background-color: #ffffff; /* Page background (White) */
    color: #111111;            /* General text color (Off-Black) */
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;        /* Prevents accidental left-to-right scrolling */
}

/* Global Fade-In Animation for Page Load */
@keyframes pageFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ==========================================================================
   2. NAVIGATION BAR
   The menu at the top of every page.
   ========================================================================== */

/* The main bar container */
.navbar {
    display: flex;
    justify-content: space-between; /* Pushes logo to left, links to right */
    align-items: center;            /* Vertically centers everything in the bar */
    padding: 30px 50px;             /* Spacing inside the bar (Top/Bottom, Left/Right) */
    position: fixed;                /* Keeps the menu stuck to the top as you scroll */
    top: 0;
    width: 100%;
    z-index: 9999;                  /* High number ensures it stays on top of images */
    background-color: rgba(255, 255, 255, 0.98); /* Semi-transparent white */
    animation: pageFadeIn 0.8s ease-in-out forwards; /* FIX: Smooth fade in on page load */
}

/* Your name/Logo text in the top left */
.logo {
    font-family: 'Raitor-Regular', sans-serif;
    font-size: 1.5rem;   /* Size of your name */
    letter-spacing: 4px; /* Space between the letters */
    text-decoration: none;
    color: #979797;      /* Grey color for the logo */
}

/* The group of links on the right */
.nav-links {
    display: flex;
    gap: 40px; /* Space between each menu item */
}

/* The style for individual links (Home, Portfolio, etc.) */
.nav-links a {
    text-decoration: none;
    color: #777777;      /* Muted grey for inactive links */
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: color 0.3s ease; /* Makes the color change smooth when hovering */
}

/* Hover state and Active page state: Turns text black */
.nav-links a:hover, 
.nav-links a.active {
    color: #111111;
}

/* ==========================================================================
   3. DROPDOWN MENU (Portfolio Sub-links)
   The "Naked & Bold" style menu that appears when you hover over Portfolio.
   ========================================================================== */

/* The parent container for the dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* The little arrow next to "Portfolio" */
.dropbtn::after {
    content: ' ▾';
    font-size: 0.7rem;
    vertical-align: middle;
    opacity: 0.5;
}

/* The hidden box containing Landscape / Documentary links */
.dropdown-content {
    display: none;        /* Hidden by default */
    position: absolute;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.98); /* FIX: Solid white background ensures text is readable over images */
    z-index: 10000;
    top: 100%;            /* Positions it directly under the word Portfolio */
    left: -15px;          /* Shifts menu slightly to align text nicely */
    padding: 10px 15px;   /* Adds breathing room around the links */
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Very subtle shadow to separate from background */
}

/* Styling for sub-links inside the dropdown */
.dropdown-content a {
    color: #777777;
    padding: 10px 0;      /* Vertical spacing between sub-links */
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    letter-spacing: 1px;
    font-weight: 400;     /* Normal weight when just looking */
    transition: color 0.2s ease;
}

/* Interaction: Turns black and Bolds the text when you hover over sub-links */
.dropdown-content a:hover {
    color: #111111;
    font-weight: 700;
}

/* The trigger: shows the content when the mouse is over the parent .dropdown */
.dropdown:hover .dropdown-content {
    display: block;
}

/* ==========================================================================
   4. HOME HERO
   The main large image on your landing page.
   ========================================================================== */

/* The full-screen container for the home image */
.home-hero {
    height: 100vh;
    height: 100dvh;          /* FIX: Uses dynamic viewport height */
    display: flex;
    justify-content: center; /* Centers image horizontally */
    align-items: center;     /* Centers image vertically */
    padding-top: 80px;       /* Pushes image down to clear the fixed navbar */
    box-sizing: border-box;  /* FIX: Prevents padding from breaking the 100vh limit */
    animation: pageFadeIn 0.8s ease-in-out forwards; /* FIX: Smooth fade in on page load */
}

/* The copyright text at the bottom of the home page */
.home-copyright {
    position: absolute;
    bottom: 30px; 
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem; 
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888888; 
}

/* The wrapper that holds the image */
.hero-image-wrapper {
    position: relative;
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 80vw;         /* Takes up 80% of the screen width */
    max-width: 1400px;   /* Stops it from getting too huge on 4k monitors */
}

/* The actual image settings */
.image-sharp {
    position: relative;
    z-index: 2;
    max-height: 90vh;    /* Won't grow taller than 90% of the screen height */
    width: auto;
    max-width: 100%;
    display: block;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* Soft gallery shadow */
    backface-visibility: hidden;
    transform: translateZ(0); /* Performance tweak for smooth rendering */
}

/* ==========================================================================
   5. GALLERY MASONRY
   The grid of thumbnails on your main gallery pages.
   ========================================================================== */

/* The section wrapping the grid */
.gallery-section {
    padding: 120px 20px 20px; /* Top padding to clear navbar, 20px on sides */
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;           /* Centers the whole gallery section */
    animation: pageFadeIn 0.8s ease-in-out forwards; /* FIX: Smooth fade in on page load */
}

/* The grid itself */
.gallery-grid {
    column-count: 3; /* Change this number to have more or fewer columns */
    column-gap: 15px; /* Horizontal space between columns */
    width: 100%;
}

/* The container for each individual photo */
.thumbnail {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px; /* Vertical space between images in a column */
    cursor: pointer;     /* Changes cursor to a hand to show it's clickable */
    overflow: hidden;
}

/* The actual images inside the grid */
.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Zoom effect when hovering over a thumbnail */
.thumbnail:hover img {
    transform: scale(1.05); /* Zooms in by 5% */
}

/* ==========================================================================
   6. LIGHTBOX
   The pop-up viewer when clicking thumbnails in the masonry grid.
   ========================================================================== */

/* The main hidden overlay */
.lightbox {
    display: none;       /* Hidden until JavaScript triggers it */
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;      /* Sits above everything else on the site */
    justify-content: center;
    align-items: center;
}

/* The blurred backdrop behind the photo */
.lightbox-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(4px);                  /* Frosting effect */
    z-index: 1;
}

/* The 'X' button in the corner */
.close-btn {
    position: absolute;
    top: 30px; right: 50px;
    color: #111111;
    font-size: 50px;
    cursor: pointer;
    z-index: 10;
}

/* ==========================================================================
   7. SLIDER GALLERY (Kyle McDougall Style)
   The two-slot grid system for smooth image transitions.
   ========================================================================== */

/* Outer container for the slider */
.slider-container {
    position: fixed; 
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* Mobile/Tablet friendly height */
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center; 
    padding-top: 100px; /* Increased to guarantee navbar clearance */
    box-sizing: border-box; /* FIX: Prevents the padding from pushing the container height out of bounds */
    background-color: #ffffff;
    z-index: 10;
}

/* Wrapper that keeps content aligned and centered */
.slider-wrapper {
    position: relative;
    width: 100%; 
    height: 100%; /* FIX: Forces wrapper to stay strictly within the padded safe zone */
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: pageFadeIn 0.8s ease-in-out forwards; /* FIX: Smooth fade in on page load */
}

/* The core grid that stacks the images and the caption */
.slide-content {
    display: grid;
    grid-template-areas: 
        "photo"
        "text";
    justify-items: center;
    align-items: center;
    width: 100%;
    height: auto; /* FIX: Removes the forced 80vh minimum that was stretching the box */
    row-gap: 20px; /* FIX: Hard grid gap instead of relying on text margins */
}

/* The images inside the slider */
.slider-img {
    grid-area: photo;     /* Assigns image to the "photo" slot in the grid */
    max-height: calc(100dvh - 220px); /* FIX: Mathematically guarantees the image cannot hit the top nav or bottom edge */
    max-width: 90vw;
    width: auto;
    height: auto;
    object-fit: contain;  /* Guarantees the aspect ratio stays perfectly intact inside bounds */
    transition: opacity 0.5s ease-in-out; /* The fade speed when changing photos */
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0); 
}

/* The text description underneath the slider photo */
.caption {
    grid-area: text;      /* Assigns text to the "text" slot in the grid */
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777777;       /* Soft grey color */
    z-index: 10;
}

/* Navigation Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.2); /* Very light grey by default */
    transition: color 0.3s, transform 0.2s;
    padding: 20px;
}

/* Arrows turn darker and get slightly bigger when hovered */
.arrow:hover {
    color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.left-arrow { left: 2vw; }  /* Positions left arrow 2% from left edge */
.right-arrow { right: 2vw; } /* Positions right arrow 2% from right edge */

/* ==========================================================================
   8. CONTACT PAGE
   The form and social link area.
   ========================================================================== */

/* Main centered container for the contact form */
.contact-container {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;     /* Horizontal centering */
    padding-top: 100px;
    background-color: #ffffff;
    animation: pageFadeIn 0.8s ease-in-out forwards; /* FIX: Smooth fade in on page load */
}

/* The text section above the form */
.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h2 {
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.contact-header p {
    font-size: 0.75rem;
    color: #888;
    letter-spacing: 1px;
}

/* The actual form container */
.contact-form {
    width: 100%;
    max-width: 500px;    /* Keeps the form from getting too wide on desktop */
    display: flex;
    flex-direction: column;
    gap: 40px;           /* Vertical space between inputs */
}

/* Styling for the Name, Email, and Message inputs */
.form-group input, .form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #eee; /* Clean single-line look */
    padding: 15px 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #111;
    outline: none;       /* Removes the blue browser outline */
    transition: border-color 0.3s ease;
}

/* When you click into an input, the bottom line turns black */
.form-group input:focus, .form-group textarea:focus {
    border-bottom: 1px solid #111;
}

/* The Send button */
.submit-btn {
    background: none;
    border: 1px solid #111;
    padding: 18px 40px;
    font-size: 0.7rem;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s ease;
}

/* Button color flip on hover */
.submit-btn:hover {
    background-color: #111;
    color: #fff;
}

/* Footer section for Instagram/Email links */
.social-footer {
    margin-top: 80px;
}

.social-links {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.social-links a {
    text-decoration: none;
    color: #888;
    font-size: 0.7rem;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #111;
    font-weight: 700;
}

/* ==========================================================================
   10. ABOUT PAGE
   Side-by-side layout for portrait and typography.
   ========================================================================== */

.about-container {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 50px 50px; /* Pads the top so it sits neatly below the navbar */
    background-color: #ffffff;
    animation: pageFadeIn 0.8s ease-in-out forwards;
    box-sizing: border-box;
}

.about-content {
    display: flex;
    flex-direction: row-reverse; /* CHANGED: Swaps visual order, putting image on right, text on left on desktop/tablet */
    gap: 80px; /* Space between photo and text */
    max-width: 1300px; /* Keeps the text from getting too long/hard to read on 4k monitors */
    width: 100%;
    align-items: center; /* Ensures the image and text blocks are vertically aligned with each other */
}

.about-image {
    flex: 1; /* Takes up 1 part of the flexible space */
    max-width: 450px;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* Matches your gallery shadow */
}

.about-text {
    flex: 1; /* Takes up the remaining 1 part of the flexible space */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-text h2 {
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 10px;
}

.about-text p {
    font-size: 0.85rem;
    line-height: 1.8; /* Generous line height for editorial feel */
    color: #555;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   9. MOBILE RESPONSIVENESS
   Adjustments specifically for screens smaller than 768px (Tablets & Phones).
   ========================================================================== */

/* iPad / Tablet Specific Fixes */
@media (max-width: 1024px) {
    /* Home Page iPad Adjustments */
    .home-hero {
        padding-top: 100px !important;
    }
    .image-sharp {
        max-height: calc(100dvh - 200px) !important; /* Prevents iPad cropping */
        max-width: 95vw !important;
    }

    /* Slider iPad Adjustments */
    .slider-container {
        padding-top: 100px !important; /* Safely clear the navbar */
        height: 100vh;
        height: 100dvh;     
        align-items: center !important; 
    }

    .slide-content {
        min-height: auto !important; 
        row-gap: 35px !important; /* Forces a hard space between the photo and caption */
    }

    .slider-img {
        /* Mathematically prevents the image from touching the navbar or bottom edge */
        max-height: calc(100dvh - 180px) !important;   
        max-width: 95vw !important;
    }

    /* About Page iPad Adjustments */
    .about-container {
        padding: 120px 40px 50px !important;
    }
    .about-content {
        gap: 50px !important; /* Slightly reduces the space between photo and text for tablet */
    }
}

/* --------------------------------------------------------------------------
   iPad SPECIFIC TARGETING (Covers all iPads up to iPad Pro 12.9" Landscape)
   This forces the home copyright text to hide on touch-screen tablets, avoiding desktop monitors.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    .home-copyright {
        display: none !important;
    }
}

/* Phones */
@media (max-width: 768px) {
    /* Stack Navbar elements vertically */
    .navbar {
        padding: 15px 20px; 
        flex-direction: column;
        gap: 10px;
    }

    /* Home Page Phone Adjustments */
    .home-hero {
        padding-top: 70px !important; /* Pulled much higher up to center it visually */
    }
    .image-sharp {
        max-height: calc(100dvh - 180px) !important; 
        max-width: 95vw !important;
    }

    /* Add more space for stacked nav */
    .contact-container {
        padding-top: 130px;
    }

    /* Make form wider on tiny screens */
    .contact-form {
        width: 85%;
    }

    /* Adjust the slider layout for mobile thumbs and height */
    .slider-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 130px !important; 
        box-sizing: border-box !important;
    }

    .slide-content {
        position: relative !important; /* Anchor for absolute fading images */
        row-gap: 25px !important; /* Forces breathing room for the mobile caption */
    }

    /* Limit image height so it fits on a phone screen with the caption */
    .slider-img {
        max-height: calc(100dvh - 200px) !important; 
        max-width: 95vw !important;
    }

    /* FIX: Mobile Caption Bug - Removes hidden image from layout flow so caption hugs the active image tightly */
    .slider-img.mobile-inactive {
        position: absolute !important;
        grid-area: photo;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) translateZ(0) !important;
        z-index: 1; /* Keep underneath the fading-in active image */
    }

    /* Hide arrows on mobile because users will swipe instead */
    .arrow {
        display: none !important; 
    }

    /* Shrink the caption slightly */
    .caption {
        font-size: 0.65rem;
    }

    /* Simplify the dropdown for mobile view */
    .dropdown-content {
        position: static; 
        padding-top: 5px;
        text-align: center;
        background-color: transparent; /* Removes white box on mobile since it stacks vertically */
        box-shadow: none;
    }

    /* About Page Phone Adjustments */
    .about-container {
        padding: 130px 20px 50px !important; /* Extra top padding to clear mobile stacked nav */
        height: auto !important;
    }
    .about-content {
        flex-direction: column !important; /* Forces the text to drop UNDER the portrait on phones */
        gap: 40px !important;
        text-align: center; /* Centers the text alignment for a cleaner mobile read */
    }
    .about-image {
        max-width: 85vw !important; /* Prevents the portrait from hitting the very edge of the glass */
    }
}