/*
Theme Name: Future Kids Schools
Theme URI: https://futurekidsyemen.site
Description: Child theme of Hello Elementor carrying the Future Kids Schools design system (Cairo typography, brand palette, RTL). Design tokens are extracted from the original site CSS so Elementor widgets inherit the school's look by default.
Author: Future Kids Schools
Template: hello-elementor
Version: 1.0.0
Text Domain: futurekids
*/

/* ==========================================================================
   DESIGN TOKENS  — extracted from the original site (_next CSS bundle).
   Change a value here and it propagates everywhere.
   ========================================================================== */
:root {
    --fk-primary:      #fd6600;  /* brand orange — buttons, accents */
    --fk-blue:         #4582ff;  /* section eyebrow labels */
    --fk-green:        #00d6d3;  /* teal secondary */
    --fk-black:        #0f2239;  /* headings, dark navy */
    --fk-para:         #636363;  /* body copy */
    --fk-rating:       #f1cc38;  /* stars */
    --fk-white:        #fff;
    --fk-heading-font: "Cairo", sans-serif;
    --fk-para-font:    "Cairo", sans-serif;
    --fk-shadow:       rgba(99, 99, 99, .2) 0px 2px 8px 0px;

    /* type scale */
    --fk-h1:  65px;
    --fk-h2:  40px;
    --fk-h3:  22px;
    --fk-eyebrow: 17px;
    --fk-body: 16px;

    /* rhythm */
    --fk-section-gap: 95px;
    --fk-radius-pill: 30px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
    font-family: var(--fk-para-font);
    font-size: var(--fk-body);
    color: var(--fk-para);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fk-heading-font);
    color: var(--fk-black);
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: var(--fk-h1); }
h2 { font-size: var(--fk-h2); }
h3 { font-size: var(--fk-h3); }

a { color: var(--fk-primary); text-decoration: none; }
a:hover { color: var(--fk-primary); }

/* ==========================================================================
   RTL — the site is Arabic-first
   ========================================================================== */
body.rtl,
[dir="rtl"] {
    text-align: start;
}

/* ==========================================================================
   BUTTONS — matches the original .common_btn
   ========================================================================== */
.fk-btn,
.elementor-button,
.wp-block-button__link {
    display: inline-block;
    padding: 15px 35px;
    background: var(--fk-primary);
    color: var(--fk-white);
    font-family: var(--fk-para-font);
    font-size: var(--fk-eyebrow);
    font-weight: 600;
    border-radius: var(--fk-radius-pill);
    border: none;
    transition: all .3s linear;
}

.fk-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
    color: var(--fk-white);
    box-shadow: 0 0 0 .6em rgba(253, 102, 0, .12);
}

/* Teal variant, as used in the original menu button */
.fk-btn--teal { background: var(--fk-green); }

/* ==========================================================================
   SECTION HEADING — the eyebrow + h2 pattern used on every section
   ========================================================================== */
.fk-heading { text-align: center; }

.fk-heading .fk-eyebrow {
    display: inline-block;
    font-family: var(--fk-para-font);
    font-size: var(--fk-eyebrow);
    font-weight: 500;
    color: var(--fk-blue);
    text-transform: uppercase;
    margin: 0;
}

.fk-heading h2 {
    font-size: var(--fk-h2);
    font-weight: 700;
    margin-top: 15px;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.fk-card {
    background: var(--fk-white);
    border-radius: 8px;
    box-shadow: var(--fk-shadow);
    overflow: hidden;
}

/* ==========================================================================
   RESPONSIVE — the original drops the hero hard on mobile
   ========================================================================== */
@media (max-width: 991px) {
    :root {
        --fk-h1: 42px;
        --fk-h2: 30px;
        --fk-section-gap: 60px;
    }
}

@media (max-width: 575px) {
    :root {
        --fk-h1: 32px;
        --fk-h2: 25px;
    }
}

/* ==========================================================================
   NEWS CARDS — rendered by [fk_latest_news] / [fk_news_archive]
   ========================================================================== */
.fk-news-grid {
    display: grid;
    /* Fixed 3 columns, not auto-fit: with a single post auto-fit stretched the
       one card across the whole container. */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 991px) {
    .fk-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .fk-news-grid { grid-template-columns: 1fr; }
}

.fk-news-card {
    background: var(--fk-white);
    border-radius: 8px;
    box-shadow: var(--fk-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s linear;
}

.fk-news-card:hover { transform: translateY(-6px); }

.fk-news-card__media {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.fk-news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s linear;
}

.fk-news-card:hover .fk-news-card__img { transform: scale(1.06); }

.fk-news-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--fk-black), #1c3a5e);
}

