/* ---------------------------------------------------- */
/* 1. STYLES FOR CALENDAR CAPTION */
/* ---------------------------------------------------- */
#wp-calendar caption {
    /* Ensure caption text aligns and can hold two lines */
    text-align: center;
    padding: 5px 0;
    line-height: 1.2;
    background-color: #f7f7f7; /* Light background for separation */
}

/* Hijri Month & Year (Bold) */
#wp-calendar caption .hijri-caption-title {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

/* Gregorian Month & Year (Gray, smaller) */
#wp-calendar caption .greg-caption-title {
    display: block;
    font-size: 0.9em;
    color: #777; /* Gray */
    font-weight: normal;
}

/* ---------------------------------------------------- */
/* 2. STYLES FOR DAY CELLS */
/* ---------------------------------------------------- */
/* Styling for the Calendar Cells (TD) */
#wp-calendar td {
    /* Ensure the cell can properly contain both stacked dates */
    height: 40px; 
    line-height: 1.2;
    text-align: center;
}

/* Style for the main Hijri day number */
#wp-calendar td .hijri-day-num {
    display: block; /* Make it take up its own line */
    font-weight: bold;
    font-size: 1.1em;
    color: #333; /* Dark color */
}

/* Style for the secondary Gregorian day number */
#wp-calendar td .greg-day-num {
    display: block; /* Make it take up its own line below the Hijri date */
    font-size: 0.7em; /* Smaller font */
    color: #777; /* Subtler gray color */
}

/* ---------------------------------------------------- */
/* 3. STYLING FOR TODAY (Coloring Both Dates) */
/* ---------------------------------------------------- */

/* Style the background and border of the cell */
#wp-calendar td.hijri-today-number {
    /* Add a distinct border around today's cell */
    border: 1px solid #FF6347 !important; 
    /* Very light red background for the cell */
    background-color: #ffe0e0 !important; 
}

#wp-calendar td.hijri-today-number .hijri-day-num,
#wp-calendar td.hijri-today-number .greg-day-num {
    /* Tomato red color for distinction */
    color: #FF6347 !important; 
}

/* Ensure the link itself doesn't interfere */
#wp-calendar td.hijri-today-number a {
    color: inherit; /* Inherit color from the spans */
}