/***************************************************************
*
* VARIABLES
*
****************************************************************/

:root {
	--main-green: #00cc8c;
}

/***************************************************************
*
* BODY
*
****************************************************************/

body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
	/* font-family: 'Inter', sans-serif; */
	font-family: 'Poppins', sans-serif;
}

main
{
	flex: 1; /* Take up the available space */
}

/***************************************************************
*
* WIDTHS
*
****************************************************************/

@media(max-width: 768px)
{
	.mobile100
	{
		width: 100%;
	}
}

/***************************************************************
*
* CUSTOM COLORS
*
****************************************************************/

.green
{
	color: var(--main-green);
}

.red
{
	color: #dd0000;
}

.yellow
{
	color: #f7b104;
}

.grey
{
	color: #6d757d;
}

/* Default for all screens (mobile and smaller) */
.green-on-mobile {
	color: var(--main-green);
}

/* Large screens only */
@media (min-width: 992px) {
	.green-on-mobile {
		color: #1e3f44;
	}
}

/***************************************************************
*
* TYPOGRAPHY
*
****************************************************************/

h1 {
	color: #1e3f44;
}

h2 {
	font-weight: 500 !important;
	color: var(--main-green) !important;
}

h4
{
	color: var(--main-green) !important;
}

p, li
{
	color: #444444;
}

a
{
	color: var(--main-green);
	text-decoration: none;
}

a:hover
{
	color: var(--main-green);
}

.highlight
{
	color: #5a3993 !important;
}

.feint
{
	color: #cccccc
}

.smallPrint
{
	font-size: 0.8rem;
}

.list-group-item a
{
  cursor: pointer !important;
}

.list-group-item a:hover
{
	color: #000000;
}

.comment
{
	font-size:0.8rem;
}

.text-review
{
	color: #f7b104;
}

/***************************************************************
*
* BORDERS
*
****************************************************************/

.border-primary
{
	border-color: var(--main-green) !important;
}

/***************************************************************
*
* ICONS
*
****************************************************************/

.fa-ellipsis
{
	color: var(--main-green) !important;
}

/***************************************************************
*
* SITE NAME
*
****************************************************************/

.site-name
{
	font-size:1.6rem;
}

@media (max-width: 767px) { /* Mobile */
	.site-name
	{
		font-size:1.2rem;
	}
}

/***************************************************************
*
* NAVIGATION
*
****************************************************************/

nav
{

}

.nav-link
{
	color: #1e3f44;
}

.nav-link:hover
{
	color: var(--main-green);
}

/***************************************************************
*
* OFF CANVAS NAVIGATION
*
****************************************************************/

/* Dark grey, slightly opaque background for the offcanvas */
.offcanvas-start
{
	background-color: rgba(33, 33, 33, 0.95) !important; /* Dark grey with opacity */
}

/* Ensure the text color inside the offcanvas is white and not opaque */
.offcanvas-start .offcanvas-body, .offcanvas-start .offcanvas-header
{
	color: #ffffff;
}

.offcanvas-body h2
{
	color: #ffffff;
}

/* Apply white color to nav-links only inside the offcanvas */
.offcanvas-start .nav-link
{
	color: #ffffff;
}

/* Optional: Adjust hover or focus states of links inside offcanvas */
.offcanvas-start .nav-link:hover, .offcanvas-start .nav-link:focus
{
	color: var(--main-green);
}

/***************************************************************
*
* FORMS
*
****************************************************************/

/* Apply styles to all input, textarea, and select elements in forms */
form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.1rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

.input-group-text {
	background-color: #f5f5f5; /* Match input background */
	border: 2px solid #f5f5f5; /* Remove border */
}

/* Change checkbox background to main green when checked */
.form-check-input:checked {
	background-color: var(--main-green) !important;
	border-color: var(--main-green) !important;
}

/***************************************************************
*
* BUTTONS
*
****************************************************************/

.btn-primary
{
	background-color: #1e3f44;
	color: #ffffff;
	border: none;
	font-weight: bold;
}

.btn-primary:hover
{
	background-color: var(--main-green);
	color: #ffffff;
}

.btn-secondary
{
	border:none;
}

.btn-primary:active
{
	background-color: #000000 !important;
	border-color: #000000 !important;
}

.btn-light
{
	border: none;
}

.btn-light:hover
{
	background-color: #e7e7e7;
	border: none;
}

/***************************************************************
*
* PAGINATOR
*
****************************************************************/

.page-item.active .page-link
{
	background-color: var(--main-green);
	border-color: var(--main-green);
}

.page-link
{
	color: var(--main-green);
}

.page-link:hover
{
	background-color: var(--main-green);
	border-color: var(--main-green);
	color: #ffffff;
}

/***************************************************************
*
* FADE IN
*
****************************************************************/

.fade-in
{
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.show
{
	opacity: 1;
	transform: translateY(0);
}

/***************************************************************
*
* LOGO SLIDE IN
*
****************************************************************/

.logo-slide-in {
  transform: translateX(-100%); /* start off-screen left */
  opacity: 0;
  animation: slideInLeft 1s forwards; /* 1s duration, keep final state */
  animation-timing-function: ease-out;
}

@keyframes slideInLeft {
  to {
	transform: translateX(0);
	opacity: 1;
  }
}

/***************************************************************
*
* CLIPBOARD
*
****************************************************************/

/* Default for mobile / small screens: normal flow */
.clipboard-wrapper {
	position: relative; /* keep relative so shadow still works */
	margin-top: 0;      /* reset negative margin for small screens */
	z-index: 10;
	box-shadow: 0 15px 30px rgba(0,0,0,0.3);
	border-radius: 0.25rem;
}

.clipboard-wrapper img {
	display: block;
	width: 100%;
}

/* Apply positioning only on large screens */
@media (min-width: 992px) {
	.clipboard-wrapper {
		margin-top: -150px;  /* move up only on large screens */
		position: relative;  /* keep relative or change to absolute if needed */
	}
}

/***************************************************************
*
* HOME PANEL
*
****************************************************************/

#homePanel {
	background-color: var(--main-green);
	color: #ffffff;
	position: relative; /* Allows absolute positioning of the pseudo-element */
	overflow: hidden; /* Ensures the @ symbol doesn't overflow the div */
}

#homePanel h1, #homePanel h2, #homePanel h3, #homePanel h4
{
	color: #ffffff;
}

/***************************************************************
*
* PAGE HEADER
*
****************************************************************/

#pageHeader
{
	background-color: var(--main-green);
}

#pageHeader p
{
	color: #ffffff;
}

#pageHeader a
{
	color: #ffffff;
}

#pageHeader a:hover
{
	text-decoration: underline;
}

/***************************************************************
*
* BOTTOM NAVIGATION
*
****************************************************************/

.bottom-nav
{
	background-color: #272727;
}

.bottom-nav h5
{
	color: #ffffff;
}

.bottom-nav p
{
	color: #ffffff;
	font-size:0.9em;
}

.bottom-nav a
{
	color:#ffffff;
	text-decoration: none;
}

.bottom-nav a:hover
{
	color: var(--main-green) !important;
}

/***************************************************************
*
* FOOTER
*
****************************************************************/

.footer
{
	background-color: #000000;
	color: #cccccc;
}

.footer a
{
	color:#cccccc;
	text-decoration: none;
}

.footer a:hover
{
	color: var(--main-green) !important;
}