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

@font-face {
    font-family: 'Orkney Light';
    src: url('../assets/fonts/Orkney\ Light.woff2') format('woff2'),
         url('../assets/fonts/Orkney\ Light.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Orkney Light', sans-serif;
    background-color: white;
    color: black;
    text-align: center;
}

/* === MANUAL CONTROL VARIABLES === */
:root {
    /* Title */
    --title-x: 70px;
    --title-y: 25px;
    --title-color: black;
    --title-size: 2.3rem;

    /* Subtitle */
    --subtitle-x: 225px;
    --subtitle-y: 35px;
    --subtitle-color: rgb(75, 74, 74);
    --subtitle-size: 1.5rem;

    /* Title Hover Controls */
    --title-hover-opacity: 0.8; /* Adjust opacity on hover */
    --title-hover-color: rgb(111, 0, 19); /* Change hover color */

    /* Navigational Buttons */
    --nav-y: 25px; /* Adjust this value to move it up or down */
    --nav-x: 50px; /* Adjust this value to move it left or right */
    --nav-gap: 29px; /* Controls spacing between navigation buttons */
    --nav-hover-color: rgb(111, 0, 19); /* Controls Hover Color */

    /* Contact & Instagram */
    --contact-x: 80px;
    --contact-y: 30px;
    --contact-color: black; /* Default text color */
    --contact-hover-color:rgb(111, 0, 19); /* Text color on hover */
    --contact-size: 1.3rem; /* Adjust button font size */

     /* External Button */
    --external-btn-x: 75px;  /* Distance from the right */
    --external-btn-y: 40px;  /* Distance from the bottom */
    --external-btn-color: black; /* Default text color */
    --external-btn-hover-color: rgb(111, 0, 19); /* Color on hover */
    --external-btn-size: 1.3rem; /* Font size */

    /* Instagram Icon Button - ER EKKI AÐ VIRKA ÞARF AÐ DEBUGGA 3/3/2025*/
    --instagram-x: 20px; /* Adjust Instagram icon position */
    --instagram-y: 20px;
  
    /* Gallery Page Controls */
    --gallery-active-color: rgb(129, 1, 22);   /* Color of the active gallery button */
    --lightbox-width: 60vw;        /* Lightbox image width */
    --lightbox-height: auto;       /* Keeps aspect ratio */
    --lightbox-y: 120px;           /* Move lightbox up/down */

    /* Front Page Image Loop Machine-box */
    --image-loop-width: 56vw;   /* Controls the front-page lightbox width */
    --image-loop-height: auto;  /* Keeps aspect ratio */
    --image-loop-x: 50%; /* Adjust horizontal position */
    --image-loop-y: 430px; /* Adjust vertical position */

    /* Chevron Controls */
     /* === CHEVRON CONTROL VARIABLES === */
     --chevron-size: 11rem; /* Adjust icon size */
     --chevron-color: white; /* Default color */
     --chevron-bg-color: rgba(57, 52, 52, 0.5); /* Default background */
     --chevron-hover-opacity: 1; /* Full visibility on hover */
     --chevron-hover-bg-color: rgba(187, 237, 70, 0.8); /* Custom hover background */
     --chevron-x: 10px;  /* Left-right positioning */
     --chevron-y: 50%;   /* Adjust vertical position */
     --chevron-border-radius: 50%; /* Fully round buttons */

    /* Gallery Lightbox */
    --gallery-lightbox-width: 60vw;  /* Controls the gallery lightbox width */
    --gallery-lightbox-height: auto; /* Keeps aspect ratio */
    --gallery-lightbox-x: 50%; /* Adjust horizontal position */
    --gallery-lightbox-y: 30px; /* Adjust vertical position */
 
     /* Image Buttons (Roman numerals) */

     --image-btn-size: 40px;        /* Button size */
     --image-btn-color: black;
     --image-btn-hover-color: rgb(180, 177, 177);
     --image-btn-text-color: rgb(7, 7, 7);
     --image-btn-border-radius: 5px;
     --image-btn-opacity: 0.8;
     --image-btn-spacing: 10px;     /* Spacing between buttons */
     --image-btn-bg-opacity: 0.0;   /* Background transparency */
     /* Image Button Positioning */
     --image-btn-margin-top: 95px;  /* Controls vertical spacing from the lightbox */
     --image-btn-margin-left: -570px; /* Controls left-right positioning */
    
/* === TABLET & MOBILE CONTROLS === */

    /* 🔹 Tablet Adjustments (601px–900px) */
    --title-x-tablet: 35px;
    --title-y-tablet: 25px;
    --title-color-tablet: rgb(0, 0, 0);
    --title-font-size-tablet: 2rem;

    --subtitle-x-tablet: 230px;
    --subtitle-y-tablet: 55px;
    --subtitle-color-tablet: rgb(75, 74, 74);
    --subtitle-font-size-tablet: 1.3rem;

    /* 🔹 Mobile Adjustments (≤600px) */
    --title-x-mobile: 10px;
    --title-y-mobile: 10px;
    --title-color-mobile: black;
    --title-font-size-mobile: 1.6rem;

    --subtitle-x-mobile: 165px;
    --subtitle-y-mobile: 35px;
    --subtitle-color-mobile: rgb(75, 74, 74);
    --subtitle-font-size-mobile: 1.1rem;

    /* === HAMBURGER MENU CONTROLS === */
    --hamburger-bg: rgba(250, 249, 249, 0.5); /* 🔹 Default button background */
    --hamburger-border: rgba(255, 255, 255, 0.7); /* 🔹 Default border */
    --hamburger-bar-color: rgb(3, 3, 3); /* 🔹 Default color of the bars */
    --hamburger-hover-bg: rgba(246, 249, 246, 0.2); /* 🔹 Hover background */
    --hamburger-hover-border: rgb(142, 141, 143); /* 🔹 Hover border color */

    /* === HAMBURGER MENU DROPDOWN CONTROLS === */
    --hamburger-menu-bg: black; /* 🔹 Background of the menu */
    --hamburger-menu-text: white; /* 🔹 Default text color */
    --hamburger-menu-hover-text: rgb(187, 237, 70); /* 🔹 Hover text color */

    /* === HAMBURGER BUTTON POSITION === */
    --hamburger-x: 15px; /* 🔹 Adjust left/right */
    --hamburger-y: 15px; /* 🔹 Adjust top/bottom */

    /* === HAMBURGER BORDER CONTROLS === */
    --hamburger-border-width: 0px; /* ✅ Change to 0px to REMOVE border */
    --hamburger-border-color: rgb(196, 241, 13); /* ✅ Custom border color */
   
    /* === NAVIGATION BUTTON CONTROLS (Mobile & Tablet) === */
    --nav-x-tablet: 50%; /* Centered */
    --nav-y-tablet: 13vh; /* Adjust based on gallery position */
    --nav-font-size-tablet: 1.8rem; /* Tablet button font size */

    --nav-x-mobile: 50%; /* Centered */
    --nav-y-mobile: 12vh; /* Adjust based on gallery position */
    --nav-font-size-mobile: 1.2rem; /* Mobile button font size */

    /* === LIGHTBOX CONTROLS === */
    --lightbox-width-tablet: 80vw;  /* Adjust width for tablets */
    --lightbox-height-tablet: auto; /* Maintain aspect ratio */
    --lightbox-x-tablet: 50%;
    --lightbox-y-tablet: 180px;  /* Adjust vertical position */
 
    --lightbox-width-mobile: 100vw;  /* Adjust width for mobile */
    --lightbox-height-mobile: auto; /* Maintain aspect ratio */
    --lightbox-x-mobile: 50%;
    --lightbox-y-mobile: 110px;  /* Adjust vertical position */

    /* === 🔹 Image Button Positioning (Tablet) === */
    --img-btn-x-tablet: 10%; /* Centered */
    --img-btn-y-tablet: calc(100% + 10px); /* Moves buttons slightly below the lightbox */
    --img-btn-size-tablet: 50px; /* Button size */

    /* === 🔹 Image Button Styling (Tablet) === */
    --image-btn-spacing-tablet: 10px;
}

/* === HEADER LAYOUT === */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/* === TITLE & SUBTITLE (Top-Left) === */
.top-left {
    position: relative; /* Makes it a parent for absolute elements */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-left h1 {
    font-size: var(--title-size);
}

.top-left h2 {
    position: absolute;  /* Keep absolute to ensure proper positioning */
    left: var(--subtitle-x);
    top: var(--subtitle-y);
    color: var(--subtitle-color);
    font-size: var(--subtitle-size);
    font-weight: lighter;
}

/* === TITLE LINK STYLING (Clickable Title & Subtitle) === */
.title-link {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Keeps text color unchanged */
    cursor: pointer; /* Shows a pointer on hover */
    display: inline-block; /* Keeps block behavior */
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth hover effect */
}

.title-link:hover {
    opacity: var(--title-hover-opacity); /* Controlled via :root */
    color: var(--title-hover-color); /* Controlled via :root */
}

/* === NAVIGATION (Top-Middle) === */
/* === NAVIGATION BUTTONS (Now Anchored to Image Loop) === */
.top-middle {
    position: absolute !important; /* Fully locks it in place */
    top: var(--nav-y) !important; /* Controls vertical positioning */
    left: 50% !important; /* Centers relative to image-loop-container */
    transform: translateX(-50%) !important; /* Keeps it centered */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nav-gap); /* Space between buttons */
    width: auto; /* Prevents stretching */
    white-space: nowrap; /* Ensures all buttons stay in one line */
}

.top-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nav-gap);
    position: relative;
    top: var(--nav-y);
    left: var(--nav-x);
}

