/* ==========================================================================
   Nexiversity — project layer.

   Loaded after main.css. Everything here is authored mobile-first: base rules
   describe the phone, and `min-width` queries add to them. The vendor template
   underneath is desktop-first, so this file also corrects the places where its
   `max-width` rules leave a small screen with overflow, unreadable type or
   tap targets under 44px.
   ========================================================================== */

:root {
    --nx-violet: #4A1D96;
    --nx-violet-deep: #2C0E5E;
    --nx-violet-mid: #6D28D9;
    --nx-violet-soft: #A78BFA;
    --nx-lime: #C8F31D;
    --nx-lime-deep: #A5CC0F;
    --nx-ink: #1B0B3A;
    --nx-cream: #F4F1FB;

    --nx-radius: 14px;
    --nx-radius-lg: 22px;
    --nx-gap: clamp(1rem, 3vw, 2rem);
    --nx-shadow: 0 18px 44px rgba(27, 11, 58, .12);
    --nx-shadow-sm: 0 8px 20px rgba(27, 11, 58, .08);

    /* Fluid type so headings shrink on a phone without a media query. */
    --nx-fs-display: clamp(2.25rem, 8vw, 4rem);
    --nx-fs-h1: clamp(1.95rem, 6vw, 3.25rem);
    --nx-fs-h2: clamp(1.65rem, 5vw, 2.75rem);
    --nx-fs-h3: clamp(1.35rem, 3.6vw, 2rem);
    --nx-fs-h5: clamp(1.05rem, 2.4vw, 1.4rem);
    --nx-fs-body: clamp(0.95rem, 1.6vw, 1rem);
}

/* Arabic gets its own families; the Latin faces have no Arabic glyphs and
   would otherwise fall back to a system font mid-page. */
[dir="rtl"] {
    --rs-ff-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --rs-ff-p: "IBM Plex Sans Arabic", "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --rs-ff-title: "Tajawal", "Sora", "Segoe UI", sans-serif;
    --rs-ff-display: "Tajawal", "Sora", serif;
}

/* Arabic sits lower in its em box; a touch more leading stops descenders
   colliding with the line beneath at heading sizes. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.45; }
[dir="rtl"] p { line-height: 1.9; }

/* --------------------------------------------------------------- baseline */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* No horizontal scrollbar on a phone, whatever the section does. */
img, svg, video, canvas { max-width: 100%; height: auto; }

:focus-visible {
    outline: 3px solid var(--nx-lime);
    outline-offset: 2px;
    border-radius: 4px;
}

.nx-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.nx-skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -100%;
    z-index: 9999;
    padding: .75rem 1.25rem;
    background: var(--nx-lime);
    color: var(--nx-ink);
    font-weight: 700;
    border-radius: 0 0 var(--nx-radius) var(--nx-radius);
    transition: top .2s ease;
}
.nx-skip-link:focus { top: 0; color: var(--nx-ink); }

/* ------------------------------------------------------------- wordmark */

/* The logo is the name set in type — no icon, no image file. That keeps it
   crisp at any size and lets the Arabic build render its own wordmark. */
.nx-wordmark {
    display: inline-flex;
    align-items: center;
    font-family: var(--rs-ff-title);
    font-weight: 800;
    font-size: clamp(1.25rem, 4.4vw, 1.65rem);
    letter-spacing: -.03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.nx-wordmark > span { position: relative; padding-inline-end: .34em; }

/* A lime full stop after the name, drawn rather than typed so it never
   line-breaks away from the word. */
.nx-wordmark > span::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    bottom: .12em;
    width: .2em;
    height: .2em;
    border-radius: 50%;
    background: var(--nx-lime);
}
.nx-wordmark--light, .nx-wordmark--light:hover { color: #fff; }
.nx-wordmark--dark, .nx-wordmark--dark:hover { color: var(--nx-violet); }
.nx-wordmark:hover > span::after { transform: scale(1.35); }

[dir="rtl"] .nx-wordmark { letter-spacing: 0; }

/* ------------------------------------------------------- header additions */

/* Round header buttons: language and account.
   Sized as true circles at the 44px tap minimum, with a tinted fill and a
   brighter rim so they stay legible over any hero photograph rather than
   relying on a hairline border alone. */
.nx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .7);
    background: rgba(27, 11, 58, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--rs-ff-title);
    font-weight: 700;
    line-height: 1;
}
.nx-icon-btn:hover,
.nx-icon-btn:focus-visible {
    background: var(--nx-lime);
    border-color: var(--nx-lime);
    color: var(--nx-ink);
    transform: translateY(-2px);
}
.nx-icon-btn i { font-size: 1.25rem; }

