/*
 * Three colours, enforced.
 *
 * An audit of the live homepage on 5 Oct 2026 — walking every rendered element
 * and tallying its computed text, background and border colour — found **24
 * distinct colours**. Six belonged to the brand. Eighteen did not:
 *
 *   cold greys   #CBD5E1  #1E293B  #192335  #273041
 *   five blues   #3139C8  #60A5FA  #1D4ED8  #0066FF  #0A0077
 *   a cold black #0B1120  (the footer, outside the palette entirely)
 *   badge trios  #A16207 #FEFCE8 #FEF08A · #1D4ED8 #EFF6FF #BFDBFE ·
 *                #15803D #F0FDF4 #BBF7D0
 *
 * They come from the purchased theme and from three footer badges that were
 * written in Tailwind's amber, blue and green. None of them was a decision.
 *
 * This sheet maps every one onto navy, cream or gold. It is loaded last, and
 * it is written as targeted selectors rather than a blanket `* { color }`,
 * because a blanket rule in this codebase is how the site went blank earlier
 * today.
 *
 * The rule it enforces, in the owner's words: navy grounds, cream reads, gold
 * accents — and gold is a rule, a monogram, a number or a single word, never a
 * field.
 */

/* ------------------------------------------------- chrome: navy grounds --- */

/* Header, menus and footer were four different darks, none of them the brand's.
   `#0B1120` in particular sat a full step colder than everything above it. */
.rbt-header-top,
.rbt-header-top-1,
.rbt-header-wrapper { background-color: var(--sc-ink) !important; }

ul.submenu,
.rbt-user-menu-list-wrapper,
.newsletter-card-wrapper { background-color: var(--sc-ink-mid) !important; }

.rbt-footer,
.footer-style-1,
.footer-top,
.copyright-area {
    background-color: var(--sc-ink-deep) !important;
    background-image: var(--sc-pattern);
    background-size: 480px auto;
}

/* --------------------------------------------------------- cream reads --- */

/* The theme paints every p/span/a pure white in dark mode. White is a fourth
   colour: cream is what this brand reads in, and the warmth is most of the
   difference between depth and the gloom the owner objected to. Specificity
   (0,1,3) clears the theme's (0,1,2); the hero's primary button is a two-class
   rule and therefore still wins its dark ink back. */
html body.active-dark-mode,
html body.active-dark-mode p,
html body.active-dark-mode span,
html body.active-dark-mode li,
html body.active-dark-mode a { color: var(--sc-paper) !important; }

/* Secondary text: the same cream, stepped back, instead of a cold slate. */
.rbt-footer p,
.rbt-footer li,
.rbt-footer a,
.newsletter-desc,
.whatsapp-top-link { color: color-mix(in srgb, var(--sc-paper) 78%, transparent) !important; }

.rbt-footer a:hover,
.whatsapp-top-link:hover { color: var(--sc-paper) !important; }

/* Form fields sat on a cold slate with a cold border. */
.rbt-footer .form-control,
.newsletter-card-wrapper .form-control {
    background-color: color-mix(in srgb, var(--sc-paper) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--sc-accent) 30%, transparent) !important;
    color: var(--sc-paper) !important;
}

/* ------------------------------------------------------- gold accents ----- */

/* Icons are strokes, which is a sanctioned use of gold. These were the logo
   blue, which is a brand fact but was never meant to be the interface accent. */
.text-primary,
i.feather-mail,
i.feather-phone,
i.feather-map-pin { color: var(--sc-accent) !important; }

/* Footer column headings: a few words on a dark ground — the gold word. */
.ft-title { color: var(--sc-accent) !important; }

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

/* The theme's primary button was a blue field, and a second one was a different
   blue. On a navy ground the primary action is a cream field with navy text —
   17.7:1, and the most legible pair available. Gold arrives only as the rule
   that appears on hover. */
a.rbt-btn.btn-gradient,
button.rbt-btn.btn-gradient,
.rbt-btn.btn-gradient {
    background: var(--sc-paper) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: var(--sc-ink) !important;
}

