@import url("./icons.css");

/*
 * MySocials.Info — Shared Site Theme Variables
 * Included on all SaaS-facing pages.
 * Page-specific overrides go in inline <style> blocks on each page.
 */

:root {
    --bg:          #0F2438;
    --panel:       #1C3552;
    --deep:        #081826;
    --text:        #C8DCE8;
    --text-muted:  #6A8EA8;
    --text-dim:    #3A5470;
    --border:      #1C3552;
    --border-mid:  #2A4A68;
    --green:       #2FA35B;
    --green-deep:  #1F6D42;
    --yellow:      #E5C14A;
    --blue:        #2281F5;
    --orange:      #D9823B;
    --red:         #C7463B;
}

body[data-theme="light"] {
    --bg:          #F0F4F8;
    --panel:       #FFFFFF;
    --deep:        #E0E8F0;
    --text:        #081826;
    --text-muted:  #0F2438;
    --text-dim:    #1C3552;
    --border:      #D0D8E4;
    --border-mid:  #2A4A68;
}

/* ── CRT scanlines (dark mode only) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.10) 3px,
        rgba(0, 0, 0, 0.10) 4px
    );
    pointer-events: none;
    z-index: 9999;
}
body[data-theme="light"]::before { display: none; }

/* ── Theme toggle button ── */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }

/* ── Compact public language picker ── */
.site-lang-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.site-lang-select {
    appearance: none;
    background: var(--deep);
    color: var(--text-muted);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 7px 28px 7px 10px;
    font-family: 'Hack', 'Space Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 84px;
    cursor: pointer;
}

.site-lang-select:hover,
.site-lang-select:focus {
    color: var(--text);
    border-color: var(--green);
    outline: none;
}

body[data-theme="light"] .site-lang-select {
    background: var(--deep);
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .nav-inner {
        height: auto !important;
        min-height: 56px;
        padding: 10px 0 !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
    }

    .nav-brand {
        min-width: 0;
        max-width: 100%;
    }

    .nav-brand-name {
        max-width: min(60vw, 260px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        letter-spacing: 1px !important;
        font-size: 0.8rem !important;
    }

    .nav-right,
    .nav-actions {
        width: 100% !important;
        min-width: 0;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 10px 12px !important;
    }

    .nav-email {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .page-inner {
        max-width: 100% !important;
    }

    .site-row,
    .info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footer-inner {
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    .nav-brand-name {
        max-width: 52vw;
    }

    .site-actions {
        width: 100%;
    }

    .site-actions .btn {
        width: 100%;
        text-align: center;
    }
}