@charset "utf-8";
/* CSS Document */

/* T4A Portal Theme Variables */
:root, [data-bs-theme="light"] {
    /* Primary Colors */
    --t4a-navbar-bg: #31b2e0;
    --t4a-body-bg: #fff5f5;
	--t4a-nav-text: #36454F;
    /* Text & UI Colors */
    --t4a-text-primary: #36454F;
    --t4a-card-bg: #ffffff;
    --t4a-dropdown-bg: #ffffff;
    --t4a-dropdown-hover: #e9ecef;
    --t4a-btn-border: #ffffff;
    --t4a-btn-text: #ffffff;
    --t4a-btn-hover-bg: #ffffff;
    --t4a-btn-hover-text: #31b2e0;
	/* Form & Button Colors - Light */
    --t4a-input-bg: #ffffff;
    --t4a-input-border: #ced4da;
    --t4a-input-text: #212529;
    --t4a-primary-bg: var(--t4a-navbar-bg); 
    --t4a-primary-text: #ffffff;
    --t4a-primary-hover: #2691b8; 
    --t4a-link-color: var(--t4a-navbar-bg);
	--t4a-icon-color: #31b2e0;
	/* Text & UI Colors - Light Mode */
    --t4a-btn-border: #36454F; /* Almost black to match nav text */
    --t4a-btn-text: #36454F;   /* Almost black text */
    --t4a-btn-hover-bg: #36454F; 
    --t4a-btn-hover-text: #F5FEFD; /* Snow White text on hover */
	--t4a-btn-bg: #F5FEFD;
	--t4a-heading-sm: #708090;
	--t4a-heading-lg: #363636;
}

[data-bs-theme="dark"] {
    /* Dark Mode Overrides */
    --t4a-navbar-bg: #1a1d20; 
    --t4a-body-bg: #212529; 
    --t4a-nav-text: #E0E0E0;
    /* Text & UI Colors */
    --t4a-text-primary: #f8f9fa;
    --t4a-card-bg: #2b3035;
    --t4a-dropdown-bg: #343a40;
    --t4a-dropdown-hover: #495057;
    --t4a-btn-border: #f8f9fa;
    --t4a-btn-text: #f8f9fa;
    --t4a-btn-hover-bg: #f8f9fa;
    --t4a-btn-hover-text: #1a1d20;
	/* Form & Button Colors - Dark */
    --t4a-input-bg: #2b3035;
    --t4a-input-border: #495057;
    --t4a-input-text: #f8f9fa;
    --t4a-primary-bg: var(--t4a-navbar-bg);
    --t4a-primary-text: #E0E0E0;
    --t4a-primary-hover: #343a40;
    --t4a-link-color: #31b2e0;
	--t4a-icon-color: #B2BEB5;
	/* Text & UI Colors - Dark Mode */
    --t4a-btn-border: #ffffff; /* White border */
    --t4a-btn-text: #ffffff;   /* White text */
    --t4a-btn-hover-bg: #ffffff;
    --t4a-btn-hover-text: #1a1d20; /* Dark charcoal text on hover */
	--t4a-btn-bg: #36454F;
	--t4a-heading-sm: #ced4da;
	--t4a-heading-lg: #F5FEFD;
}

