/* ============================================
   MEDITECH COMPONENTS — TYPOGRAPHY SYSTEM
   Single typeface: Manrope
   Weight scale: 300 / 400 / 500 / 600 / 700 / 800
   ============================================ */

/* ── Weight tokens ── */
:root {
    --fw-light:       300;   /* captions, fine print         */
    --fw-regular:     400;   /* body text                    */
    --fw-medium:      500;   /* nav links, labels, metadata  */
    --fw-semibold:    600;   /* card titles, subheadings     */
    --fw-bold:        700;   /* section headings (h2, h3)    */
    --fw-extrabold:   800;   /* hero display, h1             */
}

/* ── Base ── */
body {
    font-weight: var(--fw-regular);
    font-size: 1rem;
    line-height: 1.65;
}

/* ── Heading hierarchy ── */
h1 {
    font-weight: var(--fw-extrabold);   /* 800 */
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2 {
    font-weight: var(--fw-bold);        /* 700 */
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h3 {
    font-weight: var(--fw-semibold);    /* 600 */
    line-height: 1.3;
}

h4 {
    font-weight: var(--fw-semibold);    /* 600 */
    line-height: 1.4;
}

h5, h6 {
    font-weight: var(--fw-medium);      /* 500 */
    line-height: 1.5;
}

/* ── UI elements ── */
nav a,
.nav-link,
.navbar a {
    font-weight: var(--fw-medium);      /* 500 */
}

button,
.btn {
    font-weight: var(--fw-semibold);    /* 600 */
    letter-spacing: 0.01em;
}

/* ── Section labels / eyebrows ── */
.section-label,
.eyebrow,
.tag,
.badge {
    font-weight: var(--fw-semibold);    /* 600 */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* ── Card & content titles ── */
.card-title,
.product-title,
.item-title {
    font-weight: var(--fw-semibold);    /* 600 */
}

/* ── Body supporting text ── */
.text-muted,
.subtitle,
.description,
p {
    font-weight: var(--fw-regular);     /* 400 */
}

/* ── Fine print & captions ── */
.caption,
.footnote,
small {
    font-weight: var(--fw-light);       /* 300 */
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ── Mobile header: hamburger left, logo right ── */
@media (max-width: 768px) {
    .main-header {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .hamburger { order: -1; }
    .logo { order: 1; }
    .main-nav { display: none !important; }
}