/* =======================================================================
   footer.css — GLOBAL FOOTER STYLES
   =======================================================================
   PURPOSE
   -----------------------------------------------------------------------
   - Styles the global footer used across all pages
   - Handles background, text color, and link states
   - Supports light and dark themes

   DESIGN GOALS
   -----------------------------------------------------------------------
   - Subtle separation from page content
   - Non-distracting (AdSense safe)
   - Matches header “glass” aesthetic
   - Clean readability in both themes

   IMPORTANT
   -----------------------------------------------------------------------
   - Do NOT add page-specific styles here
   - Layout structure comes from HTML / global.css
   - Colors should rely on CSS variables where possible
   ======================================================================= */


/* =======================================================================
   FOOTER — BASE STYLES (LIGHT THEME)
   ======================================================================= */

footer {
  padding: 24px 0;                     /* Comfortable vertical spacing */
  color: var(--muted);                 /* Muted text for non-dominance */

  /* Subtle glass-like background to separate from content */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.75)
  );

  /* Thin divider to visually close the page */
  border-top: 1px solid rgba(16,16,32,0.06);
}

/* Footer links — inherit muted tone */
footer a {
  color: var(--muted);
  text-decoration: none;
}

/* Hover feedback (kept subtle for ads & UX) */
footer a:hover {
  color: var(--accent);
}


/* =======================================================================
   FOOTER — DARK MODE OVERRIDES
   =======================================================================
   Ensures:
   - Proper contrast on dark background
   - Footer does not feel like a black slab
   - Text remains readable but understated
   ======================================================================= */

[data-theme="dark"] footer {
  background: linear-gradient(
    180deg,
    rgba(18,20,26,0.90),
    rgba(18,20,26,0.80)
  );

  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Dark mode link color */
[data-theme="dark"] footer a {
  color: #bdb8c9;
}

/* Dark mode hover — clear but not flashy */
[data-theme="dark"] footer a:hover {
  color: #ffffff;
}