/* ==========================================================================  
   1) THEME PALETTE  
   ========================================================================== */
:root {
    /* core colors */
    --bs-primary: #0056b3;
    --bs-warning: #ff6600;
    --bs-dark: #000;
    --bs-body-bg: #fff;
    --bs-body-color: #000;
    /* neutrals */
    --gray: #f5f5f5;
    --white: #fff;
    --black: #000;
    /* semantic aliases */
    --blue: var(--bs-primary);
    --orange: var(--bs-warning);
    /* stripes */
    --stripe-bg: var(--white);
    --stripe-bar: var(--orange);
    /* navbar */
    --navbar-bg: #fff;
    --navbar-link-color: #000;
    --navbar-link-hover: var(--bs-primary);
    /* ripple */
    --ripple-color: rgba(0,0,0,0.15);
}

/* ==========================================================================  
   2) GLOBAL STYLES & DARK-MODE OVERRIDES  
   ========================================================================== */
html, body {
    overflow-x: hidden; /* prevent horizontal scroll */
}

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding-top: 64px; /* offset for fixed navbar */
    transition: background .3s, color .3s;
}

    body.dark-mode {
        /* invert core palettes */
        --bs-body-bg: var(--black);
        --bs-body-color: var(--white);
        /* stripes */
        --stripe-bg: var(--bs-dark);
        --stripe-bar: var(--white);
        /* navbar */
        --navbar-bg: var(--bs-dark);
        --navbar-link-color: var(--white);
        --navbar-link-hover: var(--orange);
        /* ripple */
        --ripple-color: rgba(255,255,255,0.4);
    }

/* ==========================================================================  
   3) BASE BODY & LOGO SWAP  
   ========================================================================== */
/* two-image logo approach */
.logo-light {
    display: none;
}

.logo-dark {
    display: inline-block;
}

body.dark-mode .logo-dark {
    display: none;
}

body.dark-mode .logo-light {
    display: inline-block;
}

/* optional single-image invert filter:  
#siteLogo { transition: filter .3s; }  
body.dark-mode #siteLogo { filter: brightness(0) invert(1); }  
*/

/* ==========================================================================  
   4) NAVBAR, OFFCANVAS & HAMBURGER TOGGLER  
   ========================================================================== */
.navbar {
    background-color: var(--navbar-bg);
    transition: background-color .3s;
}

    .navbar .nav-link {
        color: var(--navbar-link-color) !important;
        transition: color .3s;
    }

        .navbar .nav-link:hover {
            color: var(--navbar-link-hover) !important;
        }

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

    .offcanvas .nav-link {
        color: var(--navbar-link-color) !important;
    }

/* hamburger toggler uses currentColor SVG */
.navbar-toggler {
    color: var(--navbar-link-color) !important;
    border-color: var(--navbar-link-color) !important;
    z-index: 1030;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,\
<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'>\
<path stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>\
</svg>") !important;
}

body.dark-mode .navbar-toggler {
    color: #fff !important; /* sets the currentColor for the SVG */
    border-color: #fff !important; /* white outline instead of dark */
}

/* just in case you need to force the SVG itself */
body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,\
<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'>\
<path stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/>\
</svg>") !important;
}

/* ==========================================================================  
   5) THEME TOGGLE BUTTONS  
   ========================================================================== */
/* remove default shadow */
#darkModeToggle,
.navbar .btn {
    box-shadow: none !important;
}

/* circular mobile toggle */
#themeToggleMobile {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-primary);
    background: transparent;
    color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background .3s, color .3s, transform .2s, box-shadow .2s;
}

    #themeToggleMobile:hover {
        background: var(--bs-primary);
        color: var(--white);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    #themeToggleMobile:active {
        transform: scale(0.95);
    }

@media (max-width: 575.98px) {
    #themeToggleMobile {
        width: 2rem;
        height: 2rem;
        border-width: 1.5px;
    }
}

/* ==========================================================================  
   6) UTILITIES  
   ========================================================================== */
.hover-animate {
    transition: transform .3s ease, box-shadow .3s ease;
}

    .hover-animate:hover {
        transform: scale(1.03);
        box-shadow: 0 .75rem 1.5rem rgba(0,0,0,0.15);
    }

#backToTop {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: none;
    border-radius: 50%;
    z-index: 1000;
    transition: opacity .3s;
}

/* ==========================================================================  
   7) BASE COMPONENTS  
   ========================================================================== */