/* The button shows the language it switches TO, so an English page carries the
   Arabic label and vice versa. "ع" is a single small glyph and needs to be set
   larger than "EN" to read at the same weight. */
[dir="ltr"] .nx-lang-switch { font-size: 1.15rem; }
[dir="rtl"] .nx-lang-switch { font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; }

/* Inner pages have no hero photograph, so the bar needs its own ground. */
.nx-header-solid .header-wrapper { background: var(--nx-violet-deep); }

/* Breathing room between the round buttons, and a divider before the
   hamburger so the two groups are not read as one row of controls. */
.rs-header-one .header-icon-wrapper {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.rs-header-one .header-hamburger {
    margin-inline-start: .9rem;
    padding-inline-start: .9rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .25);
}

/* --------------------------------------------------------- page banner */

.nx-page-banner {
    position: relative;
    padding: clamp(7rem, 18vw, 10rem) 0 clamp(2.5rem, 6vw, 4rem);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(200, 243, 29, .18) 0%, transparent 55%),
        linear-gradient(135deg, var(--nx-violet-deep) 0%, var(--nx-violet) 60%, var(--nx-violet-mid) 100%);
    color: #fff;
    overflow: hidden;
}
.nx-page-banner::after {
    content: "";
    position: absolute;
    inset-block-end: -55%;
    inset-inline-end: -8%;
    width: min(420px, 60vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(200, 243, 29, .28);
}
.nx-page-banner-title {
    font-size: var(--nx-fs-h1);
    color: #fff;
    margin: 0 0 .6rem;
}
.nx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .78);
}
.nx-breadcrumb a { color: rgba(255, 255, 255, .78); }
.nx-breadcrumb a:hover { color: var(--nx-lime); }
.nx-breadcrumb [aria-current] { color: var(--nx-lime); font-weight: 600; }
.nx-breadcrumb-sep { opacity: .5; }

/* ------------------------------------------------------------- flash */

.nx-flash {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 1.5rem 0 0;
    padding: 1rem 1.15rem;
    border-radius: var(--nx-radius);
    border-inline-start: 4px solid var(--nx-violet);
    background: #fff;
    box-shadow: var(--nx-shadow-sm);
}
.nx-flash p { margin: 0; font-size: .95rem; }
.nx-flash i { font-size: 1.25rem; color: var(--nx-violet); line-height: 1.4; }
.nx-flash--error { border-inline-start-color: #E11D48; }
.nx-flash--error i { color: #E11D48; }

/* ---------------------------------------------------------- section head */

.nx-section { padding-block: clamp(3rem, 9vw, 7rem); }
.nx-section--tight { padding-block: clamp(2rem, 6vw, 4.5rem); }
.nx-section--cream { background: var(--nx-cream); }

.nx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nx-violet-mid);
}
[dir="rtl"] .nx-eyebrow { letter-spacing: 0; }
.nx-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--nx-lime);
}

.nx-title { font-size: var(--nx-fs-h2); margin: 0 0 .75rem; }
.nx-lead { font-size: var(--nx-fs-body); color: var(--rs-text-secondary); max-width: 62ch; }

/* ------------------------------------------------------------- grid */

.nx-grid {
    display: grid;
    gap: var(--nx-gap);
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .nx-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .nx-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
    .nx-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .nx-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .nx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- cards */

.nx-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
    box-shadow: var(--nx-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.nx-card:hover { transform: translateY(-6px); box-shadow: var(--nx-shadow); }

.nx-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--nx-violet-deep);
}
.nx-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.nx-card:hover .nx-card-media img { transform: scale(1.06); }