.fk-news-card__body {
    padding: 25px;
    text-align: start;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fk-news-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
    color: var(--fk-para);
}

.fk-news-card__meta i { color: var(--fk-primary); margin-inline-end: 5px; }

.fk-news-card__title {
    font-size: var(--fk-h3);
    margin: 0 0 18px;
    line-height: 1.5;
}

.fk-news-card__title a { color: var(--fk-black); }
.fk-news-card__title a:hover { color: var(--fk-primary); }

.fk-news-card__more {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 600;
    color: var(--fk-primary);
}

.fk-news-card__more:after {
    content: "\2190";
    margin-inline-start: 6px;
    display: inline-block;
    transition: transform .3s linear;
}

.fk-news-card__more:hover:after { transform: translateX(-4px); }

.fk-news-empty {
    text-align: center;
    padding: 40px 20px;
    background: #f7f8fa;
    border-radius: 8px;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.fk-news-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
}

.fk-news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 50px;
    background: var(--fk-white);
    box-shadow: var(--fk-shadow);
    color: var(--fk-black);
    font-weight: 600;
}

.fk-news-pagination .page-numbers.current,
.fk-news-pagination .page-numbers:hover {
    background: var(--fk-primary);
    color: var(--fk-white);
}

/* ==========================================================================
   ELEMENTOR SECTION HELPERS
   Classes referenced by the Elementor containers. The fiddly bits live here
   rather than as per-widget custom CSS, so there is one place to adjust.
   ========================================================================== */
/* Kept for the class name already baked into every Elementor template.
   Direction itself now comes from <html dir>, which TranslatePress flips per
   language, so this only sets flow-relative alignment. */
.fk-rtl { text-align: start; }

/* Hero -------------------------------------------------------------------- */
.fk-hero__accent {
    color: var(--fk-primary);
    text-decoration: underline;
}

.fk-hero__copy h1 { line-height: 1.25; }

/* Stage cards (المراحل التعليمية) ---------------------------------------- */
.fk-stage-card {
    background: #f3f7fb;
    border-radius: 5px;
    box-shadow: var(--fk-shadow);
    transition: all .3s linear;
}

