/* global reset for consistent sizing */
* {
    /* universal selector for all elements */
    margin: 0;
    /* remove default margins */
    padding: 0;
    /* remove default padding */
    box-sizing: border-box;
    /* include border/padding in width/height */
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

/* body base colors and line spacing */
body {
    /* body element styles */
    background: #0f172a;
    /* dark blue background */
    color: white;
    /* white text */
    line-height: 1.6;
    /* improved readability */
    display: flex;
    /* flex layout */
    flex-direction: column;
    /* vertical stacking */
    min-height: 100vh;
    /* full viewport height */
}

/* fixed header at top, full width */
header {
    /* header container */
    position: fixed;
    /* fixed position while scrolling */
    top: 0;
    /* top edge of viewport */
    left: 0;
    /* left edge of viewport */
    width: 100%;
    /* full viewport width */
    background: #020617;
    /* dark header background */
    padding: 15px 50px;
    /* internal spacing */
    z-index: 1000;
    /* on top of other elements */
}

/* main content area with top padding for fixed header */
main {
    /* main content wrapper */
    flex: 1;
    /* grow to fill available space */
    margin-top: 120px;
    /* space below fixed header */
}

/* footer at bottom of page */
footer {
    /* footer container */
    background: #020617;
    /* dark footer background */
    padding: 40px 50px;
    /* internal spacing */
    text-align: left;
    /* left align content */
    border-top: 1px solid #2e3440;
    /* subtle top border */
    margin-top: auto;
    /* push to bottom */
}

.footer-content {
    /* footer layout wrapper */
    display: flex;
    /* horizontal layout */
    justify-content: space-between;
    /* separate content areas */
    gap: 40px;
    /* space between columns */
    flex-wrap: wrap;
    /* wrap on small screens */
    max-width: 1200px;
    /* limit width */
    margin: 0 auto;
    /* center in footer */
}

.footer-about,
.footer-contact {
    /* footer content columns */
    flex: 1 1 280px;
    /* responsive widths */
}

.footer-about h2,
.footer-contact strong {
    /* accent text */
    color: #38bdf8;
    /* light blue */
}

.footer-contact a {
    /* social link style */
    color: #38bdf8;
    /* blue link */
    text-decoration: none;
}

.footer-contact a:hover {
    /* hover underline for links */
    text-decoration: underline;
}

.footer-contact p,
.footer-about p {
    /* footer paragraph spacing */
    color: #cbd5e1;
    /* lighter text */
    margin-bottom: 12px;
}

.footer-copy {
    /* copyright line */
    margin-top: 25px;
    /* spacing above copyright */
    color: #94a3b8;
    /* muted text */
    text-align: center;
}

/* navigation container: flex layout space-between */
nav {
    /* navigation wrapper */
    display: flex;
    /* horizontal flex container */
    justify-content: space-between;
    /* separate items */
    align-items: center;
    /* vertical centering */
    width: 100%;
    /* full width inside header */
}

/* checkbox state toggler hidden by default (desktop) */
.nav-toggle {
    /* hidden input for mobile menu toggle */
    display: none;
    /* not visible on desktop */
}

/* hamburger icon label hidden desktop; shown mobile */
.nav-toggle-label {
    /* label for checkbox toggle */
    display: none;
    /* hidden on desktop */
    font-size: 1.8rem;
    /* icon size */
    color: white;
    /* icon color */
    cursor: pointer;
    /* pointer cursor */
    user-select: none;
    /* no text selection */
}

/* desktop nav links: horizontal, right-aligned */
.nav-links {
    /* nav list style */
    display: flex;
    /* inline horizontal layout */
    list-style: none;
    /* no bullets */
    margin-left: auto;
    /* push to right */
}

/* spacing between menu items */
.nav-links li {
    /* nav list item style */
    margin-left: 20px;
    /* gap between items */
}

/* link styles */
nav a {
    /* anchor tags in nav */
    color: white;
    /* text color */
    text-decoration: none;
    /* no underline */
}

nav a:hover {
    /* hover state for links */
    color: #38bdf8;
    /* highlight color */
}

/* responsive styles for screens <= 768px */
@media (max-width: 768px) {

    /* smaller padding on mobile */
    header {
        /* header on mobile */
        padding: 12px 20px;
        /* reduced padding */
    }

    /* show hamburger icon */
    .nav-toggle-label {
        /* show label on mobile */
        display: block;
        /* visible */
    }

    /* mobile menu hidden by default; vertical panel */
    .nav-links {
        /* menu panel on mobile */
        position: absolute;
        /* absolute positioning */
        top: 100%;
        /* just below header */
        right: 0;
        /* align right */
        width: 200px;
        /* fixed width */
        background: #020617;
        /* same background color */
        flex-direction: column;
        /* vertical list */
        align-items: flex-start;
        /* left align items */
        padding: 10px 0;
        /* vertical padding */
        border: 1px solid #2e3440;
        /* subtle border */
        display: none;
        /* hide by default */
    }

    /* full-width list items for touch targets */
    .nav-links li {
        /* mobile list item */
        margin: 0;
        /* remove horizontal gaps */
        width: 100%;
        /* fill container */
    }

    .nav-links li a {
        /* mobile links in panel */
        display: block;
        /* full width clickable area */
        width: 100%;
        /* fill container */
        padding: 10px 20px;
        /* comfortable touch target */
    }

    /* show menu when checkbox is checked */
    .nav-toggle:checked+.nav-toggle-label+.nav-links {
        /* sibling selector chain */
        display: flex;
        /* make menu visible */
    }
}

/* content section styling */
.content-section {
    /* individual content section */
    padding: 40px 50px;
    /* internal spacing */
    scroll-margin-top: 100px;
    /* offset for fixed header when navigating */
}

/* home section centered on page */
#home {
    /* full viewport height */
    display: flex;
    /* flex layout */
    flex-direction: column;
    /* vertical stacking */
    justify-content: center;
    /* center vertically */
    align-items: center;
    /* center horizontally */
    padding: 0;
    /* remove padding for centering */
    line-height: 1.4;
    /* tighter line spacing for headings */
    margin: 0 auto;
    /* center container */
    width: 80%;
    /* limit width for readability */
    max-width: 700px;
    font-size: 16px;
}