.hero {
    background-image: url('/images/manila-skyline.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 80vh;
}

@media (max-width: 575.98px) {
    .hero {
        min-height: 60vh;
        height: auto;
        background-attachment: scroll;
    }
}

body.dark-mode .card-body {
    background-color: var(--bs-dark) !important;
    color: var(--bs-body-color) !important;
}

.row-cols-1 > .col {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ==========================================================================  
   8) INTERACTIVE EFFECTS  
   ========================================================================== */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: var(--ripple-color);
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* offcanvas close-button inversion */
.offcanvas .btn-close {
    filter: none !important;
}

body.dark-mode .offcanvas .btn-close {
    filter: invert(1) brightness(2) !important;
}

.offcanvas .offcanvas-title {
    color: var(--bs-body-color);
}

/* AOS overrides */
[data-aos] {
    opacity: 0;
    transform: translateY(20px);
}

    [data-aos].aos-animate {
        opacity: 1;
        transform: translateY(0);
    }

/* ==========================================================================  
   9) STRIPE DECORATIONS  
   ========================================================================== */
.stripe {
    position: relative;
    background: var(--stripe-bg);
}

    .stripe .bar {
        position: absolute;
        width: 6px;
        height: 80px;
        background: var(--stripe-bar);
        border-radius: 3px;
        animation: stripeBounce 3s ease-in-out infinite;
    }

    .stripe .bar1 {
        top: 40px;
        left: 50%;
        transform: translateX(-50%) rotate(15deg);
    }

    .stripe .bar2 {
        top: 180px;
        left: 20%;
        transform: rotate(-10deg);
        animation-delay: .5s;
    }

    .stripe .bar3 {
        top: 320px;
        left: 75%;
        transform: translateX(-50%) rotate(10deg);
        animation-delay: 1s;
    }

@keyframes stripeBounce {
    0%,100% {
        transform: translateY(0) scaleY(1);
    }

    50% {
        transform: translateY(-20px) scaleY(1.1);
    }
}

.bg-warning.position-relative.overflow-hidden .stripe-deco {
    position: absolute;
    width: 4px;
    height: 60px;
    background: var(--white);
    border-radius: 2px;
    opacity: .8;
    animation: decoBounce 2.5s ease-in-out infinite;
}

.bg-warning .deco1 {
    top: 60px;
    left: 10%;
    transform: rotate(-5deg);
}

.bg-warning .deco2 {
    top: 210px;
    left: 45%;
    transform: rotate(10deg);
    animation-delay: .7s;
}

.bg-warning .deco3 {
    top: 360px;
    left: 80%;
    transform: rotate(-10deg);
    animation-delay: 1.4s;
}

@keyframes decoBounce {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* ==========================================================================  
   10) RESPONSIVE OVERRIDES  
   ========================================================================== */
@media (max-width: 575.98px) {
    .display-4 {
        font-size: 2rem;
    }

    .lead {
        font-size: 1rem;
    }

    .stripe,
    .bg-warning.position-relative.overflow-hidden {
        display: none !important;
    }

    .container {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    #backToTop {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        bottom: .75rem;
        right: .75rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .display-4 {
        font-size: 2.5rem;
    }

    .lead {
        font-size: 1.1rem;
    }

    .stripe {
        display: none;
    }

    .bg-warning.position-relative.overflow-hidden {
        display: block !important;
        width: 8%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .display-4 {
        font-size: 3rem;
    }

    .lead {
        font-size: 1.25rem;
    }
}

/* ==========================================================================  
   11) OFFCANVAS MENU STYLES  
   ========================================================================== */
.offcanvas-backdrop.show {
    backdrop-filter: blur(4px);
}

.offcanvas {
    width: 80%;
    max-width: 300px;
    background-color: var(--bs-body-bg);
    transition: transform .3s ease-out;
}

.offcanvas-header {
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-primary) 60%, transparent);
    border-bottom: none;
}

.offcanvas-title {
    color: var(--white);
}

.offcanvas .nav-link {
    position: relative;
    color: var(--bs-body-color) !important;
    transition: color .2s ease;
}

    .offcanvas .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 0;
        background: var(--bs-primary);
        transition: width .3s ease;
    }

    .offcanvas .nav-link:hover {
        color: var(--bs-primary) !important;
    }

        .offcanvas .nav-link:hover::after {
            width: 100%;
        }

.offcanvas .nav-item {
    opacity: 0;
}

    .offcanvas .nav-item.aos-animate {
        opacity: 1;
        transition: opacity .6s ease-out;
    }

body.dark-mode .offcanvas {
    background-color: var(--bs-dark) !important;
}

    body.dark-mode .offcanvas .nav-link {
        color: var(--bs-body-color) !important;
    }

    body.dark-mode .offcanvas .offcanvas-title {
        filter: brightness(0) invert(1);
    }