a.rbt-btn.btn-gradient span,
button.rbt-btn.btn-gradient span,
.rbt-btn.btn-gradient span,
.rbt-btn.btn-gradient i { color: var(--sc-ink) !important; }

a.rbt-btn.btn-gradient:hover,
button.rbt-btn.btn-gradient:hover,
.rbt-btn.btn-gradient:hover {
    background: #fff !important;
    border-color: var(--sc-accent) !important;
}

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

/* Three badges in three unrelated palettes — Tailwind amber, blue and green —
   nine colours between them. They are the same kind of object and now look it:
   one cream surface, one gold hairline, one ink label. The meaning was never
   carried by the hue; it is carried by the words inside them. */
.footer-badge,
.gold-badge,
.blue-badge,
.green-badge,
.uk-license-badge-pill {
    background-color: var(--sc-paper-deep) !important;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 55%, transparent) !important;
    color: var(--sc-ink) !important;
}

.footer-badge i,
.footer-badge span,
.uk-license-badge-pill i,
.uk-license-badge-pill span {
    /* Gold on cream needs the deep gold: the bright one measures 2.71:1 here
       and fails WCAG at every size. */
    color: var(--sc-accent-deep) !important;
}

.sc-badge-logo { background-color: var(--sc-ink) !important; color: var(--sc-paper) !important; }

/* ------------------------------------------------------------- strays ----- */

/* The theme's utility colours, redirected rather than left to leak. */
.bg-primary-opacity { background: color-mix(in srgb, var(--sc-accent) 10%, transparent) !important; }
.color-primary { color: var(--sc-accent-deep) !important; }

.active-dark-mode .color-primary,
.rbt-footer .color-primary { color: var(--sc-accent) !important; }

/* ------------------------------------------- raising the ground itself --- */

/* The single rule behind most of what reads as "unrelated colours": the theme
   paints the whole document `#0b1120` — a cold near-black that belongs to no
   palette — from `body.active-dark-mode`, specificity (0,1,1). Everything
   transparent above it inherits that cold, which is why the footer, the menus
   and the newsletter card all measured as a colour nobody chose.
   `html body.active-dark-mode` is (0,1,2) and takes it. */
html body.active-dark-mode {
    background-color: var(--sc-ink-deep) !important;
    background-image: var(--sc-pattern);
    background-size: 480px auto;
}

html body.active-dark-mode .rbt-footer,
html body.active-dark-mode .footer-style-1,
html body.active-dark-mode .footer-top,
html body.active-dark-mode .copyright-area,
html body.active-dark-mode .rbt-testimonial-area,
html body.active-dark-mode .recommended-courses-area {
    background: var(--sc-ink-deep) !important;
}

html body.active-dark-mode .rbt-header-top,
html body.active-dark-mode .rbt-header-wrapper { background: var(--sc-ink) !important; }

html body.active-dark-mode ul.submenu,
html body.active-dark-mode .rbt-user-menu-list-wrapper,
html body.active-dark-mode .newsletter-card-wrapper { background: var(--sc-ink-mid) !important; }

/* `.text-muted` is the theme's cold slate, applied to most secondary copy. */
html body.active-dark-mode .text-muted,
html body.active-dark-mode .newsletter-desc {
    color: color-mix(in srgb, var(--sc-paper) 76%, transparent) !important;
}

/* ------------------------------- inline styles written into the markup --- */

/* These three badges and the footer headings carry their colours in a `style`
   attribute in the Blade template — Tailwind amber, blue and green, plus a
   `#0066ff` heading. A stylesheet `!important` outranks a non-important inline
   style, and the attribute selector lifts specificity clear of the theme's own
   important rules at the same time. */
html body .footer-badge[style],
html body .gold-badge[style],
html body .blue-badge[style],
html body .green-badge[style],
html body .uk-license-badge-pill[style] {
    background: var(--sc-paper-deep) !important;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 55%, transparent) !important;
    color: var(--sc-ink) !important;
}

html body .footer-badge[style] i,
html body .footer-badge[style] span,
html body .uk-license-badge-pill[style] i,
html body .uk-license-badge-pill[style] span {
    color: var(--sc-accent-deep) !important;
}

