@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");

:root {
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Barlow", ui-sans-serif, system-ui, sans-serif;

  --color-brand-primary: #4a6fa5;
  --color-brand-secondary: #4a6fa5;
  --color-brand-accent: #4a6fa5;
  --color-brand-accent-hover: #3d5880;
  --color-brand-cta: #4a6fa5;
  --color-brand-cta-hover: #3d5880;
  --color-brand-light: #121417;
  --color-brand-dark: rgba(29, 161, 242, 0.16);
  --color-brand-warm: #1da1f2;
  --color-brand-alert: #1da1f2;
  --color-brand-link: #1da1f2;
}

/* ── Force dark page background – must win over WordPress + Elementor defaults ── */
html,
body {
  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(74, 111, 165, 0.1),
      transparent 38%
    ),
    radial-gradient(
      circle at 85% 0%,
      rgba(74, 111, 165, 0.08),
      transparent 30%
    ),
    #121417 !important;
  color: rgba(231, 238, 247, 0.96) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-level wrappers: transparent so dark body shows through */
#page,
.site,
.site-content,
#content,
.entry-content,
#primary,
main.site-main {
  background: transparent !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  font-weight: 700;
}

p,
li,
button,
a,
input,
label,
textarea,
select {
  font-family: var(--font-sans);
}

/* ── Elementor structural containers: transparent so dark body shows through ── */
.elementor,
.elementor-section-wrap,
.elementor-top-section,
.elementor-section,
.elementor-inner-section,
.elementor-container,
.elementor-row,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget,
.elementor-widget-container,
.e-con,
.e-con-inner,
.e-flex,
.e-child {
  background-color: transparent !important;
  background-image: none !important;
}

/* Remove Elementor default section padding – components handle their own spacing */
.elementor-section,
.elementor-top-section {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-section > .elementor-container,
.elementor-top-section > .elementor-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
}

.elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-column {
  padding: 0 !important;
}

/* Elementor export wrapper baseline */
.tf-elementor-export {
  font-family: var(--font-sans);
  color: var(--color-brand-primary);
}

.tf-elementor-export h1,
.tf-elementor-export h2,
.tf-elementor-export h3,
.tf-elementor-export h4,
.tf-elementor-export h5,
.tf-elementor-export h6 {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  font-weight: 700;
}

.tf-elementor-export svg {
  display: block;
}

/* Reusable visual facelift: dark surfaces, crisp borders, premium depth */
.bg-white {
  background-color: rgba(20, 24, 29, 0.88) !important;
  border: 1px solid rgba(74, 111, 165, 0.3) !important;
  backdrop-filter: blur(9px);
}

.border-brand-dark {
  border-color: rgba(29, 161, 242, 0.16) !important;
}

.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: none !important;
}

.text-brand-secondary {
  color: rgba(220, 220, 220, 0.95) !important;
}

.bg-brand-cta {
  border: 1px solid rgba(74, 111, 165, 0.65);
  background-image: linear-gradient(
    180deg,
    rgba(74, 111, 165, 0.98) 0%,
    rgba(61, 88, 128, 0.98) 100%
  );
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bg-brand-cta:hover {
  box-shadow:
    0 0 0 1px rgba(29, 161, 242, 0.36),
    0 12px 28px rgba(15, 28, 45, 0.46) !important;
}

/* Labels & microcopy */
.tracking-widest {
  letter-spacing: 0.14em !important;
}

/* Interactive language */
a,
button {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

a:hover,
button:hover {
  transform: translateY(-1px);
}

/* Primary action consistency */
.bg-brand-cta {
  border: 1px solid rgba(98, 163, 80, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bg-brand-cta:hover {
  box-shadow:
    0 0 0 1px rgba(118, 184, 82, 0.35),
    0 14px 28px rgba(98, 163, 80, 0.35) !important;
}

.accent-mark {
  color: var(--color-brand-accent);
  text-shadow: 0 0 10px rgba(98, 163, 80, 0.45);
  font-weight: 800;
}

/* Accessibility: reduce animation when requested */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}