@charset "utf-8";
/* Mobile reflow — stopgap for the legacy layout, loaded after main.css.
   Everything here is scoped to the media query so desktop is untouched.
   Exception: #sponsors_heading is new markup (footer.inc.php) with no
   desktop styling of its own, so it's hidden here UNSCOPED (applies at
   every width) and only revealed inside the media query below. */
#sponsors_heading { display:none; }
/* -----------------------------------------------------------------------
   Breakpoint is 1024px, not a typical ~600px "phone-only" cutoff: the
   desktop CSS has a pre-existing bug where #header_graphic (a decorative
   corner flourish, position:absolute; left:788px; width:190px) forces the
   page to be ~978px wide regardless of viewport. Any window narrower than
   that already gets horizontal scroll under the ORIGINAL CSS, unrelated to
   this file. 1024px covers that whole dead zone (tablets + smaller laptop
   windows), not just phones. */
@media (max-width: 1024px) {

	/* ---- header: un-pin the absolutely-positioned logo/signup/nav and stack them ---- */
	#header {
		height:auto;
		padding:15px 15px 20px;
		box-sizing:border-box;
		background:#ed1c24; /* headerBG.gif is a subtle horizontal texture, tiles poorly when stacked tall */
	}
	#header_graphic { display:none; } /* decorative corner flourish, pinned at left:788px — not worth reflowing */
	/* On desktop the logo visually sits inside the red bar because it's
	   absolutely positioned to overlap #header's coordinate space. Here it's
	   a separate block above #header in normal flow, so give it the same
	   red background and zero gap — the two boxes touch flush and read as
	   one continuous bar that's simply grown taller to fit the logo. */
	#header_logo {
		position:static;
		display:block; /* it's an <a>, defaults to inline once un-absolutized — inline ignores width/height */
		width:100%;
		height:76px; /* 20px top breathing room + 56px logo; #header's own top padding handles the gap below */
		box-sizing:border-box;
		margin:0;
		background-color:#ed1c24;
		background-image:url(../images/logos/header_logo.gif);
		background-repeat:no-repeat;
		background-position:15px 20px; /* fixed offset, not "center" — keeps the top gap even as the box height changes */
		background-size:190px 56px; /* fixed size (not "contain") so the logo stays a consistent size independent of box height */
	}
	#signup_text {
		position:static;
		display:block;
		margin-bottom:8px;
	}
	#signup_form {
		position:static;
	}
	#signup_form input.text {
		width:100%;
		max-width:260px;
		box-sizing:border-box;
		margin:0 0 8px;
		display:block;
	}
	#email_signup_response {
		position:static;
	}
	#nav {
		position:static;
		display:block;
		margin-top:15px;
	}
	#nav a {
		display:inline-block;
		margin:0 12px 8px 0;
	}

	/* ---- main layout: fixed 830/500/220px columns -> single fluid column ---- */
	#container {
		width:auto;
		margin-left:0;
		padding:30px 15px 0; /* top gap so content isn't crowded against the red bar above */
		box-sizing:border-box;
	}
	#container #left,
	#container #right {
		float:none;
		width:auto;
	}
	#container #right {
		padding-top:25px;
	}
	#intro {
		width:auto;
	}

	/* ---- footer: fixed 900px width + fixed height clips wrapped content ---- */
	#footer {
		width:auto;
		margin-left:0;
		padding:20px 15px 20px;
		box-sizing:border-box;
		height:auto;
	}
	/* matches #intro h2's style so it reads as the same kind of label */
	#sponsors_heading {
		display:block;
		margin:0 0 12px;
		color:#ed1c24;
		font-weight:normal;
		font-size:18px;
		line-height:21px;
	}
	#sponsors {
		padding-top:15px; /* was 35px (inherited) — tightens the gap after the paragraph above */
	}
	.sponsors {
		height:auto;
		margin-bottom:25px; /* space before the tagline/copyright text that follows */
	}

	/* ---- events template: same fixed-column pattern as the main layout ---- */
	.event .left,
	.event .right {
		float:none;
		width:auto;
	}
	.event_photos {
		width:auto;
	}
	.event_notes {
		width:auto;
	}

	/* ---- images: never let a fixed-width graphic force horizontal scroll ---- */
	#container img,
	#footer img,
	.event img {
		max-width:100%;
		height:auto;
	}

	/* ---- job.php salary/posted/location table: scroll instead of squeezing ---- */
	.info-table {
		display:block;
		overflow-x:auto;
		white-space:nowrap;
	}
}