/* ================================================================
   MAKUME TOTI ACADEMY — Theme CSS
   Dark + Bold design system for learn.makumetoti.co.za
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --mta-ink:       #0C0D10;
    --mta-ink-2:     #15171C;
    --mta-ink-3:     #1B1E24;
    --mta-line:      #26292F;
    --mta-line-2:    #363A42;
    --mta-paper:     #F5F2EA;
    --mta-paper-dim: #C9CBD1;
    --mta-amber:     #F2A41F;
    --mta-amber-d:   #D48D10;
    --mta-slate:     #8B8F98;
    --mta-blue:      #378ADD;
    --mta-green:     #5DCAA5;

    --mta-display: 'Archivo', system-ui, sans-serif;
    --mta-body:    'Instrument Sans', system-ui, sans-serif;

    --mta-wrap:    1180px;
    --mta-gap:     24px;
    --mta-radius:  6px;
    --mta-radius-lg: 14px;

    --mta-transition: 0.15s ease;
}

/* ── Reset & Base ──────────────────────────────────────────── */
body.mta-dark,
body.mta-dark .site {
    background-color: var(--mta-ink);
    color: var(--mta-paper);
}
body.mta-dark {
    font-family: var(--mta-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override GP container */
body.mta-dark .site-content,
body.mta-dark .inside-article {
    background: transparent;
    color: var(--mta-paper);
}
body.mta-dark a {
    color: var(--mta-paper);
}
body.mta-dark a:hover {
    color: var(--mta-amber);
}

/* ── Utility — Wrap ────────────────────────────────────────── */
.mta-wrap {
    max-width: var(--mta-wrap);
    margin: 0 auto;
    padding-left: var(--mta-gap);
    padding-right: var(--mta-gap);
}

/* ── Typography ────────────────────────────────────────────── */
.mta-dark h1, .mta-dark h2, .mta-dark h3,
.mta-dark h4, .mta-dark h5, .mta-dark h6 {
    font-family: var(--mta-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--mta-paper);
}
.mta-eyebrow {
    font-family: var(--mta-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mta-amber);
    margin-bottom: 10px;
}
.mta-h1 { font-size: clamp(40px, 6.2vw, 76px); text-transform: uppercase; }
.mta-h2 { font-size: clamp(30px, 4.4vw, 52px); margin-bottom: 18px; }
.mta-h3 { font-size: clamp(22px, 2.8vw, 30px); }
.mta-h4 { font-size: 20px; font-weight: 700; }

.mta-h1 em,
.mta-h2 em {
    font-style: normal;
    color: var(--mta-amber);
}
.mta-lede {
    font-size: 19px;
    color: var(--mta-slate);
    line-height: 1.6;
    max-width: 36em;
}
.mta-muted {
    color: var(--mta-slate);
}
.mta-body-text {
    color: var(--mta-paper-dim);
}
.mta-body-text strong {
    color: var(--mta-paper);
}

/* ── Buttons ───────────────────────────────────────────────── */
.mta-btn {
    display: inline-block;
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    padding: 15px 28px;
    border-radius: var(--mta-radius);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--mta-transition), background var(--mta-transition), border-color var(--mta-transition);
    line-height: 1;
}
.mta-btn:hover {
    transform: translateY(-2px);
}
.mta-btn--amber {
    background: var(--mta-amber);
    color: var(--mta-ink);
}
.mta-btn--amber:hover {
    background: var(--mta-amber-d);
    color: var(--mta-ink);
}
.mta-btn--ghost {
    background: transparent;
    border: 1px solid var(--mta-line);
    color: var(--mta-paper);
}
.mta-btn--ghost:hover {
    border-color: var(--mta-amber);
    color: var(--mta-amber);
}
.mta-btn--dark {
    background: var(--mta-ink);
    color: var(--mta-paper);
}
.mta-btn-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Navigation ────────────────────────────────────────────── */
body.mta-dark .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(12, 13, 16, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mta-line);
}
body.mta-dark .main-navigation a,
body.mta-dark .main-navigation .main-nav ul li a {
    color: var(--mta-slate);
    font-size: 14px;
    font-family: var(--mta-body);
}
body.mta-dark .main-navigation a:hover,
body.mta-dark .main-navigation .main-nav ul li a:hover {
    color: var(--mta-paper);
}
/* CTA button in nav — add class .menu-cta to menu item via WP */
body.mta-dark .menu-cta > a {
    background: var(--mta-amber) !important;
    color: var(--mta-ink) !important;
    padding: 10px 18px !important;
    border-radius: var(--mta-radius) !important;
    font-family: var(--mta-display) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* ── Sections ──────────────────────────────────────────────── */
.mta-section {
    padding: 96px 0;
    border-top: 1px solid var(--mta-line);
}
.mta-section--no-border {
    border-top: none;
}
.mta-section--flush {
    padding: 0;
}
.mta-section--tinted {
    background: var(--mta-ink-2);
}

/* ── Hero ──────────────────────────────────────────────────── */
.mta-hero {
    padding: 110px 0 90px;
}
.mta-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}
.mta-hero__lede {
    margin: 24px 0 34px;
}
@media (max-width: 880px) {
    .mta-hero__grid {
        grid-template-columns: 1fr;
    }
}

