/* font family */
body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	background-color: #e9ebee;
}

/* headings */
h1, h2, h3 {
	text-align: center;
	color: #1877F2; /* Facebook blue */
}

/* nav bar */
nav {
	grid-area: nav;
	background-color: white;
	padding: 1em;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	z-index: 1000;
}

/* header */
header {
	grid-area: header;
	background-color: #0b48b2; /* logo blue */
	padding: 1.5em;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	display: flex;
  	align-items: center;
}

.logo {
  height: 150px; /* adjust at smaller screens */
  margin-right: 20px;
}

.header-text {
  flex: 1;
  text-align: center;
}

.header-text h1 {
  background-color: #0b48b2;
  color: #FFFFFF;
  margin: 0;
  padding: 5px 10px;
}

.header-text h2 {
  color: #E4E6EB;
  margin: 5px 0 0 0;
}

/* main content */
main {
	grid-area: main;
	background-color: white;
	padding: 2em;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* aside */
aside {
	grid-area: aside;
	background-color: #fff;
	padding: 1em;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* footer */
footer {
	grid-area: footer;
	background-color: #f0f2f5;
	padding: 1em;
	text-align: center;
	color: #606770;
	border-radius: 8px;
	font-size: 0.9em;
}

/* nav links */
nav ul {
	position: sticky;
	top: 0;
	list-style: none;
	display: flex;
	gap: 1em;
	justify-content: center;
	margin: 0;
	padding: 0;
}

nav a {
	text-decoration: none;
	color: #0000ee;
	font-weight: bold;
}

nav a:hover {
	text-decoration: underline;
}

nav .active {
	color: black;
	text-decoration: underline;
}

img {
	max-width: 100%;
}

/* image groups for displaying images in a flex box */
.image-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
  margin: 2em 0;
}

.image-group img {
  max-width: 450px;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* paragraphs with single image */
.img-container {
    text-align: center;
    max-width: fit-content;
    margin: 3em auto;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Quiz Minigame styles */
.quiz-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "question question"
    "image1   image2"
    "feedback nextBtn";
  gap: 1em;
  max-width: 800px;
  margin: 2em auto;
  padding: 1em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  text-align: center;
}

.quiz-container .question-area  { grid-area: question; }
.quiz-container .image1-area   { grid-area: image1; }
.quiz-container .image2-area   { grid-area: image2; }
.quiz-container .feedback-area { grid-area: feedback; font-weight: bold; }
.quiz-container .nextBtn-area  { grid-area: nextBtn; }

.quiz-container .image-option {
  width: 100%;
  max-width: 300px;
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: transform 0.2s ease;
}
.quiz-container .image-option:hover {
  transform: scale(1.02);
}
.quiz-container .selected {
  border-color: #FFA726;
}
.quiz-container .hidden {
  display: none;
}
.quiz-container button {
  padding: 0.7em 1.5em;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: #fff;
  transition: background 0.2s;
}
.quiz-container button:hover {
  background-color: #45a049;
}

/* Homepage video styles */
.iframe-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 2em auto;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: #000;
}

.iframe-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* wrap text for all links in citations */
.citation-link {
  word-break: break-all;
}

/* Desktop screen */
@media (min-width: 800px) {
	.grid-container {
		display: grid;
		grid-template-areas:
			'header header header header header header'
			'nav nav main main main main'
			'nav nav footer footer footer footer';
		grid-gap: 1em;
		padding: 1em;
		background-color: #e9ebee;
		max-width: 1440px;
        margin: 0 auto;
	}
	nav ul {
		flex-direction: column;
	}
}

/* Mobile screen */
@media (max-width: 800px) {
	.grid-container {
		display: grid;
		grid-template-areas:
			'header'
			'nav'
			'main'
			'footer';
		grid-gap: 1em;
		padding: 1em;
		background-color: #e9ebee;
	}
	nav ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: .75em;
	}
	nav {
		position: sticky;
		top: 0;
	}
	header {padding: 1.5em 1em;}
	.logo {
		height: 100px;
    	margin-right: 10px;
	}
	.header-text h1 { font-size: 1.8em; }
	.header-text h2 { font-size: 1.2em; }
	.image-group { flex-direction: column; align-items: center; }
 	.quiz-container {
    	grid-template-columns: 1fr;
    	grid-template-rows: auto auto auto auto auto;
    	grid-template-areas:
      		"question"
      		"image1"
      		"image2"
      		"feedback"
      		"nextBtn";
  	}
  	.quiz-container .image-option { max-width: 100%; }
  	.iframe-container { width: 100%; height: 56.2%; }
}

/* Small mobile screen */
@media (max-width: 500px) {
	.logo {
		height: 75px;
    	margin-right: 10px;
	}
	.header-text h1 { font-size: 1.4em; }
	.header-text h2 { font-size: 1em; }
}

/* ✅ NEW: Smaller consistent image style */
.small-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 1.5em auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}