/*
 * ==========================================================
 * RIC HOMEPAGE
 * ISLAMIC MONTH INTELLIGENCE V1
 * ==========================================================
 */

.ric-f-season {
    --ric-month-green:#07503f;
    --ric-month-green-deep:#04382e;
    --ric-month-gold:#e0b34b;
    --ric-month-soft:rgba(255,255,255,.09);
}


/*
 * Current-month emphasis inside existing:
 *
 * <p class="ric-f-message" data-ric-f-message>
 */
.ric-f-message[data-ric-month-intelligence="1"] {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35em;

    line-height:1.55;
}

.ric-f-current-month {
    color:#f1c85c;

    font-weight:900;

    white-space:nowrap;
}


/*
 * Coming important month.
 */
.ric-f-coming-month {
    margin-top:12px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    width:fit-content;

    padding:8px 12px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:999px;

    background:
        rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.92);

    font-size:12px;
    line-height:1.35;
}

.ric-f-coming-label {
    color:#f1c85c;

    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}

.ric-f-coming-name {
    font-weight:850;
}


/*
 * Islamic year explorer.
 */
.ric-f-month-explorer {
    margin-top:18px;

    width:100%;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    padding-top:13px;
}

.ric-f-month-explorer summary {
    width:fit-content;

    cursor:pointer;

    list-style:none;

    color:
        rgba(255,255,255,.92);

    font-size:12px;
    font-weight:850;
}

.ric-f-month-explorer summary::-webkit-details-marker {
    display:none;
}

.ric-f-month-explorer summary::before {
    content:"☾";

    margin-right:7px;

    color:#f1c85c;
}

.ric-f-month-explorer[open] summary {
    margin-bottom:13px;
}


/*
 * All 12 months.
 */
.ric-f-month-grid {
    display:grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    gap:7px;
}

.ric-f-month-button {
    appearance:none;

    min-width:0;

    padding:10px 8px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:11px;

    background:
        rgba(255,255,255,.055);

    color:
        rgba(255,255,255,.82);

    font:inherit;

    text-align:left;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.ric-f-month-button:hover {
    transform:
        translateY(-1px);

    background:
        rgba(255,255,255,.1);
}

.ric-f-month-button strong {
    display:block;

    overflow:hidden;

    color:#fff;

    font-size:12px;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.ric-f-month-button span {
    display:block;

    margin-top:3px;

    color:
        rgba(255,255,255,.58);

    font-size:9px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/*
 * CURRENT MONTH
 */
.ric-f-month-button.is-current {
    border-color:#e0b34b;

    background:
        linear-gradient(
            135deg,
            rgba(224,179,75,.19),
            rgba(255,255,255,.08)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(224,179,75,.12);
}

.ric-f-month-button.is-current strong {
    color:#f5ce6c;
}

.ric-f-month-button.is-current::after {
    content:"CURRENT";

    display:block;

    width:fit-content;

    margin-top:5px;

    color:#f5ce6c;

    font-size:8px;
    font-weight:900;

    letter-spacing:.1em;
}


/*
 * Selected month fact panel.
 */
.ric-f-month-detail {
    margin-top:10px;

    padding:13px 15px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:12px;

    background:
        rgba(0,0,0,.10);
}

.ric-f-month-detail-title {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px;
}

.ric-f-month-detail-title strong {
    color:#f3ca63;

    font-size:15px;
}

.ric-f-month-detail-title span {
    color:
        rgba(255,255,255,.62);

    font-size:12px;
}

.ric-f-month-detail p {
    margin:
        7px 0 0;

    color:
        rgba(255,255,255,.82);

    font-size:12px;
    line-height:1.55;
}


/*
 * Tablets.
 */
@media (max-width:1100px) {

    .ric-f-month-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

}


/*
 * Phone.
 */
@media (max-width:700px) {

    .ric-f-month-grid {
        display:flex;

        overflow-x:auto;

        scroll-snap-type:
            x proximity;

        padding-bottom:4px;
    }

    .ric-f-month-button {
        flex:
            0 0
            142px;

        scroll-snap-align:start;
    }

    .ric-f-coming-month {
        border-radius:12px;
    }

}


/* RIC-F11-SELECTED-MONTH */

.ric-f-month-button.is-selected {
    border-color:#f1c85c !important;

    background:
        linear-gradient(
            135deg,
            rgba(241,200,92,.20),
            rgba(255,255,255,.09)
        ) !important;

    box-shadow:
        0 0 0 2px
        rgba(241,200,92,.11);
}

.ric-f-month-button.is-selected strong {
    color:#f5cf70;
}

/*
 * CURRENT means the actual Hijri month.
 * SELECTED means the month the visitor is reading.
 *
 * They are intentionally separate.
 */
.ric-f-month-button.is-current::after {
    content:"CURRENT";
}