/* --- START Custom Mobile Header Layout --- */

/* 1. HIDE THE CUSTOM HEADER ON DESKTOP & TABLET */
@media (min-width: 922px) {
  #GS_Child_Theme-mobile-masthead {
    display: none !important;
  }
}

/* 2. MOBILE LAYOUT (Applies to screens 921px and smaller) */
@media (max-width: 921px) {

  /* Ensure Astra's default header is hidden for all edge cases */
  #ast-mobile-header {
    display: none !important;
  }

  /* Make sure our custom header is visible and styled */
  #GS_Child_Theme-mobile-masthead {
    display: block !important;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 99;
  }

  /* Apply Flexbox to the bar container for L-C-R layout */
  .GS_Child_Theme-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
  }

  /* L-C-R Ordering */
  .GS_Child_Theme-mobile-bar .mobile-left { order: 1; flex-grow: 0; flex-shrink: 0; }
  .GS_Child_Theme-mobile-bar .mobile-center { order: 2; flex-grow: 1; text-align: center; padding: 0 10px; }
  .GS_Child_Theme-mobile-bar .mobile-right { order: 3; flex-grow: 0; flex-shrink: 0; }

  .mobile-center .site-title a {
    font-family: inherit; 
    text-transform: uppercase;
    font-size: .9rem;
    color: #333333 !important; /* ADDED: Forces the text to stay dark on all pages */
    text-decoration: none !important; /* ADDED: Prevents any rogue underlines */
  }

  /* Account Icon Styling */
  .mobile-right .account-icon {
    width: 24px;
    height: 24px;
    fill: #333;
  }

  /* =========================================================
     FIXED: AGGRESSIVE HAMBURGER MENU TOGGLE OVERRIDES
     ========================================================= */

  /* Force background and text color on all states */
  #GS_Child_Theme-menu-toggle,
  #GS_Child_Theme-menu-toggle.toggled,
  #GS_Child_Theme-menu-toggle:hover,
  #GS_Child_Theme-menu-toggle:focus,
  #GS_Child_Theme-menu-toggle:active,
  .menu-toggle {
    background-color: transparent !important;
    background: none !important;
    color: #333333 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 5px;
  }

  /* Force SVG and Path fill color so Astra cannot turn it white */
  #GS_Child_Theme-menu-toggle svg,
  #GS_Child_Theme-menu-toggle svg path,
  .mobile-menu-toggle-icon svg,
  .mobile-menu-toggle-icon svg path {
    fill: #333333 !important;
    color: #333333 !important;
  }

  /* --- HAMBURGER ICON STYLES (Simple Visibility) --- */

  /* 1. Sizing for the Toggle Container (Fixes squishing) */
  .mobile-menu-toggle-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 20px;
  }

  .mobile-menu-toggle-icon .ahfb-svg-iconset {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  /* 2. FORCE VISIBILITY: Hide the Close (X) icon permanently */
  .ast-close-svg {
    display: none !important;
  }

  /* 3. FORCE VISIBILITY: Ensure the Hamburger icon is always visible */
  .ast-menu2-svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* --- MENU DROPDOWN CONTAINER --- */

  /* CRITICAL: This is the primary menu wrapper. It starts hidden for JS slideToggle. */
  #GS_Child_Theme-primary-menu-wrap {
    display: none; /* Menu must start hidden! */
    width: 100%;
    background-color: #f7f7f7;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* 1. Base Menu List Styling */
  #GS_Child_Theme-primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* 2. Style all List Items (LIs) */
  #GS_Child_Theme-primary-menu li {
    border-bottom: 1px solid #ddd;
    position: relative; /* Needed for positioning the dropdown toggle */
  }

  /* 2.5 ADD HOVER EFFECT HERE */
  #GS_Child_Theme-primary-menu li:hover {
    background-color: #dbdbdb;
  }

  /* 2.7. Style for the Active Menu Item Indicator (Red Bar on Left) */
  #GS_Child_Theme-primary-menu li.current-menu-item > a,
  #GS_Child_Theme-primary-menu li.current-menu-item > a:before {
    position: relative;
  }

  #GS_Child_Theme-primary-menu li.current-menu-item > a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #e9ac1e;
    z-index: 100;
  }
/* 3. Style Menu Links (A) */
  #GS_Child_Theme-primary-menu li a {
    display: block;
    padding: 12px 20px; /* Adjusted padding so text centers perfectly */
    text-align: center; /* <--- ADDED: Centers the text */
    text-decoration: none;
    color: #333;
    font-weight: 500;
  }

  /* --- SUB-MENU ACCORDION STYLES --- */

  /* 4. Sub-menu UL styling (Initial Hide for Accordion) */
  #GS_Child_Theme-primary-menu .sub-menu {
    display: none; 
    list-style: none;
    padding: 0; /* <--- CHANGED: Removed the 40px left padding so sub-menus center perfectly too */
    margin: 0;
    background-color: #f0f0f0;
  }

  /* 5. Style the Sub-menu Links */
  #GS_Child_Theme-primary-menu .sub-menu li a {
    padding: 8px 10px;
    font-size: 0.95em;
    font-weight: normal;
    border: none;
  }

  /* 6. Style the Dropdown Toggle Icon (the chevron) */
  /* Targets the anchor tag inside a LI that has children */
  #GS_Child_Theme-primary-menu .menu-item-has-children > a {
    position: relative; /* FIXED: Uncommented this so the icon stays inside the box */
  }

  /* 7. Add the chevron icon using a pseudo-element on the parent link */
  #GS_Child_Theme-primary-menu .menu-item-has-children > a:after {
    content: "\2304";    /* FIXED: Uncommented */
    position: absolute;  /* FIXED: Uncommented */
    
    /* CHANGE 1: Move from right: 20px to left: 20px */
    left: 20px;   /* FIXED: Uncommented per your request */
    right: auto;  /* FIXED: Ensures right property doesn't interfere */
    
    top: 0;
    line-height: 44px;
    font-size: 20px;
    color: #555;
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  /* 8. Rotate the chevron when the parent LI has the 'menu-open' class */
  #GS_Child_Theme-primary-menu .menu-item-has-children.menu-open > a:after {
    transform: rotate(180deg);
  }
}
/* --- END Custom Mobile Header Layout --- */