/* -------------------------------------
1. Tablet / iPad changes (screens 1024px and smaller)
---------------------------------------- */
@media screen and (max-width: 1024px) {
  /* Type changes here for iPads if needed */
}


/* ------------------------------------
2. Phone / iPhone changes (screens 767px and smaller)
--------------------------------------- */
@media screen and (max-width: 767px) {

  /* Force page to fit screen width & keep scrollbar visible */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Make all main containers fluid */
  .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;
  }

  /* Site title styling */
  header h1, 
  .site-title, 
  h1.site-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
  }

  /* Navbar spacing and 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;
  }

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

  /* Fix header height */
  header, .header, nav {
    height: auto !important;
    min-height: auto !important;
  }

  /* ------------------------------------
     CONTAINERS & SCROLLBAR SETUP
  --------------------------------------- */
  .scroll-container, #mainContent, #mainWrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ------------------------------------
     IMAGE & WRAPPER FIX (High Specificity Winner)
  --------------------------------------- */
  #mainContent .image-wrapper,
  #mainWrapper #mainContent .image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainContent .image-wrapper img.small-image,
  #mainWrapper #mainContent .image-wrapper .small-image,
  .small-image, img, figure img {
    all: unset !important; /* Wipes out desktop overrides cleanly */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* Subtitles and text wrapping */
  p, span, .caption, .subtitle, figcaption, [class*="caption"], [class*="subtitle"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 5px !important;
    padding-right: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
.scroll-container, #mainContent, #mainWrapper {
    -webkit-overflow-scrolling: touch !important;
  }
}






/* Desktop: Use standard hover */
@media screen and (min-width: 768px) {
  .nav-list li.dropdown:hover .dropdown-content {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .nav-list li.dropdown .dropdown-content {
    display: none !important;
  }
  .nav-list li.dropdown.active .dropdown-content {
    display: block !important;
  }
  
   /* 1. Ensure the outer footer container spans the full screen */
  .center-footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Force the grey footer bar to stretch completely edge-to-edge */
  .footer-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Keep the text safely tucked away from the absolute screen edges */
  .footer-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
 
  
  
  /* 1. Ensure the outer header stretches full-width */
  header {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Force the header grey line to stretch completely edge-to-edge */
  .header-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Keep the site titles, page titles, and navbar safely padded from the edges */
  .page-header, 
  .site-title, 
  .navbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
 
  /* Allow smooth, native touch scrolling on mobile containers */
  .video-container, .scrollable-area {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* Enables smooth iPhone momentum scrolling */
  }
}
  
@media (max-width: 768px) {
    /* Hide the dropdown by default on mobile */
    .navbar .dropdown .dropdown-content {
        display: none;
    }

    /* When JavaScript adds 'mobile-open', show it stacked nicely */
    .navbar .dropdown.mobile-open .dropdown-content {
        display: block !important;
        position: static !important;
        background-color: #222 !important; /* Matches dark menus nicely */
        padding-left: 15px !important;
        margin-top: 5px !important;
    }

    /* Make touch targets bigger for mobile thumbs */
    .navbar .dropdown .dropdown-content li {
        margin: 8px 0 !important;
    }
}


/* For mobile screens (768px and under) */
@media (max-width: 768px) {
  /* Hide dropdown content by default */
  .dropdown-content {
    display: none;
  }

  /* When JavaScript adds the 'active' class to the parent <li>, show the menu */
  .dropdown.active .dropdown-content {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  /* Hide dropdowns by default on mobile */
  .nav-list li.dropdown .dropdown-content {
    display: none !important;
  }

  /* Show the dropdown when JavaScript activates it */
  .nav-list li.dropdown.active .dropdown-content {
    display: block !important;
    position: static !important;
    background-color: #222 !important;
    padding-left: 15px !important;
    margin-top: 5px !important;
  }
  /* Force iOS to recognize the buttons as clickable */
  .dropbtn {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
    
}
@media screen and (max-width: 768px) {
  /* All your mobile phone CSS rules go inside here */


/* =========================================================
     PHASE 1: CLEAN IMAGE SCALING & TEXT WRAPPING (Mobile)
     ========================================================= */

  /* --- Image & Wrapper Scaling --- */
  #mainContent .image-wrapper,
  #mainWrapper #mainContent .image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainContent .image-wrapper img.small-image,
  #mainWrapper #mainContent .image-wrapper .small-image,
  .small-image, img, figure img {
    all: unset !important; /* Wipes out desktop overrides cleanly */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* --- Text, Subtitles & Captions Wrapping --- */
  p, span, .caption, .subtitle, figcaption, [class*="caption"], [class*="subtitle"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 5px !important;
    padding-right: 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* Force the dropdown to show when active, without touching layout/formatting */
  .dropdown.active .dropdown-content {
    display: block !important;
    position: static !important;
    background-color: #222 !important; /* Adjust background if needed to match your menu */
  }

  
  }

@media screen and (max-width: 768px) {

  /* 1. Force the container into a clean vertical stack */
  .grid-container, 
  .slideshow-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px !important;
  }

  /* 2. Image goes FIRST */
  .grid-container img, 
  .slideshow-container img {
    order: 1 !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
  }

  /* 3. Toggle navigation stays locked on ONE horizontal line, right below the image */
  .toggle-nav, 
  .controls, 
  .nav-controls, 
  .button-row {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 140px auto !important;
  }

  /* 4. Caption footer sits at the bottom and wraps nicely without overlapping */
  .caption-footer, 
  .footer-caption, 
  .caption, 
  figcaption {
    order: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }
}
  
 @media screen and (max-width: 768px) {

  /* 1. Remove excess padding/margin at the bottom of your slideshow/grid container */
  .grid-container, 
  .slideshow-container {
    margin-bottom: 5px !important;
    padding-bottom: 5px !important;
  }

  /* 2. Tighten up the caption footer so it sits snugly near the bottom footer */
  .caption-footer, 
  .footer-caption, 
  .caption, 
  figcaption {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
  }

  /* 3. If there is a main wrapper holding extra space, trim it back */
  main, .main-content, .content-wrapper {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }
} 
  
  
  
@media screen and (max-width: 768px) {

  /* 1. The container acts as a fixed window */
  .grid-container, 
  .slideshow-container,
  .image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 65vh !important; /* Sets a consistent height window */
    margin-top: 15px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 2. Physically glue the bottom of EVERY image to the bottom of the container */
  .grid-container img, 
  .slideshow-container img,
  .image-wrapper img {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    max-width: 100% !important; /* Landscapes max out at full screen width */
    max-height: 100% !important; /* Portraits cap their height so they don't break boundaries */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 3. Navigation controls sit right below the fixed container */
  .toggle-nav, 
  .controls, 
  .nav-controls, 
  .button-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: -15px !important;
    margin-bottom: 10px !important;
  }
}