/* -----------------------------------
   HAMBURGER MENU STYLES
--------------------------------------

This file contains the styles for the main hamburger menu example.
The general page colors and typography come from shared.css. This file focuses on the header layout and the menu behavior.
*/

/* ------------------------------
   HEADER LAYOUT
--------------------------------- */
header {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
}

header h1 {
  color: orange;
  font-size: 200%;
  margin: 0;
  line-height: 1;
}

header nav {
  margin-left: auto;
  /* moves menu to the right side */
}

/* ------------------------------
   DESKTOP NAVIGATION
--------------------------------- */
nav {
  text-align: right;
}

nav ul {
  display: flex;
  /* makes links horizontal list */
  text-align: center;
}

nav a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 2rem;
  text-decoration: none;
  color: #f0f4f8;
  font-size: 120%;
  transition: background-color 0.75s ease, color 0.75s ease;
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: white;
}

/* Hide the checkbox and hamburger icon on desktop */
nav input[type="checkbox"],
nav label {
  display: none;

}

/* ------------------------------
   MOBILE HAMBURGER MENU
--------------------------------- */
@media (max-width: 48rem) {

  header nav {
    margin-left: auto;
    text-align: right;
  }

  /* Show the hamburger icon */
  header nav label {
    display: block;
    /* Make the label visible on smaller screens */
    cursor: pointer;
    /* Change the cursor so it looks clickable */
    color: white;
    /* Set the icon color */
    font-size: 3.5rem;
    /* Increase the icon size */
    line-height: 1;
    margin-left: auto;
  }

  /* Hide menu by default */
  nav ul {
    max-height: 0;
    /* Start with the menu collapsed */
    overflow: hidden;
    /* Hide content that extends past collapsed height */
    flex-direction: column;
    /* Stack menu items vertically */
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgb(16, 42, 67, 0.3);
    margin: .75rem 0 0 1rem;
    min-width: 220px;
    transition: max-height .5s ease-in-out;
  }

  /* Open menu when checkbox is checked */
  /* Increase max-height if your menu has more links */
  #menu:checked+ul {
    max-height: 300px;
  }

  /* Mobile menu items */
  nav ul li {
    text-align: center;
    padding: 0;
    border-bottom: 1px solid rgb(206, 0, 224);
  }

  nav ul li:last-child {
    border-bottom: none;
  }

  nav ul li a {
    display: block;
    /* Makes entire row clickable */
    margin: 0;
    /* Removes extra space around link */
    padding: 0.8rem 2rem;
    /* Adds more clickable space inside link */
    border-radius: 0;
    /* Removes rounded corners so mobile dropdown has straight edges */
    font-size: 125%;
    /* Adjusts size of mobile menu links */
    color: orange;
    /* Text color for mobile menu links */
  }

  nav ul li a:hover {
    background-color: #f0f4f8;
    /* Background color when hovering over item */
    color: #2f6f91;
    /* Text color when hovering */
  }
}