.fk-stage-card--purple { border-inline-start: 3px solid #8e56ff; }
.fk-stage-card--blue   { border-inline-start: 3px solid #4582ff; }
.fk-stage-card--teal   { border-inline-start: 3px solid #1ab69d; }

.fk-stage-card:hover { transform: translateY(-6px); }

/* Circular icon badge, as in the original */
.fk-stage-card .elementor-icon-box-icon .elementor-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fk-white);
}

.fk-stage-card--purple .elementor-icon { background: #8e56ff; }
.fk-stage-card--blue   .elementor-icon { background: #4582ff; }
.fk-stage-card--teal   .elementor-icon { background: #1ab69d; }

.fk-stage-card .elementor-icon svg { fill: var(--fk-white); }
.fk-stage-card .elementor-icon i   { color: var(--fk-white); }

.fk-stage-card .elementor-icon-box-title { margin-bottom: 6px; }
.fk-stage-card .elementor-icon-box-description { font-size: 14px; line-height: 1.6; }

/* Parent facilitation card ----------------------------------------------- */
.fk-parent-band {
    background: var(--fk-white);
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    overflow: hidden;
}

/* Orange accent edge on the photo, matching the original */
.fk-parent-band__media {
    border: 4px solid var(--fk-primary);
    border-radius: 8px;
}

/* Activity bands (نشاطات اضافية) --------------------------------------- */
.fk-activity-band { position: relative; }

.fk-activity-band__photo img,
.fk-activity-band .elementor-widget-image img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid var(--fk-white);
    box-shadow: var(--fk-shadow);
}

.fk-activity-band h3 { color: var(--fk-white); }

.fk-activity-band .elementor-widget-text-editor {
    max-width: 720px;
    margin-inline: auto;
}

@media (max-width: 575px) {
    .fk-activity-band__photo img,
    .fk-activity-band .elementor-widget-image img {
        width: 190px;
        height: 190px;
        border-width: 7px;
    }
}

/* Testimonials ----------------------------------------------------------- */
.fk-testimonials h2,
.fk-testimonials h5 { color: var(--fk-white); }

.fk-testimonial-card {
    border: 1px dashed rgba(255, 255, 255, .7);
    border-radius: 40px;
}

.fk-testimonial-card .elementor-testimonial-content { line-height: 1.9; }

.fk-testimonial-card .elementor-testimonial-image img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--fk-white);
}

.fk-testimonial-card .elementor-testimonial-name { font-weight: 700; }

/* Icon lists ------------------------------------------------------------- */
.fk-rtl .elementor-icon-list-items { text-align: start; }

/* ==========================================================================
   HEADER  (HFE template "ترويسة الموقع")
   ========================================================================== */
.fk-header {
    box-shadow: 0 2px 12px rgba(15, 34, 57, .08);
    position: relative;
    z-index: 999;
}

.fk-header__cta .elementor-button {
    background: var(--fk-green);
}

.fk-header__cta .elementor-button:hover {
    background: var(--fk-primary);
}

/* HFE nav: match the original's weight and hover colour */
.fk-header .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item {
    font-family: var(--fk-para-font);
}

/* Dropdowns open right-aligned under their parent in RTL */
.fk-header .hfe-nav-menu .sub-menu {
    box-shadow: 0 6px 24px rgba(15, 34, 57, .14);
    border-radius: 6px;
    overflow: hidden;
}

@media (max-width: 991px) {
    .fk-header { flex-wrap: wrap !important; }
}

/* ==========================================================================
   FOOTER  (HFE template "تذييل الموقع")
   ========================================================================== */
.fk-footer h3 { color: var(--fk-white); }

.fk-footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Newsletter form — visual only, as on the original site */
.fk-newsletter {
    display: flex;
    border-radius: 50px;
    overflow: hidden;
    background: var(--fk-white);
    max-width: 320px;
}

.fk-newsletter input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 20px;
    font-family: var(--fk-para-font);
    font-size: 14px;
    color: var(--fk-black);
    background: transparent;
    min-width: 0;
}

.fk-newsletter button {
    border: none;
    background: var(--fk-primary);
    color: var(--fk-white);
    padding: 13px 26px;
    font-family: var(--fk-para-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s linear;
}

.fk-newsletter button:hover { background: var(--fk-black); }

/* ==========================================================================
   TESTIMONIAL SLIDER  [fk_testimonials]
   ========================================================================== */
.fk-testimonial-slider {
    padding: 10px 0 55px;
}

.fk-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.fk-testimonial {
    text-align: center;
    padding: 45px 40px 35px;
    position: relative;
}

.fk-testimonial__mark {
    display: block;
    font-size: 70px;
    line-height: .8;
    color: var(--fk-primary);
    font-family: Georgia, "Times New Roman", serif;
    margin-bottom: 10px;
}

.fk-testimonial__quote {
    line-height: 1.95;
    margin-bottom: 26px;
}

.fk-testimonial__quote p { margin: 0 0 10px; }
.fk-testimonial__quote p:last-child { margin-bottom: 0; }

.fk-testimonial__avatar { margin-bottom: 14px; }

.fk-testimonial__photo {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--fk-white);
    box-shadow: var(--fk-shadow);
    display: inline-block;
}

.fk-testimonial__name {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px;
}

.fk-testimonial__job {
    font-size: 14px;
    margin: 0 0 10px;
}

.fk-testimonial__rating { margin: 0; letter-spacing: 3px; font-size: 18px; }
.fk-testimonial__rating .is-on  { color: var(--fk-primary); }
.fk-testimonial__rating .is-off { color: rgba(255, 255, 255, .45); }

