/* ============================================================
   EARTHLEADERS — MAIN CSS ENTRY POINT (main.css)
   Imports all partials + page-level overrides
   ============================================================ */

@import './reset.css';
@import './tokens.css';
@import './typography.css';
@import './animations.css';
@import './components.css';
@import './layout.css';

/* ── PAGE OVERRIDES / GLOBAL UTILITY CLASSES ─────────────── */

/* Text alignment helpers */
.text-center { text-align: center; }
.text-left   { text-align: left;   }
.text-right  { text-align: right;  }

/* Max-width text containers */
.text-max-sm  { max-width: 480px; }
.text-max-md  { max-width: 600px; }
.text-max-lg  { max-width: 720px; }

/* Centered block */
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin utilities */
.mt-4  { margin-top: 4px;  }
.mt-8  { margin-top: 8px;  }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-56 { margin-top: 56px; }
.mt-64 { margin-top: 64px; }

.mb-8  { margin-bottom: 8px;  }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

/* Display flex utilities */
.flex             { display: flex; }
.flex-center      { display: flex; align-items: center; justify-content: center; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap        { flex-wrap: wrap; }
.gap-8  { gap: 8px;  }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── DARK SECTION OVERRIDES (Section 09 + Footer) ─────────── */

#contact h2,
#contact h3,
#contact p.dark-headline {
  color: #F5F0E8;
}

#contact .section-subtitle,
#contact p {
  color: rgba(245, 240, 232, 0.75);
}

/* ── SMOOTH SCROLL OFFSET (fixed navbar compensation) ─────── */

:target {
  scroll-margin-top: 80px;
}

/* ── SELECTION COLOR ──────────────────────────────────────── */

::selection {
  background: rgba(78, 123, 95, 0.2);
  color: var(--green-900);
}

/* ── SCROLLBAR (optional custom) ─────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--green-400);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-500);
}