/**
 * Front page parity with https://ndsacademy.co.za/ (theme PHP layout + live Elementor tokens).
 *
 * @package NDS-Academy
 */

.nds-front-elementor-wrap .nds-home-elementor-body {
  width: 100%;
}

.front-page-main--elementor-editor .nds-front-elementor-wrap {
  min-height: 40vh;
}

/* —— Brand tokens (live Elementor kit + site CSS) —— */
:root {
  --nds-divider-mint: #d7efe2;
  --nds-ink: #020101;
}

/* Poster typography: Montserrat headings, Open Sans body */
body.nds-static .nds-front-elementor-wrap,
body.nds-static .nds-home-elementor-body,
body.nds-static .nds-home-elementor-body .elementor {
  font-family: var(--font-body);
}

body.nds-static #main-content h1,
body.nds-static #main-content h2,
body.nds-static #main-content h3,
body.nds-static #main-content h4,
body.nds-static #main-content h5,
body.nds-static #main-content h6,
body.nds-static .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading) !important;
}

/* —— Bootstrap: stop default blue primary on marketing buttons —— */
body.nds-static .btn.btn-primary {
  --bs-btn-bg: var(--nds-0);
  --bs-btn-border-color: var(--nds-0);
  --bs-btn-color: var(--nds-8);
  --bs-btn-hover-bg: var(--nds-1);
  --bs-btn-hover-border-color: var(--nds-1);
  --bs-btn-hover-color: var(--nds-8);
  background-color: var(--nds-0);
  border-color: var(--nds-0);
  color: var(--nds-8);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
}

body.nds-static .section-courses .section-cta .btn.btn-primary {
  background: transparent;
  color: var(--nds-2);
  border: 2px solid var(--nds-2);
  border-radius: 999px;
}

body.nds-static .section-courses .section-cta .btn.btn-primary:hover {
  background: var(--nds-1);
  border-color: var(--nds-1);
  color: var(--nds-2);
}

/* Nav text links: brand teal, not Bootstrap purple */
.nds-btn-text:hover {
  color: var(--nds-2);
  background: rgba(24, 48, 48, 0.08);
}

/* Headings on home: deep teal (live uses #020101 / --nds-2) */
body.nds-static #main-content h1,
body.nds-static #main-content h2,
body.nds-static #main-content h3,
body.nds-static #main-content h4 {
  color: var(--nds-2);
}

body.nds-static #main-content .section-steps h2,
body.nds-static #main-content .section-steps h3,
body.nds-static #main-content .nds-section-label--light,
body.nds-static #main-content .nds-section-label--light span {
  color: #fff;
}

/* “Lets Get Started” photos — live Elementor: 600px contain */
.home-intro-figure img {
  width: 100%;
  height: 600px;
  max-height: 600px;
  min-height: 280px;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 767px) {
  .home-intro-figure img {
    height: auto;
    max-height: 420px;
    object-fit: cover;
  }
}

/* Section labels: icon + text #111 (live icon-box) */
.nds-section-label,
.nds-section-label .nds-ico,
.nds-section-label span {
  color: var(--nds-ink);
}

.section-gallery--light .nds-section-label,
.section-gallery--light .nds-section-label span,
.section-gallery--light .nds-section-label .nds-ico {
  color: var(--nds-2);
}

/* Course band mint + card elevation (live post-13) */
.section-courses {
  background: var(--nds-4);
}

.course-card {
  border: 1px solid rgba(24, 48, 48, 0.06);
}

/* Enrollment steps dividers (live mint accent on dark band) */
.steps-list__item {
  border-bottom-color: rgba(215, 239, 226, 0.2);
}

/* Gallery “View More” — outlined pill like live Elementor buttons */
.gallery-view-more--pill {
  color: var(--nds-2);
  border: 2px solid var(--nds-2);
  background: transparent;
}

.gallery-view-more--pill:hover {
  background: var(--nds-1);
  border-color: var(--nds-1);
  color: var(--nds-2);
}

/* Learn more pill (unleash) */
.btn-pill-learn {
  color: var(--nds-2);
  border-color: var(--nds-2);
}

.btn-pill-learn:hover {
  background: var(--nds-1);
  border-color: var(--nds-1);
  color: var(--nds-2);
}