/* ==========================================================================
   Dinka Language School — brand skin for Rocket's theme (design_1)
   Thukul de Jieng in Australia · "Language is Identity"
   --------------------------------------------------------------------------
   Applies the brand (royal blue #103898 primary + Noto fonts) on top of
   Rocket's own theme by overriding the theme's CSS variables + fonts. Loaded
   LAST in <head> so it wins the cascade. Re-skins the whole site (public + LMS)
   without touching LMS logic. Colours can also be set in Admin > Appearance >
   Themes if you want them admin-editable; this file is the reliable default.
   ========================================================================== */

/* Fonts — Noto Serif (headings) + Noto Sans (body); full Dinka glyph coverage */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Noto+Serif:wght@600;700&display=swap');

/* ---- Brand palette → Rocket theme CSS variables (override, both modes) ---- */
:root,
:root.light-mode,
:root.dark-mode {
    --primary:               #103898 !important;
    --primary-hover:         #0c2b77 !important;
    --primary-border:        #103898 !important;
    --primary-hover-border:  #0c2b77 !important;
    --primary-btn-color:     #ffffff !important;
    --primary-btn-hover-color:#ffffff !important;

    /* Secondary + accent intentionally left to the theme's ORIGINAL palette
       (navy secondary #0e2145, coral accent #fe6257) — no grey override. */

    /* common Rocket accent aliases (safe if unused) */
    --main-color:            #103898 !important;
    --primary-color:         #103898 !important;
}

/* ---- Typography (html body + !important to beat the theme font vars; icons untouched) ---- */
html body {
    font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html body p, html body a, html body li, html body td, html body th, html body label, html body blockquote,
html body .btn, html body button, html body input, html body select, html body textarea,
html body .nav-link, html body .form-control, html body .body-font {
    font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading, html body .section-title, html body .card-title, html body .font-heading {
    font-family: "Noto Serif", Georgia, "Times New Roman", serif !important;
}

/* Dinka text: keep the highly-covered sans so glyphs (ɛ ŋ ɔ ɣ ä ë) always render */
html body :lang(din) { font-family: "Noto Sans", system-ui, "Segoe UI", Arial, sans-serif !important; }

/* ---- Light, safe refinements that read as "premium community school" ---- */
:focus-visible { outline: 3px solid #1f5fff; outline-offset: 2px; }
a { color: #103898; }
a:hover { color: #0c2b77; }

/* ==========================================================================
   Hero heading typing animation — prevent reflow / line jumping
   --------------------------------------------------------------------------
   The animated word (Identity/Heritage/Pride/Belonging) is typed character by
   character; because the heading <h1> is sized to its content, its width used
   to track the word and re-wrap "for young Jieng Australians" mid-animation.
   Fix: reserve the LONGEST word's width up-front so per-character typing can
   never change the heading width. Longest word "Belonging" ≈ 5.02em (measured
   in Noto Serif 700); reserve 5.4em incl. cursor/buffer. min-width is in em so
   it scales with the responsive heading font-size (desktop/tablet/mobile).
   ========================================================================== */
.js-two-columns-hero-highlight-words-card {
    display: inline-block !important;
    min-width: 5.4em;                 /* reserve space for the longest word */
    white-space: nowrap !important;   /* never wrap the word itself */
    text-align: left;                 /* type left→right, no centering shift */
    vertical-align: bottom;
}
/* "Language is" stays intact; the reserved-width word sits beside it when there
   is room (wide screens) and drops to its own line as a WHOLE unit when there
   isn't (narrow screens) — it never squeezes "Language is" or jumps per-character. */
.d-inline-flex:has(> .js-two-columns-hero-highlight-words-card) {
    flex-wrap: wrap;
}
.d-inline-flex:has(> .js-two-columns-hero-highlight-words-card) > span {
    flex-shrink: 0;
}

/* On desktop (>=1200px) give the hero text column a fixed width wide enough to
   hold "Language is [longest word]" on ONE line at the full 64px heading, and
   let the image side fill the remaining space. Below 1200px the original
   Bootstrap columns apply and the reserved-width word stacks stably (no jump).
   770px comfortably fits "Language is Belonging" (measured ~740px). */
@media (min-width: 1200px) {
    .two-columns-hero-section .row { flex-wrap: nowrap !important; }
    .two-columns-hero-section__content {
        flex: 0 0 770px !important;
        max-width: 770px !important;
        min-width: 0 !important;
    }
    .two-columns-hero-section .row > .col-lg-1 { display: none !important; }  /* drop the spacer column */
    .two-columns-hero-section .row > .col-lg-6 {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* ==========================================================================
   Header nav fit — the 8 menu items overflowed the nav column and the last two
   (Events, Contact) slid under the "Start Learning" column, which sat on top and
   BLOCKED their clicks. Widen the nav column, narrow the CTA column, and tighten
   item spacing so all 8 fit and stay clickable. (>=1200px; below that the 8-item
   bar is inherently too tight — trim the menu if needed.)
   ========================================================================== */
@media (min-width: 1200px) {
    #themeHeaderSticky .row.align-items-center > .col-lg-5 {   /* nav column */
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    #themeHeaderSticky .row.align-items-center > .col-lg-3 {   /* "Start Learning" column */
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
    }
    #themeHeaderSticky .row.align-items-center .gap-lg-32 {    /* nav item spacing */
        gap: 16px !important;
    }
}

/* hide empty 0 Courses count on category tiles until courses exist */
.trending-categories-section__item-card .text-gray-500{display:none}