/* Basic Reset & Typography */
body {
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	color: #333;
	overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: auto;
	overflow: hidden; /* Clears floats */
	padding: 0 20px;
	box-sizing: border-box;
}

/* Header & Navigation */
header {
	background: #333;
	color: #fff;
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative; /* For mobile nav positioning */
	overflow: visible; /* Override global .container rule to allow mobile nav dropdown to show */
}

header h1 a {
	color: #fff;
	text-decoration: none;
	font-size: 1.8rem;
	margin: 0;
}

/* Desktop Navigation */
header nav#main-nav ul {
	padding: 0;
	list-style: none;
	margin: 0;
	display: flex; /* Align items horizontally by default */
}

.logo {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	color: #f4f4f4;
	text-decoration: none;
}

.logo img {
	height: 40px;
	width: auto;
}

header nav#main-nav ul li {
	display: inline; /* Fallback for older browsers or if flex fails */
	margin-left: 20px;
}

header nav#main-nav ul li a {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	padding: 0.5rem 0; /* Add padding for better touch targets on mobile */
	display: block; /* Make entire area clickable */
}

header nav#main-nav ul li a:hover {
	color: #ddd;
}

/* Mobile Navigation Toggle (Hamburger) */
.mobile-nav-toggle {
	display: none; /* Hidden by default, shown via media query */
	background: none;
	border: none;
	color: white;
	font-size: 1.5rem; /* Adjust as needed */
	cursor: pointer;
	padding: 0.5rem;
	z-index: 1001; /* Above nav */
}

.hamburger-icon {
	display: block;
	width: 25px;
	height: 3px;
	background-color: white;
	position: relative;
	transition: background-color 0s 0.1s linear; /* Delay hiding middle bar */
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 25px;
	height: 3px;
	background-color: white;
	transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

.hamburger-icon::before {
	top: -8px;
}

.hamburger-icon::after {
	top: 8px;
}

/* Active state for hamburger (X icon) */
.mobile-nav-toggle.active .hamburger-icon {
	background-color: transparent; /* Middle bar disappears */
}

.mobile-nav-toggle.active .hamburger-icon::before {
	transform: rotate(45deg);
	top: 0;
}

.mobile-nav-toggle.active .hamburger-icon::after {
	transform: rotate(-45deg);
	top: 0;
}

/* Main Content & Sections */
main {
	padding-top: 20px; /* Space below sticky header */
}

section {
	padding: 50px 0; /* Vertical padding for sections */
	margin-bottom: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	overflow: hidden; /* Contains elements for animation */
}

/* Scroll Animation Base Styles */
.animated-section {
	opacity: 0;
	transform: scale(0.95) translateY(20px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animated-section.is-visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

section h2 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 2.2rem;
	color: #333;
}

section p {
	font-size: 1.1rem;
	margin-bottom: 20px;
	color: #555;
	line-height: 1.7;
}

section img.full-width-image, /* Class for images meant to be larger */
section > .container > img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto;
	border-radius: 8px;
}

/* Specific Section Styles */
.text-only-section {
	background-color: #eef7ff; /* Lighter blue for subtlety */
}
.text-only-section p {
	max-width: 800px; /* Better readability for text-heavy sections */
	margin-left: auto;
	margin-right: auto;
}

.emoji-section {
	text-align: center;
}
.emoji-section p {
	font-size: 1.5rem; /* Larger emojis support */
	margin-bottom: 10px;
	color: #444;
}
.emoji-section p:first-of-type {
	/* The descriptive paragraph */
	font-size: 1.1rem;
	color: #555;
	margin-bottom: 25px;
}

/* Cards Section */
.cards-container {
	display: flex;
	flex-wrap: wrap;
	gap: 25px; /* Increased gap */
	justify-content: center;
	margin-top: 20px;
}

.card {
	background: #fdfdfd;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 25px;
	width: 100%;
	max-width: 320px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.card img {
	width: 100%; /* Slightly smaller, more iconic */
	height: auto;
	margin-bottom: 20px;
}

.card h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.4rem; /* Adjusted size */
	color: #333;
}
.card p {
	font-size: 0.95rem;
	color: #666;
	flex-grow: 1; /* Helps align content if cards have varying text lengths */
}

/* FAQ Section */
.faq-item {
	margin-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 20px;
}
.faq-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.faq-item h3 {
	font-size: 1.25rem; /* Slightly larger */
	color: #444;
	margin-top: 0;
	margin-bottom: 8px;
	/* cursor: pointer; /* Optional: for JS toggle later */
}
.faq-item p {
	font-size: 1rem;
	color: #555;
	margin-bottom: 0;
}

/* Contact Form */
#contact-form {
	display: flex;
	flex-direction: column;
	gap: 18px; /* Increased gap */
	max-width: 650px; /* Slightly wider */
	margin: 30px auto 0 auto; /* Added top margin */
	padding: 25px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

#contact-form div {
	/* Wrapper for label + input */
	display: flex;
	flex-direction: column;
}

