/* margin: top right bottom left */
@import url(font.css);

:root {
    /* Custom Triratna colours */
    --triratna-blue: #00bef3;
    --triratna-yellow: #ffde00;
    --triratna-red: #eb212a;
    /* Type scales for text */
    --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
    --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
    --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
    --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
    --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

html {
    scroll-behavior: smooth /* Smooth scrolling for anchor links */;
}

body {
    background-color: #202020; /* Dark background for the website */
    color: white;
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.1;
}

.header-main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure header always displays on top */
    width: 100%;
    height: 50px;
    background: #202020;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding: 0 10px;
}

.header-main-logo a {
    display: flex;
    align-items: center;
}

.header-main-logo img {
    height: 45px;
}

.header-main-navbar ul {
    display: flex;
    list-style: none;
    margin-right: 10px;
    gap: 35px; /* Adjusted for larger screens */
    font-size: 1em;
}

.header-main-navbar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.header-main-navbar a:hover {
    text-decoration: underline;
}


.language-switcher img {
    max-height: 20px;
    cursor: pointer;
    margin-right: 10px
}

/* Exclude homepage */
section:not(.homepage) {
    font-size: var(--size-step-0);
    margin: 0 5vw; 
}

section {
    padding: 60px 0 30px 0; /* Adjusted based on header height */
}

section h1, section h2 {
    font-weight: 800;
}
section h1 {
    font-size: var(--size-step-4);
}

section h2 {
    font-size: var(--size-step-3);
}

section ul, ol {
    margin-top: 5px;
    padding-inline-start: 1em;
}

section a {
    color: white;
    text-decoration-color: var(--triratna-blue);
    text-decoration-thickness: 0.2ex;
    text-underline-offset: 0.4ex;
}

/* Banner that overlays the homepage which says our starting day is on October the 12th */
.banner {
    width: 100%;
    background-color: #1c75be;
    color: white;
    text-align: center;
    font-size: var(--size-step-2);
    padding: 10px 0;
    position: fixed;
    top: 50px; /* Just below the header */
    left: 0;
    z-index: 999; /* Ensure banner is above other content, but not the hamburger menu */
}

.homepage {
    background-image: url("../img/4kbuddha-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position-y: 45px ; /* Adapted to header height */;
    height: 100vh; /* Full page cover */;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.homepage a {
    color: white;
    text-decoration: none;
}

.homepage a:hover {
    text-decoration: none;
}

.home-title {
    font-size: 4em;
    font-weight: 400;
}

.home-text {
    font-size: 1.5em;
    margin-top: 20px;
}

.home-nav-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-button {
    background: none;
    margin-top: 20px;
    width: fit-content;
    font-size: 1.5em;
    padding: 10px 20px;
    border: #1c75be 2px solid;
    border-radius: 6px;
    transition-duration: 0.4s;
}

.nav-button:hover {
    background-color: #1c75be;
}

.contact-section {
    display: flex;
    justify-content: space-evenly;
}

.buddha-video-call {
    height: 400px;
    object-fit: cover;
    margin-top: 20px;
    padding: 30px;
}

.map-image {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px;
    padding: 30px;
    border: 2px solid white;
    border-radius: 10px;
}

/* FOOTER */
footer {
    background-color: #424242;
    color: white;
    text-align: center;
    margin-top: 20px;
    padding: 30px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}



/* MOBILE */
@media screen and (max-width: 650px) {
    /* HAMBURGER MENU */
    .header-main-hamburger .bar {
        width: 30px;
        height: 2px;
        background-color: rgb(255, 255, 255);
        margin: 6px 0;  
    }
    
    .header-main-hamburger {
        padding: 10px;
        position: fixed;
        right: 0;
        top: 0;
    }
    
    .header-main-hamburger:hover {
        cursor: pointer;
        background-color: #1c75be; /* Change background on hover */
    }

    .language-switcher {
        margin-right: 40px; /* Adjust to avoid overlap with hamburger */
    }
    
    #navbar-links {
        display: none; /* Hide the navigation links on mobile */
        margin: 0;
        right: 0;
        background-color: #1c75be; /* Match header background */
        position: fixed;
        top: 50px; /* Below the header */
        width: 100%; /* Full width for mobile */
    }
    #navbar-links.show {
        display: block !important; /* Show links when toggled */
    }

    #navbar-links li {
        width: 100%; /* Full width for each link */
        text-align: center; /* Center align text */
        padding: 0;
    }
    
    #navbar-links li:hover {
        background-color: #ddd;
    }
    
    #navbar-links li a {
        display: block; /* Block display for full width */
        width: 100%; /* Full width for each link */
        padding: 10px 20px; /* Padding for each link */
        text-decoration: none;
    }

    #navbar-links li:hover a { 
        color: #000000; /* Change text color on hover */
    }


    /* Adjust image resolution */
    .homepage {
        background-image: url("../img/2kbuddha-banner.jpg");
    }

    .home-title {
        font-size: 2.5em;
    }

    .nav-button {
        width: fit-content;
        font-size: 1em;
    }

    .contact-section {
        display: flex;
        justify-content: space-evenly;
    }
    
    .buddha-video-call {
        display: none; /* Hide video call image on mobile */
    }
}

/*  from screen width of 760 to 650, adjust size of logo and text */
@media screen and (min-width: 650px) and (max-width: 760px) {
    .header-main-navbar ul {
        gap: 20px; /* Adjusted for smaller screens */
        font-size: 0.9em;
    }
}

/* For screens larger than 761px */
@media screen and (min-width: 761px) {
    /* Only show the dynamic button on larger screens */
    .nav-button a {
        transition: 0.5s;
        position: relative;
    }

    .nav-button a:after {
        content: "\00bb"; /* Unicode for right arrow */
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .nav-button:hover a {
        padding-right: 25px;
    }

    .nav-button:hover a:after {
        opacity: 1;
        right: 0;
    }

    /* Exclude homepage */
    section:not(.homepage) {
        margin: 0 20vw;
    }
}

/* For screens between 940px and 760px, adjust navbar text */
@media screen and (min-width: 760px) and (max-width: 955px) {
    .header-main-navbar ul {
        gap: 25px; /* Adjusted for medium screens */
        font-size: 1em;
    }
}

/* Larger screens */
@media screen and (min-width: 955px) {
    .header-main-navbar ul {
        gap: 45px; /* Adjusted for larger screens */
        font-size: 1.2em;
    }
    
    .header-main-logo img {
        height: 50px; /* Adjust logo size for larger screens */
    }
}