:root {
	--ci-dark-blue: #003366; /* Code Institute dark blue */
	--ci-orange: #ff4c60; /* Code Institute red/orange */
	--ci-light-gray: #f4f4f4; /* Light gray */
	--ci-white: #ffffff; /* White */
	--ci-hover-orange: #e65a50; /* Hover orange */
	--ci-disabled-gray: #6c757d; /* Disabled gray */
	--ci-border-gray: #dee2e6; /* Border gray */
	--ci-teal: #008080; /* Teal for accessibility */
	--ci-teal-hover: #005050; /* Darker teal for hover */
	--ci-black: #020202; /* Black for text */
}

/* Header Styling */
header {
	background: var(--ci-dark-blue);
	color: var(--ci-white);
	padding: 20px 0;
	text-align: center;
}

/* Footer Styling */
footer {
	background: #0a192f; /* Keep this if it's a specific shade */
	color: var(--ci-white);
	padding: 15px 0;
}

footer a {
	color: var(--ci-orange);
	text-decoration: none;
}

footer a:hover {
	color: var(--ci-white);
	text-decoration: underline;
}

/* Logo Styling */
.logo {
	height: 150px; /* Adjust the height of the logo */
	width: auto; /* Maintain aspect ratio */
}

/* Card Styling */
.card {
	margin-bottom: 30px; /* Add spacing between rows of cards */
	border: 1px solid #ddd;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease-in-out;
	height: 100%; /* Ensure cards take up the full height of their container */
	display: flex;
	flex-direction: column; /* Stack card content vertically */
	background-color: var(--ci-white); /* White background for cards */
	color: #0a192f; /* Dark blue text for readability */
	position: relative; /* Make the card a positioning context for the flag */
}

.card:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.card-header {
	background-color: var(--ci-light-gray); /* Light gray for card headers */
	font-weight: bold;
}

.card-footer {
	background-color: var(--ci-light-gray); /* Light gray for card footers */
	margin-top: auto; /* Push footer to the bottom */
}

/* Ensure all cards have the same height */
.card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Push buttons to the bottom */
.card-body {
	display: flex;
	flex-direction: column;
	padding: 15px;
}

.card-body .mt-auto {
	display: flex;
	justify-content: space-between; /* Space buttons evenly with space around them */
	gap: 10px; /* Optional: Add consistent spacing between buttons */
	margin-top: auto; /* Keep buttons anchored at the bottom */
}

/* Button Styling */
.btn-info {
	background-color: var(--ci-orange);
	color: var(--ci-white);
	border: none;
	margin-top: 10px;
}

.btn-info:hover {
	background-color: var(--ci-hover-orange);
	color: var(--ci-white);
}

.btn-primary {
	background-color: var(--ci-dark-blue);
	color: var(--ci-white);
	border: none;
	margin-left: 20px;
	margin-top: 10px;
}

.btn-primary:hover {
	background-color: #002244; /* Slightly darker blue */
	color: var(--ci-white);
}

/* Row Styling */
.row {
	margin-bottom: 30px; /* Add spacing between rows */
}

/* Center and style the highlighted div */
.text-center.my-4 {
	background-color: #f8f9fa; /* Light gray background */
	padding: 15px; /* Add padding inside the div */
	border-radius: 5px; /* Rounded corners */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Style the paragraph */
.text-center.my-4 p {
	font-size: 1.1rem; /* Slightly larger font size */
	color: #333; /* Darker text color */
}

/* Style for the accessibility paragraph */
.accessibility-paragraph {
	background-color: var(--ci-dark-blue) !important; /* Code Institute's dark blue */
	color: var(--ci-white) !important; /* White text for contrast */
	padding: 20px; /* Add padding for spacing */
	border-radius: 8px; /* Rounded corners for a softer look */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for emphasis */
	width: 90%; /* Full width */
	margin: 0 auto; /* Center the div horizontally */
	text-align: center; /* Center the text */
}

.accessibility-paragraph p {
	font-size: 1.2rem; /* Slightly larger font size for readability */
	line-height: 1.8; /* Increase line spacing for better readability */
	margin: 0; /* Remove default margin */
}

div.accessibility-paragraph {
	background-color: var(--ci-light-gray) !important; /* Light gray background for contrast */
	color: var(--ci-black) !important; /* Dark text for readability */
	padding: 20px; /* Add padding for spacing */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for emphasis */
	width: 95% !important; /* Limit the width for better readability */
	margin: 0 auto; /* Center the div horizontally */
}

div.accessibility-paragraph p {
	font-size: 1.1rem; /* Slightly larger font size */
	line-height: 1.6; /* Increase line spacing for readability */
	margin: 0; /* Remove default margin */
}

/* Flexbox layout for job cards */
#JobAlertsSubmissions {
	display: flex;
	flex-wrap: wrap; /* Allow cards to wrap to the next row */
	gap: 20px; /* Add consistent spacing between cards */
	justify-content: center; /* Center the cards horizontally */
}

