/* === Base Sticky Navigation === */
.sticky-nav {
  width: 100%;
  height: auto; /* Allows the nav to scale smoothly without vertical clipping */
  background: #f7e6d4;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  overflow: visible !important; /* Forces structural header rails to let menus drop down */
}

.sticky-nav.stuck {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === Skip Link (Keyboard Navigation) === */
.skip-link {
  position: absolute;
  top: -50px;
  left: 10px;
  background: #0066cc;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1002;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 10px;
}

/* === Hamburger Menu (Activated for Portrait Mobile Support) === */ /*
.hamburger {
  display: none; /* Hidden on desktop, toggled visible via media queries */ /*
  cursor: pointer;
  background: none;
  border: none;
  padding: 15px;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%); /* Centers button vertically inside nav bar */ /*
  z-index: 1001;
  color: #150d04;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #150d04; /* Swapped to dark tone to match your layout text color */ /*
  border-radius: 3px;
  transition: all 0.3s ease;
} */

/* === Desktop Layout (Default Rules) === */
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Allows tabs to wrap gracefully instead of overflowing out of bounds */
  overflow: visible !important;
}

.nav-item {
  flex: 1 1 auto; /* Allows links to grow and shrink proportionally based on content size */
  position: relative !important; /* CRITICAL: Anchors dropdowns cleanly underneath the specific tab button */
  text-align: center;
  overflow: visible !important;
}

.nav-link {
  display: block;
  margin: 0 0.5rem; /* Reduced from 1rem to prevent structural blowout on mid-sized screens */
  padding: 12px 10px;
  color: #150d04;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  font-size: 1.15rem;
  transition: all 0.3s ease;
  font-weight: 550;
  outline: none;
  border-radius: 7px;
  white-space: nowrap; /* Forces tab headers like "About the CFS" to stay on a single line */
}

.nav-link:hover, .nav-link:focus {
  background-color: #e6b37f;
  outline: 2px solid #c07326;
}

/* === Dropdown Styles (FIXED FOR RIGHT-EDGE CLIPPING) === */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0 !important;         
  right: auto !important;          
  
  /* CHANGE: Reduce minimum width boundaries to hug text cleanly */
  width: max-content !important; 
  min-width: 150px !important;  /* Reduced from 180px */
  
  background-color: #f7e6d4;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.dropdown:hover .dropdown-menu,
.dropdown.focused .dropdown-menu {
  display: block;
}

.dropdown-item a {
  display: block;
  font-size: 1rem;
  font-weight: 550;
  padding: 15px 25px;
  color: #150d04;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #eee;
  outline: none;
  text-align: left; /* Neatly aligns your links to the left inside the box */
}

.dropdown-item:last-child a {
  border-bottom: none;
}

.dropdown-item a:hover, .dropdown-item a:focus {
  background-color: #e6b37f;
  outline: 2px solid #553311;
}

/* ==========================================================================
   AUTOMATED NAVIGATION HIGHLIGHT UTILITY HOOKS
   ========================================================================== */

/* Top-Level Active Tabs: Thin, dark red outline visual cue */
.nav-tab-active {
  outline: 1px solid #8B0000 !important;
}

/* Dropdown Selected Subtabs: Dark gray and italicized typography emphasis */
.nav-subtab-active {
  color: #8c8c8c !important;
  font-style: italic !important;
}


/* ==========================================================================
   FINE-TUNED RESPONSIVE BREAKPOINTS (FIXED SCALING & GRIDS)
   ========================================================================== */

/* === Ultra-Wide Desktop (> 1378px) === */
@media (min-width: 1379px) {
  .nav-link {
    padding: 22px 28px !important;
    font-size: 1.15rem !important;
    margin: 0 1rem !important;
  }
}