.nx-card-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; flex: 1; }
.nx-card-title { font-size: var(--nx-fs-h5); margin: 0; }
.nx-card-title a:hover { color: var(--nx-violet); }
.nx-card-text { margin: 0; font-size: .93rem; color: var(--rs-text-secondary); }
.nx-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin-top: auto; padding-top: .9rem;
    border-top: 1px solid var(--rs-border-primary);
    font-size: .82rem; color: var(--rs-text-secondary);
}

.nx-chip {
    display: inline-flex; align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(74, 29, 150, .08);
    color: var(--nx-violet);
    font-size: .75rem; font-weight: 700;
    letter-spacing: .04em;
}
.nx-chip--lime { background: var(--nx-lime); color: var(--nx-ink); }

.nx-card-media .nx-chip {
    position: absolute;
    inset-block-start: .9rem;
    inset-inline-start: .9rem;
    background: #fff;
}

/* Portrait cards for academic staff. */
.nx-person-media { aspect-ratio: 4 / 5; }
.nx-person-role { font-size: .85rem; color: var(--nx-violet-mid); font-weight: 600; }

/* Date block on event cards. */
.nx-date {
    display: grid;
    place-items: center;
    min-width: 62px;
    padding: .5rem;
    border-radius: var(--nx-radius);
    background: var(--nx-violet);
    color: #fff;
    line-height: 1.1;
}
.nx-date b { font-size: 1.4rem; font-weight: 800; }
.nx-date span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
[dir="rtl"] .nx-date span { letter-spacing: 0; }

/* ------------------------------------------------------------- prose */

.nx-prose { max-width: 72ch; }
.nx-prose p { margin-bottom: 1.15rem; font-size: 1.02rem; line-height: 1.85; }
.nx-prose h2 { font-size: var(--nx-fs-h3); margin: 2rem 0 .85rem; }
.nx-prose h3 { font-size: var(--nx-fs-h5); margin: 1.6rem 0 .7rem; }
.nx-prose ul { margin: 0 0 1.25rem; padding-inline-start: 1.15rem; }
.nx-prose li { margin-bottom: .5rem; line-height: 1.75; }

.nx-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.nx-checklist li {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: .97rem; line-height: 1.65;
}
.nx-checklist li::before {
    content: "\ea5e"; /* remixicon check */
    font-family: var(--rs-ff-remixicon);
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 22px; height: 22px; margin-top: .12rem;
    border-radius: 50%;
    background: var(--nx-lime);
    color: var(--nx-ink);
    font-size: .8rem;
}

/* --------------------------------------------------------------- stats */

.nx-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rs-border-primary);
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
}
@media (min-width: 768px) { .nx-stats { grid-template-columns: repeat(4, 1fr); } }
.nx-stat { background: #fff; padding: 1.5rem 1.15rem; text-align: center; }
.nx-stat b {
    display: block;
    font-family: var(--rs-ff-title);
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    font-weight: 800;
    color: var(--nx-violet);
    line-height: 1;
}
.nx-stat span { display: block; margin-top: .4rem; font-size: .85rem; color: var(--rs-text-secondary); }

/* --------------------------------------------------------------- forms */

.nx-form { display: grid; gap: 1.1rem; }
.nx-form-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .nx-form-row--2 { grid-template-columns: repeat(2, 1fr); } }

.nx-field { display: grid; gap: .4rem; }
.nx-field > label { font-size: .85rem; font-weight: 600; color: var(--nx-ink); }
.nx-field .nx-optional { font-weight: 400; color: var(--rs-text-secondary); }