/* Ensure hidden cards do not take up space */
.job-card {
	display: flex; /* Ensure cards remain flex items */
	flex-direction: column; /* Maintain vertical layout for card content */
}

.job-card.hidden {
	display: none !important; /* Completely hide filtered-out cards */
}

/* Optional: Style for the job cards */
.job-card {
	flex: 1 1 calc(33.333% - 20px); /* Ensure cards take up 1/3 of the row with spacing */
	max-width: calc(33.333% - 20px); /* Prevent cards from exceeding 1/3 of the row */
	box-sizing: border-box; /* Include padding and border in width calculation */
}

/* Adjust modal for smaller screens */
@media (max-width: 576px) {
	.modal-dialog {
		max-width: 90%;
		margin: 1rem auto;
	}
	.job-card {
		margin-bottom: 1rem; /* Add spacing between rows */
	}
}

/* Ensure job cards take up full width on small screens */
@media (max-width: 576px) {
	.job-card {
		flex: 0 0 100%; /* Force full width */
		max-width: 100%; /* Ensure no gaps */
		margin-bottom: 1rem; /* Add spacing between rows */
	}
}

/* Ensure job cards take up two columns on tablet screens */
@media (min-width: 576px) and (max-width: 991px) {
	.job-card {
		flex: 0 0 100%; /* Two columns */
		max-width: 100%; /* Ensure no gaps */
	}
}

/* Ensure job cards take up full width on mobile screens */
@media (max-width: 576px) {
	.job-card {
		flex: 0 0 100%; /* Full width */
		max-width: 100%; /* Ensure no gaps */
		margin-bottom: 1rem; /* Add spacing between rows */
	}
}

/* Adjust job cards for smaller screens */
@media (max-width: 768px) {
	.card {
		margin-bottom: 1rem;
	}
}

.card-title img {
	vertical-align: middle; /* Align the flag with the text */
	border-radius: 2px; /* Optional: Add rounded corners to the flag */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

/* Style for the flag image */
.country-flag {
	width: 40px; /* Set the width of the flag */
	height: auto; /* Maintain aspect ratio */
	top: 2px; /* Position the flag 10px from the top */
	right: 2px; /* Position the flag 10px from the right */
	position: absolute; /* Position the flag absolutely within the card */
	border-radius: 5px; /* Optional: Add rounded corners */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
	z-index: 1; /* Ensure the flag appears above other elements */
	padding: 0; /* Remove any padding */
}

/* Center the flag container */
.flag-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px; /* Add spacing below the flag */
}

/* Align the flag and buttons in the same row */
.mt-auto.d-flex.align-items-center {
	display: flex;
	align-items: center; /* Vertically align the flag and buttons */
	gap: 10px; /* Add spacing between the flag and buttons */
}

/* Style for the buttons */
.btn {
	width: 100px; /* Set the width to match the flag */
	height: 40px; /* Set a consistent height */
	line-height: 40px; /* Vertically center the text */
	display: flex;
	align-items: center; /* Center the content vertically */
	justify-content: center; /* Center the content horizontally */
	padding: 0; /* Remove extra padding */
	font-size: 14px; /* Adjust font size for consistency */
}

/* Accessible text color */
.card-title span {
	color: var(--ci-teal); /* Teal for better UX and accessibility */
	font-weight: 500; /* Slightly bold for emphasis */
}

.card-title span:hover {
	color: var(--ci-teal-hover) !important; /* Darker teal on hover for better visibility */
	text-decoration: none; /* Add underline on hover for clarity */
}

/* Apply Poppins font globally */
body {
	font-family: "Poppins", Arial, sans-serif; /* Fallback to Arial and sans-serif */
	font-size: 16px; /* Base font size */
	line-height: 1.6; /* Improve readability */
	color: var(--ci-dark-blue); /* Default text color */
}

/* Adjust card body padding for better readability */
.card-body {
	padding: 30px 15px 15px 15px; /* Adjust padding for better spacing */
}

/* Ensure job cards take up full width on small screens */
@media (max-width: 576px) {
	.job-card {
		margin-bottom: 1rem; /* Add spacing between rows */
	}
}

/* Pagination container styling */
.pagination {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Pagination item styling */
.pagination .page-item {
	margin: 0 5px;
}

.pagination .page-link {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--ci-orange);
	text-decoration: none;
	border: 1px solid var(--ci-border-gray);
	border-radius: 0.25rem;
	background-color: var(--ci-white);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination .page-link:hover {
	background-color: var(--ci-orange);
	color: var(--ci-white);
}

.pagination .page-item.active .page-link {
	background-color: var(--ci-dark-blue);
	color: var(--ci-white);
	border-color: var(--ci-dark-blue);
}

.pagination .page-item.disabled .page-link {
	color: var(--ci-disabled-gray);
	pointer-events: none;
	background-color: var(--ci-white);
	border-color: var(--ci-border-gray);
}