nav ul {
    position: relative; /* Ensures stability */
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--nav-gap); /* Uses the new varible to control button spacing */
    padding: 0;
    margin: 0;
    width: auto;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-size: 2.2rem;
}

/* === NAVIGATION BUTTONS HOVER EFFECT === */
nav ul li a:hover {
    color: var(--nav-hover-color); /* Uses variable from :root */
    transition: color 0.3s ease-in-out; /* Smooth hover transition */
}

/* === CONTACT & INSTAGRAM (Top-Right) === */
.top-right {
    position: absolute;
    right: var(--contact-x);
    top: var(--contact-y);
    display: flex;
    align-items: center;
    gap: 12px; /* Adjusts spacing between the elements */
}

.contact-btn {
    text-decoration: none;
    color: var(--contact-color); /* Keeps text color dynamic */
    font-size: var(--contact-size); /* Uses size from :root */
    padding: 5px 10px;
    background-color: transparent; /* Removes background */
    border: none !important; /* Removes the border */
    border-radius: 0; /* Ensures no rounded edges */
    cursor: pointer;
    font-weight: bold; /* Optional: Make the text bold */
    transition: color 0.3s ease-in-out; /* Smooth transition effect */
}

.contact-btn:hover {
    color: var(--contact-hover-color); /* Dynamic hover color */
}

