/*---------------------------------------------------*/
/*----------Base Stylings, Default Colours-----------*/
/*---------------------------------------------------*/

/*Box sizing set to border-box so that all padding is included and doesnt push outside the view width*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
    --primary: #FFF7ED;
    --text: #333333;
    --text-light: #5E5E5E;
    --white: #ffffff;
    --border-light: #d1d1d1;
    --shadow-color: rgba(0,0,0,0.1);
    --accent-red: #F53100;
    --tag-accent: #FECACA;
    --tag-text: #431407;
  }


html {
    padding:0;
    margin:0;
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    background-color: var(--primary);
}


body, p, h3, h2, h1, ul, li {
    padding:0;
    margin:0;
}

/*Explicitly decalare font-type for text input,
Some browsers will not inherit it from html styles*/

input[type="text"],
textarea {
    font-family: 'Poppins', sans-serif;
}

/*easy styling classes*/
.hidden{ display:none !important; }
.col{ display:flex; flex-direction: column; }
.row{ display:flex; }

ul{
    list-style: none;
}

/*---------------------------------------------------*/
/*-------Header Styling--------*/
/*---------------------------------------------------*/

.header{
    position: relative;
    display:flex;
    flex-direction: column;
    box-shadow: 0 2px 8px var(--shadow-color);
    background-color: var(--primary);
}

.logoWrapper {
    display: flex;
    width: 100%;
    padding: 0 1rem;
    justify-content: space-between;
    align-items: center;
}

.logo{
    display:flex;
    padding:1rem 0;
}

.logoName {
    text-decoration: none;
    height: 3rem;
    display:flex;
    min-width: 100px;
}

.logoName h1{
    padding-right:0.5rem;
    display:none;
}

.firstHalfEnd{ 
    display:flex; 
}

.searchBar{
    display:none;
}

.searchButton{
    background-color: transparent;
    border:none;
    align-self: center;
    height:100%;
}

.searchButtonMobile{
    display: flex;
}

.searchBarMobileWrapper{
    padding:1.5rem;
}

.searchBarMobileWrapper .searchInput{
    border-radius:12px;
    box-shadow: 0 0 0 2px var(--border-light);
    display:flex;
}

.searchBarMobileWrapper .searchInput:focus-within {
    box-shadow: 0 0 0 2px var(--accent-red);
}

.searchBarMobileWrapper .searchInput input{
    width:100%;
    border-radius: 0 12px 12px 0;
    border:none;
    font-size: 1.2rem;
}

.searchBarMobileWrapper .searchInput input:focus{
    outline:none;
}

.searchBarMobileWrapper .searchInput button{
    border:none;
    background-color: var(--white);
    border-radius: 12px 0 0 12px;
    padding: 0;
    display: flex;
    align-items: center;
}

.searchBarMobileWrapper .searchInput button img{
    height: 2.5rem;
    padding: 0.5rem;
    display: block;
}

span{
    align-self:center;
    color: red;
    padding-right:0.5rem;
}


.mobileMenu{
    padding-bottom: 1rem;
}

.menu{
    display:none;
    list-style: none;
    font-size:0.5rem;
}


/*Menushelf class is on both mobile and desktop menu's. By default the class is set to display-none.
The way it is shown on mobile is by targeting .menushelf.active and setting display:flex.

This is because the active class gets added to it when the hamburger menu is clicked. As the active class
is applied to the user drop-down menu also, we want to target specifically the mobile menu shelf which has
both classes.
*/
.menuShelf {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--primary);
    flex-direction: column;
    box-shadow: 0 4px 8px var(--shadow-color);
    z-index: 1000;
    padding: 0.5rem 0;
    align-items: center;
    gap: 1rem;
    color: var(--text);
    font-weight: 600;
    list-style: none;
}

.menuShelf.active {
    display: flex;
}

.menuShelf a, .menuShelf a:visited {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
}


.mainMenu a.current,
.mainMenu a:hover {
    color: var(--accent-red);
}

.mainMenu, .user-bar{
    display: flex;
    gap: 1rem;
}

.mainMenu{
    flex-direction: column;
}

.menuShelf li {
    width: 100%;
    text-align: center;
    padding: 0;
    border-bottom: 1px solid var(--primary);
    box-sizing: border-box;
}
 .menuShelf li:last-child {
    border-bottom: none;
}

 .menuShelf li a, .menuShelf li.user-greeting {
    display: block;
    padding: 12px 0;
    color: var(--text);
    text-decoration: none;
}
 .menuShelf li a:hover {
    background-color: var(--primary);
}

