/* =========================================
   COLOR THEMES & ANIMATIONS
   ========================================= */

/* --- 1. LIGHT MODE (DEFAULT) --- */
:root, [data-theme="light"] {
  --fn-bg: rgba(245,245,245,0.5);
  --fn-text: rgba(15,15,15,1);
  --fn-text-dim: rgba(15, 15, 15, 0.5);
  --fn-border: rgba(15,15,15,1);
}

/* Bar Background & Border */
.fn-bar {
  background-color: rgba(245,245,245,1);
  border-top: 1px solid var(--fn-border); 
}

/* Overlay Background */
.fn-overlay {
  background-color: var(--fn-bg);
}

/* Text Colors */
.fn-trigger,
.fn-close-btn,
.fn-overlay-links a,
.fn-lang-switch a {
  color: var(--fn-text);
  transition: color 0.3s ease;
}

/* Link Hover States */
.fn-overlay-links a:hover {
  color: var(--fn-text-dim);
}

.fn-lang-switch a:not(.current) {
  color: var(--fn-text-dim);
}
.fn-lang-switch a.current {
  color: var(--fn-text);
  border-bottom: 1px solid var(--fn-text);
}

/* Icon Colors */
.half-circle-icon {
  color: var(--fn-text);
  border-color: var(--fn-text);
}

/* --- 2. DARK MODE --- */
[data-theme="dark"] {
  --fn-bg: rgba(15,15,15,0.5);
  --fn-text: rgba(255, 255, 255, 1);
  --fn-text-dim: rgba(255, 255, 255, 0.5);
  --fn-border: rgba(255, 255, 255, 1);
}

/* Site Wrapper */
[data-theme="dark"] #siteWrapper {
  background-color: #0f0f0f !important;
}

/* Bar Background & Border */
[data-theme="dark"] .fn-bar {
  background-color: rgba(15,15,15,1);
  border-top: 1px solid var(--fn-border); 
}


/* Rotate the Icon 180deg when in Dark Mode */
[data-theme="dark"] .half-circle-icon {
  transform: rotate(180deg);
}

/* --- 3. GLOBAL PAGE TRANSITION HELPERS --- */
body.page-loaded,
body.page-loaded #siteWrapper,
body.page-loaded section .section-background {
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* 2. Target specific Inner Sections (White/Light themes turning Dark) */
[data-theme="dark"] section[data-section-theme="white"] .section-background,
[data-theme="dark"] section[data-section-theme="light"] .section-background {
  background-color: #0f0f0f !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] p, [data-theme="dark"] a {
  color: #ffffff !important;
}