/* Style for footer element */
footer {
	color: #2F4F4F;
	background-color: DarkTurquoise;
}
/* Style for h1 elements */
h1 {
	color: #2F4F4F;
	background-color: DarkTurquoise;
}
body {
	color: #696969;
}

 .az-nav { 
	display:flex; 
	gap:12px; 
	flex-wrap:wrap; 
	background:#f4f4f4; 
	padding:22px; 
	border-radius:6px; 
}

/* Responsive nav for azfacts_project.html */
.az-nav {
	display: flex;
	flex-wrap: nowrap; /* keep a single row on narrow viewports */
	gap: 8px;
	overflow-x: auto; /* allow scrolling instead of overlapping or stacking */
	-webkit-overflow-scrolling: touch; /* smoother scrolling on mobile */
	padding: 6px 0;
	align-items: center;
	white-space: nowrap;
}

.az-nav a {
	text-decoration: none;
	color: #003366;
	padding: 8px 12px;
	border-radius: 4px;
	background: #ffffff;
	border: 1px solid #dddddd;
	flex: 0 0 auto; /* don't shrink; keep natural size */
	margin: 0; /* gap handles spacing */
}

.az-nav a:hover { background: #003366; color: #ffffff; }

/* Visible focus for keyboard users */
.az-nav a:focus {
	outline: none;
	box-shadow: 0 0 0 3px #0366cc2e;
}

/* On wider screens allow wrapping so links can form multiple rows if needed */
@media (min-width: 640px) {
	.az-nav { flex-wrap: wrap; justify-content: flex-start; }
}

.header img { max-width:100%; height:auto; border:2px solid #333333; }
.container { max-width:1080px; margin:18px auto; padding:0 12px; }

/* Page-scoped resets for azfacts_project.html
	 - Add class "azfacts-project" to the page container to apply these rules only
		 to the activities overview page so global footer/h1 rules don't leak.
	 - Inline styles that previously existed on this page (footer and header image)
		 have been removed and moved into CSS (see `.azfacts-project footer` and
		 `.azfacts-project .az-header-image`).
	 - We now use selector specificity (e.g. `.azfacts-project header h1`) and
		 stylesheet ordering to override global rules rather than `!important`.

	 Notes for maintainers:
	 - If you need to change the page-specific appearance prefer increasing
		 selector specificity or placing the override later in the stylesheet.
	 - `!important` is not used here; only consider it when refactoring is
		 impractical and scope is strictly limited. */
		 
.azfacts-project header h1 {
	/* remove the site-wide h1 background and restore readable color
	   Use a more specific selector so we don't need !important. */
	background: transparent;
	color: #2F4F4F; /* a dark slate color similar to previous look */
	padding: 0;
	margin: 0 0 0.5rem 0;
}

.azfacts-project header {
	/* ensure header background is transparent for this page without !important */
	background: transparent;
}

.azfacts-project footer {
	/* make footer lighter and remove the turquoise background for this page
	   selector specificity is sufficient to override the global footer rule */
	background: transparent;
	color: #555555;
	margin-top: 18px;
	font-size: 0.9rem;
}

.azfacts-project p {
	color: #696969;
}

/* Header image for the azfacts project page: keep responsive behavior here */
.azfacts-project .az-header-image {
	max-width: 100%;
	height: auto;
	display: block;
}