/* Header + navegação desktop e mobile */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 48px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-nav {
    display: flex;
    gap: 32px;
}

.main-nav__link {
    color: #888;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav__link:hover {
    color: var(--cor-texto, #ffffff);
}

.mobile-nav-container {
    display: none;
    position: relative;
}

.mobile-nav-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s ease;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus {
    color: var(--cor-texto, #ffffff);
    outline: none;
}

.mobile-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px;
    width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 101;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mobile-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav__link {
    color: #aaa;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus {
    background-color: #333;
    color: var(--cor-texto, #ffffff);
}

.settings-toggle,
.settings-button,
.icon-settings,
.gear {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease;
}

.settings-toggle:hover,
.settings-toggle:focus,
.settings-button:hover,
.settings-button:focus,
.icon-settings:hover,
.icon-settings:focus,
.gear:hover,
.gear:focus {
    color: var(--cor-texto, #fff);
    outline: none;
}

.settings-menu {
    position: absolute;
    top: 60px;
    right: 64px;
    background: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 270;
}

.settings-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.settings-menu__item button,
.settings-menu__item a {
    background: none;
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    color: #aaa;
    font: inherit;
    text-align: left;
    border-radius: 4px;
    width: 100%;
    transition: background .2s ease, color .2s ease;
}

.settings-menu__item button:hover,
.settings-menu__item a:hover {
    background: #333;
    color: var(--cor-texto, #fff);
}

@media (max-width: 768px) {
    .settings-menu { top: 56px; right: 16px; }
    .main-nav { display: none; }
    .mobile-nav-container { display: block; }
    .main-header { padding: 16px; }
}

:root {
    --menu-bg-dark:#1c1c1c;
    --menu-border-dark:#333;
    --menu-link-dark:#aaa;
    --menu-hover-bg-dark:#333;
    --menu-hover-link-dark:#fff;
    --menu-bg-light:#fff;
    --menu-border-light:#e2e2e2;
    --menu-link-light:#333;
    --menu-hover-bg-light:#f2f2f2;
    --menu-hover-link-light:#000;
}

.mobile-nav {
    background: var(--menu-bg-dark);
    border:1px solid var(--menu-border-dark);
}

.mobile-nav__link {
    color: var(--menu-link-dark);
}

.mobile-nav__link:hover {
    background: var(--menu-hover-bg-dark);
    color: var(--menu-hover-link-dark);
}

.settings-menu {
    background: var(--menu-bg-dark);
    border:1px solid var(--menu-border-dark);
}

.settings-menu__btn,
.settings-menu__item button,
.settings-menu__item a {
    color: var(--menu-link-dark);
}

.settings-menu__btn:hover,
.settings-menu__item button:hover,
.settings-menu__item a:hover {
    background: var(--menu-hover-bg-dark);
    color: var(--menu-hover-link-dark);
}

body.light .mobile-nav,
body.light-theme .mobile-nav,
body[data-theme="light"] .mobile-nav,
body.light .settings-menu,
body.light-theme .settings-menu,
body[data-theme="light"] .settings-menu {
    background: var(--menu-bg-light);
    border-color: var(--menu-border-light);
}

body.light .mobile-nav__link,
body.light-theme .mobile-nav__link,
body[data-theme="light"] .mobile-nav__link,
body.light .settings-menu__btn,
body.light-theme .settings-menu__btn,
body[data-theme="light"] .settings-menu__btn,
body.light .settings-menu__item button,
body.light-theme .settings-menu__item button,
body[data-theme="light"] .settings-menu__item button,
body.light .settings-menu__item a,
body.light-theme .settings-menu__item a,
body[data-theme="light"] .settings-menu__item a {
    color: var(--menu-link-light);
}

body.light .mobile-nav__link:hover,
body.light-theme .mobile-nav__link:hover,
body[data-theme="light"] .mobile-nav__link:hover,
body.light .settings-menu__btn:hover,
body.light-theme .settings-menu__btn:hover,
body[data-theme="light"] .settings-menu__btn:hover,
body.light .settings-menu__item button:hover,
body.light-theme .settings-menu__item button:hover,
body[data-theme="light"] .settings-menu__item button:hover,
body.light .settings-menu__item a:hover,
body.light-theme .settings-menu__item a:hover,
body[data-theme="light"] .settings-menu__item a:hover {
    background: var(--menu-hover-bg-light);
    color: var(--menu-hover-link-light);
}

html.light .mobile-nav,
body.light .mobile-nav,
html.light-theme .mobile-nav,
body.light-theme .mobile-nav,
html[data-theme="light"] .mobile-nav,
body[data-theme="light"] .mobile-nav,
html.light .settings-menu,
body.light .settings-menu,
html.light-theme .settings-menu,
body.light-theme .settings-menu,
html[data-theme="light"] .settings-menu,
body[data-theme="light"] .settings-menu {
    background:#ffffff !important;
    border-color:#e2e2e2 !important;
    color:#222 !important;
}

html.light .mobile-nav__link,
body.light .mobile-nav__link,
html.light-theme .mobile-nav__link,
body.light-theme .mobile-nav__link,
html[data-theme="light"] .mobile-nav__link,
body[data-theme="light"] .mobile-nav__link,
html.light .settings-menu__btn,
body.light .settings-menu__btn,
html.light-theme .settings-menu__btn,
body.light-theme .settings-menu__btn,
html[data-theme="light"] .settings-menu__btn,
body[data-theme="light"] .settings-menu__btn,
html.light .settings-menu__item button,
body.light .settings-menu__item button,
html.light-theme .settings-menu__item button,
body.light-theme .settings-menu__item button,
html[data-theme="light"] .settings-menu__item button,
body[data-theme="light"] .settings-menu__item button {
    color:#222 !important;
}

html.light .mobile-nav__link:hover,
body.light .mobile-nav__link:hover,
html.light-theme .mobile-nav__link:hover,
body.light-theme .mobile-nav__link:hover,
html[data-theme="light"] .mobile-nav__link:hover,
body[data-theme="light"] .mobile-nav__link:hover,
html.light .settings-menu__btn:hover,
body.light .settings-menu__btn:hover,
html.light-theme .settings-menu__btn:hover,
body.light-theme .settings-menu__btn:hover,
html[data-theme="light"] .settings-menu__btn:hover,
body[data-theme="light"] .settings-menu__btn:hover,
html.light .settings-menu__item button:hover,
body.light .settings-menu__item button:hover,
html.light-theme .settings-menu__item button:hover,
body.light-theme .settings-menu__item button:hover,
html[data-theme="light"] .settings-menu__item button:hover,
body[data-theme="light"] .settings-menu__item button:hover {
    background:#f2f2f2 !important;
    color:#000 !important;
}