#contact-form label {
	font-weight: bold;
	margin-bottom: 6px; /* Space between label and input */
	font-size: 0.95rem;
	color: #444;
}

#contact-form input[type='text'],
#contact-form input[type='email'],
#contact-form textarea {
	width: 100%;
	padding: 12px; /* Increased padding */
	border: 1px solid #ccc;
	border-radius: 5px; /* Slightly more rounded */
	box-sizing: border-box;
	font-size: 1rem;
}
#contact-form input[type='text']:focus,
#contact-form input[type='email']:focus,
#contact-form textarea:focus {
	border-color: #007bff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	outline: none;
}

#contact-form textarea {
	resize: vertical;
	min-height: 120px; /* Increased min-height */
}

#contact-form .checkbox-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px; /* Space between checkbox and label */
}

#contact-form .checkbox-container input[type='checkbox'] {
	width: auto; /* Override default input width */
	margin: 0; /* Reset margin */
	accent-color: #007bff; /* Color for the checkbox itself */
}

#contact-form .checkbox-container label {
	font-weight: normal; /* Regular weight for consent label */
	margin-bottom: 0; /* Align with checkbox */
	font-size: 0.9rem; /* Slightly smaller */
	color: #555;
}

#contact-form button {
	background-color: #28a745; /* Bootstrap success green */
	color: white;
	padding: 12px 25px; /* Adjusted padding */
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: bold;
	transition: background-color 0.2s ease, transform 0.2s ease;
	align-self: flex-start; /* Aligns button to the left if form is wider */
}

#contact-form button:hover {
	background-color: #218838; /* Darker green */
	transform: translateY(-2px);
}

#form-status {
	text-align: center;
	margin-top: 20px; /* Increased margin */
	font-weight: bold;
	font-size: 1.05rem; /* Slightly larger */
}

/* Form Submission Modal Styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	display: none; /* Hidden by default, JS controls visibility */
	align-items: center;
	justify-content: center;
	z-index: 2500; /* Above cookie modal and header */
	padding: 15px; /* Add padding for small screens so modal doesn't touch edges */
	box-sizing: border-box;
}

.modal-content {
	background-color: #fff;
	padding: 30px 25px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	text-align: center;
	max-width: 400px;
	width: 100%; /* Take full width up to max-width */
	box-sizing: border-box;
}

.modal-content .loader {
	border: 4px solid #f3f3f3; /* Light grey */
	border-top: 4px solid #007bff; /* Blue consistent with site's primary */
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	margin: 0 auto 15px auto; /* Center and add space below */
	display: none; /* Hidden by default, shown during loading */
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.modal-content #modal-form-status {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.1rem;
	line-height: 1.5;
}

/* Section CTA Button */
.section-cta-button {
	display: block;
	width: fit-content;
	margin: 30px auto 0 auto; /* Center block element and add top margin */
	padding: 12px 25px;
	background-color: #007bff; /* Primary blue */
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.section-cta-button:hover {
	background-color: #0056b3; /* Darker blue */
	transform: translateY(-2px);
	color: white; /* Ensure text color remains white on hover */
}

/* Footer */
footer {
	background: #2c3e50; /* Darker, more modern blue/grey */
	color: #bdc3c7; /* Lighter grey for text */
	text-align: center;
	padding: 40px 20px;
	margin-top: 30px;
}

footer p {
	margin: 8px 0;
	font-size: 0.95rem;
}
footer a {
	color: #ecf0f1; /* Even lighter for links */
	text-decoration: none;
}
footer a:hover {
	color: #fff;
	text-decoration: underline;
}

footer strong {
	color: #fff;
}

footer nav ul {
	list-style: none;
	padding: 0;
	margin-top: 15px;
	margin-bottom: 15px;
}

footer nav ul li {
	display: inline;
	margin: 0 10px;
}

footer nav ul li a {
	color: #bdc3c7;
}
footer nav ul li a:hover {
	color: #fff;
}

/* Cookie Consent Modal */
#cookie-consent-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(30, 30, 30, 0.95); /* Darker, more opaque */
	color: #f0f0f0;
	padding: 25px;
	box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.25);
	z-index: 2000;
	display: none; /* Hidden by default */
	box-sizing: border-box;
}
#cookie-consent-modal .container {
	/* To constrain content width within modal */
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap; /* Allow wrapping on small screens */
}

