/* main.css */

/* This is for debug */

/* 
* {
    outline: 1px solid orange;
    position: relative;
}

*::after {
    content: attr(class) " " attr(id);
    position: absolute;
    top: 0;
    left: 0;
    font: 10px monospace;
    color: black;
    background: white;
} */



/* settings */
:root{
    
    --main-white: white;
    --main-blue: hsl(206, 85%, 27%);
    --main-title-font: "Cormorant Garamond",  "cormorant", garamond, serif;

    --main-text-font: 'Times New Roman', Times, serif;
    --committee-title-font: 'Bebas Neue', sans-serif;
    --sub-title-font: 'georgia', 'palatino', sans-serif;

    --menu-bg-color: var(--main-blue);
    --menu-text-color: var(--main-white);

    --about-margin: 18vw;

    --title-font-size: 8vh;

    --main-beige: #ede7d3;
    --darker-beige: #c2c29e;
    --main-black: black;
    --main-dark-gray: #434343;
    --light-blue: hwb(206 10% 37%);




    @font-face {
        font-family: 'Georgia';
        src: url('/assets/fonts/Georgia.ttf') format('truetype');
        font-weight: normal; 
        font-style: normal; 
    }
}


/*
/==========================+
/ M E N U B A R            |
/==========================+
*/

#menubar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;

    background-color: var(--menu-bg-color);
    color: var(--menu-text-color);
    padding-left: 60px;
    padding-right: 60px;
    position: relative;
}

#menubar img {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

#logo-image {
    max-height: 6vh;
    border-radius: 0;
}

#link-icons-section {
    display: flex;
    align-content: space-evenly;
    gap: 40px;

    padding-left: 20px;
    position: relative;
}

.link-icons {
    min-width: 50px;
    min-height: 50px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: normal;
    color: var(--menu-text-color);
}

#link-icons-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--menu-bg-color);
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    flex-direction: column;
}

#link-icons-dropdown a {
    padding: 10px;
    color: var(--menu-text-color);
    text-decoration: none;
    display: block;
}

#link-icons-dropdown a:hover {
    background-color: var(--light-blue); /* Change color on hover */
}

/* Dropdown button style */
#drop-btn {
    color: var(--main-blue);
    font-size: 28px;
    cursor: pointer;
    padding: 5px 15px;
    background: var(--main-white);
    border-radius: 10px;
    border: none;
    transition: color 0.3s ease;
}

#drop-btn:hover {
    background-color: var(--main-blue);
    color: var(--main-white);
}

/* Container div */
.dropdown-btn {
    position: relative;
    display: none; /* Hidden by default, shown on mobile */
}

#dropdown-btn-section {
    height: 70%;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Dropdown content */
#dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--main-blue);
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgb(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    animation: fadeIn 0.3s ease;
}

#dropdown-content.show {
    display: block;
    position: absolute;
    right: 0;
    background-color: var(--main-blue);
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgb(0,0,0,0.2);
    z-index: 1000;
    border-radius: 4px;
    animation: fadeIn 0.3s ease;
}

/* Animation for dropdown */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dropdown links */
#dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease;
    font-size: 18px;
}

/* Hover effects */
#dropdown-content a:hover {
    background-color: var(--light-blue);
}

/* Active state for dropdown */
.dropdown-btn.active .dropbtn {
    color: #ccc;
}

/* Show dropdown when active class is present */
#dropdown-content.show {
    display: block;
}

/* Mobile responsiveness */
@media screen and (max-width: 1080px) {
    #link-icons-section {
        display: none;
    }
    .dropdown-btn {
        display: block;
    }
}

/*
/==========================+
/ F O O T N O T E S        |
/==========================+
*/

#info {
    display: flex;
    max-height: 10vh;
    justify-content: space-evenly;
    align-items: center;

    position: relative;

    background-color: var(--main-blue);
    color: var(--main-white);

    font-size: 12px;
}

#credits {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin: 20px;
}

#contact-and-address {
    flex: 0.7;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}