/* Inside the blue section everything is white-on-blue */
.fk-testimonials .fk-testimonial__quote,
.fk-testimonials .fk-testimonial__name { color: var(--fk-white); }
.fk-testimonials .fk-testimonial__job  { color: #FFD9BF; }
.fk-testimonials .fk-testimonial__mark { color: rgba(255, 255, 255, .55); }

/* On a light background, fall back to the normal palette */
.fk-testimonials-grid .fk-testimonial__name { color: var(--fk-black); }
.fk-testimonials-grid .fk-testimonial__job  { color: var(--fk-primary); }
.fk-testimonials-grid .fk-testimonial__rating .is-off { color: #D8DEE6; }

.fk-testimonials-grid .fk-testimonial {
    background: var(--fk-white);
    border-radius: 12px;
    box-shadow: var(--fk-shadow);
}

/* Slider controls --------------------------------------------------------- */
.fk-testimonial-slider__prev,
.fk-testimonial-slider__next {
    position: absolute;
    top: 45%;
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: all .3s linear;
}

.fk-testimonial-slider__prev { right: 0; }
.fk-testimonial-slider__next { left: 0; }

.fk-testimonial-slider__prev:hover,
.fk-testimonial-slider__next:hover { background: var(--fk-primary); border-color: var(--fk-primary); }

/* Chevrons drawn in CSS so no icon font is needed */
.fk-testimonial-slider__prev:before,
.fk-testimonial-slider__next:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--fk-white);
    border-right: 2px solid var(--fk-white);
}

.fk-testimonial-slider__prev:before { transform: translate(-50%, -50%) rotate(45deg); }
.fk-testimonial-slider__next:before { transform: translate(-50%, -50%) rotate(-135deg); }

.fk-testimonial-slider__prev.swiper-button-disabled,
.fk-testimonial-slider__next.swiper-button-disabled { opacity: .35; cursor: default; }

.fk-testimonial-slider__dots {
    position: absolute;
    bottom: 14px;
    width: 100%;
    text-align: center;
    z-index: 5;
}

.fk-testimonial-slider__dots .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    margin: 0 5px;
}

.fk-testimonial-slider__dots .swiper-pagination-bullet-active {
    background: var(--fk-primary);
    width: 26px;
    border-radius: 50px;
}

@media (max-width: 767px) {
    .fk-testimonial { padding: 35px 20px 30px; }
    .fk-testimonial-slider__prev,
    .fk-testimonial-slider__next { display: none; }
}

/* ==========================================================================
   TABLES  [fk_fees] and the policy tables on inner pages
   ========================================================================== */
.fk-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    background: var(--fk-white);
}

.fk-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    min-width: 520px;
}

.fk-table thead th {
    background: var(--fk-black);
    color: var(--fk-white);
    font-weight: 600;
    font-size: 15px;
    padding: 16px 20px;
    white-space: nowrap;
}

.fk-table tbody td {
    padding: 15px 20px;
    border-bottom: 1px solid #EDF1F6;
    font-size: 15px;
    vertical-align: top;
}

.fk-table tbody tr:last-child td { border-bottom: none; }
.fk-table tbody tr:nth-child(even) { background: #F8FAFC; }

.fk-table__amount {
    font-weight: 700;
    color: var(--fk-primary);
    white-space: nowrap;
}

/* ==========================================================================
   BANK ACCOUNT CARDS  [fk_bank_accounts]
   ========================================================================== */
.fk-bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px;
}

.fk-bank-card {
    background: var(--fk-white);
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    border-top: 3px solid var(--fk-primary);
    padding: 26px 24px;
    text-align: start;
}

.fk-bank-card__bank {
    font-size: 19px;
    font-weight: 700;
    color: var(--fk-black);
    margin: 0 0 16px;
}

.fk-bank-card__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
    font-size: 14px;
}

.fk-bank-card__label { color: var(--fk-para); flex-shrink: 0; }
.fk-bank-card__value { font-weight: 600; color: var(--fk-black); text-align: end; }

.fk-bank-card__number {
    font-family: "Courier New", monospace;
    letter-spacing: .5px;
    color: var(--fk-primary);
    unicode-bidi: embed;
}

.fk-bank-card__notes {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #EDF1F6;
    font-size: 13px;
    color: var(--fk-para);
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.fk-page-hero h1 { color: var(--fk-white); }

/* Generic content card used across facilities, attendance, curriculum … */
.fk-info-card {
    background: var(--fk-white);
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    transition: transform .3s linear;
}

.fk-info-card:hover { transform: translateY(-5px); }

.fk-info-card .elementor-icon-box-icon .elementor-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: currentColor;
}