.searchButton img{
    height: 1.7rem;
    margin-top: 0.3rem;
}

.user-greeting{
    color:var(--text);
    font-weight:500;
}

.firstHalfHeader, .secondHalfHeader {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.firstHalfHeader {
    gap: 2rem;
    width: 100%;
    justify-content: space-between;
}

.secondHalfHeader {
    gap: 2rem;
}

.hamburger-button {
    display: block;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 0.5rem;
    align-self: center;
}


.mobileMenu.active{
    display:flex;
}


/*---------------------------------------------------*/
/*--------Desktop/Large Tablet styling (>700px)---------*/
/*---------------------------------------------------*/

  @media only screen and (min-width: 700px) {


    /*----As per the previous description, now menuShelf is made active for desktop sizes, and .menuShelf.mobileMenu is completely hidden
    whether active or not by this specificity---*/
    .menuShelf{
        padding:0.5rem;
        align-items: center;
        display:flex;
        list-style: none;
        gap:1rem;
        background-color: var(--primary);
        color: var(--text);
        font-weight: 600;
        flex-direction: row;
        position: static;
        box-shadow: none;
        width:auto;
        justify-content: space-around;
    }

    .menuShelf.mobileMenu {
        display: none;
    }

    .hamburger-button {
        display: none;
        background: none;
        border: none;
        color: var(--text);
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0 0.5rem;
        align-self: center;
    }

    .menuShelf li {
        width: auto;
        border-bottom: none;
        padding: 0;
        text-align: left;
    }
     .menuShelf li a, .menuShelf li.user-greeting {
        display: inline;
        padding: 0;
    }
     .menuShelf li a:hover {
        background-color: transparent;
    }
    .mainMenu, .user-bar {
        flex-direction: row;
    }

    .logoWrapper {
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }
    .firstHalfHeader {
        width: auto;
        gap: 2rem;
    }
    .secondHalfHeader {
        gap: 1rem;
    }

    .searchBarMobileWrapper {
        padding: 0rem 1rem 1rem 1rem;
    }
    .searchBarMobileWrapper .searchInput button img {
        height: 2.3rem;
    }
    
    .searchBarMobileWrapper .searchInput input {
        font-size: 1rem;
    }


    /*------------Desktop user logout menu styling-----------------*/
    .user-dropdown {
        position: relative;
        display: inline-block;
    }
    
    .user-dropdown-toggle {
        background: none; border: none; padding: 0; margin: 0;
        font: inherit; color: inherit; cursor: pointer; display: flex; align-items: center;
    }
    
    .dropdown-arrow {
        font-size: 1.3em; line-height: 1; color:black;
    }
    .user-dropdown-menu {
        display: none; 
        position: absolute; right: 0;
        background-color: var(--white); 
        border: 1px solid var(--border-light);
        border-radius: 4px; 
        box-shadow: 0 2px 5px var(--shadow-color);
        list-style: none;
        margin: 5px 0 0 0;
        min-width: 100px; 
    }
    
    .user-dropdown-menu.active { display: block; }
    .user-dropdown-menu li a {
        display: block; padding: 0.5rem 1rem; color: var(--text);
        text-decoration: none; white-space: nowrap;
    }
    
    .user-dropdown-menu li a:hover { background-color: var(--primary); }
  }


/*---------------------------------------------------*/
/*----------------Full size desktop screen Styling--------------------------*/
/*---------------------------------------------------*/
  @media only screen and (min-width: 991px) {

    /*Display full search bar in header, hide search button that brings up the search bar below the header*/
    .searchBar {
        display: flex;
    }

    .searchButtonMobile {
        display: none;
    }

    .searchInput {
        display: flex;
        align-items: center;
        border-radius: 20px;
        background-color: white;
        padding: 0.2rem 0.5rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        min-width: 280px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    }

    .searchBarMobile{
        display:none;
    }

    .searchInput:focus-within {
        box-shadow: 0 0 0 2px var(--accent-red);
    }

    .searchIcon {
        height: 1.3rem;
        margin: 0 0.5rem 0 0.3rem;
        opacity: 0.6;
    }

    .searchInput input[type='text'] {
        flex-grow: 1;
        padding: 0.4rem 0.2rem;
        border: none;
        outline: none;
        margin: 0;
        color: var(--text);
        font-size: 0.95rem;
    }

    .search-image-button {
        background: none;
        border: none;
        padding: 0;
        margin-top: 0.25rem;
        cursor: pointer;
    }
    
    .search-image-button:focus {
        outline: none;
    }
  }