/* =========================================================
STRATEGIC AI LEADER — GLOBAL DESIGN SYSTEM
Clean baseline
No sticky-header behavior in this file
========================================================= */

/* =========================================================
COLOR TOKENS
========================================================= */

:root {
  --brand-ink: #0f172a;
  --brand-navy: #0b1220;
  --brand-cyan: #1fb6d9;

  --bg-page: #f6f8fb;
  --bg-surface: #ffffff;
  --bg-soft: #f1f5f9;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;

  --shadow-soft: 0 4px 16px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 8px 28px rgba(15, 23, 42, 0.06);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --container-max: 1240px;
}

/* =========================================================
DARK MODE TOKENS
Prepared, not active
========================================================= */

[data-theme="dark"] {
  --bg-page: #0b1220;
  --bg-surface: #111827;
  --bg-soft: #0f172a;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --border-subtle: #1f2937;
  --border-strong: #334155;
}

/* =========================================================
BODY
========================================================= */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

/* =========================================================
CONTAINER SYSTEM
========================================================= */

.sal-container {
  width: min(var(--container-max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1023px) {
  .sal-container {
    width: calc(100% - 28px);
  }
}

@media (max-width: 767px) {
  .sal-container {
    width: calc(100% - 14px);
  }
}

/* =========================================================
TYPOGRAPHY
========================================================= */

h1 {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 22px;
  line-height: 1.25;
}

p {
  color: var(--text-secondary);
}

/* =========================================================
SECTION SPACING
========================================================= */

.sal-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

@media (max-width: 767px) {
  .sal-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* =========================================================
BUTTON SYSTEM
========================================================= */

.wp-block-button__link {
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  transition: all 0.18s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* =========================================================
CARD SYSTEM
========================================================= */

.sal-card,
.sal-info-card,
.sal-post-card,
.sal-newsletter-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.sal-card:hover,
.sal-post-card:hover {
  box-shadow: var(--shadow-card);
}

/* =========================================================
IMAGES
========================================================= */

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
WORDPRESS CLEANUP
========================================================= */

.wp-block-image,
.wp-block-group,
.wp-block-columns,
.wp-block-buttons {
  box-sizing: border-box;
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}



/* ========================================
GLOBAL HEADER NAV
BRIGHT TEAL SYSTEM
======================================== */

/* default nav link */

.site-header .site-navigation ul.menu > li > a,
.site-header .header-navigation ul.menu > li > a,
.site-header .main-navigation ul.menu > li > a {
  color: #475569 !important;
  font-weight: 500 !important;
  transition: color 0.18s ease !important;
}


/* hover state */

.site-header .site-navigation ul.menu > li > a:hover,
.site-header .header-navigation ul.menu > li > a:hover,
.site-header .main-navigation ul.menu > li > a:hover {
  color: #3cd6ff !important;
}


/* active page */

.site-header .site-navigation ul.menu > li.current-menu-item > a,
.site-header .site-navigation ul.menu > li.current_page_item > a,
.site-header .site-navigation ul.menu > li.current-menu-ancestor > a,
.site-header .header-navigation ul.menu > li.current-menu-item > a,
.site-header .header-navigation ul.menu > li.current_page_item > a,
.site-header .header-navigation ul.menu > li.current-menu-ancestor > a,
.site-header .main-navigation ul.menu > li.current-menu-item > a,
.site-header .main-navigation ul.menu > li.current_page_item > a,
.site-header .main-navigation ul.menu > li.current-menu-ancestor > a {
  color: #3cd6ff !important;
  font-weight: 500 !important;
}

/* ========================================
HEADER NAV ACTIVE INDICATOR BAR
MAKE MATCH BRIGHT TEAL
======================================== */

.site-header .site-navigation ul.menu > li > a::after,
.site-header .header-navigation ul.menu > li > a::after,
.site-header .main-navigation ul.menu > li > a::after {
  background: #3cd6ff !important;
}


/* active indicator */

.site-header .site-navigation ul.menu > li.current-menu-item > a::after,
.site-header .site-navigation ul.menu > li.current_page_item > a::after,
.site-header .site-navigation ul.menu > li.current-menu-ancestor > a::after,
.site-header .header-navigation ul.menu > li.current-menu-item > a::after,
.site-header .header-navigation ul.menu > li.current_page_item > a::after,
.site-header .header-navigation ul.menu > li.current-menu-ancestor > a::after,
.site-header .main-navigation ul.menu > li.current-menu-item > a::after,
.site-header .main-navigation ul.menu > li.current_page_item > a::after,
.site-header .main-navigation ul.menu > li.current-menu-ancestor > a::after {
  background: #3cd6ff !important;
}