/* The icon glyph sits on a tinted tile of the same hue */
.fk-info-card .elementor-icon svg { fill: var(--fk-white); }
.fk-info-card .elementor-icon i   { color: var(--fk-white); }

.fk-info-card .elementor-icon-box-title { margin-bottom: 8px; }
.fk-info-card .elementor-icon-box-description { font-size: 15px; line-height: 1.75; }

/* Highlight band, e.g. the 25% attendance rule */
.fk-notice-band {
    border-radius: 10px;
    border-inline-start: 4px solid var(--fk-primary);
}

/* Long-form legal/policy copy */
.fk-rtl .elementor-widget-text-editor h3 {
    font-size: 21px;
    color: var(--fk-black);
    margin: 30px 0 10px;
}

.fk-rtl .elementor-widget-text-editor ul {
    padding-inline-start: 22px;
    margin: 10px 0;
}

.fk-rtl .elementor-widget-text-editor li { margin-bottom: 7px; }

/* ==========================================================================
   FORMINATOR — align the school's look onto the form widgets
   ========================================================================== */
.forminator-ui.forminator-custom-form,
.forminator-ui.forminator-custom-form * {
    font-family: var(--fk-para-font) !important;
}

.forminator-ui.forminator-custom-form {
    text-align: start;
    max-width: 720px;
    margin-inline: auto;
}

.forminator-ui.forminator-custom-form .forminator-button-submit {
    background: var(--fk-primary) !important;
    border-radius: var(--fk-radius-pill) !important;
    padding: 14px 38px !important;
    font-weight: 600 !important;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
    background: var(--fk-black) !important;
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-select2 .selection .select2-selection {
    border-radius: 8px !important;
}

/* ==========================================================================
   FAQ ACCORDION  [fk_faqs]
   One panel with hairline dividers rather than a stack of floating cards, so a
   long list reads as a single document instead of visual noise. Built on
   <details>: no JavaScript, keyboard accessible, and findable with Ctrl+F.
   ========================================================================== */
.fk-faq {
    max-width: 860px;
    margin-inline: auto;
}

/* Category heading, with a rule that fills the remaining width -------------- */
.fk-faq__group-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fk-blue);
    margin: 46px 0 18px;
}

.fk-faq__group-title:first-child { margin-top: 0; }

.fk-faq__group-title:after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, #DDE5EE);
}

/* The panel ---------------------------------------------------------------- */
.fk-faq__panel {
    background: var(--fk-white);
    border: 1px solid #E8EDF3;
    border-radius: 14px;
    overflow: hidden;
}

