/**
 * Hulul Kitby Context Notices
 * Compact Unified Edition
 *
 * Same visual identity for:
 * - Solution
 * - Exam
 *
 * Only icon and text change.
 */


/* =========================================================
 * Component
 * ========================================================= */

.entry-content .hkc-notice {
    --hkc-primary: #0055cc;
    --hkc-accent: #0055cc;
    --hkc-bg: #f8fbff;
    --hkc-border: #dce9f8;
    --hkc-text: #263f5d;
    --hkc-muted: #718096;

    position: relative !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 8px !important;

    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    height: auto !important;

    margin: 6px 0 14px !important;
    padding: 8px !important;

    direction: rtl !important;
    text-align: right !important;

    color: var(--hkc-text) !important;

    background-color: var(--hkc-bg) !important;
    background-image: none !important;

    border: 1px solid var(--hkc-border) !important;

    /*
     * RTL => right side.
     */
    border-inline-start:
        4px solid var(--hkc-accent) !important;

    border-radius: 8px !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    transform: none !important;
}


/* =========================================================
 * Unified visual identity
 *
 * Exam and solution intentionally have
 * exactly the same colors.
 * ========================================================= */

.entry-content .hkc-notice--solution,
.entry-content .hkc-notice--exam {
    --hkc-primary: #0055cc;
    --hkc-accent: #0055cc;

    --hkc-bg: #f8fbff;
    --hkc-border: #dce9f8;

    --hkc-text: #263f5d;
    --hkc-muted: #718096;
}


/* =========================================================
 * Remove old decoration
 * ========================================================= */

.entry-content .hkc-notice::before {
    content: none !important;
    display: none !important;
}


/* =========================================================
 * Emoji
 *
 * Solution = 💡
 * Exam     = 📝
 * ========================================================= */

.entry-content .hkc-notice__icon {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: flex-start !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;

    font-size: 18px !important;
    font-weight: 400 !important;

    line-height: 1.25 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


/* =========================================================
 * Content
 * ========================================================= */

.entry-content .hkc-notice__content {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
 * Main line
 * ========================================================= */

.entry-content .hkc-notice__line {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--hkc-text) !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1.7 !important;

    box-sizing: border-box !important;
}


/* =========================================================
 * Title
 * ========================================================= */

.entry-content .hkc-notice__title {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--hkc-primary) !important;

    font-family: inherit !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: inherit !important;

    white-space: nowrap !important;
}


/*
 * Small space between title and main text.
 */
.entry-content .hkc-notice__title::after {
    content: "\00a0" !important;
}


/* =========================================================
 * Main text
 * ========================================================= */

.entry-content .hkc-notice__text {
    display: inline !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--hkc-text) !important;

    font-family: inherit !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: inherit !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
}


/* =========================================================
 * Copyright
 * ========================================================= */

.entry-content .hkc-notice__footer {
    position: static !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    color: var(--hkc-muted) !important;

    background: transparent !important;

    border: 0 !important;

    font-family: inherit !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    line-height: 1.55 !important;

    box-sizing: border-box !important;
}


/*
 * Blue bullet before copyright.
 */
.entry-content .hkc-notice__footer::before {
    content: "" !important;

    position: static !important;

    display: inline-block !important;

    width: 5px !important;
    height: 5px !important;

    margin-inline-start: 5px !important;
    margin-inline-end: 0 !important;

    vertical-align: middle !important;

    background: var(--hkc-accent) !important;

    border-radius: 50% !important;
}


/* =========================================================
 * Protect component from legacy theme rules
 * ========================================================= */

.entry-content .hkc-notice *,
.entry-content .hkc-notice *::before,
.entry-content .hkc-notice *::after {
    box-sizing: border-box;
}


.entry-content .hkc-notice h1,
.entry-content .hkc-notice h2,
.entry-content .hkc-notice h3,
.entry-content .hkc-notice h4,
.entry-content .hkc-notice h5,
.entry-content .hkc-notice h6,
.entry-content .hkc-notice p {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;

    float: none !important;
}


/* =========================================================
 * PDF Viewer separation
 * ========================================================= */

.entry-content
.hkc-notice + .iframe-container {
    position: relative !important;

    display: block !important;

    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-top: 0 !important;

    box-sizing: border-box !important;
}


/*
 * Protection against legacy float rules.
 */
.entry-content .iframe-container {
    clear: both;
}


/* =========================================================
 * update.html
 * ========================================================= */

.entry-content
.hkc-notice + .iframe-container.hulul-update-frame {
    clear: both !important;
}


/* =========================================================
 * Tablet / Mobile
 * ========================================================= */

@media (max-width: 768px) {

    .entry-content .hkc-notice {
        gap: 7px !important;

        margin: 6px 0 12px !important;

        padding: 7px !important;

        border-radius: 7px !important;
    }


    .entry-content .hkc-notice__icon {
        flex-basis: 22px !important;

        width: 22px !important;
        height: 22px !important;

        min-width: 22px !important;
        min-height: 22px !important;

        font-size: 16px !important;
    }


    .entry-content .hkc-notice__line {
        font-size: 12.5px !important;

        line-height: 1.65 !important;
    }


    .entry-content .hkc-notice__title {
        font-size: 13.5px !important;
    }


    .entry-content .hkc-notice__text {
        font-size: 12.5px !important;
    }


    .entry-content .hkc-notice__footer {
        margin-top: 2px !important;

        font-size: 10.5px !important;

        line-height: 1.5 !important;
    }

}


/* =========================================================
 * Small phones
 * ========================================================= */

@media (max-width: 420px) {

    .entry-content .hkc-notice {
        gap: 6px !important;

        margin: 5px 0 10px !important;

        padding: 7px !important;

        border-inline-start-width:
            3px !important;
    }


    .entry-content .hkc-notice__icon {
        flex-basis: 21px !important;

        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;

        font-size: 15px !important;
    }


    .entry-content .hkc-notice__line {
        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    .entry-content .hkc-notice__title {
        font-size: 13px !important;
    }


    .entry-content .hkc-notice__text {
        font-size: 12px !important;
    }


    .entry-content .hkc-notice__footer {
        margin-top: 1px !important;

        font-size: 10px !important;

        line-height: 1.5 !important;
    }

}


/* =========================================================
 * Very small phones
 * ========================================================= */

@media (max-width: 340px) {

    .entry-content .hkc-notice {
        gap: 5px !important;

        padding: 6px !important;
    }


    .entry-content .hkc-notice__icon {
        flex-basis: 20px !important;

        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;

        font-size: 14px !important;
    }


    .entry-content .hkc-notice__line {
        font-size: 11.5px !important;
    }


    .entry-content .hkc-notice__title {
        font-size: 12.5px !important;
    }


    .entry-content .hkc-notice__text {
        font-size: 11.5px !important;
    }

}
/* =========================================================
 * Mobile PDF Viewer Alignment Fix
 * منع انحياز مستعرض PDF يمينًا أو يسارًا على الجوال
 * ========================================================= */

@media (max-width: 768px) {

    .entry-content .hkc-notice + .iframe-container {
        position: relative !important;

        display: block !important;
        float: none !important;
        clear: both !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

    .entry-content .hkc-notice + .iframe-container > iframe {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        border: 0 !important;

        box-sizing: border-box !important;
    }
}