/* files/nav.css */

/* --- DESKTOP STYLES --- */
.custom-nav {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  float: right;
  margin-top: 20px;
  padding-right: 20px; /* Increase this value to move it further left */
}

.custom-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.custom-nav li { margin-left: 20px; }

.custom-nav a {
  text-decoration: none;
  color: #8d8d8d;
  font-size: 14px;
  transition: color 0.3s ease;
}

.custom-nav a:hover, .custom-nav a.active {
  color: #248d6c;
}

/* Hide the hamburger button on desktop */
.hamburger-btn {
  display: none;
}

/* --- MOBILE RESPONSIVENESS (Max-Width 767px) --- */
@media screen and (max-width: 767px) {
  #header { overflow: visible; }      /* theme sets hidden */
 
  /* 1. Header & Logo Centering */
  .header-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: top;
    min-height: 80px;
    padding: 10px 0;
    overflow: visible;
  }

  .logo {
    text-align: center !important;
    width: auto;
    float: none !important;
  }


  /* 2. Nav Container */
  .custom-nav {
    float: none;
    margin-top: 0;
    position: static;
  }

  /* 3. The Hamburger Button (Clickable Div) */
  .hamburger-btn {
    display: block;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    cursor: pointer; /* Required for iOS click bubbling */
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
  }


  /* Icon Bars */
  .hamburger-btn span,
  .hamburger-btn span::before,
  .hamburger-btn span::after {
    display: block;
    background: #333;
    height: 3px;
    width: 25px;
    position: relative;
    border-radius: 2px;
  }
  
  .hamburger-btn span { top: 5px; } /* Center the middle bar */
  .hamburger-btn span::before { content: ''; position: absolute; bottom: 8px; }
  .hamburger-btn span::after { content: ''; position: absolute; top: 8px; }

  /* 4. The Menu List (Hidden by default) */
  .custom-nav ul {
    display: none; /* Hidden */
    flex-direction: column;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    padding: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
  }

  .custom-nav li {
    margin: 15px 0;
    text-align: center;
  }

  /* 5. THE MAGIC: Show menu when the "open" class is added by JS */
  .custom-nav ul.open {
    display: flex;
  }
}
/* --- LOGO ALIGNMENT & SIZING OVERRIDES --- */

/* 1. DESKTOP TWEAKS (Min-width 768px) */
@media screen and (min-width: 768px) {
  /* Turn the header into a Flexbox container for perfect vertical centering */
  #header .header-wrap {
    display: flex !important;
    align-items: center !important;       /* Vertically centers Logo & Nav */
    justify-content: space-between !important; /* Pushes Logo left, Nav right */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reset Logo alignment */
  .logo {
    display: block !important;
    width: auto !important;
    padding-left: 20px !important; /* Keep left spacing */
    padding-top: 20px !important; /* move logo down slightly */
    /* vertical-align: baseline !important;  */
  }

  /* Constrain Desktop Logo Height */
  .logo img {
    max-height: 100px !important;
    width: auto;
  }

  /* Reset Nav to work with Flexbox (remove old floats/margins) */
  .custom-nav {
    float: none !important;
    margin-top: 0 !important; /* Remove top margin so it centers perfectly */
    padding-right: 20px !important;
  }
}

/* 2. MOBILE TWEAKS (Max-width 767px) */
@media screen and (max-width: 767px) {
  
  /* Flexbox for Mobile Header: Centers everything */
  #header .header-wrap,
  #header.minimal .header-wrap {
    display: flex !important;
    justify-content: center !important; /* Horizontal Center */
    align-items: center !important;     /* Vertical Center */
    min-height: 70px !important;       /* Taller header to fit logo */
    height: auto !important;
    position: relative;                 /* Anchor for hamburger */
  }

  #wsite-content {
    padding-top: 80px !important; /* Adjust this number based on your logo height */
  }

  /* Remove theme's default padding/offsets that push logo off-center */
  .logo, .logo > span {
    text-align: center !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important; /* CRITICAL: Removes uneven theme padding */
    display: block !important;
  }

  /* Constrain Mobile Logo Height */
  .logo img {
    max-height: 70px !important;
    width: auto;
    margin: 0 auto !important; /* Ensures image is centered in its block */
  }

  /* Keep Hamburger pinned to the left, independent of logo centering */
  .hamburger-btn {
    position: absolute;
    left: 20px;
    top: 40% !important;
    transform: translateY(-50%);
    margin: 0 !important;
    z-index: 1002;
  }
}
/* 1. Remove the purple top border */
.no-banner #header {
    border-top: none !important;
}