/* Responsive navigation styles for Brazilian Direct website
   This file contains styles specifically for the navigation menu
   to make it mobile-friendly.
*/

/* Mobile menu toggle button - will be shown on smaller screens */
.mobile-menu-toggle {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  background: #2c1f10;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle.active {
  background: #5f513f;
}

/* ===== MOBILE NAVIGATION RESPONSIVE DESIGN ===== */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
  /* Adjust header container for mobile nav */
  .header-container {
    position: relative;
    z-index: 1001;
  }
  
  .mobile-menu-toggle {
    display: block;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    font-size: 14px;
  }
  
  #nav {
    margin-top: 10px;
    height: auto;
    background: #2c1f10;
    position: relative;
    z-index: 999;
  }
  
  #nav_primary {
    float: none;
    margin-left: 0;
    width: 100%;
    padding: 0;
    display: none;
    flex-direction: column;
    background: #2c1f10;
    position: relative;
    z-index: 998;
  }
  
  #nav_primary.mobile-visible {
    display: flex !important;
  }
  
  #nav_primary li {
    float: none;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #5f513f;
    position: relative;
  }
  
  #nav_primary li a {
    float: none;
    width: 100%;
    text-indent: 0 !important;
    color: #fff !important;
    background: none !important;
    display: block;
    padding: 12px 15px;
    height: auto !important;
    text-align: left;
    font-size: 14px;
    box-sizing: border-box;
  }
  
  #nav_primary li:hover a, 
  #nav_primary li a:hover {
    background-color: #5f513f !important;
  }
  
  /* Handle dropdown menus on mobile */
  #nav_primary li .sub {
    position: static !important;
    width: 100%;
    display: none;
    padding: 0;
    margin: 0;
    background: #1a1008;
    border-radius: 0;
    opacity: 1 !important;
    z-index: 997;
  }
  
  #nav_primary li.open .sub {
    display: block !important;
  }
  
  #nav_primary li .sub ul {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
  }
  
  #nav_primary .sub ul li {
    width: 100%;
    border-bottom: 1px solid #3a2a1a;
  }
  
  #nav_primary .sub ul li h2 {
    padding: 8px 0 4px 20px;
    font-size: 14px;
    color: #c7ca89;
    border-bottom: 1px solid #3a2a1a;
    margin-bottom: 5px;
  }
  
  #nav_primary .sub ul li h2 a {
    color: #c7ca89 !important;
    padding: 0;
  }
  
  #nav_primary .sub ul li a {
    padding: 8px 5px 8px 35px !important;
    font-size: 12px;
  }
  
  /* Sample button responsive styling */
  #nav_primary .sub a.sample-button {
    margin: 5px 15px;
    display: block;
    text-align: center;
  }
  
  #nav_primary .sub a.sample-button:hover {
    background: none !important;
  }
  
  #nav_primary .sub a.sample-button img {
    max-width: 120px;
    height: auto;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
  .mobile-menu-toggle {
    display: block;
    top: 15px;
    right: 15px;
    padding: 10px 15px;
    font-size: 15px;
  }
  
  #nav {
    margin-top: 15px;
    height: auto;
    background: #2c1f10;
    position: relative;
    z-index: 999;
  }
  
  #nav_primary {
    float: none;
    margin-left: 0;
    width: 100%;
    padding: 0;
    display: none;
    flex-direction: column;
    background: #2c1f10;
    position: relative;
    z-index: 998;
  }
  
  #nav_primary.mobile-visible {
    display: flex !important;
  }
  
  #nav_primary li {
    float: none;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #5f513f;
  }
  
  #nav_primary li a {
    float: none;
    width: 100%;
    text-indent: 0 !important;
    color: #fff !important;
    background: none !important;
    display: block;
    padding: 12px 15px;
    height: auto !important;
    text-align: left;
    font-size: 15px;
    box-sizing: border-box;
  }
  
  #nav_primary li:hover a, 
  #nav_primary li a:hover {
    background-color: #5f513f !important;
  }
  
  #nav_primary li .sub {
    position: static !important;
    width: 100%;
    display: none;
    padding: 0;
    margin: 0;
    background: #1a1008;
    border-radius: 0;
    opacity: 1 !important;
  }
  
  #nav_primary li.open .sub {
    display: block !important;
  }
  
  #nav_primary .sub ul li a {
    padding: 8px 5px 8px 30px !important;
    font-size: 13px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 989px) {
  .mobile-menu-toggle {
    display: block;
    top: 20px;
    right: 20px;
  }
  
  #nav {
    margin-top: 15px;
    height: auto;
    background: #2c1f10;
    position: relative;
    z-index: 999;
  }
  
  #nav_primary {
    float: none;
    margin-left: 0;
    width: 100%;
    padding: 0;
    display: none;
    flex-direction: column;
    background: #2c1f10;
    position: relative;
    z-index: 998;
  }
  
  #nav_primary.mobile-visible {
    display: flex !important;
  }
  
  #nav_primary li {
    float: none;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #5f513f;
  }
  
  #nav_primary li a {
    float: none;
    width: 100%;
    text-indent: 0 !important;
    color: #fff !important;
    background: none !important;
    display: block;
    padding: 12px 15px;
    height: auto !important;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  #nav_primary li:hover a, 
  #nav_primary li a:hover {
    background-color: #5f513f !important;
  }
  
  /* Handle dropdown menus on tablet */
  #nav_primary li .sub {
    position: static !important;
    width: 100%;
    display: none;
    padding: 0;
    margin: 0;
    background: #1a1008;
    border-radius: 0;
    opacity: 1 !important;
  }
  
  #nav_primary li.open .sub {
    display: block !important;
  }
  
  #nav_primary li .sub ul {
    width: 100%;
    float: none;
    padding: 0;
  }
  
  #nav_primary .sub ul li h2 {
    padding: 10px 0 5px 15px;
  }
  
  #nav_primary .sub ul li a {
    padding: 8px 5px 8px 30px !important;
  }
  
  #nav_primary .sub a.sample-button:hover {
    background: none !important;
  }
}

/* Desktop styles */
@media (min-width: 990px) {
  .mobile-menu-toggle {
    display: none !important;
  }
  
  #nav {
    margin-top: 71px;
  }
  
  #nav_primary {
    display: flex !important; /* Always visible on larger screens */
    flex-direction: row;
    margin-left: 180px;
  }
  
  #nav_primary li {
    float: left;
    position: relative;
  }
  
  #nav_primary li a {
    text-indent: -9999px !important;
    height: 46px !important;
  }
  
  /* Ensure dropdown menus work properly on desktop */
  #nav_primary li .sub {
    position: absolute !important;
    top: 46px !important;
    left: 0 !important;
    display: none;
    background: #2c1f10 !important;
    padding: 15px !important;
    z-index: 990 !important;
    border-radius: 0 0 5px 5px;
  }
  
  /* Ensure dropdown text is visible */
  #nav_primary .sub ul li h2 a {
    color: #c7ca89 !important;
    text-indent: 0 !important;
  }
  
  #nav_primary .sub ul li a {
    color: #fff !important;
    text-indent: 0 !important;
    height: auto !important;
  }
}