/*
Colour notes (temporary)
Navy: #023047 (logo "Tech", tagline)
Orange: #FB8500 (logo "Learn")
Yellow-orange: #FFB703 (minimalist logo, card borders)
Deep orange: #FF7300 (minimalist logo)
*/

/* Background image for hero sections */
.backgroundHero{
    background-image: url("../images/bg.jpg");
    background-size: cover;
    background-position: center;
}

/* Navy headings to match the logo */
h1, h2, h3{
    color: #023047;
}

/* Orange buttons instead of Bootstrap blue */
.btn-primary{
    --bs-btn-bg: #FB8500;
    --bs-btn-border-color: #FB8500;
    --bs-btn-hover-bg: #FF7300;
    --bs-btn-hover-border-color: #FF7300;
    --bs-btn-active-bg: #FF7300;
    --bs-btn-active-border-color: #FF7300;
}

/* Nav links turn orange on hover and on the current page */
.navbar .nav-link:hover,
.navbar .nav-link.active{
    color: #FB8500;
}

/* Course cards with the yellow-orange border from the LMS */
.card{
    border-color: #FFB703;
}

.card-body a{
    text-decoration: none;
}

.card-body h2{
    font-size: 1.25rem;
}

/* Category filter buttons in brand colours */
.nav-pills .nav-link{
    color: #023047;
}

.nav-pills .nav-link.active{
    background-color: #FB8500;
    color: white;
}

/* Orange text for highlights like the step numbers */
.textBrand{
    color: #FB8500;
}

/* Orange focus glow on form fields instead of Bootstrap blue */
.form-control:focus,
.form-select:focus{
    border-color: #FB8500;
    box-shadow: 0 0 0 0.25rem rgba(251, 133, 0, 0.25);
}

.form-check-input:checked{
    background-color: #FB8500;
    border-color: #FB8500;
}

/* Selected lesson in the course sidebar */
.list-group-item.active{
    background-color: #FB8500;
    border-color: #FB8500;
}

/* Open chapter in the course content list */
.accordion-button:not(.collapsed){
    background-color: rgba(251, 133, 0, 0.12);
    color: inherit;
}

/* Login and sign up pages: background fills the whole screen */
.pageAuth .backgroundHero{
    min-height: calc(100vh - 107px);
    display: flex;
    align-items: center;
}

.pageAuth .backgroundHero > .container{
    width: 100%;
}

/* Main logo size on desktops */
.imageLogo{
    height: 75px;
    width: auto;
}

/* Tablets: slightly smaller logo */
@media (max-width: 991.98px){
    .imageLogo{
        height: 60px;
    }
}

/* Phones: smaller logo so the menu button still fits next to it */
@media (max-width: 575.98px){
    .imageLogo{
        height: 44px;
    }

    /* Smaller hero headings so long titles do not overflow */
    .display-4{
        font-size: 2.25rem;
    }

    .display-5{
        font-size: 2rem;
    }

    /* Less empty space around forms and heroes on small screens */
    .backgroundHero .py-5{
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Full width buttons are easier to tap on phones */
    .d-flex.flex-wrap.gap-2 > .btn{
        flex: 1 1 100%;
    }
}

/* Spacing for the dark mode button when the menu is collapsed on phones and tablets */
@media (max-width: 991.98px){
    #buttonTheme{
        margin-bottom: 0.5rem;
    }
}

/* Dark mode: deep navy backgrounds from the logo instead of plain grey */
[data-bs-theme="dark"]{
    --bs-body-bg: #011a27;
    --bs-body-bg-rgb: 1, 26, 39;
    --bs-body-color: #E3EAF0;
    --bs-body-color-rgb: 227, 234, 240;
    --bs-secondary-bg: #0A2C40;
    --bs-secondary-bg-rgb: 10, 44, 64;
    --bs-tertiary-bg: #06243A;
    --bs-tertiary-bg-rgb: 6, 36, 58;
    --bs-border-color: #1D4A66;
    --bs-secondary-color: rgba(227, 234, 240, 0.7);
    --bs-link-color: #FFB703;
    --bs-link-color-rgb: 255, 183, 3;
    --bs-link-hover-color: #FB8500;
    --bs-link-hover-color-rgb: 251, 133, 0;
}

/* Dark mode: darker overlay on the background image so white text stays readable */
[data-bs-theme="dark"] .backgroundHero{
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("../images/bg.jpg");
}

/* Dark mode: softer card border so cards do not glow */
[data-bs-theme="dark"] .card{
    border-color: rgba(255, 183, 3, 0.45);
}

/* Dark mode: light headings, since navy disappears on a dark background */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3{
    color: #F8F9FA;
}

[data-bs-theme="dark"] .nav-pills .nav-link:not(.active){
    color: #F8F9FA;
}

/* Dark mode: white backing behind the logo so the navy "Tech" stays readable */
[data-bs-theme="dark"] .navbar-brand img{
    background-color: white;
    border-radius: 0.5rem;
    padding: 4px;
}