.fk-faq__item + .fk-faq__item { border-top: 1px solid #EEF2F7; }

.fk-faq__item[open] { background: #FBFCFE; }

/* Question row ------------------------------------------------------------- */
.fk-faq__q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    transition: background .2s linear;
}

/* Hide the native disclosure triangle in both engines */
.fk-faq__q::-webkit-details-marker { display: none; }
.fk-faq__q::marker { content: ""; }

.fk-faq__q:hover { background: #F7FAFD; }
.fk-faq__item[open] .fk-faq__q:hover { background: transparent; }

/* Focus ring for keyboard users, since the marker is gone */
.fk-faq__q:focus-visible {
    outline: 2px solid var(--fk-primary);
    outline-offset: -3px;
}

/* Numeral ------------------------------------------------------------------ */
.fk-faq__num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F1F5FA;
    color: #8A9BB0;
    font-family: var(--fk-heading-font);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all .25s linear;
}

.fk-faq__item[open] .fk-faq__num {
    background: var(--fk-primary);
    color: var(--fk-white);
}

/* Question text ------------------------------------------------------------ */
.fk-faq__q-text {
    flex: 1;
    font-family: var(--fk-heading-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--fk-black);
    transition: color .2s linear;
}

.fk-faq__item[open] .fk-faq__q-text { color: var(--fk-primary); }

/* Chevron, drawn in CSS so no icon font is needed -------------------------- */
.fk-faq__chev {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #A7B6C7;
    border-inline-start: 2px solid #A7B6C7;
    transform: rotate(-45deg);
    transition: transform .28s ease, border-color .2s linear;
    margin-block-end: 3px;
}

.fk-faq__item[open] .fk-faq__chev {
    transform: rotate(135deg);
    border-color: var(--fk-primary);
    margin-block-end: 0;
    margin-block-start: 3px;
}

/* Answer ------------------------------------------------------------------- */
.fk-faq__a {
    padding-inline: 26px;
    padding-block-end: 24px;
}

/* Indented to line up under the question text, not the numeral */
.fk-faq__a-inner {
    padding-inline-start: 50px;
    border-inline-start: 2px solid #F0F4F9;
    padding-block: 2px;
    color: var(--fk-para);
    line-height: 1.95;
}

.fk-faq__a-inner p { margin: 0 0 12px; }
.fk-faq__a-inner p:last-child { margin-bottom: 0; }
.fk-faq__a-inner a { font-weight: 600; }
.fk-faq__a-inner a:hover { text-decoration: underline; }

/* Smooth open/close where the browser supports sizing keyword interpolation;
   elsewhere it degrades to an instant toggle, which is still correct. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .fk-faq__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size .32s ease, content-visibility .32s allow-discrete;
    }

    .fk-faq__item[open]::details-content { block-size: auto; }
}

@media (max-width: 575px) {
    .fk-faq__q { padding: 18px 16px; gap: 12px; }
    .fk-faq__q-text { font-size: 15px; }
    .fk-faq__num { width: 28px; height: 28px; font-size: 12px; }
    .fk-faq__a { padding-inline: 16px; padding-block-end: 18px; }
    .fk-faq__a-inner { padding-inline-start: 22px; }
}
/* ==========================================================================
   BADGES — calendar entry types
   ========================================================================== */
.fk-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fk-badge, var(--fk-blue));
    background: color-mix(in srgb, var(--fk-badge, #4582FF) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--fk-badge, #4582FF) 35%, transparent);
}

.fk-table__nowrap { white-space: nowrap; }

/* ==========================================================================
   UPCOMING DATES  [fk_calendar upcoming="4"]
   ========================================================================== */
.fk-cal-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
}

.fk-cal-list__item {
    background: var(--fk-white);
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    padding: 22px 20px;
    border-top: 3px solid var(--fk-primary);
    text-align: start;
}

.fk-cal-list__date {
    font-size: 13px;
    font-weight: 600;
    color: var(--fk-primary);
    margin-bottom: 8px;
}

.fk-cal-list__title {
    font-size: 17px;
    margin: 0 0 10px;
    color: var(--fk-black);
    line-height: 1.5;
}

/* ==========================================================================
   SCHOLARSHIPS AND DISCOUNTS  [fk_discounts]
   ========================================================================== */
.fk-discount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.fk-discount-card {
    position: relative;
    background: var(--fk-white);
    border-radius: 12px;
    box-shadow: var(--fk-shadow);
    padding: 32px 26px 26px;
    text-align: start;
    transition: transform .3s linear;
    overflow: hidden;
}

.fk-discount-card:hover { transform: translateY(-5px); }

/* Value badge sits in the top corner (start side in RTL = right) */
.fk-discount-card__value {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    background: var(--fk-primary);
    color: var(--fk-white);
    font-weight: 700;
    font-size: 15px;
    padding: 7px 18px;
    border-end-end-radius: 12px;
}

.fk-discount-card__title {
    font-size: 20px;
    color: var(--fk-black);
    margin: 18px 0 12px;
}

.fk-discount-card__conditions {
    margin: 0;
    line-height: 1.8;
    color: var(--fk-para);
}

.fk-discount-card__notes {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #EDF1F6;
    font-size: 13px;
    color: var(--fk-para);
}

/* ==========================================================================
   ABOUT / VISION / MISSION  (homepage intro)
   ========================================================================== */

.fk-vision-card {
    background: var(--fk-white);
    border-radius: 14px;
    box-shadow: var(--fk-shadow);
    position: relative;
    overflow: hidden;
    transition: transform .3s linear;
}

.fk-vision-card:hover { transform: translateY(-6px); }

/* A tinted rule along the top, coloured per card */
.fk-vision-card:before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: var(--fk-card-accent, var(--fk-primary));
}

