/**
 * Beelang — global typography & section density overrides
 * Load after beelang-navbar.css. Requires beelang-design-system.css tokens.
 */

/* ── Navbar token bridge ─────────────────────────────────────────── */
:root {
    --nav-link-size: var(--text-body-lg);
    --nav-cta-size: var(--text-body-lg);
    --nav-submenu-size: var(--text-body);
    --nav-mobile-size: var(--text-body-lg);
    --nav-mobile-auth-size: var(--text-body);
    --beelang-chrome-link-size: var(--text-body);
    --beelang-chrome-title-size: var(--text-body-lg);
    --beelang-chrome-brand-size: var(--text-h3);
    --beelang-chrome-caption-size: var(--text-body-sm);
}

/* ── Legacy utility classes (EduVibe / views) ────────────────────── */
.fs-13px {
    font-size: var(--text-body-sm) !important;
}

.fs-16px,
.fs-17px {
    font-size: var(--text-body) !important;
}

.fs-20px {
    font-size: var(--text-body-lg) !important;
}

.fs-22px {
    font-size: var(--text-h3) !important;
}

.fs-24px {
    font-size: var(--text-h2) !important;
}

/* ── Section spacing (reduce empty vertical bands) ───────────────── */
.edu-section-gap {
    padding-top: var(--section-gap-y) !important;
    padding-bottom: var(--section-gap-y) !important;
}

.edu-section-gapBottom {
    padding-bottom: var(--section-gap-y) !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .edu-section-gap {
        padding-top: var(--section-gap-y-lg) !important;
        padding-bottom: var(--section-gap-y-lg) !important;
    }
}

@media only screen and (max-width: 767px) {
    .edu-section-gap {
        padding-top: var(--space-8) !important;
        padding-bottom: var(--space-8) !important;
    }
}

/* ── Body copy & EduVibe components ──────────────────────────────── */
.p-font {
    font-size: var(--text-body-lg) !important;
    line-height: var(--leading-loose, 1.6) !important;
    color: var(--color-text) !important;
}

.feature-description {
    font-size: var(--text-body-lg) !important;
}

.card .title,
.edu-blog .title,
.service-card .title,
.service-card .content .title {
    font-size: var(--text-body-lg);
}

.card .description,
.edu-blog .description,
.service-card .description,
.description:not(.practice-subtitle) {
    font-size: var(--text-body-lg);
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control,
.form-select,
input.form-control,
textarea.form-control,
label,
.form-label {
    font-size: var(--text-body);
}

.form-control::placeholder {
    font-size: var(--text-body-sm);
}

/* ── Buttons (legacy + edu-btn) ──────────────────────────────────── */
.btn,
.edu-btn,
.rn-btn,
.my-btn {
    font-size: var(--text-body) !important;
    min-height: 3rem;
}

/* ── Navbar menu links ───────────────────────────────────────────── */
.beelang-site-header .mainmenu-nav .mainmenu > li > a,
.beelang-site-header .mainmenu-nav .mainmenu > li > a.text-small {
    font-size: var(--nav-link-size) !important;
}

.mainmenu a.text-small {
    font-size: inherit;
}

/* ── Theme detail pages ──────────────────────────────────────────── */
html body h3.theme-page-title {
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
}

html body .theme-greeting {
    font-size: var(--text-h3) !important;
}

html body .theme-section-heading {
    font-size: var(--text-body-lg) !important;
}

html body .theme-section-subheading {
    font-size: var(--text-body) !important;
}

html body .theme-practice-card .content .title {
    font-size: var(--text-body) !important;
}

html body .theme-test-card-title {
    font-size: var(--text-body-lg) !important;
}

html body .theme-test-card-subtitle {
    font-size: var(--text-body-sm) !important;
}

/* ── Practice ────────────────────────────────────────────────────── */
.practice-wrapper,
.practice-container,
.practice-page {
    font-size: var(--text-body);
}

.practice-title {
    font-size: var(--text-body-lg);
}

@media (min-width: 576px) {
    .practice-title {
        font-size: var(--text-h3);
    }
}

.practice-subtitle {
    font-size: var(--text-body);
}

.practice-option label {
    font-size: var(--text-body-lg) !important;
}

.practice-audio-btn {
    font-size: var(--text-h3) !important;
}

.next-button {
    font-size: var(--text-body-lg) !important;
}

.next-button.practice-btn-primary {
    font-size: var(--text-h3) !important;
}

.practice-header {
    margin-bottom: var(--space-5) !important;
    padding: var(--space-3) 0 !important;
}

.practice-card,
.practice-card-static {
    padding: var(--space-5) !important;
}

@media (min-width: 768px) {
    .practice-card,
    .practice-card-static {
        padding: var(--space-6) !important;
    }
}

.practice-wrapper {
    padding-bottom: var(--space-12) !important;
}

.practice-step-title,
.practice-step-number,
.practice-submit-btn,
.practice-text-input,
.practice-input-answer,
.practice-word-chip,
.practice-true-false-btn {
    font-size: var(--text-body-lg) !important;
}

.practice-record-btn {
    font-size: var(--text-h3) !important;
}

.practice-step-hint,
.practice-record-result,
.practice-container p,
.practice-wrapper p {
    font-size: var(--text-body) !important;
}

.practice-container .form-control,
.practice-wrapper .form-control {
    font-size: var(--text-body-lg) !important;
}

.score-title {
    font-size: var(--text-h1) !important;
}

.score-message,
.score-stat-label {
    font-size: var(--text-body-lg) !important;
}

.score-label {
    font-size: var(--text-body) !important;
}

.score-page-wrapper {
    padding: var(--space-8) var(--space-4) !important;
}

.score-card {
    padding: var(--space-6) var(--space-5) !important;
}

/* ── Home marketing blocks ───────────────────────────────────────── */
.title-beelang p {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

.tentang_belang p,
.description-online-description p {
    font-size: var(--text-body-lg) !important;
}

.title-online-description p {
    font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
}