@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* ----------------------------------------------------
   DESKTOP / TABLET NAV — ORIGINAL LAYOUT
---------------------------------------------------- */
html {
    font-size: 18px;
}
nav.top-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    align-items: center;

    padding: 10px 25px;
    box-sizing: border-box;
    z-index: 200;
}

/* Home button (left) */
nav.top-section .home-button {
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: #641F09;

    /* margin-right: auto; pushes right-links to the far right */
    transition: color 0.3s ease;
}

nav.top-section .home-button:hover {
    color: #b48883;
}

/* Right links */
nav.top-section .right-links {
    margin-left: auto;   /* ← THIS is the key */
    display: flex;
    gap: 80px;
}


nav.top-section .right-links a {
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: #641F09;
    transition: color 0.3s ease;
}

nav.top-section .right-links a:hover {
    color: #b48883;
}

/* Slightly bolder on non-home pages */
body:not(.home) nav.top-section a {
    font-weight: 400;
}

/* ----------------------------------------------------
   PAGE THEMING — DESKTOP / TABLET
---------------------------------------------------- */

/* HOME PAGE */
body.home nav.top-section {
    background: linear-gradient(
        to bottom,
        rgba(100, 31, 9, 1),
        rgba(100, 31, 9, 0)
    );
}

/* Hide home button on homepage */
body.home nav.top-section .home-button {
    display: none;
}

/* Home page link colour */
body.home nav.top-section a {
    color: #ECDAB4;
}

/* OTHER PAGES */
body:not(.home) nav.top-section {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1),
        rgba(0, 0, 0, 0)
    );
}

body:not(.home) nav.top-section a {
    color: #101010;
}

/* ----------------------------------------------------
   HAMBURGER BUTTON (HIDDEN ON DESKTOP)
---------------------------------------------------- */
body.home .nav-toggle {
    color: #ECDAB4;
}
body:not(.home) .nav-toggle {
    color: #101010;
}


.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ----------------------------------------------------
   TABLET SPACING
---------------------------------------------------- */

@media (max-width: 1024px) {
    nav.top-section .right-links {
        gap: 40px;
     
    }

    
}


/* ----------------------------------------------------
   MOBILE NAV — HAMBURGER
---------------------------------------------------- */
@media (max-width: 768px) {

    /* NAV BAR LAYOUT */
    nav.top-section {
        justify-content: space-between;
    }

    /* Home behaves same as desktop */
    body.home nav.top-section .home-button {
        display: none;
    }

    /* Hide desktop right links */
    nav.top-section .right-links {
        display: none;
    }

    /* Show hamburger on right */
    .nav-toggle {
        margin-left: auto;
        display: block;
        position: relative;
        z-index: 201;
        color: inherit;
    }

    /* OPEN MENU */
    nav.top-section.open .right-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;

        padding: 64px 20px 20px;
        gap: 10px;

        background: linear-gradient(
            to bottom left,
            rgba(255, 255, 255, 0.96),
            rgba(255, 255, 255, 0)
        );

        z-index: 150;
    }

    /* Home page gradient */
    body.home nav.top-section.open .right-links {
        background: linear-gradient(
            to bottom left,
            rgba(100, 31, 9, 0.92),
            rgba(100, 31, 9, 0)
        );
    }

/* Mobile menu link styles — DEFAULT (other pages) */
nav.top-section.open .right-links a {
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0;
}

/* Mobile menu link styles — HOME page (lighter) */
body.home nav.top-section.open .right-links a {
    font-weight: 300;
}

    /* Hamburger → X */
    nav.top-section.open .nav-toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    nav.top-section.open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    nav.top-section.open .nav-toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}
#kolam-wrap canvas {
    pointer-events: none;
  }