/* ============================================
   8. BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

.cta-button {
    display:inline-block;
    background:var(--black);
    color:var(--white);
    padding:16px 32px;
    font-family:'IBM Plex Mono',monospace;
    font-size:1rem;
    font-weight:600;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:all 0.1s;
}

.cta-button:hover {
    box-shadow:none;
}

.back-to-top {
    position:fixed;
    bottom:24px;
    right:24px;
    width:48px;
    height:48px;
    background:var(--black);
    color:var(--white);
    border:none;
    font-size:1.5rem;
    cursor:pointer;
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:4px 4px 0 var(--charcoal);
    text-decoration:none;
}

.back-to-top:hover {
    box-shadow:none;
}

.back-to-top.visible {
    opacity:1;
    visibility:visible;
}

@media (max-width:768px) {
    .back-to-top {
        bottom:16px;
        right:16px;
        width:44px;
        height:44px;
        font-size:1.25rem;
    }
}

/* ============================================
   9. NAV LINKS (Section Links Bar)
   ============================================ */

.section-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:70px 16px 16px;
    background:var(--white);
    position:sticky;
    top:0;
    z-index:9999;
}

input[type="radio"][name="section"] {
    display:none;
}

.section-links label {
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    color:var(--charcoal);
    padding:6px 12px;
    border:1px solid var(--charcoal);
    border-radius:6px;
    transition:all 0.2s ease;
}

.section-links label:hover {
    background:var(--charcoal);
    color:var(--white);
}

[data-theme="dark"] .section-links label {
    color:var(--black);
    background:var(--white);
    border-color:var(--black);
}

[data-theme="dark"] .section-links label:hover {
    background:var(--black);
    color:var(--white);
}

.section-links a:hover {
    background:var(--charcoal) !important;
    color:var(--white) !important;
    border-radius:6px;
}

[data-theme="dark"] .section-links a:hover {
    background:var(--black);
    color:var(--white);
    border-radius:6px;
}

.section-links button:hover {
    background:var(--charcoal) !important;
    color:var(--white) !important;
    border-radius:6px;
}

[data-theme="dark"] .section-links button:hover {
    background:var(--black) !important;
    color:var(--white) !important;
    border-radius:6px;
}

.search-link {
    padding: 6px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--charcoal);
    text-decoration: none;
    border: 1px solid var(--charcoal);
    border-radius: 6px;
    transition:all 0.2s ease;
}

.section-links label:hover, .search-link:hover {
    background:var(--charcoal);
    color:var(--white);
}

[data-theme="dark"] .section-links label, [data-theme="dark"] .search-link {
    color:var(--black);
    background:var(--white);
    border-color:var(--black);
}

[data-theme="dark"] .section-links label:hover, [data-theme="dark"] .search-link:hover {
    background:var(--black);
    color:var(--white);
}

/* Theme/Login/Account Buttons */
#themeBtn:hover,
#loginBtn:hover,
#accountBtn:hover {
    background:var(--black) !important;
    color:var(--white) !important;
    border-color:var(--black) !important;
}

[data-theme="dark"] #themeBtn:hover,
[data-theme="dark"] #loginBtn:hover,
[data-theme="dark"] #accountBtn:hover {
    background:var(--black) !important;
    color:var(--white) !important;
    border-color:var(--black) !important;
}

/* Section Links Scrollbar Hide */
.section-links::-webkit-scrollbar {
    display:none;
}

.section-links a:not(.search-link) {
    color:var(--white);
    text-decoration:none;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    white-space:nowrap;
    padding:6px 12px;
    border:1px solid #333;
    border-radius:4px;
    transition:background 0.2s,border-color 0.2s;
}

.section-links a:not(.search-link):hover {
    background:#333;
    border-color:#555;
}