/* General Styles & Font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    font-size: 0.95em;
    background-color: var(--bg-color);
    color: var(--text-color);
}

body h1,
h2,
h3 {
    font-family: 'Bebas Neue', sans-serif;
}

main {
    max-width: 85%;
    /* Adjust max width as needed */
    margin: 20px auto;
    padding: 0 15px;
}

/* Navigation Styles */
/* Basic Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* -----------------------
   Root (Variable Definitions)
   ----------------------- */
:root {
    /* Cyberpunk Glow */
    --bg-color: hsl(220, 30%, 15%);
    /* Deep blue */
    --modal-color: hsl(280, 30%, 15%);
    /* Deep violet */
    --text-color: hsl(0, 0%, 85%);
    /* Light grey, legible ON DARK */
    --label-color: hsl(50, 70%, 70%);
    /* Light gold, legible on primary & accent */
    --primary-color: hsl(210, 15%, 28%);
    /* Medium blue (muted) */
    --accent-color: hsl(35, 90%, 50%);
    /* Intense orange/yellow, stands out */

    --secondary-color: hsl(210, 20%, 60%);
    /* Cool Lavender Not used*/
    --accent2-color: hsl(10, 70%, 60%);
    /* Soft Salmon Not Used*/

    /* Green (success) */
}

/* -----------------------
  Original Palette
   ----------------------- */
/* --bg-color: hsl(210, 35%, 75%);
   --modal-color:hsl(257, 35%, 75%);
   --text-color: hsl(214, 39%, 20%);
   --label-color: hsl(50,50%,80%);
   --primary-color: hsl(210, 12%, 40%);
   --secondary-color: hsl(270, 12%, 40%);
   --accent3-color: hsl(41, 60%, 53%);
   --accent-color: hsl(32, 98%, 43%);

   ----------------
Aqua Palette
    --bg-color: hsl(180, 50%, 70%);  Light Aqua 
    --modal-color:hsl(240, 50%, 70%);  Light Periwinkle 
    --text-color: hsl(210, 40%, 20%);  Dark Blue 
    --label-color: hsl(90, 60%, 85%); Pale Mint 
    --primary-color: hsl(180, 20%, 40%);
    --secondary-color: hsl(270, 20%, 40%); Cool Lavender 
    --accent-color: hsl(10, 70%, 60%);  Soft Salmon 
    --accent2-color: hsl(340, 80%, 55%);  Dusty Rose 


/* Header and Navbar */


.site-brand {
    /* Optional: Add flex/grid properties here if needed for alignment within the nav */
    /* For example, if the nav is a flex container */
    /* display: flex; */
    /* flex-direction: column; */
    justify-content: center;
    align-items: flex-start;
    /* Or center, depending on desired alignment */
    font-size: 1.4em;
    line-height: 1.6;
    background-color: var(--bg-color);
    color: var(--text-color);
}


.site-brand h1 {
    /* Your existing h1 styles... */
    font-family: 'Permanent Marker', sans-serif;
    font-size: 1.2em;
    color: var(--accent-color);
    margin-bottom: 0;
    /* Remove default bottom margin if it creates too much space */
}

/* Target the link specifically within the h2 in the site-brand div */
.site-brand h1 a {
    text-decoration: none;
    /* Removes the underline */
    color: inherit;
    /* Makes the link inherit the color of its parent (the h2) */
}

/* Optional: Ensure no change on hover, active, or visited states */
.site-brand h1 a:hover,
.site-brand h1 a:active,
.site-brand h1 a:visited {
    text-decoration: none;
    /* Keep underline off */
    color: inherit;
    /* Keep color inherited */
}

.site-brand .tagline {
    display: block;
    /* Makes the span behave like a block element, putting it on a new line */
    font-size: 0.72em;
    /* Adjust this value (e.g., 0.7em, 14px) to make the text smaller */
    margin-top: 0;
    /* Adjust top margin if needed */
    /* Optional: Change color */
    color: var(--secondary-color);
}



.site-header {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2em;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    min-height: 70px;
    position: relative;
    /* Needed for submenu positioning on desktop */
}

/* Logo */
.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-logo {
    width: 218px;
    height: auto;
    display: block;
}

/* Navigation Menu - Desktop */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-menu li {
    margin-left: 25px;
    position: relative;
    /* For submenu positioning */
}

