/* =====================================================================
   Chad Greenway's Lead the Way Foundation - Mobile Responsive Layer
   Loaded last so it overrides the legacy fixed-width layout.
   Breakpoints:  900px = switch to hamburger nav / fluid header
                 768px = stack content grids & legacy layout tables
                 600px = single-column cards
   ===================================================================== */

/* ---- Prevent horizontal scrolling on the whole document ---- */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- Make the fixed 1200px containers fluid (cap at 1200) ----
   border-box is scoped to ONLY these containers + the mobile nav so the
   padding added below 1240px stays inside the 100% width. It has no effect
   at desktop widths (no padding/border there), so the desktop layout is
   unchanged. It is intentionally NOT applied globally, to avoid altering
   the legacy content-box components. */
.headerRow,
.converterRow,
.contentTable,
.mobile-nav,
.mobile-nav-toggle { box-sizing: border-box; }

.headerRow,
.converterRow,
.contentTable { width: 100% !important; max-width: 1200px; }

/* ---- Keep page content clear of the screen edges on phones/tablets.
   Scoped to <=900px so the desktop layout (>900px) is never altered. ---- */
@media (max-width: 900px) {
  .headerRow,
  .converterRow,
  .contentTable { padding-left: 14px; padding-right: 14px; }
}

/* ---- Fluid media inside page content ---- */
#pageContent img { max-width: 100%; }
#pageContent iframe { max-width: 100%; }
#pageContent table { max-width: 100%; }

/* ---- Mobile nav elements are hidden on desktop by default ---- */
.mobile-nav-toggle,
.mobile-nav,
.mobile-nav-backdrop { display: none; }

/* =====================================================================
   MOBILE NAVIGATION  (<= 900px)
   ===================================================================== */
@media (max-width: 900px) {

  /* Hide the desktop horizontal menu */
  #mbmcpebul_table,
  #mbmcpebul_wrapper { display: none !important; }

  /* Hamburger button (lives in the black logo bar) */
  .mobile-nav-toggle {
    display: inline-block;
    position: relative;
    z-index: 1100;
    width: 46px;
    height: 40px;
    padding: 8px 6px;
    margin: 30px 0;                 /* vertically centers inside the 100px bar */
    background: transparent;
    border: none;
    cursor: pointer;
    vertical-align: middle;
  }
  .mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 5px 0;
    background: #ffde17;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .mobile-nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
  .mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Slide-in panel */
  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 82%;
    max-width: 330px;
    height: 100%;
    background: #000000;
    z-index: 1090;
    padding: 78px 0 40px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.45);
  }
  .mobile-nav.open { transform: translateX(0); }

  .mobile-nav a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: gilroy, sans-serif;
    font-size: 18px;
    line-height: 22px;
    padding: 16px 26px;
    border-bottom: 1px solid #1e1e1e;
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus,
  .mobile-nav a:active { color: #ffde17; background: #111111; }

  .mobile-nav a.mobile-nav-donate {
    background: #ffde17;
    color: #213360;
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: 25px;
    margin: 18px 26px 0;
    padding: 12px 26px;
  }
  .mobile-nav a.mobile-nav-donate:hover { background: #f2cf00; color: #213360; }

  /* Dark backdrop behind the panel */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .mobile-nav-backdrop.open { opacity: 1; visibility: visible; }

  /* Stop background scroll while the menu is open */
  body.mobile-nav-lock { overflow: hidden; }

  /* Scale the logo down to fit the bar comfortably */
  #imgBannerLogo { max-height: 60px; width: auto; height: auto; }

  /* Aspect-correct all content images once the layout gets narrow */
  #pageContent img { height: auto !important; }
}

/* =====================================================================
   CONTENT STACKING  (<= 768px)
   ===================================================================== */
@media (max-width: 768px) {

  /* --- Card grids (Executive Board, Sponsors): 23% -> 2-up --- */
  #pageContent div[style*="width:23%"] {
    width: 46% !important;
    margin: 1% !important;
    vertical-align: top;
  }
  /* Inner fixed-width cards become fluid */
  #pageContent div[style*="width: 300px"],
  #pageContent div[style*="width:300px"],
  #pageContent div[style*="width: 240px"],
  #pageContent div[style*="width:240px"] {
    width: auto !important;
    max-width: 100%;
  }

  /* --- Legacy fixed-width layout tables -> full width & stacked --- */
  #pageContent table[style*="1220px"],
  #pageContent table[style*="1271px"],
  #pageContent table[style*="1202px"],
  #pageContent table[style*="1184"],
  #pageContent table[style*="1185"],
  #pageContent table[style*="1106px"],
  #pageContent table[style*="1006"] {
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
  }
  /* Their two big columns stack vertically */
  #pageContent table[style*="1220px"] > tbody > tr > td,
  #pageContent table[style*="1271px"] > tbody > tr > td,
  #pageContent table[style*="1202px"] > tbody > tr > td,
  #pageContent table[style*="1006"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: center !important;
  }

  /* --- Scale oversized headings --- */
  #pageContent span[style*="font-size: 50px"],
  #pageContent span[style*="font-size:50px"] { font-size: 32px !important; }
  #pageContent h1 { font-size: 30px; }
  #pageContent h1 span[style*="font-size: 72px"] { font-size: 40px !important; }
  .subFooter2Cell h2 { font-size: 30px !important; line-height: 34px !important; }

  /* --- Header social icons shrink so the row fits small screens --- */
  .headerRow img { width: 28px !important; height: auto !important; }
  .header .syellowButton { padding: 6px 12px; font-size: 13px; }
}

/* =====================================================================
   SINGLE COLUMN  (<= 600px)
   ===================================================================== */
@media (max-width: 600px) {
  #pageContent div[style*="width:23%"] { width: 100% !important; margin: 0 0 10px !important; }
  #pageContent span[style*="font-size: 50px"],
  #pageContent span[style*="font-size:50px"] { font-size: 28px !important; }
}

/* =====================================================================
   HOME PAGE "How Could You Help?" action buttons -> stack on mobile
   ===================================================================== */
@media (max-width: 768px) {
  .home-help-buttons,
  .home-help-buttons tbody,
  .home-help-buttons tr,
  .home-help-buttons td { display: block; width: auto !important; }
  .home-help-buttons td { text-align: center; padding: 8px 0 !important; }
  .home-help-buttons td img { display: block; margin: 0 auto; }
}