#cookie-consent-modal p {
	margin: 0 0 15px 0; /* Default for stacked layout */
	font-size: 0.9rem;
	line-height: 1.5;
	flex-grow: 1; /* Takes available space */
	padding-right: 20px; /* Space before buttons */
}
#cookie-consent-modal p a {
	color: #87cefa; /* Light sky blue for link */
	text-decoration: underline;
}

#cookie-consent-modal .cookie-buttons {
	display: flex;
	gap: 10px;
	flex-shrink: 0; /* Prevent buttons from shrinking */
}

#cookie-consent-modal button {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.9rem;
	transition: background-color 0.2s ease;
}

#accept-cookies {
	background-color: #28a745; /* Green */
	color: white;
}
#accept-cookies:hover {
	background-color: #218838;
}

#reject-cookies {
	background-color: #dc3545; /* Red */
	color: white;
}
#reject-cookies:hover {
	background-color: #c82333;
}

/* Legal Pages Specific Styles */
.legal-page-container {
	background: #fff;
	padding: 30px 40px;
	margin: 20px auto;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	max-width: 900px;
}
.legal-page-container h1 {
	margin-top: 0;
	font-size: 1.5rem;
	margin-bottom: 20px;
	color: #333;
}
.legal-page-container h2 {
	font-size: 1.5rem;
	margin-top: 30px;
	margin-bottom: 10px;
	color: #444;
	text-align: left; /* Override section h2 alignment */
}
.legal-page-container p,
.legal-page-container li {
	font-size: 1rem;
	line-height: 1.7;
	color: #555;
	margin-bottom: 10px;
}
.legal-page-container ul {
	padding-left: 20px;
	margin-bottom: 15px;
}

/* Responsive Design */
@media (max-width: 992px) {
	/* Medium devices (tablets, landscape phones) */
	.cards-container {
		justify-content: space-around; /* Better spacing for 2 cards per row */
	}
	.card {
		max-width: 45%; /* Allows two cards per row */
	}
}

@media (max-width: 768px) {
	/* Small devices (tablets, portrait phones) */
	header .container {
		/* flex-direction: column; No longer needed, nav will be absolute */
		/* text-align: center; No longer needed */
	}
	header h1 a {
		margin-bottom: 0; /* Reset for flex layout */
	}

	.mobile-nav-toggle {
		display: block; /* Show hamburger */
	}

	header nav#main-nav {
		display: none; /* Hide desktop nav by default */
		position: absolute;
		top: 100%; /* Position below header */
		left: 0;
		width: 100%;
		background-color: #333; /* Same as header or slightly different */
		padding: 10px 0;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
	header nav#main-nav.active {
		display: block; /* Show mobile nav when active */
	}

	header nav#main-nav ul {
		flex-direction: column; /* Stack links vertically */
		align-items: center; /* Center links */
		width: 100%;
	}

	header nav#main-nav ul li {
		display: block;
		margin: 10px 0; /* Vertical spacing */
		width: 100%;
		text-align: center;
	}
	header nav#main-nav ul li a {
		padding: 10px 20px; /* Larger clickable area */
		width: 100%;
		box-sizing: border-box;
	}
	header nav#main-nav ul li a:hover {
		background-color: #444; /* Highlight on hover/tap */
	}

	section {
		padding: 40px 0;
	}
	section h2 {
		font-size: 1.9rem;
	}
	.card {
		max-width: 70%; /* Cards take more width, still allowing some margin */
		margin-left: auto;
		margin-right: auto;
	}
	#contact-form {
		padding: 20px;
	}
	#cookie-consent-modal .container {
		flex-direction: column;
		text-align: center;
	}
	#cookie-consent-modal p {
		padding-right: 0;
		margin-bottom: 20px; /* More space before buttons */
	}
	#cookie-consent-modal .cookie-buttons button {
		width: 100%;
		margin-bottom: 5px;
	}
	.legal-page-container {
		padding: 20px;
	}
}

@media (max-width: 576px) {
	/* Extra small devices (phones) */
	body {
		font-size: 15px; /* Slightly smaller base font for small screens */
	}
	header h1 a {
		font-size: 1.6rem;
	}
	section h2 {
		font-size: 1.7rem;
	}
	section p,
	.faq-item p,
	.card p {
		font-size: 0.95rem;
	}
	.card {
		max-width: 90%; /* Cards take full available width */
	}
	.emoji-section p {
		font-size: 1.3rem;
	}
	.emoji-section p:first-of-type {
		font-size: 1rem;
	}
	#contact-form button {
		width: 100%;
		padding: 12px;
	}
	footer nav ul li {
		display: block; /* Stack footer links */
		margin: 5px 0;
	}
	.legal-page-container h1 {
		font-size: 1.7rem;
	}
	.legal-page-container h2 {
		font-size: 1.3rem;
	}
}