/* Hide site identity and navigation on homepage only */
.home .site-branding {
  display: none;
}

.home .storefront-primary-navigation {
  display: none;
}


/* Only apply on desktop screens */
@media (min-width: 768px) {
  
  /* Make the main header the flex container so the logo block and navigation block sit side-by-side */
  #masthead {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 40px; /* Adds breathing room to the left and right sides of the screen */
  }

  /* Reset widths and floats on the child containers so they comply with flexbox */
  #masthead .col-full,
  #masthead .storefront-primary-navigation {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
  }

  /* Keep the logo container from hoarding full-width space */
  #masthead .col-full {
    display: block !important;
  }

  /* Force the Ali logo image to respect its actual size */
  .site-branding img, 
  .custom-logo-link img {
    max-width: 100px !important; /* Adjust this number to make "Ali" larger or smaller */
    height: auto !important;
  }
}
@media (min-width: 768px) {
  /* 1. Ensure the parent list items create a positioning base */
  .main-navigation ul.nav-menu > li {
    position: relative !important;
  }

  /* 2. Hide the submenu by default using Storefront's visibility method, but prepare the styling */
  .main-navigation ul li ul.sub-menu {
    position: absolute !important;
    top: 100% !important;     /* Places it directly below the parent link */
    left: 0 !important;        /* Aligns it to the left edge */
    right: auto !important;
    width: 200px !important;   /* Sets a static dropdown box width */
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    padding: 10px 0 !important;
    z-index: 99999 !important;
    
    /* Keep it hidden until hover */
    display: none !important; 
  }

  /* 3. ONLY show the submenu when the parent item is hovered over */
  .main-navigation ul li:hover > ul.sub-menu,
  .main-navigation ul li.focus > ul.sub-menu {
    display: block !important;
  }

  /* 4. Force the individual dropdown links to stack vertically */
  .main-navigation ul li ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 5. Format the links nicely inside the box */
  .main-navigation ul li ul.sub-menu li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 20px !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
}