/* =========================================================
   ArcaneBinder — site.css (Global foundation)
   ========================================================= */

/* ---- Tokens / Theme ---- */
:root {
    --bg: #0f1115;
    --fg: #e6e6e6;
    --muted: #a0a0a0;
    --accent: #7c6cff; /* arcane purple */
    --accent2: #23d5c5; /* mana teal */

    --card: #151922;
    --border: #2a2e36;
    --glow: rgba(124,108,255,0.35);
    --glow2: rgba(35,213,197,0.18);
}

/* ---- Baseline template behavior ---- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* =========================================================
   Layout: footer never overlaps content
   (Works with: <div class="container page-content"> wrapper)
   ========================================================= */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* This wrapper grows to push footer down on short pages */
.page-content {
    flex: 1 0 auto;
}

/* ---- Base page styling ---- */
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--fg);
    line-height: 1.6;
    background: radial-gradient(900px 500px at 15% -10%, rgba(124,108,255,0.18), transparent 60%), radial-gradient(700px 400px at 85% 0%, rgba(252,238,106,0.18), transparent 55%), linear-gradient(180deg, #0b0d12 0%, var(--bg) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Main content padding */
main[role="main"] {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ---- Typography ---- */
h1, h2, h3 {
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 2.2rem;
    text-shadow: 0 0 20px rgba(124,108,255,0.18);
}

h2 {
    margin-top: 2.25rem;
    color: rgba(230,230,230,0.95);
}

/* “Subtle fantasy serif” only for headings (not body) */
h1, h2 {
    font-family: "Cinzel", serif;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: 1rem;
}

ul, ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

section {
    margin-bottom: 3rem;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 3rem 0;
}

/* ---- Links ---- */
a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ---- Utility: divider ---- */
.ab-divider {
    height: 1px;
    margin: 2.5rem 0;
    background: linear-gradient( 90deg, transparent, rgba(124,108,255,0.45), rgba(252,238,106,0.18), transparent );
}

/* ---- Small note callout ---- */
.note {
    color: var(--muted);
    font-size: 0.92rem;
    border-left: 3px solid rgba(124,108,255,0.55);
    padding-left: 0.75rem;
}

/* ---- Accessibility focus (Bootstrap-ish) ---- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}