/* Streator Mobile Overflow Fix 1.0.0
   Phones only (max-width: 767px). Nothing here applies on tablets/desktop, so the 1280px layout is unchanged.
   Part A is the homepage fix. Part B fixes the same family of bug on other pages found while testing. */

/* ---- Part A: hero (home, /history/, /streatorfest/) ---------------------------------------------------------
   .hero is display:flex and .hero-in is its flex item with the default min-width:auto, so it cannot shrink below
   its min-content width. That is the hero search form: the input's intrinsic ~294px + the button ~125px + 8px
   border = ~427px. A 360-414px phone has only 320-374px, so the hero is 6-33px too wide and the page scrolls
   sideways. Letting the flex item shrink fixes it; the form's input already has min-width:0 and flex:1. */
@media (max-width: 767px) {
	.hero > .hero-in { min-width: 0; }
}

/* ---- Part B: same bug, other templates ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* Two-column page grid (business pages, news posts). At <=1000px the theme sets .lgrid{grid-template-columns:1fr};
	   1fr is minmax(auto,1fr), so one wide child (300px <img width>, a button, a table) stretches the column past the
	   screen. .entry also has margin:0 auto, which stops it stretching to the track. */
	.lgrid > * { min-width: 0; }
	.lgrid > .entry { margin-left: 0; margin-right: 0; }
	.lgrid img { max-width: 100%; height: auto; }
	/* WordPress comment box: <textarea cols=45> is wider than the phone. */
	textarea#comment { max-width: 100%; box-sizing: border-box; }
	/* /streatorfest/ year rows: .fy-head is a nowrap flex row (96px year + text), the text column ends up ~170px wide and its words overflow it. Wrap the title under the year. */
	.fy-head { flex-wrap: wrap; gap: 8px 26px; }
	.fy-head > div { flex: 1 1 100%; min-width: 0; }
	.fy-head h2 { overflow-wrap: break-word; }
	/* /history/ section headings: 38px bold, one long word ("Hardscrabble") is wider than the padded box. */
	.history-body h2 { font-size: clamp(24px, 8vw, 38px); overflow-wrap: break-word; }
	/* Hero headings whose font-size is set too large for a phone: /streatorfest/ (80px, "StreatorFest" is ~440px wide)
	   and /history/ (84px inline style). */
	.fest-hero h1 { font-size: clamp(34px, 14vw, 80px); }
	header.hero h1[style*="font-size"] { font-size: clamp(34px, 13vw, 84px) !important; }
}