/* ====================================================================
   MIL Theme Mobile Overrides
   Target: tablets & phones
   ==================================================================== */

:root{
  --gap: clamp(10px, 3vw, 24px);
}

/* ------------------------------------------------
   GENERAL CSS
---------------------------------------------------*/

#podcast_image {
  max-width: 75%;
  height: auto;
  display: block;
}

/* ------------------------------------------------
   GLOBAL / TYPOGRAPHY / SPACING
---------------------------------------------------*/
@media (max-width: 1024px){
  html{ scroll-behavior: smooth; }
  body{ overflow-x: hidden; }

  h1{ font-size: clamp(2rem, 6vw, 3rem); }
  h2{ font-size: clamp(1.4rem, 4vw, 2rem); }
  h3{ font-size: clamp(1.1rem, 3.2vw, 1.6rem); }
  p, li{ font-size: clamp(1rem, 1.8vw, 1.1rem); line-height: 1.7; }

  .button{
    padding: clamp(10px, 2.5vw, 14px) clamp(18px, 5vw, 28px);
  }

  /* kill hard heights / negative margins */
  #body_center_content{ margin-top: clamp(20px, 6vw, 60px); height: auto; }
  .operation_change{ min-height: 0; }
  #operation-change{
    margin: 0 auto;
    width: min(900px, 92vw);
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #content {
     padding: 0;
  }
  .entry-content > div {
    width: 140vw;
    max-width: 140vw;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}

/* ------------------------------------------------
   CONTAINER / LAYOUT GUTTERS
---------------------------------------------------*/
@media (max-width: 1024px){
  #container{
    width: 100%;
    display: grid;
    grid-template-columns: minmax(12px,1fr) min(1080px,92vw) minmax(12px,1fr);
    margin-top: 0;
  }

  .grid-side-by-side{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }

  .grid-container-left,
  .grid-container-right{
    padding: clamp(10px, 3vw, 20px);
    padding-top: clamp(10px, 4vw, 24px);
  }

  #choose_your_path{ padding-top: clamp(16px, 5vw, 40px); margin-top: 0 !important; }
  .choose-link{ font-size: clamp(18px, 2.6vw, 22px) !important; padding: 6px 0; }
}

/* ------------------------------------------------
   HEADER / HERO BACKGROUND
---------------------------------------------------*/
@media (max-width: 1024px){
  header{
    width: 100vw !important;
    height: auto;
    min-height: 420px;
    background-size: cover !important;
    background-position: top center;
  }
}

/* ------------------------------------------------
   NAV (simple hamburger support)
---------------------------------------------------*/
@media (max-width: 1024px){
  .nav-toggle{
    display:none !important;
  /*
    display: inline-block;
    border: 0;
    background: #452E86;
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 999px;
    margin: 10px 16px;
  */
  }
  .main-nav{ display: block !important; }
  .main-nav.is-open{ display: block; }
  .main-nav ul{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
  }
}

/* ------------------------------------------------
   HERO VIDEOS STACK INSTEAD OF ABSOLUTE
---------------------------------------------------*/
@media (max-width: 1024px){
  #video_hero{ position: relative; padding-top: 10px; }

  #vidoe01_container,
  #vidoe02_container,
  #vidoe03_container{
    position: relative;
    width: min(85vw, 420px);
    height: auto;
    margin: 20px auto;
  }

  #video01,#video02,#video03{
    position: relative;
    width: 85%;
    height: auto;
    aspect-ratio: 1/1;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
  }

  #circle01,#circle02,#circle03{
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
  }

  .bg_yellow_circle,
  .bg_green_circle,
  .bg_blue_circle{ display: none; }
}

/* ------------------------------------------------
   PARTNERS & SPONSORS
---------------------------------------------------*/
@media (max-width: 1024px){
  #partners_home{
    margin-left: 0;
    margin-top: clamp(40px, 10vw, 120px);
    align-items: center;
  }

  .partner_row{
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gap);
    width: min(800px, 92vw);
  }

  .partner_logo{ max-width: 100%; height: auto; }

  #sponsors_wrapper{
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 0;
    background-size: cover;
    background-position: top center;
    padding: clamp(40px, 8vw, 120px) 0;
    z-index: auto;
  }

  #sponsors_home{
    width: min(1000px, 92vw);
    margin: 0 auto;
  }
}

/* ------------------------------------------------
   FOOTER
---------------------------------------------------*/
@media (max-width: 1600px){
  footer{
    background-size: cover;
    padding-top: clamp(80px, 14vw, 220px);
    height: auto;
    width: 150vw !important;
  }
  .footer-side-by-side{
    margin-top: clamp(-40px, -8vw, -120px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap);
  }
  .footer-container-left,
  .footer-container-right{
    padding: clamp(10px, 3vw, 20px);
    padding-top: 40px;
  }
  .footer-container-right {
     margin-top: -100px;
  }
  .footer_logo{ max-width: min(350px, 60vw); height: auto; }
  .social_media {
     margin-top:20px !important;
     margin-bottom: 20px !important;
  }
}

/* ------------------------------------------------
   IMAGES / TABLES / FORMS
---------------------------------------------------*/
@media (max-width: 1024px){
  img{ max-width: 100%; height: auto; }
  table{ display: block; width: 100%; overflow-x: auto; }
  .search-form .search-field{ width: min(420px, 90vw); }
}

/* ------------------------------------------------
   POPUP OVERLAY IMAGE FULLSCREEN FIX (CENTERED)
---------------------------------------------------*/

