/* =============================================================================
   VaidyaShala — Global CSS
   Yahan aap aasaani se apni cheezein add / badal sakte hain
   ============================================================================= */

/* =============================================================================
   1. TYPOGRAPHY — Font weights, sizes, line heights
   ============================================================================= */

/* Headings */
h1 {
    font-weight: 700;
    line-height: 1.15;
}

h2 {
    font-weight: 700;
    line-height: 1.25;
}

h3 {
    font-weight: 600;
    line-height: 1.35;
}

h4 {
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-weight: 500;
    line-height: 1.45;
}

h6 {
    font-weight: 500;
    line-height: 1.5;
}

/* Body text */
body {
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* Hindi / Devanagari text — thoda zyada weight for readability */
.font-hindi,
[class*="font-hindi"] {
    font-weight: 400;
    line-height: 1.8;
}

/* Strong / Bold helpers */
strong,
b {
    font-weight: 700;
}

/* Small labels & badges */
.label-text {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Large intro text */
.lead-text {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 400;
    line-height: 1.8;
}

/* =============================================================================
   2. BUTTONS — Consistent font weights
   ============================================================================= */

button,
a.btn,
[type="button"],
[type="submit"] {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* =============================================================================
   3. NAVIGATION
   ============================================================================= */

nav a {
    font-weight: 500;
    letter-spacing: 0.01em;
}

nav a.active,
nav a:hover {
    font-weight: 600;
}

/* =============================================================================
   4. CARDS
   ============================================================================= */

.card-title {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
}

.card-body-text {
    font-weight: 400;
    line-height: 1.7;
    font-size: 0.9rem;
}

/* =============================================================================
   5. FORMS
   ============================================================================= */

label {
    font-weight: 500;
    font-size: 0.875rem;
    /* 14px */
    letter-spacing: 0.01em;
}

input,
textarea,
select {
    font-weight: 400;
    font-size: 0.9375rem;
    /* 15px */
}

input::placeholder,
textarea::placeholder {
    font-weight: 300;
}

/* =============================================================================
   6. UTILITY CLASSES
   — Use these anywhere in your HTML with class="..."
   ============================================================================= */

/* Font weights */
.fw-light {
    font-weight: 300;
}

.fw-regular {
    font-weight: 400;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.fw-bold {
    font-weight: 700;
}

.fw-black {
    font-weight: 900;
}

/* Font sizes */
.fs-xs {
    font-size: 0.75rem;
}

/* 12px */
.fs-sm {
    font-size: 0.875rem;
}

/* 14px */
.fs-base {
    font-size: 1rem;
}

/* 16px */
.fs-md {
    font-size: 1.125rem;
}

/* 18px */
.fs-lg {
    font-size: 1.25rem;
}

/* 20px */
.fs-xl {
    font-size: 1.5rem;
}

/* 24px */
.fs-2xl {
    font-size: 1.75rem;
}

/* 28px */
.fs-3xl {
    font-size: 2rem;
}

/* 32px */

/* Line heights */
.lh-tight {
    line-height: 1.2;
}

.lh-snug {
    line-height: 1.4;
}

.lh-normal {
    line-height: 1.6;
}

.lh-relaxed {
    line-height: 1.8;
}

.lh-loose {
    line-height: 2.0;
}

/* Letter spacing */
.ls-tight {
    letter-spacing: -0.02em;
}

.ls-normal {
    letter-spacing: 0;
}

.ls-wide {
    letter-spacing: 0.05em;
}

.ls-wider {
    letter-spacing: 0.1em;
}

.ls-widest {
    letter-spacing: 0.15em;
}

/* =============================================================================
   7. SECTION SPACING — consistent padding
   ============================================================================= */

.section-pad {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-pad-lg {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.section-pad-xl {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* =============================================================================
   8. AYURVEDIC COLOR HELPERS  (matches Tailwind custom colors)
   ============================================================================= */

.text-forest {
    color: #2D4A3E;
}

.text-sage {
    color: #7A9E7E;
}

.text-gold {
    color: #C9A961;
}

.text-terracotta {
    color: #C67B5C;
}

.text-bark {
    color: #4A3728;
}

.text-rust {
    color: #A65D3F;
}

.text-leaf {
    color: #5B7355;
}

.bg-cream {
    background-color: #FDF8F3;
}

.bg-sand {
    background-color: #E8DFD4;
}

/* =============================================================================
   9. TRANSITIONS — smooth hover interactions
   ============================================================================= */

a,
button {
    transition: color 0.2s ease, background-color 0.2s ease,
        opacity 0.2s ease, transform 0.2s ease;
}

/* =============================================================================
   10. PRINT — hide decorative elements when printing
   ============================================================================= */

@media print {

    .mandala,
    .leaf-pattern,
    nav,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 {
        font-size: 20pt;
    }

    h2 {
        font-size: 16pt;
    }
}

.text-sm {
    font-weight: 500;
}

.text-lg {
    font-weight: 600;
    font-size: 1.25rem;
}

.py-24 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.text-xs {
    font-size: 15px !important;
    line-height: 1.5rem !important;
    font-weight: 500;
}

.font-body {
    font-family: "Noto Sans Devanagari", sans-serif !important;
    font-weight: 500;
}

.font-display {
    font-family: "Noto Sans Devanagari", serif !important;
}

.text-sm {
    font-size: 16px !important;
    line-height: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 1.2rem !important;
}

.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.9rem !important;
    font-weight: 600;
}