/*
 * DOCUMENT NAME:           head-styles.php
 * AUTHOR:                  Robert Ruth
 * DATE CREATED:            23may2023
 * DATE MODIFIED: 
 * DESCRIPTION:             Styles for the header   
 * LINKED FROM:      
 * LINKED TO:
 * FORM SUBMISSION TO:
 * FORM SUBMISSION FROM:
 */

/* ----------------- HEADER SECTION ----------------------- */
/* -------------------------------------------------------- */
.header {
    display: flex;
    justify-content: space-between;
    background-image: url("https://www.midnitesolar.com/update/images/pages/headerBkgd.jpg");
    width: 100vw;
    /*border: solid 2px black;*/
}
.logo {
    padding-left: 40px;
    padding-top: 10px;
}
.midNite {
    padding-top: 20px;
}
.moon {
    padding-right: 40px;
    padding-top: 10px;
}
@media (max-width: 650px){
    .moon, .midNite {
        display: none;
    }
}

/* ----------------- NAVIGATION SECTION ----------------------- */
/* -------------------------------------------------------- */  
.navBar {
    width: 100%;
    height: 35px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: lightgray;
    font-size: 12px;
    justify-content: center;
    border: solid 1px #000;
    font-weight: bold;
}
.navBar .logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.navBar .links {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.links {
    list-style: none;
}

.links li a {
    font-size: 16px;
}

/* ----------------- DROPDOWN BUTTON ----------------------- */
/* -------------------------------------------------------- */  
.media_button {
    display: none;
}
.dropdown_menu {
    display: none;
}
.dropdown_menu.open {
    height: 450px;
}
.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    font-weight: bold;
    /*align-items: center;*/
    justify-content: center;
    /*border: solid 2px black;*/
}
/*RESPONSIVE DESIGN*/
@media (max-width: 1000px){
    .navBar .links {
        display: none;
    }  
    
    .media_button {
        display: flex;
        justify-content: flex-start;
        cursor: pointer;
    }
    .dropdown_menu {
        position: absolute;
        right: 2rem;
        top: 140px;
        height: 0;
        width: 200px;
        background: rgba(255,255,255,0.5);
        backdrop-filter: blur(15px);
        overflow: hidden;
        transition: height .2s cubic-bezier(0.175, .885, .32, 1.275);
    }
    /* The container <div> - needed to position the dropdown content */
    .dropdown_menu{
        position: relative;
        display: inline-block;
        
    }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        display: none;
        position: absolute;
        /*background: rgba(255,255,255,0.8);*/
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        border: solid 1px black;
        /*border-radius: 15px;*/
    }
    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-size: 14px;
    }
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        background-color: #f1f1f1;
        color: orange;
        border: solid 1px black;
        /*border-radius: 15px;*/
    }

    /* Show the dropdown menu on hover */
    .media_button:hover .dropdown-content {
        display: block;
    }
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .media_button:hover .dropbtn {
        background-color: #3e8e41;
    }
}