/* ── White-fill icons: skip the default invert filter ── */
.icon-settings,
.icon-person,
.icon-search,
img[src*="home.png"],
img[src*="upload.png"],
img[src*="admin.png"]    { filter: none; }
a:hover .icon-settings,
a:hover .icon-person,
a:hover .icon-search,
a:hover img[src*="home.png"],
a:hover img[src*="upload.png"],
a:hover img[src*="admin.png"] { filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(600%) hue-rotate(2deg); }

/* ── Hamburger shared styles ─────────────────────────────── */
header { position: relative; }

.ham-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    transition: border-color .2s;
}
.ham-btn:hover { border-color: var(--accent, #ff6500); }
.ham-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
.ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
    .ham-btn { display: flex; }

    #icons {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #000;
        border-bottom: 2px solid var(--accent, #ff6500);
        flex-direction: column !important;
        padding: 8px 0;
        z-index: 200;
        gap: 0 !important;
    }
    #icons.open { display: flex; }

    #icons a {
        flex-direction: row !important;
        align-items: center;
        gap: 14px;
        padding: 13px 5%;
        border-bottom: 1px solid rgba(255,255,255,.07);
        font-size: 0.95em;
        justify-content: flex-start;
        width: 100%;
    }
    #icons a:last-child { border-bottom: none; }
    #icons a p {
        font-size: 0.92em !important;
        margin-top: 0 !important;
        color: var(--text, #ebebeb);
    }
    #icons .icons {
        height: 20px !important;
        width: 20px !important;
        filter: invert(1);
    }
    #icons .icons.icon-settings,
    #icons .icons.icon-person,
    #icons .icons.icon-search,
    #icons img[src*="home.png"],
    #icons img[src*="upload.png"],
    #icons img[src*="admin.png"] { filter: none; }
}