/* ==========================================================================
   Site Footer + Theme Selector
   --------------------------------------------------------------------------
   Reusable footer presentation for the WoWS tools.

   Depends on theme variables from theme.css:
   --border, --muted, --muted-strong, --heading, --panel-soft,
   --panel-raised, --focus-ring
   ========================================================================== */

.site-footer {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top:
        calc(var(--tool-tab-expanded-height) + var(--tool-tab-clearance));

    padding: 15px 4px 2px;

    border-top: 1px solid var(--border);

    color: var(--muted);
    font-size: 0.76rem;
}

.footer-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.footer-copy a {
    color: var(--muted-strong);
}

/* -----------------------------
   Wargaming disclaimer
----------------------------- */

.footer-disclaimer {
    position: relative;

    display: inline-flex;
    align-items: center;

    cursor: help;

    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.footer-disclaimer:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.footer-disclaimer-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 20;

    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 9px 11px;

    border: 1px solid var(--border-strong);
    border-radius: 8px;

    color: var(--text, var(--ink));
    background: var(--panel-raised, var(--surface));
    box-shadow: var(--shadow-soft, var(--shadow));

    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.45;

    white-space: normal;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);

    pointer-events: none;

    transition:
        opacity 140ms ease,
        visibility 140ms ease,
        transform 160ms ease;
}

.footer-disclaimer:hover .footer-disclaimer-tooltip,
.footer-disclaimer:focus .footer-disclaimer-tooltip,
.footer-disclaimer:focus-within .footer-disclaimer-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.theme-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-label {
    color: var(--muted);

    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.theme-options {
    display: inline-flex;

    padding: 3px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--panel-soft);
}

.theme-options button {
    min-width: 50px;
    padding: 5px 8px;

    border: 0;
    border-radius: 6px;

    color: var(--muted);
    background: transparent;

    cursor: pointer;

    font-size: 0.68rem;
    font-weight: 750;
}

.theme-options button:hover {
    color: var(--heading);
}

.theme-options button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-options button[aria-pressed="true"] {
    color: var(--heading);
    background: var(--panel-raised);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
    .site-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .theme-control {
        align-self: flex-end;
    }

    .footer-disclaimer-tooltip {
        left: 0;

        max-width: min(300px, calc(100vw - 32px));

        transform: translateY(4px);
    }

    .footer-disclaimer:hover .footer-disclaimer-tooltip,
    .footer-disclaimer:focus .footer-disclaimer-tooltip,
    .footer-disclaimer:focus-within .footer-disclaimer-tooltip {
        transform: translateY(0);
    }
}

@media (max-width: 520px) {
    .footer-copy {
        font-size: 0.7rem;
    }

    .theme-control {
        width: 100%;
        justify-content: space-between;
    }

    .theme-options {
        margin-left: auto;
    }
}

@media (hover: none) {
    .site-footer {
        margin-top:
            calc(var(--tool-tab-collapsed-height) + var(--tool-tab-clearance));
    }
}