/*
 * Custom Bootstrap 5 Theme for Robbie the Robot Mascot
 *
 * This file redefines the Bootstrap color variables to match the mascot's
 * primary blue, deep accent blue, and near-black elements.
 *
 * To use: Include this file AFTER the main Bootstrap CSS file.
 */

:root {
    /* ------------------------------------------- */
    /* MASCOT COLOR PALETTE DEFINITION             */
    /* ------------------------------------------- */

    /*
     * Primary Color: The main, vibrant blue of the robot's body.
     * Used for primary buttons, links, and highlights.
     */
    --bs-primary: #00C0FF; /* Vibrant Robot Blue */
    --bs-primary-rgb: 0, 192, 255;

    /*
     * Secondary Color: The deep shadow/accent blue.
     * Used for secondary buttons, subtle dividers, or background contrast.
     */
    --bs-secondary: #007399; /* Deep Accent/Shadow Blue */
    --bs-secondary-rgb: 0, 115, 153;

    /*
     * Dark Color: The near-black used for the robot's screen and joints.
     * Used for dark backgrounds and text.
     */
    --bs-dark: #1A1A1A; /* Near Black / Screen Color */
    --bs-dark-rgb: 26, 26, 26;

    /*
     * Light Color: An off-white/light gray, slightly less harsh than pure white.
     */
    --bs-light: #F0F4F7; /* Soft Off-White */
    --bs-light-rgb: 240, 244, 247;

    /*
     * Info Color: A softer variant of the primary blue, good for alerts or badges.
     */
    --bs-info: #80E0FF; /* Lighter Primary Blue */
    --bs-info-rgb: 128, 224, 255;

    /* ------------------------------------------- */
    /* BACKGROUND AND TEXT VARS                    */
    /* ------------------------------------------- */

    /* Ensure text colors contrast well with the new dark background */
    --bs-body-color: var(--bs-dark);
    --bs-body-color-rgb: var(--bs-dark-rgb);
    --bs-body-bg: var(--bs-light);
    --bs-body-bg-rgb: var(--bs-light-rgb);

    /* Text contrast for dark backgrounds */
    .text-bg-dark {
        color: var(--bs-light) !important;
        background-color: var(--bs-dark) !important;
    }

    /* ------------------------------------------- */
    /* BUTTON STYLING IMPROVEMENTS (Optional but recommended) */
    /* ------------------------------------------- */

    /* Custom hover effect for primary buttons */
    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-secondary); /* Hover to the deep blue */
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-secondary);
        --bs-btn-active-border-color: var(--bs-secondary);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }
}

body {
    font-size: 18px;
}
nav .navbar-brand img {
    max-height: 65px;
}
footer img {
    max-height: 65px;
}
nav .nav-link {
    -webkit-transition: background-color 1s, color 1s;
    -moz-transition: background-color 1s, color 1s;
    -o-transition: background-color 1s, color 1s;
    transition: background-color 1s, color 1s;
}
nav .nav-link:hover {
    border-bottom: 2px solid var(--bs-primary);
    color: var(--bs-secondary) !important;
}