/*
================================================================
  Mobile-First Base Styles (Default: Stacked Layout)
================================================================
*/

body {
	background-image: url('/images/red_fire_back.jpg');
	background-repeat: repeat;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.6;
	font-size: 12pt;
	width: 96%; /* Adjusted for better mobile padding */
	margin: 0 auto;
}

p {
	background-color: white;
	padding: 10px;
	line-height: 120%;
}

h1, h2, h3 {
	background-color: white;
	padding: 10px;
	font-weight: bold;
}

h1 { font-size: 18pt; }
h2 { font-size: 15pt; }
h3 { font-size: 13pt; }

a:link    { text-decoration: none; color: #990000; }
a:visited { text-decoration: none; color: #009900; }
a:hover   { text-decoration: underline; color: #f00; }
a:active  { text-decoration: underline; color: #00f; }

.mainText {
	background-color: #FFF;
	width: 100%;
	line-height: 1.6;
	max-width: 600px; /* New rule to limit the width */
	margin: 0 auto; /* New rule to center the content */
}

/*
  DEFAULT BEHAVIOR (MOBILE): No float. Elements are centered blocks.
*/
.set_images, .pull_quote {
	float: none; /* This ensures stacking on mobile */
	width: 100%;
	height: auto;
	margin: 15px auto; /* Provides vertical spacing and centers the block */
	box-sizing: border-box;
	page-break-inside: avoid;
}

.set_images {
	border: 10px solid white;
	background-color: #ffffff;
	text-align: center;
}

.fig_caption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 140%;
	text-align: center;
	padding: 4px;
}

.pull_quote {
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	line-height: 1.5;
	font-weight: bold;
	text-align: center; /* Center-align text for a cleaner mobile look */
	border: 2px solid black;
	background-color: #FFF;
}


/*
============================================================
  Responsive Styles for Larger Screens (Tablets & Desktops)
============================================================
*/

/* --- Medium Screens (tablet) --- */
/* On screens 768px and wider, introduce floating */
@media (min-width: 768px) {
	body {
		width: 88%; /* Return to original width */
	}

	/* CORE CHANGE: Re-introduce floats for wider screens */
	.set_images {
		float: left;
		width: 40%;
		margin: 10px 20px 10px 0; /* Margin for text wrapping */
	}

	.pull_quote {
		float: right;
		width: 50%;
		text-align: right; /* Restore right-alignment */
		margin: 10px 0 10px 20px; /* Margin for text wrapping */
	}
}

/* --- Large Screens (desktop) --- */
/* On screens 921px and wider, apply desktop-specific layout */
@media (min-width: 921px) {
	body {
		width: 600px;
		font-size: 12pt;
		line-height: 1.6;
	}

	p {
		padding: 20px;
	}
	
	/* Preserves the unique "outdent" effect for images */
	.set_images {
		position: relative;
		width: auto; /* Allow the outdent to work correctly */
		left: -80px;
		margin-right: -70px; /* Adjust margin for outdent */
		border-top: 20px solid white;
		border-right: 4px solid white;
		border-left: 4px solid white;
		border-bottom: 4px solid white;
		line-height: 1.6;
	}

	.pull_quote {
		width: 200px; /* Fixed width for large screens */
		margin-top: 20px;
		margin-right: 20px;
	}
}