.fk-vision-card--about  { --fk-card-accent: #FD6600; }
.fk-vision-card--vision { --fk-card-accent: #4582FF; }
.fk-vision-card--message{ --fk-card-accent: #1AB69D; }

.fk-vision-card .elementor-icon-box-icon .elementor-icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fk-card-accent);
    color: var(--fk-white);
}

.fk-vision-card .elementor-icon svg { fill: var(--fk-white); }
.fk-vision-card .elementor-icon i   { color: var(--fk-white); }

.fk-vision-card .elementor-icon-box-title { margin-bottom: 10px; }
.fk-vision-card .elementor-icon-box-description { line-height: 1.85; }

/* Large faded numeral behind each card, for depth.
   Generated from position rather than a data attribute: Elementor's custom
   attributes control is Pro-only, so the free build cannot emit one. */
.fk-vision-grid > .fk-vision-card:nth-child(1):after { content: "01"; }
.fk-vision-grid > .fk-vision-card:nth-child(2):after { content: "02"; }
.fk-vision-grid > .fk-vision-card:nth-child(3):after { content: "03"; }
.fk-vision-grid > .fk-vision-card:nth-child(4):after { content: "04"; }

.fk-vision-card:after {
    position: absolute;
    bottom: -18px;
    inset-inline-start: 14px;
    font-family: var(--fk-heading-font);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--fk-card-accent);
    opacity: .07;
    pointer-events: none;
}

/* ==========================================================================
   STATS BAND  (أرقامنا)
   ========================================================================== */
.fk-stats { border-radius: 12px; }

.fk-stat {
    border-inline-end: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
}

/* No divider after the last tile in each row */
.fk-stat:last-child { border-inline-end: none; }

.fk-stat .elementor-icon { color: var(--fk-primary); }
.fk-stat .elementor-icon svg { fill: var(--fk-primary); }
.fk-stat .elementor-icon i { color: var(--fk-primary); }

.fk-stat .elementor-counter-number-wrapper { justify-content: center; }
.fk-stat .elementor-counter-title { margin-top: 4px; }

@media (max-width: 767px) {
    .fk-stat { border-inline-end: none; border-bottom: 1px solid rgba(255,255,255,.12); }
    .fk-stat:last-child { border-bottom: none; }
}

/* ==========================================================================
   REGISTRATION CTA  (التسجيل)
   ========================================================================== */
.fk-cta { border-radius: 12px; }
.fk-cta h2 { color: var(--fk-white); }

.fk-cta__actions {
    max-width: 520px;
    margin-inline: auto;
}

/* Solid white primary, outlined secondary, both on the orange band */
.fk-cta__primary .elementor-button {
    background: var(--fk-white);
    color: var(--fk-primary);
}

.fk-cta__primary .elementor-button:hover {
    background: var(--fk-black);
    color: var(--fk-white);
    box-shadow: none;
}

.fk-cta__secondary .elementor-button {
    background: transparent;
    color: var(--fk-white);
    border: 2px solid rgba(255, 255, 255, .75);
}

.fk-cta__secondary .elementor-button:hover {
    background: var(--fk-white);
    color: var(--fk-primary);
    border-color: var(--fk-white);
    box-shadow: none;
}

/* ==========================================================================
   PARENT QUICK LINKS  (وصول سريع)
   ========================================================================== */
.fk-quick {
    background: var(--fk-white);
    border-radius: 10px;
    box-shadow: var(--fk-shadow);
    border-bottom: 3px solid transparent;
    transition: all .3s linear;
}

.fk-quick:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--fk-primary);
}

.fk-quick .elementor-icon-box-icon .elementor-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFF1E6;
    color: var(--fk-primary);
}

.fk-quick .elementor-icon svg { fill: var(--fk-primary); }
.fk-quick .elementor-icon i { color: var(--fk-primary); }

.fk-quick:hover .elementor-icon { background: var(--fk-primary); }
.fk-quick:hover .elementor-icon svg { fill: var(--fk-white); }
.fk-quick:hover .elementor-icon i { color: var(--fk-white); }

.fk-quick .elementor-icon-box-title { font-size: 17px; margin-bottom: 3px; }
.fk-quick .elementor-icon-box-description { font-size: 13px; }