/*
 * Main.css - Core Layout & Theme Styles
 * =====================================
 * 
 * This file references CSS variables defined in style.css.
 * To customize colors, edit the :root block in assets/css/style.css.
 * 
 * THEME VARIABLES USED:
 * - --site-bg: Main page background (default: #162448)
 * - --navbar-bg: Navigation bar background
 * - --text-main: Primary text color (default: #ffffff)
 * - --text-subtle: Secondary text color (default: #cfd8ea)
 * - --accent: Accent/highlight color (default: #0b5ed7)
 * - --card-bg: Card background (default: #ffffff)
 * - --card-text: Text on cards (default: #0b1220)
 * - --radius: Border radius (default: 12px)
 */

/* ========================================
   BODY DEFAULTS
   ======================================== */
body {
  background: var(--site-bg, #162448);
  color: var(--text-main, #ffffff);
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ========================================
   NAVBAR OVERRIDES
   ======================================== */
.main-navbar {
  background: var(--navbar-bg, var(--site-bg, #162448));
}

.main-navbar-nav a,
.main-navbar-nav button.nav-link-btn {
  color: var(--text-main, #ffffff);
}

.main-navbar-nav a:hover,
.main-navbar-nav a.active,
.main-navbar-nav button.nav-link-btn:hover {
  color: var(--accent, #0b5ed7);
  border-bottom-color: var(--accent, #0b5ed7);
}

.main-navbar-contact-btn {
  background: var(--accent, #0b5ed7);
  color: var(--accent-contrast, #ffffff);
}

.main-navbar-contact-btn:hover,
.main-navbar-contact-btn:focus {
  background: var(--accent-hover, #3373b5);
  color: var(--accent-contrast, #ffffff);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn-primary {
  background: var(--accent, #0b5ed7);
  border-color: var(--accent, #0b5ed7);
  color: var(--accent-contrast, #ffffff);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-hover, #3373b5);
  border-color: var(--accent-hover, #3373b5);
}

.btn-outline-primary {
  color: var(--accent, #0b5ed7);
  border-color: var(--accent, #0b5ed7);
  background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--accent, #0b5ed7);
  color: var(--accent-contrast, #ffffff);
}

/* ========================================
   LINK STYLES
   ======================================== */
a {
  color: var(--accent, #0b5ed7);
}

a:hover,
a:focus {
  color: var(--accent-hover, #3373b5);
}

/* ========================================
   FOOTER STYLES
   ======================================== */
.page-footer {
  background: var(--navbar-bg, var(--site-bg, #162448));
  color: var(--text-main, #ffffff);
}

.page-footer .footer-social-link {
  color: var(--accent, #0b5ed7);
}

.page-footer .footer-social-link:hover,
.page-footer .footer-social-link:focus {
  background: var(--accent, #0b5ed7);
  color: var(--accent-contrast, #ffffff);
}

.page-footer .footer-links a {
  color: var(--text-main, #ffffff);
}

.page-footer .footer-links a:hover {
  color: var(--accent, #0b5ed7);
}

.page-footer .footer-sep {
  color: var(--accent, #0b5ed7);
}

/* ========================================
   FOCUS ACCESSIBILITY
   ======================================== */
*:focus-visible {
  outline: 2px solid var(--accent, #0b5ed7);
  outline-offset: 2px;
}