/*
 * Site unification layer.
 *
 * The purchased theme styles every page through a small set of classes —
 * .rbt-btn, .rbt-badge-6, .font-NN, .radius-NN, .text-muted and friends.
 * Rewriting eight templates by hand would be slow and would drift; redefining
 * those classes against the active palette changes every page at once and
 * keeps changing them when the palette changes.
 *
 * Loaded after the theme stylesheets and before the inline :root palette.
 *
 * !important appears only where the theme already used it — it litters its own
 * rules with !important, so a normal declaration here would lose.
 */

/* ---------------------------------------------------------------- type --- */

/* Body faces are the ones already loaded: Euclid for Latin, Tajawal for
   Arabic (smartcollege_rtl.css sets it with !important and it reads well).
   Only the two display faces are new, so the redesign costs two font files. */
:root {
    --sc-font-body: "Euclid Circular A", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sc-font-display: "Source Serif 4", Georgia, serif;
    --sc-font-display-ar: "Noto Kufi Arabic", "Tajawal", sans-serif;
}

html[lang="ar"] { --sc-font-body: "Tajawal", system-ui, sans-serif; }

/* html body, not body: the RTL sheet paints it white from a more specific
   selector, and a bare `body !important` still loses to that. */
html body { background: var(--sc-paper) !important; }

body {
    font-family: var(--sc-font-body);
    color: var(--sc-ink);
    background: var(--sc-paper) !important;
    -webkit-font-smoothing: antialiased;
}

/* Display type is the clearest signal that a site was designed rather than
   assembled. Latin takes a serif; Arabic takes the Kufi that pairs with it. */
h1, h2, .section-title .title, .rbt-title-style-3 {
    font-family: var(--sc-font-display) !important;
    letter-spacing: -.015em;
    line-height: 1.18;
    color: var(--sc-ink);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] .section-title .title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .section-title .title {
    font-family: var(--sc-font-display-ar) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

h3, h4, h5, h6 { font-family: var(--sc-font-body); font-weight: 700; color: var(--sc-ink); }

p, li, dd, td { line-height: 1.85; }

/* The theme's font-NN helpers were used as a type scale; make them one. */
.font-11 { font-size: .72rem !important; }
.font-12 { font-size: .78rem !important; }
.font-13 { font-size: .83rem !important; }
.font-14 { font-size: .89rem !important; }
.font-15 { font-size: .95rem !important; }
.font-16 { font-size: 1rem !important; }
.font-18 { font-size: 1.1rem !important; }
.font-20 { font-size: 1.22rem !important; }
.font-24 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem) !important; }
.font-26 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.65rem) !important; }
.font-32 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem) !important; }
.font-36 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem) !important; }
.font-38,
.font-40 { font-size: clamp(2rem, 1.35rem + 2.6vw, 2.9rem) !important; }

.text-muted { color: var(--sc-muted) !important; }
.text-dark { color: var(--sc-ink) !important; }
.text-white-50 { color: rgba(255, 255, 255, .72) !important; }
.text-primary, .color-primary { color: var(--sc-blue) !important; }
.text-success, .color-success { color: var(--sc-success) !important; }

a { color: var(--sc-blue); text-underline-offset: .18em; }
a:hover { color: var(--sc-blue-deep); }

/* ------------------------------------------------------------- surfaces --- */

.bg-color-extra2,
.bg-gradient-11 { background: var(--sc-tint) !important; }

.bg-color-white { background: var(--sc-paper) !important; }

.bg-primary-opacity { background: color-mix(in srgb, var(--sc-blue) 10%, transparent) !important; }
.bg-success-opacity { background: color-mix(in srgb, var(--sc-success) 12%, transparent) !important; }
.bg-purple-opacity { background: color-mix(in srgb, var(--sc-accent) 16%, transparent) !important; }
.color-purple { color: var(--sc-accent) !important; }

.border,
.border-top,
.border-bottom { border-color: var(--sc-line) !important; }

.shadow-sm { box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--sc-ink) 40%, transparent) !important; }
.shadow-lg,
.shadow-xl { box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--sc-ink) 55%, transparent) !important; }

/* One radius family instead of 16/20/24 chosen at random. */
.radius-10 { border-radius: 12px !important; }
.radius-16 { border-radius: 14px !important; }
.radius-20,
.radius-24 { border-radius: 18px !important; }

/* --------------------------------------------------------------- buttons --- */

.rbt-btn {
    font-family: var(--sc-font-body);
    font-weight: 700;
    letter-spacing: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.rbt-btn:hover { transform: translateY(-2px); }

.rbt-btn.btn-sm { min-height: 42px; font-size: .88rem; }
.rbt-btn.btn-md { font-size: .95rem; }

/* The theme's gradient was a different blue on every page. */
.rbt-btn.btn-gradient {
    background: var(--sc-blue) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--sc-blue) !important;
}

.rbt-btn.btn-gradient:hover {
    background: var(--sc-blue-deep) !important;
    border-color: var(--sc-blue-deep) !important;
}

.rbt-btn.btn-border {
    background: transparent !important;
    border: 1px solid var(--sc-line) !important;
    color: var(--sc-ink) !important;
}

.rbt-btn.btn-border:hover {
    border-color: var(--sc-blue) !important;
    color: var(--sc-blue) !important;
}

.rbt-btn.btn-border.text-white { border-color: rgba(255, 255, 255, .42) !important; color: #fff !important; }
.rbt-btn.btn-border.text-white:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* ---------------------------------------------------------------- badges --- */

.rbt-badge-6,
.badge {
    font-family: var(--sc-font-body);
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35rem .85rem;
    border-radius: 999px;
}

.radius-round { border-radius: 999px !important; }

/* ---------------------------------------------------------------- rhythm --- */

.rbt-section-gap { padding-block: clamp(2.75rem, 1.6rem + 3.4vw, 5rem) !important; }
.rbt-section-gapTop { padding-top: clamp(2.75rem, 1.6rem + 3.4vw, 5rem) !important; }
.rbt-section-gapBottom { padding-bottom: clamp(2.75rem, 1.6rem + 3.4vw, 5rem) !important; }

.section-title .title { margin-bottom: .6rem; }
.section-title .subtitle { color: var(--sc-accent) !important; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; font-size: .76rem; }

/* Long prose should not run the full width of a desktop container. */
.section-title p,
.rbt-card-text { max-width: 72ch; }

/* ------------------------------------------------------------------ a11y --- */

a:focus-visible,
button:focus-visible,
.rbt-btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--sc-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rbt-btn { transition: none; }
    .rbt-btn:hover { transform: none; }
}