/* =====================================================
   REKHATAMA TYPOGRAPHY OVERRIDE
   Heading: Poppins
   Body/UI: Inter
===================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --rk-font-heading: "Poppins", system-ui, sans-serif;
  --rk-font-body: "Inter", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Override Bootstrap font variables */
  --bs-font-sans-serif: var(--rk-font-body);
  --bs-body-font-family: var(--rk-font-body);

  /* Typography colors */
  --rk-heading-color: #0f172a;
  --rk-body-color: #334155;
}

/* =====================================================
   BASE
===================================================== */

html,
body {
  font-family: var(--rk-font-body);
}

body {
  font-weight: 400;
  line-height: 1.65;
  color: var(--rk-body-color);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Form controls and interface */

button,
input,
select,
textarea,
optgroup {
  font-family: var(--rk-font-body);
}

/* =====================================================
   HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--rk-font-heading);
  color: var(--rk-heading-color);
  letter-spacing: -0.02em;
}

h1,
h2,
.h1,
.h2 {
  font-weight: 700;
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
}

/*
 * Heading di area gelap harus tetap mengikuti warna section,
 * bukan dipaksa menjadi warna gelap.
 */
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.navbar-dark h1,
.navbar-dark h2,
.footer-dark h1,
.footer-dark h2,
.footer-dark h3 {
  color: inherit;
}

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

p,
li,
td,
label,
input,
select,
textarea {
  font-family: var(--rk-font-body);
  font-weight: 400;
}

strong,
b {
  font-weight: 700;
}

/* =====================================================
   NAVIGATION
===================================================== */

.navbar,
.navbar-nav,
.nav-link,
.dropdown-menu,
.dropdown-item,
.menu,
.menu a {
  font-family: var(--rk-font-body);
}

.navbar-nav .nav-link,
.menu a {
  font-weight: 500;
}

/* =====================================================
   BUTTONS
===================================================== */

/*
 * Bootstrap hasil kompilasi memiliki:
 * --bs-btn-font-family: ;
 * Karena nilainya kosong, font button perlu ditetapkan langsung.
 */
.btn,
.button,
a.button,
button.link,
.form-submit,
.node-preview-backlink,
.rk-course-btn,
.rk-course-card__button {
  font-family: var(--rk-font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* =====================================================
   FORMS
===================================================== */

.form-control,
.form-select,
.form-label,
.form-text,
.form-check-label,
.views-exposed-form {
  font-family: var(--rk-font-body);
}

.form-label,
.views-exposed-form label {
  font-weight: 600;
}

/* =====================================================
   TABLES
===================================================== */

table,
th,
td,
caption {
  font-family: var(--rk-font-body);
}

th {
  font-weight: 600;
}

/* =====================================================
   COURSE CARD
===================================================== */

.rk-course-card__title,
.rk-course-card__title a {
  font-family: var(--rk-font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.rk-course-card__description {
  font-family: var(--rk-font-body);
  font-weight: 400;
}

.rk-course-badge,
.rk-course-category,
.rk-course-meta,
.rk-course-meta__label,
.rk-course-meta__value {
  font-family: var(--rk-font-body);
}

/* Mengurangi weight ekstrem dari CSS lama */

.rk-course-badge,
.rk-course-category,
.rk-course-meta__label,
.rk-course-meta__value {
  font-weight: 600;
}

.rk-course-card__price {
  font-family: var(--rk-font-body);
  font-weight: 700;
}

.rk-course-btn {
  font-weight: 600;
}

/* =====================================================
   BOOTSTRAP COMPONENTS
===================================================== */

.accordion-button,
.breadcrumb,
.pagination,
.page-link,
.badge,
.alert,
.modal,
.tooltip,
.popover,
.card,
.list-group {
  font-family: var(--rk-font-body);
}

.accordion-button,
.modal-title,
.card-title {
  font-weight: 600;
}

/* =====================================================
   FOOTER
===================================================== */

footer,
footer p,
footer a,
footer li {
  font-family: var(--rk-font-body);
}

footer h2,
footer h3,
footer h4 {
  font-family: var(--rk-font-heading);
  font-weight: 600;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {
  body {
    font-size: 1rem;
    line-height: 1.65;
  }

  .btn,
  .button,
  a.button,
  .form-submit,
  .rk-course-btn {
    font-size: 0.9375rem;
  }
}