.lightsilver{ color: #E0E0E0; }
.gainsboro{ color: #DCDCDC; }
.lightgray{ color: #D3D3D3; }
.silver{ color: #C0C0C0; }
.darkgray{ color: #A9A9A9; }
.standardgray{ color: #808080; }
.dimgray{ color: #696969; }
.slategray{ color: #708090; }
.charcoal{ color: #36454F; }
.darkslate{ color: #363636; }
/* Styles the FontAwesome HTML5 icon */

.fa-html5 {
  color: #f06529;
  font-size: 2rem; /* Adjust the size as needed */
  transition: color 0.2s ease-in-out;
}
/* Styles the FontAwesome CSS3 icon */
.fa-css3-alt {
  color: #2965f1;
  font-size: 2rem; /* Matches your HTML5 icon size */
  transition: color 0.2s ease-in-out;
}


/* Base Theme Applications */
body {
    background-color: var(--t4a-body-bg);
    color: var(--t4a-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom Navbar */
.t4a-navbar {
    background-color: var(--t4a-navbar-bg);
    transition: background-color 0.3s ease;
}
/* Custom Navbar Links & Brand */
.t4a-navbar .navbar-brand,
.t4a-navbar .nav-link {
    color: var(--t4a-nav-text);
    text-decoration: none;
    text-underline-offset: 4px; /* Adds breathing room between the text and the underline */
    transition: color 0.3s ease, text-decoration-thickness 0.2s ease;
	font-weight: 600;
}
.t4a-heading-lg {
	color:  var(--t4a-heading-lg);
}
.t4a-heading-sm {
	color:  var(--t4a-heading-sm);
}
/* Force Bootstrap's active class to inherit our color and add the 1px underline */
.t4a-navbar .nav-link.active {
    color: var(--t4a-nav-text) !important; /* Overrides Bootstrap's default active darkening */
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Standard Hover: 1px underline */
.t4a-navbar .nav-link:hover {
    color: var(--t4a-nav-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Active + Hover state: 2px underline */
.t4a-navbar .nav-link.active:hover {
    text-decoration-thickness: 2px;
}

/* Custom Dropdown */
.t4a-dropdown-menu {
    background-color: var(--t4a-dropdown-bg);
}

.t4a-dropdown-menu .dropdown-item {
    color: var(--t4a-text-primary);
}

.t4a-dropdown-menu .dropdown-item:hover {
    background-color: var(--t4a-dropdown-hover);
}

/* Custom Outlined Buttons (Login/Register/Theme Toggle) */
.t4a-btn-outline {
    border: 1px solid var(--t4a-btn-border);
    color: var(--t4a-btn-text);
	background-color: var(--t4a-btn-bg);
    transition: all 0.2s ease-in-out;
	font-weight: 600;
}

.t4a-btn-outline:hover {
    background-color: var(--t4a-btn-hover-bg);
    color: var(--t4a-btn-hover-text);
}

/* Custom Cards */
.t4a-icon {
    color: var(--t4a-icon-color);
}


/* Custom Cards */
.t4a-card {
    background-color: var(--t4a-card-bg);
    color: var(--t4a-text-primary);
}

/* Custom Footer */
.t4a-footer {
    background-color: var(--t4a-navbar-bg); /* Matches the navbar background */
    transition: background-color 0.3s ease;
	
}

.t4a-footer-link,
.t4a-footer-text {
    color: var(--t4a-nav-text); /* Inherits black in light mode, white in dark mode */
    transition: color 0.3s ease;
	font-weight: 600;
}

.t4a-footer-link {
    text-decoration: none;
}

/* Adds the matching hover underline effect */
.t4a-footer-link:hover {
    color: var(--t4a-nav-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

/* Custom Form Inputs */
.t4a-input {
    background-color: var(--t4a-input-bg);
    border-color: var(--t4a-input-border);
    color: var(--t4a-input-text);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.t4a-input:focus {
    background-color: var(--t4a-input-bg);
    color: var(--t4a-input-text);
    border-color: var(--t4a-navbar-bg);
    box-shadow: 0 0 0 0.25rem rgba(49, 178, 224, 0.25);
}

/* Custom Primary Button */
.t4a-btn-primary {
    background-color: var(--t4a-primary-bg);
    color: var(--t4a-primary-text);
    border: none;
    transition: background-color 0.3s ease;
}

.t4a-btn-primary:hover,
.t4a-btn-primary:focus {
    background-color: var(--t4a-primary-hover);
    color: var(--t4a-primary-text);
}

/* Custom Text Links */
.t4a-text-link {
    color: var(--t4a-link-color);
    transition: color 0.3s ease, text-decoration-thickness 0.2s ease;
}

.t4a-text-link:hover {
    color: var(--t4a-link-color);
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
}

/* Helper for 2FA input spacing */
.letter-spacing-lg {
    letter-spacing: 0.5rem;
}

/* Ensure Google reCAPTCHA badge floats above the fixed footer */
.grecaptcha-badge {
    z-index: 1031 !important; /* Overrides Bootstrap's fixed-bottom (1030) */
    bottom: 85px !important; /* Pushes the badge up above the footer height */
}