/* ================================================================
   RVIBS Online School — public course website theme (Bootstrap 5).
   Ported from the standalone LMS. No build step.
   ================================================================ */

:root {
    --navy-50:  #e9f1f8;
    --navy-100: #cbdff0;
    --navy-600: #0f5688;
    --navy-700: #0c4a79;
    --navy-800: #084377;
    --navy-900: #0d4f81;  /* primary */
    --navy-950: #00307a;  /* accent */

    --magenta-50:  #fde6f2;
    --magenta-400: #f04fa1;
    --magenta-500: #eb2e94;
    --magenta-600: #cf1a7c;

    --amber-400: #fbbf24;
    --amber-500: #f59e0b;

    --bs-primary: #0d4f81;
    --bs-primary-rgb: 13, 79, 129;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-color: #334155;
    --bs-link-color: var(--navy-700);
    --bs-link-hover-color: var(--magenta-600);
    --bs-border-color: #e2e8f0;
}

body { background: #f8fafc; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, .font-display {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--navy-900);
}

/*
 * Headings inside a light-on-dark block must NOT take the navy default.
 *
 * The rule above sets an explicit colour on every heading, and an explicit
 * colour beats an inherited one. So <h1> inside .text-white on the navy
 * gradient banner rendered navy-900 on navy — the programme title was there,
 * just invisible. Inheriting restores it to the container's white.
 */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5,
