*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.6;
	color: #333;
	background: #fafafa;
	padding: 0 1rem;
}

header{
	background: #ffe9c8;
	padding: 2rem 0;
	text-align: center;
	margin-bottom: 2rem;
	/* break out of body padding to span full viewport width */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
}

/* Homepage mascot image (only present on index.html) */
header .mascot{
	/* width: 100px; */
	height: 150px;
	/* border-radius: 50%; */
	/* object-fit: cover; */
	position: absolute;
	left: 1rem; /* far left with page padding */
	top: 55%;
	transform: translateY(-50%);
}

/* Keep title and nav centered; no offset so they remain centered even with mascot */

header h1{
	font-size: 2rem;
	color: #4d3b1f;
	margin-bottom: .5rem;
}

nav a{
	margin: 0 .5rem;
	text-decoration: none;
	color: #6b4e2e;
	font-weight: bold;
}

nav a:hover{color:#c47b2c}

main{
	max-width: 900px;
	margin: 0 auto 2rem auto;
	padding: 0 1rem;
	flex: 1 0 auto;
}

main h2{color:#4d3b1f;margin-bottom:1rem}
main h3{color:#6b4e2e;margin-top:2rem;margin-bottom:1rem}
main p{margin-bottom:1rem}
main ul{margin-bottom:1rem;padding-left:1.5rem}
main ul li{margin-bottom:.5rem}

.contact-form{
	background:#ffe9c8;
	padding:1rem;
	border-radius:10px;
	box-shadow:0 2px 6px rgba(0,0,0,.1);
	margin-top:2rem;
}

.contact-form form{display:flex;flex-direction:column}
.contact-form label{margin-top:.5rem;font-weight:bold}
.contact-form input,.contact-form textarea{padding:.5rem;margin-top:.25rem;border:1px solid #ccc;border-radius:5px;font-family:'Roboto',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:1rem}
.contact-form button{margin-top:1rem;padding:.75rem;background:#c47b2c;color:white;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:bold}
.contact-form button:hover{background:#a65d1b}
#formStatus{margin-top:.75rem;font-weight:bold}

/* Two-column layout: intro content + contact form */
.columns{display:flex;gap:2rem;align-items:flex-start}
.columns .intro{flex:1}
.columns .contact-form{flex:0 0 340px;margin-top:0}
.columns .intro p{margin-bottom:1rem}

@media (max-width:800px){
	.columns{flex-direction:column}
	.columns .contact-form{flex:1;margin-top:1.5rem}
}

footer{
	text-align: center;
	margin-top: 3rem;
	padding: 1rem 0;
	background: #ffe9c8;
	color: #6b4e2e;
	font-size: .9rem;
	/* break out of body padding to span full viewport width */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
}
footer a{color:#6b4e2e;text-decoration:underline}
footer a:hover{color:#c47b2c}

@media(max-width:600px){header h1{font-size:1.5rem}nav a{display:block;margin:.25rem 0}}

/* FAQ Styles */
#faq {
  margin: 3rem 0;
}

#faq h2 {
  margin-bottom: 2rem;
  color: #4d3b1f;
}

#faq details {
  margin-bottom: 1rem;
  border: 1px solid #ffe9c8;
  border-radius: 8px;
  background: white;
}

#faq details summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: bold;
  color: #6b4e2e;
  user-select: none;
  position: relative;
}

#faq details summary:hover {
  background: #fff4e6;
  border-radius: 7px;
}

#faq details[open] summary {
  border-bottom: 1px solid #ffe9c8;
  border-radius: 7px 7px 0 0;
  background: #fff4e6;
}

#faq details p {
  padding: 1rem;
  margin: 0;
  color: #333;
}

/* Remove default triangle marker and add custom one */
#faq details summary::-webkit-details-marker {
  display: none;
}

#faq details summary::after {
  content: '+';
  position: absolute;
  right: 1rem;
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

#faq details[open] summary::after {
  content: '−';
}