.nx-field input,
.nx-field select,
.nx-field textarea {
    width: 100%;
    min-height: 52px;                      /* comfortable touch target */
    padding: .85rem 1rem;
    border: 1px solid var(--rs-border-primary);
    border-radius: var(--nx-radius);
    background: #fff;
    color: var(--nx-ink);
    font-family: var(--rs-ff-body);
    font-size: 16px;                       /* stops iOS zooming on focus */
    transition: border-color .2s ease, box-shadow .2s ease;
}
.nx-field textarea { min-height: 140px; resize: vertical; }
.nx-field input:focus,
.nx-field select:focus,
.nx-field textarea:focus {
    outline: none;
    border-color: var(--nx-violet);
    box-shadow: 0 0 0 4px rgba(74, 29, 150, .12);
}
.nx-field--error input,
.nx-field--error select,
.nx-field--error textarea { border-color: #E11D48; }
.nx-error { font-size: .82rem; color: #E11D48; }

.nx-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.nx-check input { width: 20px; height: 20px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--nx-violet); }

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 52px;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--nx-violet);
    color: #fff;
    font-family: var(--rs-ff-title);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.nx-btn:hover { background: var(--nx-lime); color: var(--nx-ink); transform: translateY(-2px); }
.nx-btn--lime { background: var(--nx-lime); color: var(--nx-ink); }
.nx-btn--lime:hover { background: var(--nx-violet); color: #fff; }
.nx-btn--ghost { background: transparent; color: var(--nx-violet); box-shadow: inset 0 0 0 2px var(--nx-violet); }
.nx-btn--ghost:hover { background: var(--nx-violet); color: #fff; box-shadow: none; }
.nx-btn--block { width: 100%; }

/* Arrow glyphs point at the reading direction, not at a fixed side. */
[dir="rtl"] .nx-btn .ri-arrow-right-line::before { content: "\ea60"; }

/* The template animates its button arrows with `transform`, so the glyph is
   mirrored with the independent `scale` property instead — the two compose
   rather than overwrite each other. */
[dir="rtl"] .rs-btn.has-icon .icon-box > svg,
[dir="rtl"] .rs-square-btn .icon-box > svg,
[dir="rtl"] .arrow-icon > svg,
[dir="rtl"] .rs-program-list a .arrow-icon svg { scale: -1 1; }

/* ------------------------------------------------------------ auth pages */

.nx-auth {
    display: grid;
    gap: var(--nx-gap);
    align-items: start;
}
@media (min-width: 992px) { .nx-auth { grid-template-columns: 1fr 1fr; } }

.nx-panel {
    padding: clamp(1.5rem, 5vw, 2.75rem);
    background: #fff;
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow);
}
.nx-panel--violet {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(200, 243, 29, .2) 0%, transparent 55%),
        linear-gradient(140deg, var(--nx-violet-deep), var(--nx-violet));
    color: #fff;
}
.nx-panel--violet h2, .nx-panel--violet h3 { color: #fff; }
.nx-panel--violet p { color: rgba(255, 255, 255, .84); }

.nx-form-alt { margin: 1.25rem 0 0; font-size: .92rem; }
.nx-form-alt a { color: var(--nx-violet); font-weight: 700; text-decoration: underline; }

/* ----------------------------------------------------------- dashboard */

.nx-account-head {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: var(--nx-radius-lg);
    background: linear-gradient(140deg, var(--nx-violet-deep), var(--nx-violet));
    color: #fff;
}
@media (min-width: 768px) {
    .nx-account-head { grid-template-columns: 1fr auto; align-items: center; }
}
.nx-account-head h1 { color: #fff; font-size: var(--nx-fs-h3); margin: 0 0 .35rem; }
.nx-account-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; color: rgba(255,255,255,.82); }
.nx-account-meta b { color: var(--nx-lime); font-weight: 700; }

/* Tables become stacked rows on a phone rather than scrolling sideways. */
.nx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.nx-table th, .nx-table td {
    padding: .9rem 1rem;
    text-align: start;
    border-bottom: 1px solid var(--rs-border-primary);
}
.nx-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rs-text-secondary); }
[dir="rtl"] .nx-table th { letter-spacing: 0; }

@media (max-width: 639.98px) {
    .nx-table, .nx-table tbody, .nx-table tr, .nx-table td { display: block; width: 100%; }
    .nx-table thead { display: none; }
    .nx-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--rs-border-primary);
        border-radius: var(--nx-radius);
        overflow: hidden;
    }
    .nx-table td { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 0; }
    .nx-table td + td { border-top: 1px solid var(--rs-border-primary); }
    .nx-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .78rem;
        color: var(--rs-text-secondary);
    }
}