.text-white .font-display,
.grad-1 h1, .grad-1 h2, .grad-1 h3, .grad-4 h1, .grad-4 h2, .grad-4 h3 {
    color: inherit;
}
.grad-1, .grad-4 { color: #fff; }

.text-navy   { color: var(--navy-900) !important; }
.text-navy-700 { color: var(--navy-700) !important; }
.text-magenta { color: var(--magenta-500) !important; }
.text-magenta-600 { color: var(--magenta-600) !important; }
.text-amber  { color: var(--amber-500) !important; }
.bg-navy     { background-color: var(--navy-900) !important; }
.bg-navy-800 { background-color: var(--navy-800) !important; }
.bg-navy-950 { background-color: var(--navy-950) !important; }
.bg-navy-50  { background-color: var(--navy-50)  !important; }
.bg-magenta  { background-color: var(--magenta-500) !important; }
.border-navy { border-color: var(--navy-900) !important; }

.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-800); color: #fff; }
.btn-magenta { background: var(--magenta-500); color: #fff; }
.btn-magenta:hover { background: var(--magenta-600); color: #fff; }
.btn-outline-navy { border: 1px solid var(--navy-800); color: var(--navy-900); background: #fff; }
.btn-outline-navy:hover { background: var(--navy-50); color: var(--navy-900); }
.btn-light-navy { background: #fff; color: var(--navy-900); }
.btn-light-navy:hover { background: #f1f5f9; color: var(--navy-900); }
.btn-start { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .6rem 1.5rem;
    font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(90deg, var(--navy-900), var(--magenta-500));
    box-shadow: 0 10px 22px -10px rgba(235,46,148,.55); transition: filter .15s, transform .15s; }
.btn-start:hover, .btn-start:focus { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

/*
 * Log in as a featured action, paired with .btn-start.
 *
 * Same pill geometry and weight so the two read as a matched set, but outlined
 * rather than filled: Start Now stays the primary call to action and Log in is
 * the secondary. Two filled gradient buttons side by side would compete and
 * neither would win.
 */
.btn-login { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .6rem 1.5rem;
    font-weight: 700; text-decoration: none; color: var(--navy-900); background: #fff;
    border: 2px solid var(--navy-900); transition: color .15s, background-color .15s, transform .15s; }
.btn-login:hover, .btn-login:focus { color: #fff; background: var(--navy-900); transform: translateY(-1px); }

.announcement { background: var(--navy-50); color: var(--navy-900); font-size: .875rem; }

.brand-name { color: var(--magenta-600); font-weight: 800; line-height: 1.05; font-size: 13px; }
.brand-sub  { color: var(--navy-700); font-size: 10px; font-weight: 700; letter-spacing: .25em; }
.search-pill .form-control { border-radius: 999px; padding-left: 2.6rem; }
.search-pill i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 3; }
.nav-strong .nav-link { color: var(--navy-900); font-weight: 600; }
.nav-strong .nav-link:hover { color: var(--magenta-600); }

.hero-card { border: 1px solid var(--bs-border-color); border-radius: 1.5rem; overflow: hidden; }
.hero-left { border-left: 8px solid var(--navy-900); background: #fff; }
.hero-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .25em; color: #64748b; text-transform: uppercase; }
/* The hero photo is shown as it is. The navy stays only as the colour behind
   it, which is what shows while the image loads or if it fails to. The tint it
   used to carry came from three places together: a magenta/navy gradient laid
   over the top, and — the larger part — mix-blend-mode: luminosity on the image
   itself, which discarded the photo's own colour and took it from the navy
   underneath, with opacity letting more of that through again. */
.hero-media { min-height: 320px; background: var(--navy-900); position: relative; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-finder { max-width: 32rem; }
.hero-search { border: 1px solid #cbd5e1; border-radius: .85rem; overflow: hidden; background: #fff;
    transition: border-color .15s, box-shadow .15s; }
.hero-search:focus-within { border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(20,28,73,.08); }
.hero-search .form-control { border: 0; }
.hero-search .form-control:focus { box-shadow: none; }
.hero-search-icon { padding-left: .9rem; color: #94a3b8; font-size: .95rem; line-height: 1; }
.hero-finder .form-select-sm { border-radius: .6rem; }
.stat-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--navy-900); }

.quicklinks-top { height: 3px; background: var(--navy-900); }
.quicklinks-bottom { height: 3px; background: linear-gradient(90deg, var(--navy-900), var(--magenta-500)); }
.quicklink { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--bs-border-color);
    border-radius: 999px; padding: .5rem 1.1rem; text-decoration: none; color: var(--navy-900); font-weight: 600;
    box-shadow: 0 1px 2px rgba(13,19,48,.05); transition: box-shadow .15s, border-color .15s, transform .15s; }
.quicklink:hover { color: var(--navy-900); border-color: var(--navy-600); box-shadow: 0 10px 22px -12px rgba(13,19,48,.4); transform: translateY(-1px); }
.quicklink .ql-badge { width: 34px; height: 34px; border-radius: 50%; background: rgba(20,28,73,.08); color: var(--navy-900);
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.quicklink .ql-arrow { color: #94a3b8; font-size: .7rem; }
.quicklink-apply { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .5rem 1.3rem;
    color: #fff; font-weight: 700; text-decoration: none; background: linear-gradient(90deg, var(--navy-900), var(--magenta-500));
    box-shadow: 0 10px 22px -10px rgba(216,27,102,.55); transition: filter .15s, transform .15s; }
.quicklink-apply:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.quicklink-apply .fa-arrow-up-right { font-size: .7rem; }

.course-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--magenta-600); }
.courses-menu { min-width: 15rem; padding: .5rem 0; }
.courses-menu .dropdown-item { color: var(--magenta-500); font-weight: 600; padding: .6rem 1.25rem; border-bottom: 1px solid #f1f5f9; }
.courses-menu .dropdown-item:last-child { border-bottom: 0; }
.courses-menu .dropdown-item:hover, .courses-menu .dropdown-item:focus { background: var(--magenta-50); color: var(--magenta-600); }

.modal-cm-accent { height: 4px; background: linear-gradient(90deg, var(--navy-600), var(--magenta-500)); }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1030; width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.25); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.wa-float:hover, .wa-float:focus { color: #fff; transform: scale(1.06); box-shadow: 0 12px 28px rgba(37,211,102,.45); }

.grad-1 { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); }
.grad-4 { background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); }

/* ---- Catalogue toolbar + image-free course cards ---- */
.catalog-toolbar { background: #f8fafc; border-bottom: 1px solid var(--bs-border-color); }
.catalog-select { min-width: 9.5rem; border-radius: .7rem; }
.view-btn { width: 44px; height: 44px; border: 1px solid var(--bs-border-color); background: #fff; color: #64748b;
    border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.view-btn:hover { color: var(--navy-900); }
.view-btn.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

#coursesResults.view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
#coursesResults.view-list { display: flex; flex-direction: column; gap: 1rem; }

.ccard { position: relative; background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.25rem;
    display: grid; grid-template-rows: auto 1fr auto; height: 100%; transition: box-shadow .2s, transform .2s; cursor: pointer; }
.ccard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--navy-600), var(--magenta-500)); border-radius: 1rem 1rem 0 0; }
.ccard:hover { box-shadow: 0 18px 36px -20px rgba(13,19,48,.35); transform: translateY(-3px); }
.ccard-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.ccard-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-50); color: var(--navy-800);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; }
.ccard-main { min-width: 0; }
.ccard-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--navy-900);
    text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard:hover .ccard-title { color: var(--magenta-600); }
.ccard-desc { color: #64748b; font-size: .9rem; margin: .5rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard-meta { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.cc-pill { font-weight: 700; font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.badge-featured { background: #fde8c8; color: #b45309; }
.badge-free { background: var(--magenta-50); color: var(--magenta-600); }
.cc-award { background: #e7efff; color: var(--navy-700); font-weight: 600; font-size: .75rem; padding: .25rem .65rem; border-radius: 999px; }
.ccard-foot { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: .5rem; }

.view-list .ccard { grid-template-rows: auto; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: 1.5rem; }
.view-list .ccard::before { top: 0; bottom: 0; right: auto; width: 4px; height: auto; border-radius: 1rem 0 0 1rem; }
.view-list .ccard-top { flex-direction: column; align-items: flex-start; gap: .5rem; margin-bottom: 0; }
.view-list .ccard-foot { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid #f1f5f9;
    padding-left: 1.5rem; flex-direction: column; align-items: flex-end; gap: .4rem; }
@media (max-width: 575.98px) {
    .view-list .ccard { grid-template-columns: 1fr; }
    .view-list .ccard-top { flex-direction: row; justify-content: space-between; }
    .view-list .ccard-foot { border-left: 0; padding-left: 0; flex-direction: row; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #f1f5f9; }
}

.feature-band { background: var(--navy-950); color: #fff; border-radius: 1.5rem; overflow: hidden; }
.feature-band .eyebrow { color: var(--magenta-400); font-size: .75rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; }
.feature-band h2, .feature-band p { color: #fff; }
.feature-grid img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; }
.values-strip { background: var(--navy-800); color: #fff; }
.values-strip i { color: var(--magenta-400); }
.site-footer { background: var(--navy-950); color: #cbd5e1; }
.site-footer h4 { color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.cta-band { background: var(--navy-900); color: #fff; border-radius: 1.5rem; position: relative; overflow: hidden; }
.cta-band .cta-glow { position: absolute; inset: 0; opacity: .25;
    background-image: radial-gradient(circle at 80% 20%, var(--magenta-500) 0, transparent 40%),
                      radial-gradient(circle at 15% 90%, var(--navy-600) 0, transparent 40%); }

/* ---- Searchable country combobox ---- */
.country-field { position: relative; }
.country-list { position: absolute; z-index: 30; width: 100%; margin-top: .25rem; max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 16px 30px -14px rgba(13,19,48,.3); padding: .25rem; }
.country-item { padding: .5rem .75rem; border-radius: .45rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.country-item:hover, .country-item.active { background: var(--navy-50); }
.country-item .dial { color: #94a3b8; font-size: .85rem; }
.dial-code-input { max-width: 6rem; text-align: center; }