/* ==================== */
/* SITE FOOTER          */
/* ==================== */
/* The one footer every page uses. It sits at the end of the page by default;
   a page only picks a modifier:
     .site-footer--fixed  pinned to the bottom of the viewport (full-screen pages)
     .site-footer--light  white ink, for pages that sit on video or black
   Everything takes its colour from the footer itself, so dark mode and the
   per-page ink only have to set it once. */
.site-footer {
    --footer-ink: #0A0A0A;
    position: relative;
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 4rem;
    padding: 1rem 2rem;
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--footer-ink);
    -webkit-text-fill-color: currentColor;
}
.site-footer--fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
}
.site-footer--light { --footer-ink: #FFFFFF; }
body.dark-mode .site-footer { --footer-ink: #FF4500; }

.site-footer-left {
    opacity: 0.5;
    color: inherit;
}
.footer-link,
.footer-link:link,
.footer-link:visited { color: inherit; }

.site-footer-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: 0.5;
}
.site-footer-socials {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.social-link {
    color: inherit;
    display: flex;
    align-items: center;
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
    transform-origin: center;
}
.social-link[aria-label="Instagram"]:hover { color: #E1306C !important; opacity: 1 !important; transform: scale(1.22); filter: drop-shadow(0 0 10px rgba(225, 48, 108, 0.55)) saturate(1.4); }
.social-link[aria-label="LinkedIn"]:hover { color: #0A66C2 !important; opacity: 1 !important; transform: scale(1.22); filter: drop-shadow(0 0 10px rgba(10, 102, 194, 0.6)) saturate(1.4); }
.social-link.social-link-ionic:hover { color: #714BDD !important; opacity: 1 !important; transform: scale(1.22); filter: drop-shadow(0 0 10px rgba(113, 75, 221, 0.6)) saturate(1.4); }

/* Light / dark: the icon shows the mode you're in (sun = light, moon = dark).
   The checkbox under it stays so each page's existing toggle script works. */
.dark-mode-toggle {
    position: relative;
    display: grid;
    width: 16px;
    height: 16px;
    color: inherit;
    cursor: none;
    transition: color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}
.dark-mode-toggle:hover {
    color: #FF4500;
    transform: scale(1.22);
    filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.55));
}
body.dark-mode .dark-mode-toggle:hover { color: #FFFFFF; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)); }
.dark-mode-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.dark-mode-toggle:has(input:focus-visible) { outline: 1px solid currentColor; outline-offset: 3px; border-radius: 50%; }
.theme-icon {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
body.dark-mode .theme-icon--sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
body.dark-mode .theme-icon--moon { opacity: 1; transform: none; }