/* ==========================================================================
   WEBBA SaaS Engine - Global Theme Custom Properties (Variables)
   ========================================================================== */
:root {
	--color-cp1: #00a896;              /* Sleek Teal */
	--color-cp1-rgb: 0, 168, 150;      
	--color-cp2: #0091ff;              /* Electric Blue */
	--color-cp2-rgb: 0, 145, 255;      
	--color-cp3: #00f0ff;              /* Neon Cyan */
	--color-cp3-rgb: 0, 240, 255;      
	--color-cp4: #9d4edd;              /* Logo Cyber Purple */
	--color-cp4-rgb: 157, 78, 221;     
	--color-cp5: #e63946;              /* Modern Coral/Crimson */
	--color-cp5-rgb: 230, 57, 70;      
	--color-cp6: #27235e;              /* Deep Navy Blue */
	--color-cp6-rgb: 39, 35, 94;     	
	
	--color-cp7: #ffffff;              /* Clean White */
	--color-cp7-rgb: 255, 255, 255;    
	--color-cp8: #F5F7FD;             /* Soft App Background */
	--color-cp8-rgb: 245, 247, 253;   	
	
	--color-cp9: #555555;              /* Breadcrumbs grey */
	--color-cp9-rgb: 85, 85, 85;   	
	
	--color-cp10: #dae0e6;              /* Light Text */
	--color-cp10-rgb: 218, 224, 230;
	--color-cp11: #4a5568;              /* Dark Text */
	--color-cp11-rgb: 74, 85, 104;   	
    

    /* ----------------------------------------------------------------------
       2. Functional Component Theme Mappings
       ---------------------------------------------------------------------- */
    /* Top Brand Navigation / Menu Level 1 */
    --menu-bg-level1:         var(--color-cp6);
    --menu-text-level1:       var(--color-cp7);
    --menu-text-hover-level1: var(--color-cp2);
    --menu-text-active-level1:var(--color-cp7);
    --menu-active-border:     var(--color-cp2);

    /* Navigation Dropdowns / Menu Level 2 & 3 */
    --menu-bg-level2:         var(--color-cp6);
    --menu-text-level2:       var(--color-cp7);
    --menu-text-hover-level2: var(--color-cp2);
    --menu-bg-active-level2:  var(--color-cp2);
    --menu-text-active-level2:var(--color-cp7);

    /* Breadcrumbs */
    --breadcrumb-bg:          var(--color-cp8);
    --breadcrumb-text:        var(--color-cp9);
    --breadcrumb-text-link:   var(--color-cp2);
    --breadcrumb-text-active: var(--color-cp2);

    /* Main Content Elements */
    --heading-accent-line:    var(--color-cp2);
    --body-text-color-light:  var(--color-cp10);
    --body-text-color:        var(--color-cp11);
    --link-color:             var(--color-cp2);
    --link-hover-color:       var(--color-cp4);

    /* Table Component Custom Styling */
    --table-header-bg:        var(--color-cp1);
    --table-header-text:      var(--color-cp7);
    --table-border-color:     var(--color-cp10);

    /* Footers */
    --footer-bg:              var(--color-cp6);
    --footer-text:            var(--color-cp8);
}


/* --- Breadcrumbs UI --- */
nav[aria-label="breadcrumb"] {
    background-color: var(--breadcrumb-bg) !important;
}
.breadcrumb-item,
.breadcrumb-item a.webba-breadcrumbs,
.breadcrumb-item .webba-breadcrumbs {
    color: var(--breadcrumb-text) !important;
}

.breadcrumb-item a.webba-breadcrumbs:hover {
    color: var(--color-cp5) !important;
}
.breadcrumb-item.active,
.breadcrumb-item .webba-bc-active {
    color: var(--color-cp5) !important;
}
.breadcrumb-item.active,
.breadcrumb-item .webba-bc-active {
    color: var(--color-bright-red) !important; 
    font-weight: 700; 
}

/* Soft grey bootstrap slash dividers */
.breadcrumb-item + .breadcrumb-item::before {
    color: #adb5bd !important; 
}