/* ── SERP Card (signature element) ─────────────────────────── */
.mta-serp {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: 12px;
    padding: 26px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.mta-serp__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mta-ink);
    border: 1px solid var(--mta-line);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    color: var(--mta-slate);
    margin-bottom: 22px;
}
.mta-serp__bar svg {
    flex-shrink: 0;
}
.mta-serp__result {
    padding: 16px 4px;
    border-bottom: 1px solid var(--mta-line);
}
.mta-serp__result:last-child {
    border-bottom: none;
}
.mta-serp__pos {
    font-family: var(--mta-display);
    font-weight: 800;
    font-size: 13px;
    color: var(--mta-amber);
    letter-spacing: 0.1em;
}
.mta-serp__title {
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 17px;
    margin: 4px 0 2px;
}
.mta-serp__url {
    font-size: 13px;
    color: var(--mta-slate);
}
.mta-serp__dim {
    opacity: 0.38;
}

/* ── Pain Strip ────────────────────────────────────────────── */
.mta-pain {
    padding: 0;
    border-top: 1px solid var(--mta-line);
    border-bottom: 1px solid var(--mta-line);
    background: var(--mta-ink-2);
}
.mta-pain__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.mta-pain__item {
    padding: 34px 28px;
    border-right: 1px solid var(--mta-line);
    font-family: var(--mta-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}
.mta-pain__item:last-child {
    border-right: none;
}
.mta-pain__item strong {
    color: var(--mta-amber);
}
@media (max-width: 820px) {
    .mta-pain__grid { grid-template-columns: 1fr; }
    .mta-pain__item { border-right: none; border-bottom: 1px solid var(--mta-line); }
    .mta-pain__item:last-child { border-bottom: none; }
}

/* ── Story / About Grid ────────────────────────────────────── */
.mta-story__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
}
.mta-story__image {
    border-radius: var(--mta-radius-lg);
    overflow: hidden;
    border: 1px solid var(--mta-line);
    background: var(--mta-ink-2);
}
.mta-story__image img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 880px) {
    .mta-story__grid { grid-template-columns: 1fr; }
}

/* ── Path Cards (Academy / Consulting) ─────────────────────── */
.mta-paths__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 48px;
}
.mta-path {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius-lg);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
}
.mta-path--featured {
    border-color: var(--mta-amber);
}
.mta-path__title {
    font-size: 26px;
    margin: 10px 0 8px;
}
.mta-path__sub {
    color: var(--mta-slate);
    margin-bottom: 24px;
}
.mta-path__list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    flex: 1;
}
.mta-path__list li {
    padding: 9px 0 9px 28px;
    position: relative;
    font-size: 15.5px;
    color: var(--mta-paper-dim);
    border-bottom: 1px solid var(--mta-line);
}
.mta-path__list li:last-child {
    border-bottom: none;
}
.mta-path__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--mta-amber);
}
.mta-path--alt .mta-path__list li::before {
    background: transparent;
    border: 1.5px solid var(--mta-slate);
}
@media (max-width: 880px) {
    .mta-paths__grid { grid-template-columns: 1fr; }
}

/* ── Stats Grid ────────────────────────────────────────────── */
.mta-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--mta-line);
    border: 1px solid var(--mta-line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 44px;
}
.mta-stat {
    background: var(--mta-ink-2);
    padding: 34px 26px;
}
.mta-stat__number {
    display: block;
    font-family: var(--mta-display);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--mta-amber);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.mta-stat__label {
    font-size: 14px;
    color: var(--mta-slate);
    margin-top: 4px;
}
@media (max-width: 820px) {
    .mta-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .mta-stats { grid-template-columns: 1fr; }
}