/* === Large Desktop Transition (1069px - 1378px) === */
@media (max-width: 1378px) and (min-width: 1069px) {
  .nav-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
  }
  .nav-item {
    flex: 1 1 auto !important;
  }
  .nav-link {
    padding: 16px 10px !important;
    font-size: 1.05rem !important;
    margin: 0 0.4rem !important;
    white-space: nowrap !important;
  }
}

/* === Mid-Screen Scale Down (563px - 1068px) === */
@media (max-width: 1068px) and (min-width: 563px) {
  .nav-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
  }
  .nav-item {
    flex: 0 1 auto !important;
  }
  .nav-link {
    padding: 10px 8px !important;
    font-size: 0.92rem !important;
    margin: 4px 6px !important;
    white-space: nowrap !important;
  }
}

/* === Two Uniform Rows Grid (500px - 562px) === */
@media (max-width: 562px) and (min-width: 500px) {
  .nav-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px 6px !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .nav-item {
    width: 100% !important;
    display: block !important;
  }

  .nav-link {
    display: block !important;
    padding: 8px 4px !important;
    font-size: 0.82rem !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Replaces orginal "Small Mobile Devices segment when mobile suppport is off */
/* === Small Mobile Devices (< 500px) === */
@media (max-width: 499px) and (orientation: portrait) {
  .nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Two-column grid layout */
    gap: 8px !important;
    padding: 10px !important;
  }
  .nav-link {
    padding: 8px 4px !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* "Small Mobile Devices" segment commented out when mobile support is off */
/* === Small Mobile Devices & Portrait Views (< 500px) === */
/* FIXED: Locked to portrait layout so it won't step on landscape logic */
/*
@media (max-width: 499px) and (orientation: portrait) {
  .sticky-nav {
    min-height: 55px;
  }

  .hamburger {
    display: block !important;
  }

  .nav-list {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 10px 0 !important;
    background-color: #f7e6d4 !important;
  }

  .nav-list.show {
    display: flex !important;
  }

  .nav-item {
    width: 100% !important;
    text-align: center !important;
  }

  .nav-link {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 1.05rem !important;
    margin: 2px 0 !important;
    text-align: center !important;
  }

  .dropdown-menu {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    background-color: #eedbc8 !important;
  }

  .dropdown-item a {
    text-align: center !important;
    padding: 12px 10px !important;
    font-size: 0.98rem !important;
  }
}
*/
/* ==========================================================================
   FLEXBOX ROW WRAPPING DROPDOWN ALIGNMENT ANCHOR FIX
   ========================================================================== */
li.nav-item.dropdown {
    position: relative !important;   
    overflow: visible !important;   
}

li.nav-item.dropdown ul.dropdown-menu {
    position: absolute !important;
    top: 100% !important;           
    left: auto !important;          
    right: 0 !important;            
    transform: none !important;     
    width: max-content !important;  
    min-width: 160px !important;    /* Reduced from 200px */
    display: none;                  
}

li.nav-item.dropdown:hover ul.dropdown-menu,
li.nav-item.dropdown.focused ul.dropdown-menu {
    display: block !important;
}

/* ==========================================================================
   MOBILE LANDSCAPE INTEGRATED OVERRIDES & SAFETY VALVE COMBINED
   ========================================================================== */
@media screen and (max-height: 520px) and (orientation: landscape) {
  
  /* 1. Un-stick nav bar so it can scroll naturally when menu text is long */
  .sticky-nav {
    position: absolute !important;
    top: 0 !important;
    overflow: visible !important;
  }

  .nav-list {
    display: block !important;       
    padding: 4px 0 !important;
    text-align: center !important;  
    overflow: visible !important;
  }

  .nav-item {
    display: inline-block !important; 
    width: auto !important;
    position: static !important; /* Breaks out of the two-tab row calculation tracking context */
    overflow: visible !important;
  }

  .nav-link {
    display: block !important;
    padding: 6px 10px !important;
    font-size: 0.88rem !important; 
    margin: 2px 4px !important;
  }

  /* 3. HARD-ANCHORED VIEWPORT TRANSLATION SAFETY VALVE */
  ul.dropdown-menu {
    position: fixed !important;      /* CHANGED FROM ABSOLUTE TO FIXED: Completely escapes the menu row wrapper */
    top: 36px !important;            /* Positions it right underneath your flattened layout row tabs */
    left: 50vw !important;           /* Step A: Move the left border of the menu box to the dead-center of the glass screen */
    transform: translateX(-50%) !important; /* Step B: Shift it leftward slightly to perfectly balance it over the page center */
    right: auto !important;          /* Clears out the broken row coordinate calculators */

    /* ADD THIS LINE HERE: */
    max-width: none !important;      /* Destroys the 50% right-edge screen truncation trap */

    width: max-content !important;
	min-width: 150px !important;     /* Trimmed boundary */
    max-height: 60vh !important;     
    overflow-y: auto !important;     
    overflow-x: hidden !important;   
    background-color: #eedbc8 !important; 
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999 !important;       /* Forces it above absolutely everything on the viewport glass */
    -webkit-overflow-scrolling: touch !important; 
    display: none;
  }

  li.nav-item.dropdown:hover ul.dropdown-menu,
  li.nav-item.dropdown.focused ul.dropdown-menu {
    display: block !important;
  }

  /* 4. Pack multi-item lists tight so 3+ items display clearly */
  li.dropdown-item a {
    padding: 6px 12px !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
      
    /* ADD THESE NEW WRAPPING LIMITS HERE: */
    display: block !important;
    width: auto !important;
    white-space: normal !important; /* Enables natural text wrapping */
    max-width: 170px !important;     /* Forces the text to stack cleanly */ 
  }
} /* Closes the @media landscape container loop safely */

/* Update viewport height handling for dynamic mobile toolbars */
.container {
  min-height: 100vh; /* Fallback for older devices */
  min-height: 100dvh; /* Dynamic viewport height adjusts automatically in landscape */
}

/* Force layout reset and contain overflow when rotating */
@media screen and (orientation: landscape) and (max-height: 500px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  .layout-wrapper {
    display: flex;
    flex-direction: row;
    max-width: 100vw;
  }
}

/* ==========================================================================
   FINAL INTERIM MOBILE VISIBILITY BUGS FIX
   ========================================================================== */

/* --- FIX BUG 1: Stop Landscape Menu from Covering Page Titles --- */
@media screen and (max-height: 520px) and (orientation: landscape) {
    /* Change from absolute to relative to keep the header in the natural document flow */
    .sticky-nav {
        position: relative !important;
        top: auto !important;
    }
}

/* --- FIX BUG 2: Stop Submenus From Overflowing Off-Screen --- */

/* Step A: Portrait Fix (< 500px) */
@media (max-width: 499px) and (orientation: portrait) {
    /* Release dropdowns from narrow grid cell constraints */
    .nav-list {
        position: relative !important;
    }

    /* Break out of the narrow grid columns */
    .nav-item {
        position: static !important; 
	}
    
    /* Shrink and center globally */
    li.nav-item.dropdown ul.dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important; 
        width: max-content !important;   
        min-width: 140px !important;     
        max-width: 200px !important;     
        box-sizing: border-box !important;
    }
    
    li.dropdown-item a {
        text-align: center !important; 
        display: block !important;
        width: auto !important;
        white-space: normal !important;
        max-width: 170px !important;
    }
}

/* Step B: Landscape Fix Dropdown Adjustments */
@media screen and (max-height: 520px) and (orientation: landscape) {
    ul.dropdown-menu {
        /* Adjusting your existing fixed safety valve so it centers reliably based on viewport width */
        left: 50vw !important;
        transform: translateX(-50%) !important;

        /* ADD THIS LINE TO KILL THE LAST CASCADE CONFLICT: */
        right: auto !important;

        /* CHANGE HERE: Erase the wide 90vw boundaries */
        width: max-content !important; 
        min-width: 150px !important; 
    }
}