/* ==========================================================================
   SMT Custom Website Theme
   Applied colors derived from the official SMT logo.
   ========================================================================== */

:root {
    /* --- Color Definitions --- */
    --smt-maroon: #A42C4A;     /* Main brand color, from logo text */
    --smt-teal:   #007A7C;     /* Secondary brand color, from circuit */
    --smt-teal-light: #00A6A6; /* For interactive states */

    /* Neutral palette derived from existing styles */
    --smt-bg-dark:    #212529; /* Dark Gray (Bootstrap's .bg-dark) */
    --smt-text-white: #ffffff;
    --smt-text-muted: rgba(255, 255, 255, 0.7); /* Adjusted for better readability than .5 */
}

/* ==========================================================================
   1. Typography & Headings
   ========================================================================== */
/* Ensure fw-bolder headings use the brand color */
.fw-bolder, h1, h2, h3, h4, h5, h6 {
    color: var(--smt-maroon) !important; /* Force override of generic text-white */
}

/* General text styling */
body {
    color: var(--smt-text-white);
    background-color: #ffffff; /* Ensure a clean white base */
}

/* Footer text styling */
footer .small.m-0.text-white {
    color: var(--smt-text-white) !important;
}

/* ==========================================================================
   2. Navigation Bar (navbar-dark bg-dark)
   ========================================================================== */
.navbar.navbar-dark.bg-dark {
    background-color: var(--smt-bg-dark) !important;
    border-bottom: 2px solid var(--smt-teal); /* subtle brand accent */
}

/* Navigation Links */
.navbar-dark .navbar-nav .nav-link {
    color: var(--smt-text-white);
    transition: color 0.3s ease;
}

/* Navigation Link Hover State */
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--smt-teal-light); /* Change link on hover */
}

/* Active Link (current page) */
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--smt-teal-light);
}

/* ==========================================================================
   3. Header (bg-dark)
   ========================================================================== */
header.bg-dark {
    background-color: var(--smt-bg-dark) !important;
    padding-bottom: 4rem !important; /* Add more breathing room */
}

/* Ensure header text uses the new variables */
header .text-white-50 {
    color: var(--smt-text-muted) !important;
}

/* ==========================================================================
   4. Features Section (bg-primary)
   ========================================================================== */
/* Target the Bootstrap .bg-primary class to use our teal */
.feature.bg-primary.bg-gradient {
    background-color: var(--smt-teal) !important;
    background-image: linear-gradient(180deg, var(--smt-teal), var(--smt-maroon)) !important; /* Subtle gradient shift towards maroon */
    color: var(--smt-text-white);
}

/* Adjust feature icon color if needed */
.feature .bi {
    color: var(--smt-text-white);
}

/* Feature Headings (using fw-bolder) */
.col.mb-5 .h5.fw-bolder {
    color: var(--smt-maroon) !important;
}

/* ==========================================================================
   5. Footer (bg-dark)
   ========================================================================== */
footer.bg-dark {
    background-color: var(--smt-bg-dark) !important;
}

/* Footer Links (using link-light) */
footer .link-light.small {
    color: var(--smt-text-muted);
    text-decoration: none;
}

footer .link-light.small:hover {
    color: var(--smt-teal-light);
    text-decoration: underline !important;
}