.nx-status {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .7rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    background: rgba(74, 29, 150, .1); color: var(--nx-violet);
}
.nx-status--offer { background: rgba(22, 163, 74, .12); color: #15803D; }
.nx-status--closed { background: rgba(100, 116, 139, .15); color: #475569; }

/* -------------------------------------------------------------- filters */

.nx-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.nx-filter {
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--rs-border-primary);
    background: #fff;
    font-size: .88rem; font-weight: 600;
    color: var(--nx-ink);
}
.nx-filter:hover { border-color: var(--nx-violet); color: var(--nx-violet); }
.nx-filter.is-active { background: var(--nx-violet); border-color: var(--nx-violet); color: #fff; }

/* --------------------------------------------------------------- empty */

.nx-empty {
    padding: clamp(2rem, 8vw, 4rem) 1.5rem;
    text-align: center;
    border: 2px dashed var(--rs-border-primary);
    border-radius: var(--nx-radius-lg);
    color: var(--rs-text-secondary);
}

/* -------------------------------------------------------------- gallery */

.nx-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .nx-gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.nx-gallery a {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--nx-radius);
    background: var(--nx-violet-deep);
}
.nx-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nx-gallery a:hover img { transform: scale(1.07); }
.nx-gallery figcaption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 1.5rem .85rem .7rem;
    background: linear-gradient(to top, rgba(27, 11, 58, .85), transparent);
    color: #fff;
    font-size: .8rem;
}

/* ------------------------------------------------------------ preloader */

/* The loading screen is the spinning ring on its own — no wordmark. The ring
   is drawn by .loader-container and its ::before in main.css; the track is
   tinted to the palette here. */
.loader .loader-container { border-color: rgba(74, 29, 150, .15); }

/* ------------------------------------------------- off-canvas additions */

.nx-offcanvas-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.nx-offcanvas-lang {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: 0 1rem;
    border: 1px solid var(--rs-border-primary);
    border-radius: 999px;
    font-weight: 600; font-size: .9rem;
    color: var(--nx-violet);
}
.nx-offcanvas-lang:hover { background: var(--nx-violet); color: #fff; }

.nx-footer-about { color: rgba(255, 255, 255, .72); font-size: .93rem; margin-bottom: 1.25rem; max-width: 42ch; }
.nx-footer-newsletter-lead { color: rgba(255, 255, 255, .72); font-size: .88rem; margin-bottom: 1rem; }

/* ==========================================================================
   Mobile-first corrections to the vendor template
   ========================================================================== */

/* The hero sets a 64px heading in a fixed-height box; on a phone that clips.
   Height becomes content-driven and the type scales with the viewport. */
.rs-banner-one .rs-banner-large-title { font-size: clamp(3rem, 19vw, 12rem); line-height: .9; }
.rs-banner-one .rs-banner-title { font-size: var(--nx-fs-display); }
.rs-banner-area.rs-banner-one { min-height: auto; padding-block: clamp(7rem, 22vw, 11rem) clamp(3rem, 8vw, 5rem); }

/* The template's hero photo was a cut-out of a building with a transparent
   sky, so it was layered ON TOP of the gradient at z-index 2. The replacement
   is an ordinary rectangular photograph, which at that depth would bury the
   headline. It moves behind the copy and gains a scrim, the usual treatment
   for white type over a photograph. */
.rs-banner-one .rs-banner-bg-thumb {
    inset: 0;
    height: 100%;
    z-index: 0;
}
.rs-banner-one::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(27, 11, 58, .82) 0%, rgba(44, 14, 94, .55) 45%, rgba(44, 14, 94, .78) 100%);
}
.rs-banner-one .rs-banner-wrapper { position: relative; z-index: 3; }

/* The oversized wordmark behind the headline is a watermark, not a heading. */
.rs-banner-one .rs-banner-large-title {
    color: rgba(255, 255, 255, .1);
    margin-bottom: -.25em;
    pointer-events: none;
}