.nav-menu a {
    color: var(--text-color);
    text-decoration: none;
    padding: 8px 12px;
    display: block;
    transition: background-color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus {
    /* Added focus for accessibility */
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Submenu - Desktop */
.submenu {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    list-style: none;
    min-width: 160px;
    padding: 10px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 4px 4px;
    z-index: 10;
}

.submenu li {
    margin-left: 0;
}

.submenu a {
    padding: 8px 15px;
    white-space: nowrap;
}

/* Show submenu on hover/focus */
.dropdown:hover .submenu,
.dropdown:focus-within .submenu {
    /* Focus-within is great for keyboard nav */
    display: block;
}


/* Hamburger Button */
.nav-toggle-button {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    /* Position it similar to the label before */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    /* Ensure it's above overlay menu if one was used */
}

.nav-toggle-button .hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Hamburger Animation (X) - controlled by JS adding .is-active */
.nav-toggle-button.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle-button.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle-button.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Responsive Styles - Mobile */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 20px;
        /* Allow items to wrap if needed, though logo size might prevent it */
        flex-wrap: wrap;
    }

    .nav-toggle-button {
        display: block;
        /* Show the hamburger button */
    }

    .nav-menu {
        display: none;
        /* Hidden by default - JS controls visibility */
        flex-direction: column;
        width: 100%;
        /* Removed absolute positioning for push-down effect */
        background-color: var(--bg-color);
        padding: 0 0 0 50px;
        /* Order below navbar content if flex-wrap occurs */
        order: 1;
    }

    /* This class is added by JS to show the menu */
    .nav-menu.is-active {
        display: flex;
        /* Or block, flex is fine for column layout */
    }

    .nav-menu li {
        margin: 10px 0;
        width: 100%;
        text-align: left;
        position: static;
        /* Override desktop relative positioning */
    }

    .nav-menu a {
        padding: 10px 0 0 10px;
        width: 100%;
        /* Make links easier to tap */
    }


    /* Submenu on Mobile */
    .submenu {
        position: static;
        /* No absolute positioning */
        display: none;
        /* Hidden by default - JS controls visibility */
        background-color: var(--bg-color);
        box-shadow: none;
        padding: 10px 0 0 0;
        margin-top: 5px;
        width: 100%;
    }

    /* This class is added by JS to show submenu */
    .submenu.is-active {
        display: block;
    }

    /* Hide submenu on desktop hover/focus rules when on mobile */
    .dropdown:hover .submenu,
    .dropdown:focus-within .submenu {
        display: none;
        /* Prevent desktop hover/focus showing menu */
    }

    /* Ensure mobile active state takes precedence */
    .dropdown .submenu.is-active {
        display: block !important;
        /* Use !important carefully, but needed here to override hover */
    }


    .submenu a {
        padding: 8px 0;
        font-size: 1em;
        color: var(--text-color);
    }
}

/* --- Social Icon Styling --- */

/* Style the list items containing social icons */
/* Adjust margin/padding if needed to match other menu items or create space between icons */
.nav-menu li .social-icon-link {
    display: inline-block; /* Or block, depending on your nav-menu's main display (flex/grid) */
    padding: 0 8px; /* Adjust this padding to control space between icons */
    /* Ensure text-decoration, color are reset if inherited differently */
    text-decoration: none;
    color: inherit; /* Icons don't have text color, but good practice */
}

/* Style the icon image itself */
.nav-menu li .social-icon-img {
    display: block; /* Makes width and height behave predictably */
    width: 36px;   /* Set the desired size for your icons */
    height: 36px;  /* Set the desired size for your icons (should match width for square icons) */
    align-items: stretch; /* Helps align if the link is inline-flex/block */
    max-width: 100%; /* Prevent image from overflowing its container */
    height: auto;  /* Maintain aspect ratio if width is set */
}

/* Optional: Add a subtle hover effect */
.nav-menu li .social-icon-link:hover .social-icon-img {
    opacity: 0.8; /* Slightly dim the icon on hover */
    transition: opacity 0.2s ease-in-out; /* Smooth transition */
}

/* For responsive design, you might want to adjust icon size on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .nav-menu li .social-icon-link {
         padding: 0 10px; /* Slightly less padding on smaller screens */
    }

    .nav-menu li .social-icon-img {
        width: 27px; /* Smaller icons on mobile */
        height: 27px;
    }
}


/* Content Sections */
.content-section {
    background-color: var(--bg-color);
    padding: 40px 20px 20px 20px;
}

.content-section h2 {
    margin-bottom: 10px;
    text-align: left;
    color: var(--secondary-color);
    font-size: 2em;
}

.content-section a {
    color: var(--accent-color);
}

/* SVG Separator Styling */
.wave-separator {
    display: block;
    width: 100%;
    height: 60px;
    margin-top: -1px;
    margin-bottom: -1px;
    background-color: var(--bg-color);
}