.top-right img {
    width: 24px;
    height: 24px;
}

/* === EXTERNAL LINK BUTTON gmagniagustsson.com === */
.external-btn {
    text-decoration: none;
    color: var(--external-btn-color, white); /* Default text color */
    font-size: var(--external-btn-size, 1rem);
    font-weight: bold;
    background-color: transparent; /* No background */
    border: none;
    padding: 5px 10px; /* Adds spacing */
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.external-btn:hover {
    color: var(--external-btn-hover-color, #FFD700); /* Gold on hover */
}
footer {
    position: fixed; /* Keeps it at the bottom */
    right: 0; /* Aligns it to the right */
    bottom: 0; /* Keeps it at the bottom */
    padding: 10px;
}

.site-footer {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 0.9rem;
    color: var(--footer-text-color);
}

.footer-link {
    position: relative;
    color: rgba(111, 0, 18, 0.924); /* Your chosen color */
    text-decoration: none;
    transition: color 0.3s ease; /* Hraðinn á línunni undir linkinum */
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: 0.3px;                 /* closer to text */
    left: 50%;                    /* center horizontally */
    transform: translateX(-50%);  /* adjust anchor point */
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.6s ease;
}


.footer-link:hover::after {
    width: 100%;
}

.footer-link:hover {
    font-weight: 600; /* bold lift */
}


/* 🛠 Adjust Footer for Mobile Landscape (≤768px width & ≤480px height) */
@media (max-width: 768px) and (max-height: 480px) {
    .site-footer {
        position: relative;  /* ✅ Makes it part of normal page flow */
        bottom: auto;
        right: auto;
        text-align: center;  /* ✅ Center it for a cleaner look */
        padding: 10px 0;  /* ✅ Adds space so it's not crammed */
        width: 100%;
    }
}

/* === ACTIVE GALLERY BUTTON === */
nav ul li a.active {
    color: var(--gallery-active-color); /* Ensures the active button appears red */
    font-weight: bold;
}

/* === GALLERY PAGE LIGHTBOX === */
.gallery-lightbox {
    position: relative; /* Keeps lightbox as the reference */
    top: var(--gallery-lightbox-y);  /* Controls vertical position */
    left: var(--gallery-lightbox-x); /* Controls horizontal position */
    transform: translateX(-50%);
    width: var(--gallery-lightbox-width);
    height: var(--gallery-lightbox-height);
    max-width: var(--front-lightbox-width);
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    justify-content: center;
    align-items: center;
}

.gallery-lightbox img {
    width: 100%;      /* Ensures the image fills the container */
    max-width: 100%;  /* Prevents it from growing beyond the box */
    height: auto;     /* Keeps aspect ratio */
    object-fit: contain; /* Ensures full image is visible */
}

/* === IMAGE SELECTION GRID === */
.image-selection-grid {
    position: relative; /* Keeps buttons inside the lightbox */
    display: flex;
    flex-wrap: wrap; /* ✅ Allows buttons to wrap into new rows */
    justify-content: center; /* Centers the buttons */
    align-items: center; /* Aligns them properly */
    align-self: flex-end; /* Moves buttons to the bottom */
    gap: var(--image-btn-spacing);
    width: 100%; /* Ensures buttons span properly */
    bottom: -50px; /* Keeps them anchored to the bottom */
    padding-bottom: 20px; /* Fine-tunes spacing */
}

/* === IMAGE BUTTONS (Roman Numerals) === */
.image-btn {
    width: var(--image-btn-size);
    height: var(--image-btn-size);
    background-color: rgba(0, 0, 0, var(--image-btn-bg-opacity));
    color: var(--image-btn-text-color);
    border: 0px solid var(--image-btn-color);
    border-radius: var(--image-btn-border-radius);
    opacity: var(--image-btn-opacity);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    transition: opacity 0.3s ease-in-out;
}

.image-btn:hover {
    background-color: var(--image-btn-hover-color);
    opacity: 1;
}

/* === IMAGE LOOP CONTAINER (Now Locked to Title) === */
.image-loop-container {
    position: absolute; /* Anchors to .top-left (Title) */
    top: var(--image-loop-y); /* Controls vertical positioning */
    left: var(--image-loop-x); /* Controls horizontal positioning */
    transform: translate(-50%, 0); /* Centers it properly */
    width: var(--image-loop-width);
    height: var(--image-loop-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === IMAGE FADE ANIMATION ===   */
@keyframes fadeLoop {
    0% { opacity: 0; }
    10% { opacity: 1; }
    30% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

/* === IMAGE LOOP TIMING CONTROLS === */
.loop-image:nth-child(1) { animation-delay: 0s; }
.loop-image:nth-child(2) { animation-delay: 6s; }
.loop-image:nth-child(3) { animation-delay: 12s; }
.loop-image:nth-child(4) { animation-delay: 18s; }
.loop-image:nth-child(5) { animation-delay: 24s; }

.loop-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; /* Adjust width dynamically */
    max-width: 100%; /* Ensure it fits */
    height: auto;
    max-height: 90vh; /* Prevent images from being too tall */
    object-fit: contain; /* Ensures the entire image fits */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Increase fade duration */
}

.loop-image:first-child {
    opacity: 0.8; /* Make it darker when fully visible */
}

/* === CHEVRONS: Show Only on Hover === */
.loop-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px; /* 🔥 Fixed width */
    height: 45px; /* 🔥 Fixed height */
    font-size: 2rem; /* 🔥 Adjust symbol size */
    color: var(--chevron-color, white);
    background: var(--chevron-bg-color, rgba(0, 0, 0, 0.7)); /* 🔥 Slightly darker for contrast */
    padding: 0; /* 🔥 Prevent extra space */
    border: none !important; /* 🔥 Removes any borders */
    box-shadow: none !important; /* 🔥 Removes any 3D shadow effect */
    border-radius: 8px; /* 🔥 Keeps subtle rounded corners */
    cursor: pointer;
    opacity: 0; /* 🔥 Starts hidden */
    transition: opacity 0.45s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 50; /* 🔥 Ensures it's above images */
}

/* 🔥 Show chevrons only when hovering over the image container */
.image-loop-container:hover .loop-nav-btn {
    opacity: 1;
}

/* === Left & Right Positioning === */


#prev-btn {
    left: 20px !important; /* Move to left side */
}

#next-btn {
    right: 20px !important; /* Move to right side */
}

/* === TEMP GRID OVERLAY (WITH CENTER LINES FIX) === */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: 50px 50px; /* Grid size */
    background-position: 18px 40px; /* ✅ Adjust X (horizontal) & Y (vertical) offset */
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    z-index: 9999 !important; /* 🔥 Ensures grid is on top */
    pointer-events: none; /* Prevents interaction */
    display: none; /* Hidden by default */
}