/* Section headings inherit the fluid scale rather than the fixed 48px. */
.section-title { font-size: var(--nx-fs-h2); }
h1 { font-size: var(--nx-fs-h1); }
h2 { font-size: var(--nx-fs-h2); }
h3 { font-size: var(--nx-fs-h3); }

/* Long words in Arabic headlines have nowhere to break on a narrow screen. */
h1, h2, h3, h4, h5 { overflow-wrap: break-word; }

/* Anything absolutely positioned as decoration is noise below the fold on a
   phone and often the cause of a horizontal scrollbar. */
@media (max-width: 767.98px) {
    .rs-program-shape-two,
    .rs-program-shape-three,
    .rs-about-shape,
    .rs-faculty-shape-one,
    .rs-faculty-shape-two,
    .rs-admission-cta-shape { display: none; }
}

/* Every interactive element clears the 44px minimum. */
.rs-btn, .rs-square-btn, .header-bar-icon, .rs-play-btn { min-height: 44px; }
.rs-btn { padding-block: .75rem; }

/* Cursor follower is a desktop affordance; it only intercepts taps on touch. */
@media (hover: none), (pointer: coarse) {
    #rs-mouse, #cursor-ball { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Components introduced by the PHP pages
   ========================================================================== */

.nx-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}
.nx-btn--on-dark { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.nx-btn--on-dark:hover { background: #fff; color: var(--nx-violet); box-shadow: none; }

/* -------------------------------------------------------------- figures */

.nx-figure {
    margin: 0;
    border-radius: var(--nx-radius-lg);
    overflow: hidden;
    background: var(--nx-violet-deep);
}
.nx-figure img { display: block; width: 100%; height: auto; }
.nx-figure-caption {
    padding: .75rem 1rem;
    background: #fff;
    font-size: .85rem;
    color: var(--rs-text-secondary);
}

/* Sticks only where there is room for it to be useful. */
@media (min-width: 992px) {
    .nx-sticky { position: sticky; top: 110px; }
}

/* --------------------------------------------------------------- steps */

.nx-steps {
    counter-reset: nx-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
.nx-steps--grid { gap: var(--nx-gap); }
@media (min-width: 768px) { .nx-steps--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .nx-steps--grid { grid-template-columns: repeat(4, 1fr); } }

.nx-steps li {
    counter-increment: nx-step;
    position: relative;
    padding-inline-start: 3.25rem;
}
.nx-steps--grid li {
    padding: 3.5rem 1.5rem 1.5rem;
    background: #fff;
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);
}
.nx-steps li::before {
    content: counter(nx-step);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: var(--nx-lime);
    color: var(--nx-ink);
    font-family: var(--rs-ff-title);
    font-weight: 800;
}
.nx-steps--grid li::before { inset-block-start: 1.5rem; inset-inline-start: 1.5rem; }
.nx-steps li b { display: block; font-family: var(--rs-ff-title); font-size: 1.05rem; margin-bottom: .35rem; }
.nx-steps li p { margin: 0; font-size: .92rem; color: var(--rs-text-secondary); }

.nx-panel--violet .nx-steps li b { color: #fff; }
.nx-panel--violet .nx-steps li p { color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------- fact lists */

.nx-facts { margin: 0 0 1.5rem; display: grid; gap: .1rem; }
.nx-facts > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--rs-border-primary);
}
.nx-facts dt { font-size: .85rem; color: var(--rs-text-secondary); margin: 0; }
.nx-facts dd { margin: 0; font-weight: 700; text-align: end; }

/* ------------------------------------------------------- contact list */

.nx-contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.nx-contact-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; }
.nx-contact-list i { font-size: 1.15rem; color: var(--nx-lime); line-height: 1.5; }
.nx-contact-list a { color: rgba(255, 255, 255, .9); }
.nx-contact-list a:hover { color: var(--nx-lime); }

/* -------------------------------------------------------------- article */

.nx-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    color: var(--rs-text-secondary);
}

.nx-checklist--light li { color: rgba(255, 255, 255, .9); }
.nx-checklist--plain li::before {
    content: "\ea6e"; /* remixicon close */
    background: rgba(100, 116, 139, .18);
    color: #475569;
}

