/* --- CONFIGURAZIONE COLORI --- */
:root {
    --brand-teal: #0D7777;
    /* Il blu/verde del banner */
    --dark-teal: #0d2d38;
    /* Il colore del pulsante Search */
    --light-bg: #F0F9FA;
    /* Sfondo delle card */
    --text-main: #333333;
}

/* --- STILE GENERALE --- */
body {
    background-color: #ffffff !important;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* --- HEADER (Trasparente e pulito) --- */
#mainNav.navbar .navbar-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin-left: 20px;
    margin-right: 0;
}

#mainNav .brand {
    color: var(--dark-teal) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
}

/* Limitiamo la larghezza del logo se necessario */
.navbar .brand {
    max-width: 150px !important;
    padding: 8px !important;
}

.navbar .nav li a,
.navbar .icon-private-w {
    color: black !important;
    font-size: 17px !important;
    transition: color 0.3s ease !important;
    font-weight: 400 !important;
}

.navbar .nav li a:hover,
.navbar .icon-private-w:hover {
    color: #0D7777 !important;
}

.navbar .nav li a,
.navbar .icon-private-w {
    position: relative;
    transition: color 0.3s ease;
}

/* pseudo-elemento */
.navbar .nav li a::after,
.navbar .icon-private-w::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.2px;
    background-color: #0d7777;
    transition: width 0.3s ease;
}

/* hover */
.navbar .nav li a:hover::after,
.navbar .icon-private-w:hover::after {
    width: 100%;
}

.navbar .nav>li>a {
    padding: 8px;
}

#main-content {
    background: none !important;
    border-radius: 20px;
}

/* --- HERO SECTION (Banner Arrotondato) --- */
#docsSearch {
    background-color: #e1f1f4 !important;
    border-radius: 24px !important;
    margin: 10px 20px 40px 20px !important;
    padding: 80px 40px !important;
    text-align: center !important;
    border-bottom: none !important;
}

#docsSearch h1 {
    color: #000000 !important;
    font-family: 'Satoshi', sans-serif !important;
    font-weight: 500 !important;
}

#searchBar button {
    font-family: 'Satoshi', sans-serif !important;
    text-shadow: none !important;
    background: #0D7777;
    border: none !important;
}

#searchBar button:hover {
    background: #1a3b47;
}

#docsSearch #searchBar .search-query {
    font-family: 'Satoshi', sans-serif !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

#docsSearch #searchBar .search-query:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 4px rgba(10, 142, 160, 0.2) !important;
    outline: none !important;
}

/* --- CATEGORIE (Estetica migliorata) --- */

.category-list {
    margin-bottom: 40px;
}

.articleFoot p,
.articleFoot time {
    font-family: 'Satoshi' !important;
}

.category,
.collection {
    border-radius: 20px !important;
    /* Bordi stondati */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

.category:hover,
.collection:hover {
    box-shadow: 0 15px 30px rgba(13, 119, 119, 0.1) !important;
    /* Box shadow leggera in hover */
    transform: translateY(-5px) !important;
}

/* Icona specifica per la prima collezione (esempio: Razzo/Startup) */
#collection-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230A8EA0' class='bi bi-rocket-takeoff' viewBox='0 0 16 16'%3E%3Cpath d='M9.752 6.193c.599.6 1.73.437 2.528-.362s.96-1.932.362-2.531c-.599-.6-1.73-.438-2.528.361-.798.8-.96 1.933-.362 2.532'/%3E%3Cpath d='M15.811 3.312c-.363 1.534-1.334 3.626-3.64 6.218l-.24 2.408a2.56 2.56 0 0 1-.732 1.526L8.817 15.85a.51.51 0 0 1-.867-.434l.27-1.899c.04-.28-.013-.593-.131-.956a9 9 0 0 0-.249-.657l-.082-.202c-.815-.197-1.578-.662-2.191-1.277-.614-.615-1.079-1.379-1.275-2.195l-.203-.083a10 10 0 0 0-.655-.248c-.363-.119-.675-.172-.955-.132l-1.896.27A.51.51 0 0 1 .15 7.17l2.382-2.386c.41-.41.947-.67 1.524-.734h.006l2.4-.238C9.005 1.55 11.087.582 12.623.208c.89-.217 1.59-.232 2.08-.188.244.023.435.06.57.093q.1.026.16.045c.184.06.279.13.351.295l.029.073a3.5 3.5 0 0 1 .157.721c.055.485.051 1.178-.159 2.065m-4.828 7.475.04-.04-.107 1.081a1.54 1.54 0 0 1-.44.913l-1.298 1.3.054-.38c.072-.506-.034-.993-.172-1.418a9 9 0 0 0-.164-.45c.738-.065 1.462-.38 2.087-1.006M5.205 5c-.625.626-.94 1.351-1.004 2.09a9 9 0 0 0-.45-.164c-.424-.138-.91-.244-1.416-.172l-.38.054 1.3-1.3c.245-.246.566-.401.91-.44l1.08-.107zm9.406-3.961c-.38-.034-.967-.027-1.746.163-1.558.38-3.917 1.496-6.937 4.521-.62.62-.799 1.34-.687 2.051.107.676.483 1.362 1.048 1.928.564.565 1.25.941 1.924 1.049.71.112 1.429-.067 2.048-.688 3.079-3.083 4.192-5.444 4.556-6.987.183-.771.18-1.345.138-1.713a3 3 0 0 0-.045-.283 3 3 0 0 0-.3-.041Z'/%3E%3Cpath d='M7.009 12.139a7.6 7.6 0 0 1-1.804-1.352A7.6 7.6 0 0 1 3.794 8.86c-1.102.992-1.965 5.054-1.839 5.18.125.126 3.936-.896 5.054-1.902Z'/%3E%3C/svg%3E") !important;
}

#sidebar form .search-query {
    border: 1px solid #D0D0D0 !important;
}

#sidebar .nav-list .active a {
    font-weight: 500 !important;
}

/* --- FOOTER --- */
footer.center {
    border-top: 1px solid #eee !important;
    padding: 40px !important;
    color: #999 !important;
    font-size: 13px !important;
    font-family: 'Satoshi', sans-serif !important;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 767px) {

    /* Main nav container padding */
    #mainNav.navbar .navbar-inner {
        padding: 15px 12px !important;
        /* This sets the 12px base for both sides */
    }

    .threeCol .collection .collection-body {
        padding: 12px !important;
    }

    /* Logo: Smaller and properly aligned */
    #mainNav .brand {
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
        max-width: 110px !important;
        /* Smaller logo for mobile */
        display: inline-block !important;
    }

    /* Burger Menu: Centered vertically and aligned to the 12px edge */
    .btn-navbar {
        margin-right: 0 !important;
        margin-top: 6px !important;
        /* Adjusted for smaller logo */
        padding: 8px !important;
        float: right !important;
    }

    #docsSearch {
        margin: 10px 1px 30px 1px !important;
        padding: 40px 20px !important;
        /* Slightly tighter padding */
        width: auto !important;
    }

    #docsSearch h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    /* Categories: matching Hero alignment */
    .collection {
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-bottom: 20px !important;
        width: auto !important;
        display: block !important;
    }
}