/* ── Testimonials ──────────────────────────────────────────── */
.mta-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 44px;
}
.mta-testimonial {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: 12px;
    padding: 30px;
    font-size: 15.5px;
    color: var(--mta-paper-dim);
    display: flex;
    flex-direction: column;
}
.mta-testimonial__quote {
    flex: 1;
    margin-bottom: 20px;
    line-height: 1.6;
}
.mta-testimonial__author {
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--mta-paper);
}
.mta-testimonial__role {
    display: block;
    font-family: var(--mta-body);
    font-weight: 400;
    color: var(--mta-slate);
    font-size: 13px;
}
@media (max-width: 880px) {
    .mta-testimonials__grid { grid-template-columns: 1fr; }
}

/* ── Lead Magnet CTA ───────────────────────────────────────── */
.mta-lead {
    background: var(--mta-amber);
    color: var(--mta-ink);
    border-radius: 16px;
    padding: 64px 56px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}
.mta-lead .mta-eyebrow {
    color: var(--mta-ink);
    opacity: 0.65;
}
.mta-lead h2,
.mta-lead h3 {
    color: var(--mta-ink);
}
.mta-lead p {
    color: #3A2E10;
}
.mta-lead__form {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.mta-lead__form input[type="email"],
.mta-lead__form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 15px 18px;
    border-radius: var(--mta-radius);
    border: none;
    font-family: var(--mta-body);
    font-size: 15px;
    background: #fffdf7;
    color: var(--mta-ink);
}
.mta-lead__form .mta-btn--dark {
    background: var(--mta-ink);
    color: var(--mta-paper);
}
.mta-lead__art {
    background: rgba(12, 13, 16, 0.12);
    border-radius: 12px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mta-display);
    font-weight: 800;
    text-align: center;
    padding: 24px;
    font-size: 18px;
    line-height: 1.3;
}
@media (max-width: 880px) {
    .mta-lead { grid-template-columns: 1fr; padding: 44px 28px; }
}

/* ── Course Cards ──────────────────────────────────────────── */
.mta-courses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.mta-course-card {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: border-color var(--mta-transition);
}
.mta-course-card:hover {
    border-color: var(--mta-amber);
}
.mta-course-card__track {
    font-size: 11px;
    font-family: var(--mta-display);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mta-amber);
    margin-bottom: 8px;
}
.mta-course-card__title {
    font-family: var(--mta-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.mta-course-card__excerpt {
    color: var(--mta-paper-dim);
    font-size: 15px;
    flex: 1;
    margin-bottom: 20px;
}
.mta-course-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--mta-line);
    font-size: 13px;
    color: var(--mta-slate);
}
.mta-course-card__price {
    font-family: var(--mta-display);
    font-weight: 700;
    color: var(--mta-paper);
}
.mta-course-card a {
    text-decoration: none;
    color: inherit;
}

/* ── Single Course Page ────────────────────────────────────── */
.mta-course-hero {
    padding: 80px 0 60px;
}
.mta-course-hero__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 48px;
    align-items: start;
}
.mta-course-hero__sidebar {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius-lg);
    padding: 32px;
    position: sticky;
    top: 100px;
}
.mta-course-hero__price {
    font-family: var(--mta-display);
    font-weight: 800;
    font-size: 36px;
    color: var(--mta-amber);
    margin-bottom: 6px;
}
.mta-course-hero__includes {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.mta-course-hero__includes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--mta-line);
    font-size: 14px;
    color: var(--mta-paper-dim);
}
.mta-course-hero__includes li:last-child {
    border-bottom: none;
}
@media (max-width: 880px) {
    .mta-course-hero__grid { grid-template-columns: 1fr; }
    .mta-course-hero__sidebar { position: static; }
}

/* ── Consulting Service Cards ──────────────────────────────── */
.mta-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.mta-service-card {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius-lg);
    padding: 36px 30px;
    transition: border-color var(--mta-transition);
}
.mta-service-card:hover {
    border-color: var(--mta-blue);
}

