/* =====================================================
3. NAVBAR
===================================================== */

.site-navbar {

    background-color: var(--navbar-bg);
    height: var(--navbar-height);
    transition: background-color .3s ease;

}

.site-navbar .container {

    height: var(--navbar-height);

}

.site-navbar a,
.site-navbar .navbar-brand {

    color: var(--navbar-text);

}

/* ====================================
NAVBAR BRAND / SITE TITLE
==================================== */

.site-title {

    font-size: 18px;
    font-weight: 700;
    color: var(--navbar-title);
    text-decoration: none;
    transition: opacity .2s ease;

}

/* mantém cor após visitar */

.site-title:visited {

    color: var(--navbar-title);

}

/* hover */

.site-title:hover {

    color: var(--navbar-title);
    text-decoration: none;
    opacity: .8;

}

/* remove outline */

.site-title:focus {

    outline: none;

}

/* =====================================================
MENU PRINCIPAL
===================================================== */

.main-nav a {

    text-decoration: none;
    color: var(--navbar-text);
    font-size: 0.96rem;
    font-weight: 500;

}

.main-nav a:hover {

    opacity: .7;

}

/* =====================================================
LOGO
===================================================== */

/* LOGO GLOBAL */

.custom-logo {

    max-height: 38px;
    height: auto;
    width: auto;
    object-fit: contain;

}

/* =====================================================
BUSCA
===================================================== */

.search-form {

    background: var(--card-form);
    border-radius: 20px;
    padding: 3px 10px;

}

.search-form input {

    border: none;
    background: transparent;
    outline: none;
    width: 150px;
    font-size: 14px;

}

.search-form button {

    border: none;
    background: none;
    cursor: pointer;

}

/* =====================================================
4. NAVBAR TOGGLER (HAMBURGER)
===================================================== */

.navbar-toggler {

    border: none;
    padding: 0;
    display: flex;
    align-items: center;

}

.navbar-toggler-icon {

    background-image: none;
    width: 24px;
    height: 2px;
    background-color: var(--navbar-text);
    position: relative;
    display: block;
    transition: background-color .3s ease;

}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {

    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: var(--navbar-text);
    transition: background-color .3s ease;

}

.navbar-toggler-icon::before {

    top: -7px;

}

.navbar-toggler-icon::after {

    top: 7px;

}

/* =====================================================
5. OFFCANVAS MENU
===================================================== */

.offcanvas {

    width: 300px;
    background-color: var(--navbar-bg);
    color: var(--navbar-text);

    transition: background-color .3s ease, color .3s ease;

    box-shadow: 8px 0 30px rgba(0,0,0,0.12);

}

/* HEADER */

.offcanvas-header {

    background: var(--navbar-bg);

}

.offcanvas-title {

    font-size: 16px;
    font-weight: 600;

}

/* MENU */

.offcanvas-menu li {

    border-bottom: 1px solid var(--border-soft);

}

.offcanvas-menu li a {

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 18px 24px;

    font-size: 1.05rem;
    font-weight: 500;

    color: var(--navbar-text);
    text-decoration: none;

    transition: all .25s ease;

}

/* hover */

.offcanvas-menu li a:hover {

    background: var(--border-soft);
    transform: translateX(6px);

}

/* item ativo */