/* =========================================================
   CONSOLIDATED MOBILE HEADER, FOOTER & NAV FORMATTING ONLY
   ========================================================= */
@media screen and (max-width: 768px) {

  /* 1. Global Page Base & Fluid Containers */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .container, .wrapper, main, header, footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
  }

  /* 2. Header, Title & Header Bar Structure */
  header, .header, nav {
    height: auto !important;
    min-height: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  header h1, 
  .site-title, 
  h1.site-title, 
  .page-header, 
  .navbar {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
/* =========================================================
   LEAN FIX: Page Title Alignment Only (No Gaps / No Bar Widening)
   ========================================================= */

/* Target only the page title to nudge it back into place cleanly */
/* =========================================================
   NUDGE PAGE TITLE TEXT UP SLIGHTLY
   ========================================================= */
.page-title, 
h1.page-title, 
.page-header h1 {
  position: relative !important;
  top: -2px !important; /* Adjust this to -3px or -5px if needed */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.1 !important;
}

/* Ensure the page header container doesn't force extra gaps */
.page-header {
  margin: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}



  /* 3. Navigation List Layout */
  .nav-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px !important;
  }

  .nav-list li {
    flex: none !important;
    position: relative !important;
  }

  .nav-list a {
    font-size: 14px !important;
    padding: 0 2px !important;
  }

  /* 4. Footer & Footer Bar Structure */
  .center-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

 

 

  /* Spacing to prevent footer overlapping main content */
  main, .main-content, .content-wrapper {
    padding-bottom: 60px !important; 
    margin-bottom: 20px !important;
  }
  
}



/* =========================================================
   BULLETPROOF ABSOLUTE OVERLAY DROPDOWN (Zero Navbar Widening)
   ========================================================= */
@media screen and (max-width: 768px) {
  
  /* Force the nav container and parent list items to hold position context */
  body .navbar .nav-list,
  body .navbar .nav-list li.dropdown {
    position: relative !important;
  }

  /* Force absolute positioning with extreme specificity so it can NEVER push the navbar layout */
  body .navbar .nav-list li.dropdown.active .dropdown-content {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centers it smoothly without shifting layout */
    background-color: #404040 !important;
    min-width: 140px !important;
    width: max-content !important;
    box-sizing: border-box !important;
    padding: 5px 0 10px 0 !important;
    margin-top: 2px !important;
    z-index: 99999 !important;
    text-align: center !important;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3) !important;
  }

  /* Style the sub-links safely and cleanly */
  body .navbar .nav-list li.dropdown.active .dropdown-content li,
  body .navbar .nav-list li.dropdown.active .dropdown-content li a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 6px 15px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   STABLE MOBILE DROPDOWN (Left-Justified & Anchored)
   ========================================================= */
@media screen and (max-width: 768px) {
  
  /* Force the nav container and parent list items to hold position context */
  body .navbar .nav-list,
  body .navbar .nav-list li.dropdown {
    position: relative !important;
  }

  /* Anchor the dropdown cleanly to the left edge of the parent tab */
  body .navbar .nav-list li.dropdown.active .dropdown-content {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important; /* Aligns with the left edge of the tab */
    background-color: #404040 !important;
    min-width: 140px !important;
    width: max-content !important;
    box-sizing: border-box !important;
    padding: 5px 0 10px 0 !important;
    margin-top: 2px !important;
    z-index: 99999 !important;
    text-align: left !important; /* Left-justify text */
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3) !important;
  }

  /* Style and left-justify the sub-links safely */
  body .navbar .nav-list li.dropdown.active .dropdown-content li,
  body .navbar .nav-list li.dropdown.active .dropdown-content li a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 6px 15px !important;
    white-space: nowrap !important;
  }
}



/* To get WIDE IMAGES INTO VERTICAL FORMAT for iphone */
@media screen and (max-width: 768px) {
  /* Turn main into a flex container only when a landscape image is active */
  main.landscape-active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 140px) !important;
    box-sizing: border-box !important;
  }

  /* Flexbox margin: auto automatically locks it into the exact vertical center */
  main.landscape-active .grid-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: auto !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
  }

  main.landscape-active .image-cell {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  main.landscape-active .image-cell img {
    max-width: 100% !important;
    max-height: 48vh !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  main.landscape-active .nav-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 6px !important;
    width: 100% !important;
  }
}


@media screen and (max-width: 768px) {
  /* Default state for portrait/standard images */
  .grid-container {
    display: block !important;
    margin-top: 14vh !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

  .image-cell {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  .image-cell img {
    max-width: 100% !important;
    max-height: 48vh !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }

  .nav-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 6px !important;
    width: 100% !important;
  }

  /* Active state specifically for wide/landscape images */
  .grid-container.is-landscape {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin-top: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 10;
  }
}