html body .ft-title[style],
html body .ft-title { color: var(--sc-accent) !important; }

html body .sc-badge-logo[style],
html body .sc-badge-logo {
    background: var(--sc-ink) !important;
    color: var(--sc-paper) !important;
}

/* --------------------------------------- the theme's own colour system --- */

/* The last strays were not rules at all — they were the purchased theme's
   root variables, which every one of its own stylesheets reads:
   `--color-primary: #0A0077`, `--color-heading: #192335`, `--color-darker`.
   Chasing the rules that use them would never end; redefining the variables
   ends it in one block, and this sheet loads last so these win.
   The theme's palette now *is* the brand palette. */
:root {
    /* --color-primary maps to the NAVY, not the gold. The theme uses this
       variable for *fields* — the top bar, buttons, filled badges — and gold
       is never a field. Pointing it at gold turned the whole header bar into a
       gold slab, which is the exact failure the brand rule exists to prevent.
       Gold reaches the interface only through the explicit rules below. */
    --color-primary: var(--sc-ink);
    --color-secondary: var(--sc-ink-mid);
    --color-heading: var(--sc-ink);
    --color-darker: var(--sc-ink);
    --color-dark: var(--sc-ink-mid);
    --color-body: var(--sc-muted);
    --color-white: var(--sc-paper);
    --color-light: var(--sc-paper-deep);
    --color-lighter: var(--sc-line);
    --color-border: var(--sc-line);
}

/* newstyle.css paints the top bar with a hardcoded gradient of one colour,
   twice, with !important. A gradient of a single value is a flat fill. */
html body .rbt-header-top,
html body .rbt-header-top-1,
html body.active-dark-mode .rbt-header-top,
html body.active-dark-mode .rbt-header-top-1 {
    background: var(--sc-ink) !important;
    background-image: none !important;
}

html body.active-dark-mode ul.submenu,
html body.active-dark-mode .rbt-round-btn { background: var(--sc-ink-mid) !important; }

html body.active-dark-mode .copyright-area { border-color: color-mix(in srgb, var(--sc-paper) 14%, transparent) !important; }

/* Cream reads — headings included. The blanket rule above covered p, span, li
   and a; on a navy ground a white heading beside cream body text is the last
   place the two whites sat next to each other. */
html body.active-dark-mode h1,
html body.active-dark-mode h2,
html body.active-dark-mode h3,
html body.active-dark-mode h4,
html body.active-dark-mode h5,
html body.active-dark-mode h6 { color: var(--sc-paper) !important; }

/* ---------------------------------------------------- native UI colour --- */

/* `color-scheme` is what tells the browser to render its *own* parts dark:
   scrollbars, native select menus, date pickers, form field chrome, the
   spellcheck underline. Without it a dark page keeps light scrollbars and a
   white dropdown, which no stylesheet can reach — it was measured as `normal`
   on this site while every surface was navy. */
/* Declared on <html>, not <body>. The browser reads `color-scheme` from the
   root element, so setting it on the body changes nothing — it measured as
   `normal` on a fully navy page. The theme keeps its mode class on <body>, so
   :has() is what reaches up from there. */
html:has(body.active-dark-mode) { color-scheme: dark; }
html:has(body.active-light-mode) { color-scheme: light; }

/* A native <select> needs its colours stated explicitly or Windows paints it
   from the system theme regardless of the page. */
html body.active-dark-mode select,
html body.active-dark-mode .form-select {
    background-color: var(--sc-ink-mid) !important;
    color: var(--sc-paper) !important;
}


/* ------------------------------------------------------ reduced motion --- */

/* The purchased theme ships animations that loop forever — a marquee on button
   text among them — and none of them asks whether the reader wants motion. A
   reader who has set `prefers-reduced-motion` has usually set it for a reason,
   often a vestibular one, and a site cannot honour that selectively.
   Transitions are cut to 1ms rather than 0 so that `transitionend` handlers
   still fire and nothing waiting on them hangs. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}