.content-section h2 {
    /* section headings */
    font-size: 2em;
    /* large heading size */
    margin-bottom: 20px;
    /* space below heading */
    color: #38bdf8;
    /* light blue color */
}

.content-section p {
    /* section paragraphs */
    font-size: 1.1em;
    /* readable size */
    line-height: 1.8;
    /* good line spacing */
    margin-bottom: 15px;
    /* space between paragraphs */
}

/* image gallery container */
.gallery {
    /* gallery grid wrapper */
    display: grid;
    /* CSS grid layout */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* responsive columns */
    gap: 15px;
    /* space between images */
    margin-top: 20px;
    /* space above gallery */
}

/* individual gallery images */
.gallery-img {
    /* gallery images */
    width: 100%;
    /* full width of grid cell */
    height: 300px;
    /* taller images */
    object-fit: cover;
    /* maintain aspect ratio */
    border-radius: 4px;
    /* subtle rounded corners */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    /* smooth effects */
    cursor: pointer;
    /* pointer on hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* subtle shadow */
}

.gallery-img:hover {
    /* hover effect for images */
    transform: scale(1.02);
    /* subtle zoom on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* enhanced shadow */
}

/* responsive gallery for mobile */
@media (max-width: 768px) {
    /* mobile adjustments */

    .content-section {
        /* mobile section padding */
        padding: 30px 20px;
        /* reduced padding */
    }

    .gallery {
        /* mobile gallery grid */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        /* smaller columns on mobile */
        gap: 10px;
        /* reduced gap */
    }

    .gallery-img {
        /* mobile image height */
        height: 150px;
        /* smaller height */
    }
}

