/* =============================================================================
   Numbered Section — [numbered_section] shortcode
   ============================================================================= */

.nsec-wrap {
  display: flex;
  gap: 1px;
  background-color: rgba(116, 140, 164, 0.25);
  border-top: 1px solid rgba(116, 140, 164, 0.25);
  border-bottom: 1px solid rgba(116, 140, 164, 0.25);
  width: 100%;
}

.nsec-item {
  flex: 1;
  background-color: #F0F0F0;
  padding: 28px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateX(-6px);
}

.nsec-wrap.is-visible .nsec-item {
  animation: nsec-fade-in 1s ease forwards;
}

@keyframes nsec-fade-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.nsec-num {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(12, 36, 74, 0.4);
  font-weight: 400;
}

.nsec-heading {
  font-size: 1.35rem;
  font-weight: 500;
  color: #0C244A;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nsec-body,
.nsec-body p,
.nsec-body li {
  font-size: 0.875rem !important;
  color: rgba(12, 36, 74, 0.6) !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

.nsec-body > *:first-child { margin-top: 0 !important; }
.nsec-body > *:last-child  { margin-bottom: 0 !important; }

/* ---- Dark variant ([numbered_section_2]) ---- */

.nsec-wrap--dark {
  background-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.nsec-wrap--dark .nsec-item {
  background-color: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.nsec-wrap--dark .nsec-item:last-child {
  border-right: none;
}

.nsec-wrap--dark .nsec-num {
  color: rgba(255, 255, 255, 0.38);
}

.nsec-wrap--dark .nsec-heading {
  color: #fff;
}

html body .nsec-wrap--dark .nsec-body,
html body .nsec-wrap--dark .nsec-body p,
html body .nsec-wrap--dark .nsec-body li,
html body .nsec-wrap--dark .nsec-body a,
html body .nsec-wrap--dark .nsec-body span {
  color: #fff !important;
}

html body .nsec-wrap--dark .nsec-body strong,
html body .nsec-wrap--dark .nsec-body b {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .nsec-wrap--dark {
    flex-wrap: wrap;
  }

  .nsec-wrap--dark .nsec-item {
    flex: 1 1 calc(50% - 1px);
    min-width: 200px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 767px) {
  .nsec-wrap {
    flex-direction: column;
  }

  .nsec-wrap--dark {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  .nsec-wrap--dark .nsec-item {
    flex: 1 1 auto;
  }
}