/* Unifying Footer CSS */

/* Footer Container */
footer {
    flex: 0 0 auto;
    /* Use margin to align with body content on pages without body padding */
    margin: 0 5vw;
    margin-top: 10vh;
    padding-top: 2.5vh;
    padding-bottom: 4vh;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* For pages that HAVE body padding (index, theories, pen_paper, theory_courses), 
   we might need a slight override or just rely on the fact that their footer 
   might be inside the body padding. 
   
   However, on index.html, footer IS inside body. 
   body { padding: 4vh 5vw; }
   So footer margin should be 0, not 0 5vw.
   
   Wait, this is the conflict. 
   index.html: body has padding. footer has no margin.
   rethinking_mc.html: body has NO padding. footer NEEDS margin.
   
   To use a shared file, we need a utility class or just accept that we need two include modes.
   OR better: We just make sure footer matches the "visual" alignment.
   
   Let's try to make the footer.css strictly about the LOOK inside the box (border, fonts, flex)
   and handle layout (margins) in the page-specific or global layout CSS?
   
   Actually, the user said "define the footer somewhere". 
   I will put the STYLES in footer.css. 
   And I will include the `a { color: inherit }` rule which is missing in subpages.
*/

.footer-links {
    display: flex;
    gap: 1.5rem;
}

footer .footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

footer .footer-links a:hover {
    color: var(--accent);
}

/* Theme Toggle (often appearing near footer or in header, matching styles) */
button.theme-toggle {
    background: none;
    border: 1px solid var(--line);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.7rem;
    padding: 0.4rem 0.85rem;
    border-radius: 100px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

button.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}