.nx-event-head { display: flex; gap: 1rem; align-items: flex-start; }

/* ----------------------------------------------------------- pagination */

.nx-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 3rem;
}

.nx-error-code {
    font-family: var(--rs-ff-title);
    font-size: clamp(5rem, 22vw, 11rem);
    font-weight: 800;
    line-height: .9;
    color: var(--nx-violet);
    opacity: .16;
    margin: 0;
}

/* The .nx-filters row centres on the 404 and pagination. */
.nx-filters.justify-content-center { justify-content: center; }

/* The template scales anchor text down inside the hero; the project buttons
   need their own size back or the labels render at ~11px. */
.rs-banner-one .nx-btn,
.nx-panel .nx-btn,
.nx-btn { font-size: .95rem; line-height: 1; }

/* Faculty tab cards: the vendor border colour was a navy that no longer
   belongs to the palette, and the caption needs room over the photo. */
.rs-faculty-one .rs-faculty-item { border-color: var(--nx-violet-mid); }
.rs-faculty-one .rs-faculty-title { font-size: clamp(1rem, 2vw, 1.25rem); margin: 0; }
.rs-faculty-one .rs-faculty-title a { color: #fff; }

/* The programme accordion in the academics cards is icon-only; give the
   control a visible label so its purpose is not carried by an arrow alone. */
.rs-program-one .rs-accordion-item .accordion-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--rs-ff-title);
    font-size: .85rem;
    font-weight: 700;
    color: var(--nx-violet);
}
.rs-program-one .rs-accordion-item .accordion-button .nx-accordion-label { white-space: nowrap; }

/* The application form sits on the violet panel in the home page's admissions
   section, where the default dark label colour disappears. */
.rs-contact-form .nx-field > label,
.rs-contact-form .nx-check,
.rs-contact-form .nx-check label { color: #fff; }
.rs-contact-form .nx-field .nx-optional { color: rgba(255, 255, 255, .7); }
.rs-contact-form .nx-error { color: #FFD3DC; }
.rs-contact-form .nx-btn { background: var(--nx-lime); color: var(--nx-ink); }
.rs-contact-form .nx-btn:hover { background: #fff; }

/* Native selects need the arrow drawn back in once the browser default is
   removed by the shared field styling. */
.nx-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A1D96' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: right 1rem center;
}
[dir="rtl"] .nx-field select { background-position: left 1rem center; }

/* --------------------------------------------------------------------------
   Parity between the two Bootstrap builds

   The template ships a customised bootstrap.min.css with `.bg-primary` and its
   two siblings removed, so that `.bg-primary` in the markup means the
   template's own cream section background rather than Bootstrap blue. The
   right-to-left build is the stock file from the CDN, which puts those
   utilities back with `!important` and paints half the Arabic pages blue.
   Restoring the template's meaning here keeps both directions identical.
   -------------------------------------------------------------------------- */

[dir="rtl"] .bg-primary { background-color: var(--rs-bg-primary) !important; }
[dir="rtl"] .bg-primary-subtle { background-color: var(--nx-cream) !important; }
[dir="rtl"] .text-bg-primary { background-color: var(--nx-violet) !important; color: #fff !important; }

/* Links inside the violet side panels need a light colour; the default
   violet-on-violet is effectively invisible. */
.nx-panel--violet .nx-form-alt,
.nx-panel--violet .nx-form-alt a { color: #fff; }
.nx-panel--violet .nx-form-alt a { text-decoration-color: var(--nx-lime); }
.nx-panel--violet .nx-form-alt a:hover { color: var(--nx-lime); }
.nx-panel--violet .nx-checklist li { color: rgba(255, 255, 255, .9); }

/* The template's body colour is a light grey that drops below 4.5:1 at the
   lead paragraph's size. These read as intended text, not as a caption. */
.nx-lead { color: #4A4458; }
.nx-panel--violet .nx-lead { color: rgba(255, 255, 255, .88); }
.nx-card-text { color: #55506A; }