/* ============================================================
   WTTF — Live Site Responsive Patch
   Paste into WordPress → Appearance → Additional CSS
   This targets the exact issues in your live CSS.
   ============================================================ */
@media (min-width: 1901px) and (max-width: 6000px) {
.wttf-root{
		margin:30px auto 30px auto !important;
	        min-height: 100vh;
	background:#fff !important;
		max-width:80% !important;
	}
	.wttf-form-body {
    max-height: 80vh !important;
}
	 .wttf_twoc {
    min-height: 92vh;
  }
	  :root {
    font-size: 1.3rem;
  }
	 .wttf_mphl { font-size: 2.1rem !important; }
  .wttf_med_hl { font-size: 2.3rem !important; }
	.wttf_sth { font-size: 1.5rem; }
  .wttf_stp { font-size: 1.05rem; }

}
@media (min-width: 1600px) and (max-width: 1900px) {
.wttf-root{
		margin:30px auto 30px auto !important;
	        min-height: 100vh;
	background:#fff !important;
		max-width:80% !important;
	}
	.wttf-form-body {
    max-height: 85vh !important;
}
	 .wttf_twoc {
    min-height: 80vh;
  }
	  :root {
    font-size: 1.1rem;
  }

}

@media (min-width: 1367px) and (max-width: 1599px) {
.wttf-root{
		margin:30px auto 30px auto !important;
	min-height: 100vh ;
		max-width:85% !important;
	}
		.wttf-form-body {
    max-height: 85vh !important;
}
	 .wttf_twoc {
    min-height: 85vh;
  }

}


/* ── 1. TWO-COLUMN: needs fixed height so inner areas scroll ── */
.wttf_twoc {
  overflow: hidden;
}

/* Desktop: fixed height */
@media (min-width: 768px) {
 .wttf_twoc {
   
   height: 100vh;
  }
	.wttf-form-body{
		 max-height: 80vh !important;
	}
  /* Left panel scrolls internally if content overflows */
  .wttf_mp {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
}


/* ── 2. RIGHT PANEL (About page): flex column ── */
.wttf_ab_right {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Override the max-height: 560px from your live CSS —
     height is controlled by the parent grid instead */
  max-height: none !important;
  height: 100%;
}


/* ── 3. TAB NAV: pinned, horizontal scroll only ── */
.wttf_tnav {
  flex-shrink: 0 !important;       /* never collapses */
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  overflow-x: auto !important;     /* horizontal scroll on mobile */
  overflow-y: visible !important;  /* NEVER scroll vertically */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}
.wttf_tnav::-webkit-scrollbar { display: none !important; }

/* Each button must not shrink */
.wttf_tbtn {
  flex-shrink: 0 !important;
}


/* ── 4. TAB CONTENT: ONLY this area scrolls vertically ── */
.wttf_tcon {
  flex: 1 !important;
  min-height: 0 !important;   /* KEY — flex children default to min-height:auto
                                  which prevents scroll; 0 enables it */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* ── 5. VOLUNTEER right panel: same treatment ── */
.wttf_rp {
  overflow-y: auto;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .wttf_rp {
    height: 100%;
    max-height: none; /* your live CSS has max-height: 560px, this overrides */
  }
}


/* ── 6. DOD TIMES / STAR CHAMBER right panel ── */
.wttf_rscr {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
@media (min-width: 768px) {
  .wttf_rscr {
    height: 100%;
    max-height: none;
  }
}
.wttf_rsin {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.wttf_allink {
  flex-shrink: 0 !important; /* always pinned to bottom */
}


/* ── 7. MOBILE: stack layout, let everything expand naturally ── */
@media (max-width: 767px) {

  /* Stack columns */
  .wttf_twoc {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Left panel: expand to content */
  .wttf_mp {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Right panel: fixed height so inner scroll works */
  .wttf_ab_right {
    height: 520px !important;
    max-height: 520px !important;
  }

  /* Volunteer right panel */
  .wttf_rp {
    height: 480px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
  }

  /* DoD Times / Star Chamber */
  .wttf_rscr {
    height: 420px !important;
    max-height: 420px !important;
  }

  /* Grids go single column */
  .wttf_fcg {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .wttf_wg,
  .wttf_ngrid,
  .wttf_pgrid,
  .wttf_props_grid,
  .wttf_enacted_provs,
  .wttf_eng_types {
    grid-template-columns: 1fr !important;
  }
  .wttf_eng_grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Headings scale down */
  .wttf_mphl    { font-size: 1.4rem !important; }
  .wttf_med_hl  { font-size: 1.3rem !important; }
  .wttf_sth     { font-size: 1.05rem !important; }

  /* Press CTA stacks */
  .wttf_pcta {
    grid-template-columns: 1fr !important;
  }

  /* Engagement stat borders */
  .wttf_eng_st {
    border-right: none !important;
    border-bottom: 0.5px solid rgba(39, 149, 201, 0.12) !important;
  }

  /* Donate amount grid */
  .wttf_amtg {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Leadership header stacks */
  .wttf_ldrh {
    flex-wrap: wrap !important;
  }

  /* Topbar */
  .wttf_header__inner {
    padding: 0 10px !important;
  }

  /* wttf-scroll-y override on mobile — let it expand */
  .wttf-scroll-y {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ── 8. SMALL MOBILE (≤ 480px) ── */
@media (max-width: 480px) {

  .wttf_fcg {
    grid-template-columns: 1fr !important;
  }

  .wttf_s2x2 {
    grid-template-columns: 1fr !important;
  }

  .wttf_cp_stats {
    gap: 0.4rem !important;
  }
  .wttf_cpst {
    flex: 1 1 calc(50% - 0.4rem) !important;
  }

  .wttf_pcta h3 {
    font-size: 1.1rem !important;
  }

  .wttf_filter_row {
    flex-wrap: wrap !important;
  }

  .wttf_oc {
    font-size: 12px !important;
    padding: 0.3rem 0.45rem !important;
  }

  .wttf_feat_bar {
    padding: 0.7rem 0.85rem !important;
    gap: 0.35rem !important;
  }

  /* Buttons full width on tiny screens */
  .wttf_btnsm,
  .wttf_submit_btn,
  .wttf_btn_return {
    font-size: 15px !important;
  }

  /* About page left panel text */
  .wttf_ab_right {
    height: 480px !important;
    max-height: 480px !important;
  }
}