/* Lightbox modal styles */
.lightbox-modal {
    /* fullscreen modal overlay */
    display: none;
    /* hidden by default */
    position: fixed;
    /* fixed to viewport */
    top: 0;
    /* top edge */
    left: 0;
    /* left edge */
    width: 100%;
    /* full width */
    height: 100%;
    /* full height */
    background-color: rgba(0, 0, 0, 0.95);
    /* dark semi-transparent background */
    z-index: 2000;
    /* on top of all elements */
    justify-content: center;
    /* center horizontally */
    align-items: center;
    /* center vertically */
    flex-direction: column;
    /* stack content vertically */
    touch-action: pan-y;
    /* keep vertical gestures natural while allowing horizontal swipe navigation */
}

.lightbox-image {
    /* modal image */
    max-width: 90%;
    /* max width of viewport */
    max-height: 80vh;
    /* max height of viewport */
    object-fit: contain;
    /* preserve aspect ratio */
    animation: zoomIn 0.3s ease;
    /* smooth zoom animation */
    touch-action: pan-y;
    /* allow swipe navigation without fighting the browser */
}

@keyframes zoomIn {

    /* zoom in animation */
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    /* close button */
    position: absolute;
    /* absolute positioning */
    top: 20px;
    /* 20px from top */
    right: 30px;
    /* 30px from right */
    font-size: 40px;
    /* large font size */
    color: white;
    /* white text */
    cursor: pointer;
    /* pointer cursor */
    user-select: none;
    /* no text selection */
    transition: color 0.3s ease;
    /* smooth color transition */
}

.lightbox-close:hover {
    /* hover state */
    color: #ccc;
    /* lighter gray on hover */
}

.lightbox-nav {
    /* navigation button container */
    position: absolute;
    /* absolute positioning */
    width: 100%;
    /* full width */
    display: flex;
    /* flex layout */
    justify-content: space-between;
    /* space between buttons */
    padding: 0 20px;
    /* horizontal padding */
    pointer-events: none;
    /* don't capture events */
}

.lightbox-prev,
.lightbox-next {
    /* navigation buttons */
    position: absolute;
    /* absolute positioning */
    background-color: rgba(255, 255, 255, 0.3);
    /* semi-transparent white */
    border: none;
    /* no border */
    color: white;
    /* white text */
    font-size: 30px;
    /* large font */
    padding: 10px 15px;
    /* button padding */
    cursor: pointer;
    /* pointer cursor */
    border-radius: 4px;
    /* slight rounding */
    transition: all 0.3s ease;
    /* smooth transitions */
    pointer-events: auto;
    /* capture events */
}

.lightbox-prev {
    /* previous button */
    left: 20px;
    /* 20px from left */
    top: 50%;
    /* vertically centered */
    transform: translateY(-50%);
    /* center vertically */
}

.lightbox-next {
    /* next button */
    right: 20px;
    /* 20px from right */
    top: 50%;
    /* vertically centered */
    transform: translateY(-50%);
    /* center vertically */
}

.lightbox-prev:hover,
.lightbox-next:hover {
    /* hover state */
    background-color: rgba(255, 255, 255, 0.6);
    /* more opaque on hover */
}

.lightbox-counter {
    /* image counter display */
    position: absolute;
    /* absolute positioning */
    bottom: 20px;
    /* 20px from bottom */
    left: 50%;
    /* center horizontally */
    transform: translateX(-50%);
    /* center adjustment */
    color: white;
    /* white text */
    font-size: 16px;
    /* readable size */
    background-color: rgba(0, 0, 0, 0.5);
    /* semi-transparent background */
    padding: 8px 16px;
    /* internal padding */
    border-radius: 4px;
    /* slight rounding */
}

/* Mobile lightbox styles */
@media (max-width: 768px) {

    .lightbox-prev,
    .lightbox-next {
        /* smaller buttons on mobile */
        font-size: 24px;
        /* smaller font */
        padding: 8px 12px;
        /* smaller padding */
    }

    .lightbox-close {
        /* adjust close button on mobile */
        font-size: 32px;
        /* smaller size */
        right: 15px;
        /* closer to edge */
        top: 15px;
        /* closer to top */
    }

    .lightbox-image {
        /* larger image area on mobile */
        max-width: 95%;
        /* wider on mobile */
        max-height: 85vh;
        /* taller on mobile */
    }
}