/* Filter Container */
#filter-container {
    display: flex;
    flex-wrap: wrap;
    /* Allow buttons to wrap on smaller screens */
    gap: 5px;
    padding: 10px;
    margin-bottom: 30px;
    background-color: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.filter-button {
    padding: 4px 8px;
    border: 1px solid var(--bg-color);
    background-color: var(--primary-color);
    color: var(--label-color);
    border-radius: 9px;
    /* Rounded corners for buttons */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-size: 0.85rem;
    font-family: 'Lexend', sans-serif;
}

.filter-button:hover {
    background-color: var(--label-color);
    border-color: var(--label-color);
    color: var(--primary-color);
    border: 2px solid;
    padding: 3px 7px;
}

.filter-button.active {
    background-color: var(--accent-color);
    /* Active button color */
    color: var(--label-color);
    border-color: var(--label-color);
}

/* --- Masonry Layout Solution 1: CSS Grid --- */
/* --- UNCOMMENT this section and COMMENT OUT the Masonry.js section below if using CSS Grid --- */

/* #gallery-container { */
/* display: grid;  */
/* grid-template-columns: repeat(3, 1fr);     */
/*-- choose 3-4 columns on desktop --*/
/* gap: 10px;     */
/*-- Space between items --*/
/* width: 100%; */
/* } */

/* .gallery-item { */
/* width: 100%;  */
/*-- Make item fill the grid cell --*/
/* overflow: visible;  */
/*-- Contain hover effect and info button --*/
/* position: relative;  */
/*-- For positioning info button --*/
/* break-inside: avoid;  */
/*-- Helps prevent items breaking across columns if using column layout later --*/
/*-- The following might help grid fill better but can reorder items visually: --*/
/* grid-row: auto / span 1;  */
/* align-self: start;  */
/* } */

/* --- End of CSS Grid Solution --- */


/* --- Masonry Layout Solution 2: Using Masonry.js --- */
/* --- UNCOMMENT this section and COMMENT OUT the CSS Grid section above if using Masonry.js --- */
/* --- Make sure to include masonry.pkgd.min.js in index.html --- */

#gallery-container {
    /* Masonry.js will apply styles, but you might need a fallback or basic container styles */
    position: static;
    /*-- Often needed for absolute positioning of items --*/
    width: 100%;
}

.gallery-item {
    /* Width is often set via JS or a sizer element for Masonry.js */
    /* Example: If you have 4 columns and 15px gap */
    width: calc(25% - 30px);
    /* Approximation: (100% / 4) - (gutter * (num_cols - 1) / num_cols) */
    margin-bottom: 15px;
    /*-- Vertical gap --*/
    overflow: visible;
    /*-- Contain hover effect and info button --*/
    position: relative;
    /*-- For positioning info button --*/
}

/* --- End of Masonry.js Solution --- */


/* Common Gallery Item Styles (Used by both solutions) */
.gallery-item img {
    display: block;
    /* Remove extra space below image */
    width: 100%;
    /* Make image responsive within its container */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 17px;
    /* Rounded corners for images */
    transition: transform 0.2s ease-out;
    cursor: pointer;
    /* Indicate image is clickable (if video exists) */
}

.gallery-item:hover img {
    transform: scale(1.04);
    /* Slight zoom on hover */
}

/* Info Button Overlay */
.info-button {
    position: absolute;
    top: 5px;
    left: 94%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.4);
    /* Semi-transparent white */
    color: var(--bg-color);
    /* Dark text for contrast */
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    /* Circular */
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 10;
    /* Ensure it's above the image */
    line-height: 1;
    /* Prevent extra vertical space */
}

.info-button:hover {
    background-color: rgba(255, 255, 255, 1);
    /* Opaque white on hover */
    color: var(--bg-color);
}


/* Modal Styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1000;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7);
    /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal.modal-active {
    display: flex;
    /* Use flexbox for centering when active */
}

.modal-content {
    font-size: 0.95em;
    background-color: var(--modal-color);
    margin: auto;
    /* Centered */
    padding: 20px 30px 20px 30px;
    /* border: var(--accent-color);
    border-width: 10px; */
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    /* Limit modal height */
    overflow-y: auto;
    /* Allow scrolling within modal if content overflows */
}

.modal-content h2 {
    font-family: permanent marker;
    font-size: 1.3em;
}

/* Video Modal Specifics */
.video-modal-content {
    width: 75%;
    /* Default wide screen */
    /* height: max-content; */
    max-width: 1375px;
    /* Max width for video */
    background-color: #000;
    /* Often better for video */
    padding: 0px 10px 0px 10px;
    /* More padding top for close button */
}

#videoPlayerContainer {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

#videoPlayerContainer.tall {
    padding-bottom: 177.78%;
    /* 9:16 aspect ratio */
}


#videoPlayerContainer iframe,
#videoPlayerContainer video,
#videoPlayerContainer smartvideo,
/* Add other potential video tags */
#videoPlayerContainer object,
#videoPlayerContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Remove border from iframes */
}