/* ── Blog / Resources ──────────────────────────────────────── */
.mta-posts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}
.mta-post-card {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius-lg);
    overflow: hidden;
    transition: border-color var(--mta-transition);
}
.mta-post-card:hover {
    border-color: var(--mta-amber);
}
.mta-post-card__image {
    aspect-ratio: 16 / 9;
    background: var(--mta-ink-3);
    overflow: hidden;
}
.mta-post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mta-post-card__body {
    padding: 24px;
}
.mta-post-card__category {
    font-size: 11px;
    font-family: var(--mta-display);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mta-amber);
    margin-bottom: 6px;
}
.mta-post-card__title {
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.mta-post-card__title a {
    text-decoration: none;
}
.mta-post-card__date {
    font-size: 13px;
    color: var(--mta-slate);
}

/* ── Breadcrumbs ───────────────────────────────────────────── */
.mta-bc {
    padding: 16px 0;
    font-size: 13px;
    color: var(--mta-slate);
    border-bottom: 1px solid var(--mta-line);
}
.mta-bc a {
    color: var(--mta-slate);
    text-decoration: none;
}
.mta-bc a:hover {
    color: var(--mta-paper);
}
.mta-bc__sep {
    margin: 0 8px;
    opacity: 0.4;
}
.mta-bc__current {
    color: var(--mta-paper);
}

/* ── FAQ Accordion ─────────────────────────────────────────── */
.mta-faq__item {
    border-bottom: 1px solid var(--mta-line);
}
.mta-faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 17px;
    background: none;
    border: none;
    color: var(--mta-paper);
    width: 100%;
    text-align: left;
}
.mta-faq__question::after {
    content: "+";
    font-size: 22px;
    color: var(--mta-amber);
    transition: transform var(--mta-transition);
    flex-shrink: 0;
    margin-left: 16px;
}
.mta-faq__item.is-open .mta-faq__question::after {
    content: "−";
}
.mta-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.mta-faq__answer__inner {
    padding: 0 0 24px;
    color: var(--mta-paper-dim);
    font-size: 15.5px;
    line-height: 1.7;
}

/* ── Footer ────────────────────────────────────────────────── */
body.mta-dark .site-footer {
    background: var(--mta-ink);
    border-top: 1px solid var(--mta-line);
    color: var(--mta-slate);
}
.mta-footer {
    padding: 56px 0;
    font-size: 14px;
}
.mta-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}
.mta-footer__brand {
    font-family: var(--mta-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--mta-paper);
    margin-bottom: 12px;
}
.mta-footer__brand span {
    color: var(--mta-amber);
}
.mta-footer__heading {
    font-family: var(--mta-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mta-paper);
    margin-bottom: 16px;
}
.mta-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mta-footer__links li {
    margin-bottom: 8px;
}
.mta-footer__links a {
    color: var(--mta-slate);
    text-decoration: none;
    font-size: 14px;
}
.mta-footer__links a:hover {
    color: var(--mta-paper);
}
.mta-footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--mta-line);
    font-size: 13px;
    color: var(--mta-slate);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 820px) {
    .mta-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .mta-footer__grid { grid-template-columns: 1fr; }
}

/* ── Related Section ───────────────────────────────────────── */
.mta-related {
    padding: 64px 0;
    border-top: 1px solid var(--mta-line);
}

/* ── Blog Single — article prose ───────────────────────────── */
body.mta-dark .entry-content {
    color: var(--mta-paper-dim);
}
body.mta-dark .entry-content h2 {
    font-size: 28px;
    margin-top: 48px;
    margin-bottom: 16px;
}
body.mta-dark .entry-content h3 {
    font-size: 22px;
    margin-top: 36px;
    margin-bottom: 12px;
}
body.mta-dark .entry-content p {
    margin-bottom: 18px;
}
body.mta-dark .entry-content a {
    color: var(--mta-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.mta-dark .entry-content a:hover {
    color: var(--mta-amber-d);
}
body.mta-dark .entry-content blockquote {
    border-left: 3px solid var(--mta-amber);
    padding-left: 20px;
    margin-left: 0;
    color: var(--mta-paper);
    font-style: italic;
}
body.mta-dark .entry-content img {
    border-radius: var(--mta-radius);
    border: 1px solid var(--mta-line);
}
body.mta-dark .entry-content code {
    background: var(--mta-ink-2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}
body.mta-dark .entry-content pre {
    background: var(--mta-ink-2);
    border: 1px solid var(--mta-line);
    border-radius: var(--mta-radius);
    padding: 20px;
    overflow-x: auto;
}

/* ── Focus / Accessibility ─────────────────────────────────── */
body.mta-dark :focus-visible {
    outline: 2px solid var(--mta-amber);
    outline-offset: 3px;
}

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