/* ============================================
   NAT Fish Farm — Theme System
   🌙 Night Dive (default dark)  /  ☀️ Day Aquarium (light)
   ============================================ */

:root {
    --theme-transition: background-color 0.4s ease, color 0.4s ease, filter 0.5s ease;
}

html {
    transition: var(--theme-transition);
}

/* Day Aquarium mode: smart color inversion keeps every existing
   dark-mode color choice intact (no hand-edited hex values, so nothing
   about the original design/text is altered) while flipping the whole
   site to a bright, clean look. Media is re-inverted so photos/logos
   still look natural. */
html[data-theme="day"] {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}

html[data-theme="day"] img,
html[data-theme="day"] video,
html[data-theme="day"] .corner-logo,
html[data-theme="day"] iframe,
html[data-theme="day"] picture {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- Theme toggle button (injected by theme.js) ---------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    margin-left: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
    z-index: 20;
}

.theme-toggle-btn:hover {
    background: rgba(0, 180, 255, 0.25);
    border-color: rgba(0, 180, 255, 0.6);
    transform: translateY(-2px);
}

.theme-toggle-btn:active {
    transform: translateY(0) scale(0.96);
}

.theme-toggle-btn .theme-toggle-icon {
    font-size: 17px;
    display: inline-block;
    transition: transform 0.4s ease;
}

.theme-toggle-btn:hover .theme-toggle-icon {
    transform: rotate(20deg);
}

.theme-toggle-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Sit nicely inside the existing nav on desktop */
.nav-menu .theme-toggle-item {
    display: flex;
    align-items: center;
}

/* Mobile: keep it visible and reachable even before the hamburger menu opens */
@media (max-width: 768px) {
    .theme-toggle-btn {
        position: fixed;
        top: 14px;
        right: 70px;
        margin-left: 0;
    }
}