.btn-webba-primary{
    --bs-btn-color: var(--color-cp7);
    --bs-btn-bg: var(--color-cp1);
    --bs-btn-border-color: var(--color-cp1);
    --bs-btn-hover-color: var(--color-cp7);
    --bs-btn-hover-bg: var(--color-cp4);
    --bs-btn-hover-border-color: var(--color-cp6);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--color-cp7);
    --bs-btn-active-bg: var(--color-cp6);
    --bs-btn-active-border-color: var(--color-cp4);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-cp7);
    --bs-btn-disabled-bg: var(--color-cp1);
    --bs-btn-disabled-border-color: var(--color-cp1);
}
.btn-outline-webba-primary{
	--bs-btn-color: var(--color-cp1);
    --bs-btn-border-color: var(--color-cp1);
    --bs-btn-hover-color: var(--color-cp7);
    --bs-btn-hover-bg: var(--color-cp1);
    --bs-btn-hover-border-color: var(--color-cp1);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--color-cp7);
    --bs-btn-active-bg: var(--color-cp1);
    --bs-btn-active-border-color: var(--color-cp1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-cp1);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-cp1);
    --bs-gradient: none;
}
.webba-primary{
	--bs-text-opacity: 1;
    color: rgba(var(--color-cp1-rgb), var(--bs-text-opacity)) !important;
}

/* Home Page */
/* 1. Force the section to fill the screen right to left */
.hero-section {
	position: relative;
	background-position: center center;	
	background-repeat: no-repeat; 
	background-size: cover;
	min-height: 60vh; /* Adjust height percentage or use vh as needed */
	width: 100vw;
	margin-left: calc(-50vw + 50%); /* Breaks out of container constraints if nested */
	left: 50%;
	transform: translateX(-50%);
	
	/* 2. Flexbox to center the text content horizontally and vertically */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff; /* White text for contrast over background image */
	
	/* Adjust this value to shift the text higher or lower */
	padding-bottom: 220px;
}

/* Dark overlay styling like the image example */
.hero-section.overlay::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.45); /* Adjust opacity for background dimming */
	z-index: 1;
}

/* Ensures text stands out above the overlay layer */
.hero-content {
	position: relative;
	z-index: 2;
	padding: 20px;
}

.hero-content .heading {
	font-size: 3rem; /* Clean, bold sizing matching your reference */
	font-weight: 600;
	margin-bottom: 15px;
}




/* ==========================================================================
   Functional Layout CSS Core Engine Rules
   ========================================================================== */

/* --- Top Navigation Overrides --- */
h1{
	color: var(--menu-bg-level1) !important;
}
.navbar {
    background-color: var(--menu-bg-level1) !important;
}

.navbar .nav-link {
    color: var(--menu-text-level1) !important;
    transition: color 0.2s ease-in-out;
}

.navbar .nav-link:hover, 
.navbar .nav-link:focus {
    color: var(--menu-text-hover-level1) !important;
}

.navbar .nav-link.active {
    color: var(--menu-text-active-level1) !important;
    border-bottom-color: var(--menu-active-border) !important;
	border-bottom-width: 3px !important; /* Makes the active underline thicker */
    border-bottom-style: solid !important; /* Ensures the border style is active */
}

/* --- Dropdown Menus (Level 2 & Level 3 Accordions) --- */
.dropdown-menu {
    background-color: var(--menu-bg-level2) !important;
}

.dropdown-item {
    color: var(--menu-text-level2) !important;
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    color: var(--menu-text-hover-level2) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dropdown-item.active {
    background-color: var(--menu-bg-active-level2) !important;
    color: var(--menu-text-active-level2) !important;
	font-weight: bold;
}



/* --- Main Typography Blocks --- */
#body_div p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--body-text-color);
    margin-bottom: 1.5rem;
}

#body_div .hero-section  p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--body-text-color-light) !important;
    margin-bottom: 1.5rem;
}

#body_div a:not(.btn):not(.dropdown-item) {
    color: var(--link-color);
    text-decoration: none;
}

#body_div a:not(.btn):not(.dropdown-item):hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

#body_div img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Heading Accent Rules */
.bg-primary.position-absolute.bottom-0.start-50 {
    background-color: var(--heading-accent-line) !important;
}

/* --- Dynamic Tables Style Injectors --- */
#body_div table {
    width: 100% !important;
    margin-bottom: 2rem;
    color: #212529;
    vertical-align: top;
    border-color: var(--table-border-color);
    border-collapse: collapse;
}

#body_div th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    font-weight: 600;
    padding: 0.75rem;
    border-bottom: 2px solid var(--table-border-color);
}

#body_div td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--table-border-color);
}

/* --- Global Utilities & Custom Component Additions --- */
.hover-translate {
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.hover-translate:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .transform-toggle {
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.2s ease-in-out;
}

[data-bs-toggle="collapse"] .transform-toggle {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}




.footer {
    background-color: var(--footer-bg) !important;
}

/* Explicitly target paragraphs and text inside the footer to beat Bootstrap resets */
.footer, 
.footer p {
    color: var(--footer-text) !important;
}

/* Targets hover states on the text elements */
.footer:hover, 
.footer:hover p,
.footer:active,
.footer:active p {	
    /*color: var(--footer-link-hover) !important; */
}