@media (max-width: 1024px){
  #popup-overlay {
    position: fixed !important; /* lock to viewport */
    top: 0;
    left: 0;
    width: 145vw;
    height: 145vh;
    background: rgba(0,0,0,0.75); /* optional dim background */
    z-index: 9999; /* stay above everything */
    display: flex;
    justify-content: center; /* center horizontally */
    align-items: center;     /* center vertically */
    padding: 5vw; /* optional: prevent edge clipping */
    box-sizing: border-box;
  }

  #popup-overlay img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: cover; /* keep aspect ratio without cropping */
  }
}
/* ------------------------------------------------
   EXTRA SMALL (=600px) Center search form
---------------------------------------------------*/

@media (max-width:600px){
/* Hide the donate button */
  #header-donate > a {
    visibility: hidden;
  }
  #site-logo {
     margin: 0 auto !important;
  }
  #site-logo img{
    width: 300%;
    height: auto;
    max-width: none !important; /* remove theme limit */
  }
  
  #sponsors_home.grid-side-by-side.fade-up div.grid-container-right {
    margin-top: 0 !important;
  }
  #sponsors_home h2  {
    margin-bottom: 80px !important;
  }
  .footer_link {   
    font-size:10px !important;
  }
}

/* ------------------------------------------------
   SEARCH FORM
---------------------------------------------------*/
/* Center the search form horizontally on very small screens */
@media (max-width: 600px) {
  /* Center the form horizontally with field on left and button on right */
  .search-form {
    display: flex;
    flex-direction: row;           /* keep field + button side-by-side */
    justify-content: normal!important;
    align-items: center;
    gap: 8px;                      /* space between input and button */
    width: 100%;
    margin-left: 0 auto!important;
  }

  .search-form .search-field {
    flex: 0 1 65vw;            /* take up most of the space */
    max-width: 220px;
    min-width: 180px;
    margin-left: 60% !important;
  }

  .search-form .search-submit {
    flex: 0 0 auto;            /* don't stretch */
    white-space: nowrap;
    margin-left: 40% !important;
  }
}
/* -----------------------------------------------
   CUSTOM HAMBURGER MENU
------------------------------------------------*/


/* Mobile breakpoint */
@media (max-width: 768px) {
  /* Swap visibility */
  .simple-hamburger { display: block; }
  #mega-menu-wrap-main-menu,
  #mega-menu-main-menu,
  .mega-menu-toggle,
  nav#menu .mega-close { display: none !important; }

  /* (Optional) mobile spacing tweaks */
  /* -- Deisable - DE
  .menu-root > li { padding: 12px 16px; }
  .menu-root ul li { padding-left: 20px; }
  */ 
}

@media (max-width: 768px) {
   /* Full-width menu that scrolls with page, under the button */
  .menu-panel {
    width: 150vw;                       /* take full viewport width */
    margin-left: calc(50% - 50vw);      /* break out of centered container */
    border-left: 0;
    border-right: 0;
    overflow: hidden;                   /* keeps the open/close transition tidy */
    border-bottom: 1px solid #eee;
    background: rgb(255, 242, 210);
  }
  .menu-panel.open {
    width: 150vw !important;
    max-height: 200vh;                  /* enough to reveal; tweak if you like */
    overflow: visible;                   /* once open, let content breathe */
    /* optional cosmetics: */
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    border-bottom: 1px solid #eee;
    background: rgb(255, 242, 210);
    padding-top:50px;
  } 

  /* Keep the hamburger where it is; make its container the positioning context */
  .simple-hamburger {
   position: relative;   /* anchoring context for nothing special, but safe */
    top: 12px;            /* adjust if your header is taller */
    right: 12px;
    z-index: 2000;        /* above header elements */
    display: inline-flex; /* keep the button visible on mobile */
    margin: 0;
  }
 
  .hamburger {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hamburger-box { width: 28px; height: 20px; display: inline-block; position: relative; }

  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    position: absolute;
    width: 28px;
    height: 2px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #222;
    transition: transform 200ms ease, opacity 200ms ease;
    content: "";
  }
  .hamburger-inner::before { top: -8px; transform: none; }
  .hamburger-inner::after  { top:  8px; transform: none; }

  /* X state */
  .hamburger.is-open .hamburger-inner { transform: rotate(45deg); }
  .hamburger.is-open .hamburger-inner::before { opacity: 0; }
  .hamburger.is-open .hamburger-inner::after { transform: rotate(-90deg); top: 0; }
   
  #hamburger-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-left:30px;           /* rely on size above */
    z-index:2100;
  }

  /* Overlay menu: full width, does NOT push layout */
  #hamburger-menu {
    position: absolute;       /* removes it from flow -> no push-down */
    top: 100%;                /* immediately below the button */
  /*  
    left: 50%;
    transform: translateX(-50%);
  */  
    width: 100vw;             /* full-bleed */
    margin-left: 0;           /* override any calc(50%-50vw) you had */
    border-left: 0;
    border-right: 0;
    z-index: 1500;            /* below the button but above content */
    overflow: hidden;         /* for the open/close animation */
  }

  /* When open: let the panel scroll, still not fixed */
  #hamburger-menu.open {
    max-height: 200vh;         /* adjust to taste */
    overflow: auto;           /* scroll menu content if tall */
    /* optional polish */
    background: rgb(255, 242, 210);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  
  .menu-root, .menu-root ul { list-style: none; margin: 0; padding: 0; }
  .menu-root > li { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; line-height: 0px !important;}
  .top-label { display: block; font-weight: 600; padding: 6px 0; color: #452e86 !important; padding-bottom:20px;}
  .menu-root ul li {
     font-size: 130%;
     padding-top: 6px !important; 
     line-height: 20px !important;
     margin-left:0px !important; 
  } 
}