/* --- Global Website Settings --- */
:root {
    --primary-bg: rgb(230, 240, 245);
    --secondary-bg: rgb(220, 230, 240);
    --brand-color: #7896a0;
    --brand-color-dark: rgb(90, 120, 130);
    --brand-color-darkest: #2d3748;
    --text-light: #eff1f4;
    --text-dark: #12161d;
    
    /* --- NEW: Define the default font here --- */
    --default-font: Calibri, sans-serif;
}

body {
    /* --- NEW: Apply the default font to the entire website --- */
    font-family: var(--default-font);
    
    background-color: var(--primary-bg);
    color: var(--text-dark);
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* --- NEW: Global Styles for Urdu Notes Content --- */

/* This rule applies to any container with this class */
.urdu-notes-content {
    /* Set the Right-to-Left text direction */
    direction: rtl; 
    
    /* Use a good font for Urdu. The user's browser will try them in order. */
    font-family: 'Noto Nastaliq Urdu', 'Arial', sans-serif; 
    
    /* Align the text to the right */
    text-align: right; 
    
    /* Set a more readable line spacing (180% of the font size) */
    line-height: 1.8; 
}

/* Make headings in Urdu notes a bit larger */
.urdu-notes-content h1,
.urdu-notes-content h2,
.urdu-notes-content h3 {
    font-size: 1.5em; /* Adjust as you like */
    margin-top: 1.5em;
}

/* Add some space between paragraphs */
.urdu-notes-content p {
    margin-bottom: 1em; /* 1em is equal to the font size */
}