/* === FIXED CENTER GRID LINES === */
.grid-overlay::before,
.grid-overlay::after {
    content: "";
    position: fixed; /* 🔥 Fixes alignment issue */
    background-color: rgba(255, 0, 0, 0.7); /* Red for visibility */
    z-index: 10000 !important; /* 🔥 Ensures it's above the grid */
}

/* === Vertical Center Line === */
.grid-overlay::before {
    width: 2px;
    height: 100vh;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* === Horizontal Center Line === */
.grid-overlay::after {
    height: 2px;
    width: 100vw;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* === HAMBURGER MENU MOBILE AND TABLET CONTROLS === */

/* 🔹 Tablet Adjustments (601px–900px) */
@media (max-width: 975px) {
    /* Hide External, Contact & Instagram */
    .top-right {
        display: none !important; /* ✅ Hides them */
    }

    .top-left h1 {
        position: absolute;
        left: var(--title-x-tablet);
        top: var(--title-y-tablet);
        color: var(--title-color-tablet);
        font-size: var(--title-font-size-tablet);
        white-space: nowrap;
        overflow: hidden;
    }

    .top-left h2 {
        position: absolute;
        left: var(--subtitle-x-tablet);
        top: var(--subtitle-y-tablet);
        color: var(--subtitle-color-tablet);
        font-size: var(--subtitle-font-size-tablet);
    }

    main .top-middle {  
        position: relative; /* ✅ Overrides the global absolute */
        top: 120px !important; /* ✅ Moves it down */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 1000;
    }

    main .top-middle ul {
        display: flex;
        gap: 32px;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 10px 0;
    }

    main .top-middle ul li a {
        font-size: 2.2rem;  /* ✅ Adjusts nav button text size in tablets */
    }

    .top-middle a {
        font-size: 1.2rem; /* Slightly smaller */
        padding: 8px 12px;
        color: black;
    }

    .top-middle-tablet {
        position: absolute !important;
        left: var(--nav-x-tablet) !important;
        top: var(--nav-y-tablet) !important;
        transform: translateX(-50%) !important;
    }

    .top-middle-tablet ul {
        display: flex;
        justify-content: center;
        gap: 32px;
    }

    .top-middle-tablet ul li a {
        font-size: var(--nav-font-size-tablet);
        width: var(--nav-size-tablet) !important;
        height: var(--nav-size-tablet) !important;
    }

    /* ✅ Lightbox Adjustments */
    .gallery-lightbox {
        width: var(--lightbox-width-tablet);
        height: var(--lightbox-height-tablet);
        left: var(--lightbox-x-tablet);
        top: var(--lightbox-y-tablet);
        transform: translateX(-50%);
    }

    /* ✅ Control Image Button Placement Directly */
    .gallery-lightbox .image-selection-grid {
        font-size: 3.4rem !important;
        background: transparent; /* Visual test */
    }

    /* Targeting the entire image selection grid */
    main .image-selection-grid {
        /* Position relative to its parent (main) */
        position: relative;
        
        /* Control the grid positioning */
        top: 190px; /* Adjust this value to move down from its current position */
        left: 0; /* Center it by default */
        margin: 0 auto; /* Center it horizontally */
        
        /* You can also try absolute positioning if needed */
        /* position: absolute; */
        /* top: 450px; Absolute position from top of page */
        /* left: 50%; */
        /* transform: translateX(-50%); Center it */
        
        /* Optional: Control the layout */
        display: flex;
        justify-content: center;
        gap: 15px; /* Space between buttons */
        width: 100%;
        padding-top: 20px; /* Space above the buttons */
    }

    main .image-selection-grid .image-btn {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.2rem !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* ✅ Expand Image Loop */
    .image-loop-container {
        width: 90vw;
        height: auto;
        margin-top: -20px;  /* Adjust this value to move it up */
        top: 465px;
    }

    /* ✅ Show Hamburger Menu */
    .hamburger-menu {
        display: block !important; /* ✅ Appears in mobile/tablet */
    }
}

/* 🔹 Mobile Adjustments (≤600px) */
@media (max-width: 600px) {
    /* Reduce Title More */
    .top-left h1 {
        position: absolute;
        left: var(--title-x-mobile);
        top: var(--title-y-mobile);
        color: var(--title-color-mobile);
        font-size: var(--title-font-size-mobile);
        white-space: nowrap;
        overflow: hidden;
    }

    .top-left h2 {
        position: absolute;
        left: var(--subtitle-x-mobile);
        top: var(--subtitle-y-mobile);
        color: var(--subtitle-color-mobile);
        font-size: var(--subtitle-font-size-mobile);
    }

    main .top-middle {  /* ✅ More specific selector */
        position: relative;
        top: 80px; /* ✅ Moves it further down in mobile */
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        z-index: 1000;
    }

    main .top-middle ul li a {
        font-size: 1.2rem;  /* ✅ Smaller text for mobile */
    }

    .top-middle a {
        font-size: 1rem; /* Make text even smaller */
        padding: 5px 10px;
    }

    .top-middle-mobile {
        position: absolute !important;
        left: var(--nav-x-mobile) !important;
        top: var(--nav-y-mobile) !important;
        transform: translateX(-50%) !important;
    }

    .top-middle-mobile ul {
        display: flex;
        justify-content: center;
        gap: 28px;
    }

    .top-middle-mobile ul li a {
        font-size: var(--nav-font-size-mobile);
        width: var(--nav-size-mobile) !important;
        height: var(--nav-size-mobile) !important;
    }

    .gallery-lightbox {
        width: var(--lightbox-width-mobile);
        height: var(--lightbox-height-mobile);
        left: var(--lightbox-x-mobile);
        top: var(--lightbox-y-mobile);
        transform: translateX(-50%);
    }

    main .image-selection-grid {
        /* Position relative to its parent (main) */
        position: relative;
        
        /* Control the grid positioning - adjusted for mobile */
        top: 140px; /* Less space on mobile */
        left: 0; 
        margin: 0 auto; /* Center it horizontally */
        
        /* Layout control */
        display: flex;
        justify-content: center;
        gap: 10px; /* Slightly tighter spacing for mobile */
        width: 100%;
        padding-top: 15px; /* Less space above buttons */
    }

    @media (max-width: 600px) {
        .footer-left {
            display: block;
            text-align: left;
        }
    
        .footer-right {
            display: block;
            text-align: right;
        }
    }
    
    /* Individual buttons - smaller for mobile */
    main .image-selection-grid .image-btn {
        width: 45px !important; /* Smaller size for mobile */
        height: 45px !important;
        font-size: 1.0rem !important; /* Smaller font for mobile */
    }

    /* Expand Image Loop Even More */
    .image-loop-container {
        width: 100vw;
        height: auto;
        margin-top: -20px;  /* Adjust this value to move it up */
        top: 315px; /* BREYTIR STAÐSETNINGUNNI Á LJÓSABOXINU  */
    }

    /* Adjust Hamburger Menu for Compact Layout */
    .hamburger-menu {
        display: block !important; /* ✅ Ensures it stays */
    }

    /* Adjust Dropdown Menu */
    .mobile-nav {
        top: 50px;
        right: 10px;
    }

    .mobile-nav a {
        font-size: 1rem;
    }
}

/* === HAMBURGER MENU DEFAULT STATE === */
/* === DEFAULT HAMBURGER MENU STYLES === */

.hamburger-menu {
    display: none; /* ✅ Hides it by default */
    position: absolute;
    top: 15px; /* === FÆRIR HAMBORGARANN UPP OG NIÐUR === */
    right: 15px; /* === FÆRIR HAMBORGARANN TIL HÆGRI/VINSTRI === */
    z-index: 1001;
}
/* === HAMBURGER MENU BUTTON === */
.hamburger-icon {
    width: 33px !important;
    height: 40px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--hamburger-bg) !important; /* ✅ Uses variable */
    border-width: var(--hamburger-border-width) !important;
    border-style: solid !important;
    border-color: var(--hamburger-border-color) !important;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
    position: absolute;
    top: var(--hamburger-y) !important;  /* ✅ Position Control */
    right: var(--hamburger-x) !important; /* ✅ Position Control */
}

/* ✅ When hovered */
.hamburger-icon:hover {
    background: var(--hamburger-hover-bg) !important;
    border: 0px solid var(--hamburger-hover-border) !important;
}

/* === HAMBURGER MENU BARS === */
.hamburger-icon div {
    width: 30px !important;
    height: 4px !important;
    background-color: var(--hamburger-bar-color) !important; /* ✅ Uses variable */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* === HAMBURGER MENU "OPEN" ANIMATION === */
.hamburger-icon.open div:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-icon.open div:nth-child(2) {
    opacity: 0;
}

.hamburger-icon.open div:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* === HAMBURGER MENU "OPEN" ANIMATION === */
.hamburger-icon.open div:nth-child(1) {
    transform: translateY(10px) rotate(45deg) !important;
}

.hamburger-icon.open div:nth-child(2) {
    opacity: 0 !important;
}

.hamburger-icon.open div:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg) !important;
}

/* === MOBILE NAV MENU === */
.mobile-nav {
    position: absolute;
    top: 60px;
    right: 10px;
    background-color: var(--hamburger-menu-bg) !important; /* ✅ Uses variable */
    color: var(--hamburger-menu-text) !important; /* ✅ Uses variable */
    display: none;
    flex-direction: column;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

.mobile-nav ul {
    display: flex;
    flex-direction: column; /* ✅ Stacks items */
    gap: 10px; /* ✅ Adds spacing */
    list-style: none; /* ✅ Removes bullet points */
    padding: 0; /* ✅ Resets default padding */
    margin: 0; /* ✅ Ensures full-width */
    text-align: center; /* ✅ Centers text */
}

/* ✅ When Active (Menu Open) */
.mobile-nav.open {
    display: flex !important;
}

.mobile-nav a {
    color: var(--hamburger-menu-text) !important; /* ✅ Uses variable */
    text-decoration: none;
    padding: 5px 12px;
    display: block;
    font-size: 0.8rem;
}

/* ✅ When hovered */
.mobile-nav a:hover {
    color: var(--hamburger-menu-hover-text) !important; /* ✅ Uses variable */
}

/* Cookie Banner Styling */
.cookie-banner {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    font-family: 'Orkney', sans-serif; /* Replace with your preferred font */
    font-size: 16px; /* Adjust size */
    font-weight: 400; /* Adjust weight */
    color: rgb(189, 189, 189);
    padding: 15px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

.cookie-banner button {
    background: rgb(22, 78, 137);
    color: rgb(189, 189, 189);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.cookie-banner button:hover {
    background: rgb(36, 112, 193);
}

.cookie-banner button:nth-child(3) {
    background: rgb(125, 41, 41);
}

.cookie-banner button:nth-child(3):hover {
    background: rgb(200, 46, 46);
}