/* Eagle Firearms Academy — main.css */
/* Replaces style1.css + layout.css */

/* ===== RESET & BASE ===== */

* {
	box-sizing: border-box;
}

html {
	background-color: #222;
	background-image: url('../images/texture2.jpg');
	background-repeat: repeat;
}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: clamp(0.8rem, 1.3vw, 1.2rem);
	color: #fff;
	margin: 0;
	padding: 10px;
	background-color: #333;
	background-image: url('../images/texture2.jpg');
	background-repeat: repeat;
}

/* General link colors (overridden per region below) */
a {
	color: cyan;
}

a:hover {
	color: green;
}

/* ===== LAYOUT: CSS GRID CONTAINER =====
   Sidebar spans col 1 rows 1–2 (full height), preserving original float behavior.
   Row 1 height = masthead. Row 2 height = content.
   Inside sidebar: headerLogo at top, org-logos immediately below it.
*/

#container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	background-color: black;
	border: solid 1px gray;
	border-radius: 10px;
	display: grid;
	grid-template-columns: minmax(150px, 20%) 1fr;
	grid-template-areas:
		"sidebar  masthead"
		"sidebar  content"
		"footer   footer";
}

/* ===== SIDEBAR ===== */

#sidebar {
	grid-area: sidebar;
	background-color: #000;
	border-radius: 10px 0 0 0;
	text-align: center;
}

/* The dark rounded logo blob — its #222 background visually merges
   with the masthead beside it */
#headerLogo {
	border-radius: 10px 0 9999px 9999px;
	background-color: #222;
	padding: 0 8% 8%;
	margin-bottom: 20px;
}

#headerLogo img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}

#headerLogo img + img {
	margin-top: 10px;
}

/* ===== ORG LOGOS (inside sidebar, below headerLogo) ===== */

/* Org logo links: display:block centers each image,
   no borders — do NOT wrap these in <ul>/<li> */
#org-logos a {
	display: block;
	padding: 10%;
	font-weight: bold;
	text-decoration: none;
	color: #fece05;
}

#org-logos a:hover {
	color: #fece05;
	background-color: #333;
}

#org-logos a img {
	border: none;
	width: 100%;
	height: auto;
}

/* ===== MASTHEAD (top-right dark zone) ===== */

#masthead {
	grid-area: masthead;
	background-color: #222;
	border-radius: 0 10px 0 0;
	padding: 0 10px;
	overflow: auto;
}

#masthead h1 {
	text-align: center;
}

#masthead p {
	font-size: 0.8em;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

#masthead a {
	display: inline;
	font-weight: bold;
	text-decoration: none;
	color: white;
}

#masthead a:hover {
	background-color: transparent;
	color: white;
}

/* ===== MAIN CONTENT ===== */

#content {
	grid-area: content;
	background-color: #000;
	padding: 10px;
}

#content img {
	max-width: 100%;
	height: auto;
}

#certifications {
	font-weight: bold;
	font-size: medium;
}

.location-box {
	border-left: 5px green solid;
	padding-left: 10px;
}

.location-box h3 {
	color: green;
}

/* Utility */
.text-red   { color: red; }
.text-center { text-align: center; }
.text-small  { font-size: 0.85em; }

/* Photo gallery */
.album img {
	width: 220px;
	float: left;
	margin: 5px;
	border-radius: 10px;
	border: none;
}

/* ===== FOOTER ===== */

#footer {
	grid-area: footer;
	text-align: center;
	background-color: #000;
	border-radius: 0 0 10px 10px;
	padding: 0;
	overflow: auto;
}

#footer p {
	font-size: 0.8em;
	color: #fff;
	margin: 2px;
	padding: 2px;
}

#footer a {
	color: #fff;
	text-decoration: underline;
}

#footer a:hover {
	color: #fff;
	text-decoration: none;
}

/* ===== RESPONSIVE — tablet / mobile (≤650px) =====
   sidebar uses display:contents so its children (headerLogo, org-logos)
   become direct grid items and can be placed individually.
   Order: masthead → headerLogo (same #222 = unified dark header) →
          content → org-logos → footer */

@media (max-width: 650px) {

	#container {
		grid-template-columns: 1fr;
		grid-template-areas:
			"masthead"
			"headerLogo"
			"content"
			"org-logos"
			"footer";
	}

	#masthead {
		border-radius: 10px 10px 0 0;
	}

	/* Dissolve sidebar so its children become direct grid items */
	#sidebar {
		display: contents;
	}

	#headerLogo {
		grid-area: headerLogo;
		border-radius: 0;
		margin-bottom: 0;
		padding: 0.5rem;
		/* Lay the two academy logos side-by-side */
		display: flex;
		justify-content: center;
		gap: 1rem;
		align-items: center;
	}

	#headerLogo img {
		display: inline;
		margin: 0;
		max-width: none;
		max-height: 110px;
		width: auto;
	}

	#org-logos {
		grid-area: org-logos;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem;
	}

	#org-logos a {
		display: inline-block;
		padding: 3px;
	}

	#footer {
		border-radius: 0 0 10px 10px;
	}
}