/* Info Modal Specifics */
.info-modal-content {
    width: 90%;
    max-width: 50%;
    /* Max 50% of screen width */
    min-width: 300px;
    /* Minimum width */
}

#infoModalText {
    margin-bottom: 20px;
}

#infoModalButtonContainer a {
    display: inline-block;
    padding: 5px 18px;
    background-color: var(--primary-color);
    color: var(--label-color);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#infoModalButtonContainer a:hover {
    background-color: var(--accent-color);
}

#infoModalButtonContainer2 a {
    display: inline-block;
    padding: 5px 18px;
    background-color: var(--primary-color);
    color: var(--label-color);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#infoModalButtonContainer2 a:hover {
    background-color: var(--accent-color);
}

/* Close Button */
.close-button {
    color: var(--text-color);
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1010;
    /* Above modal content */
}

.video-modal-content .close-button {
    color: #fff;
    /* White close button for dark video modal */
    top: 15px;
    right: 25px;
    font-size: 35px;
}


.close-button:hover,
.close-button:focus {
    color: var(--label-color);
    text-decoration: none;
}

/* Background dim/blur for info modal */
main.modal-open-background>*:not(.modal) {
    /* Target direct children of main except modals */
    filter: blur(5px);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    /* Prevent interaction with background */
}


main {
    transition: filter 0.3s ease, opacity 0.3s ease;
    /* Transition for the main element itself */
}



/* Filtering Helper Class */
.hidden {
    /* display: none !important; /* Use important if necessary to override grid/flex styles */
    /* For Masonry.js, removing/adding elements might be better, or setting scale(0) and opacity(0) */
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    /* was initially set to 0.8 with css grid*/
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
}


/* Responsive Adjustments */
@media (max-width: 992px) {

    /* --- Adjust CSS Grid for Tablets --- */
    #gallery-container.css-grid-layout {
        /* Add class via JS to target only if using grid */
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns */
    }

    /* --- Adjust Masonry.js Item Width for Tablets (Example) --- */
    .gallery-item.masonry-layout {
        /* Add class via JS to target only if using masonry.js */
        width: calc(33.33% - 2%);
        /* Adjust calculation */
    }

    .info-modal-content {
        max-width: 70%;
    }
}


@media (max-width: 768px) {

    /* --- Adjust CSS Grid for Mobile --- */
    /* #gallery-container.css-grid-layout { /* Add class via JS to target only if using grid */
    /*    grid-template-columns: 1fr; /* Single column */
    /*}
     /* --- Adjust Masonry.js Item Width for Mobile (Example) --- */
    .gallery-item.masonry-layout {
        /*-- Add class via JS to target only if using masonry.js --*/
        width: calc(50% -5%);
        /* Example: almost full width use calc(100% - 10px);*/
        /* width: 100%;*/
    }

    main {
        max-width: 100%;
        /* Adjust max width as needed */
        margin: 2px auto;
        padding: 10px;
    }

    .filter-button {
        padding: 3px 6px;
        font-size: 0.8rem;
    }

    #filter-container {
        padding: 10px;
    }

    /* Make video modal full screen on small devices */
    .video-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        padding: 40px 5px 5px 5px;
        /* Adjust padding */
    }

    .info-modal-content {
        max-width: 90%;
    }

    .close-button {
        font-size: 24px;
    }

    .video-modal-content .close-button {
        font-size: 50px;
        top: 10px;
        right: 15px;
    }

}


@media (max-width: 389px) {

    /* --- Adjust CSS Grid for Mobile --- */
    /* #gallery-container.css-grid-layout { /* Add class via JS to target only if using grid */
    /*    grid-template-columns: 1fr; /* Single column */
    /*}
     /* --- Adjust Masonry.js Item Width for Mobile (Example) --- */
    .gallery-item.masonry-layout {
        /*-- Add class via JS to target only if using masonry.js --*/
        /* width: calc(50% -5%); /* Example: almost full width use calc(100% - 10px);*/
        width: 100%;
    }

    main {
        max-width: 100%;
        /* Adjust max width as needed */
        margin: 2px auto;
        padding: 10px;
    }

    .filter-button {
        padding: 3px 6px;
        font-size: 0.8rem;
    }

    #filter-container {
        padding: 10px;
    }

    /* Make video modal full screen on small devices */
    .video-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        padding: 40px 5px 5px 5px;
        /* Adjust padding */
    }

    .info-modal-content {
        max-width: 90%;
    }

    .close-button {
        font-size: 24px;
    }

    .video-modal-content .close-button {
        font-size: 50px;
        top: 10px;
        right: 15px;
    }

}