/* =====================================================================
   SITHM BRAND + FORM STYLES  (loaded on the public site, student panel
   and admin panel, AFTER Bootstrap and style.css)

   One place for the brand colours so every form, button and badge
   uses the SAME navy / gold, and text always stays readable.
   Contrast ratios (WCAG, on white):
     navy #0A1D4D ........ 16.2 : 1     input text #1B2437 .. 15.5 : 1
     field border #5F6F8A .. 5.1 : 1     error red #B3261E ..... 6.5 : 1
     success green #1E7B3A . 5.3 : 1     gold text #8A6A10 ..... 5.1 : 1
   (the bright gold #C8A74E is only 2.3:1 on white, so it is used for
    fills, borders and text on NAVY only - never as text on white)
   ===================================================================== */

:root {
    --navy: #0A1D4D;
    --navy-hover: #12296b;
    --gold: #C8A74E;
    --gold-hover: #B8963A;
    --gold-text: #8A6A10;         /* gold that is readable on white   */
    --gold-tint: #F6EFD6;
    --ink: #1B2437;               /* text typed into inputs           */
    --help: #4B5563;              /* help text under inputs           */
    --field-border: #5F6F8A;
    --field-disabled: #E9EDF3;
    --ok: #1E7B3A;
    --err: #B3261E;

    /* Make every Bootstrap "primary" (headers, links, badges) = brand navy */
    --bs-primary: #0A1D4D;
    --bs-primary-rgb: 10, 29, 77;
    --bs-link-color: #0F3B9C;
    --bs-link-color-rgb: 15, 59, 156;
    --bs-link-hover-color: #0A1D4D;
    --bs-link-hover-color-rgb: 10, 29, 77;
    --bs-form-valid-color: #1E7B3A;
    --bs-form-valid-border-color: #1E7B3A;
    --bs-form-invalid-color: #B3261E;
    --bs-form-invalid-border-color: #B3261E;
}

/* ---------- Labels & help text ---------- */
.form-label,
form label {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .35rem;
}
form label.form-check-label { font-weight: 500; color: var(--ink); }
.form-text,
form small.text-muted,
form .small.text-muted {
    color: var(--help) !important;
}
label .req, .req { color: var(--err); }

/* ---------- Inputs ---------- */
.form-control,
.form-select {
    color: var(--ink);
    background-color: #fff;
    border: 1.5px solid var(--field-border);
    border-radius: .5rem;
    padding: .6rem .8rem;
    font-size: 1rem;
}
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: #6B7280; opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: var(--navy); }

.form-control:focus,
.form-select:focus {
    color: var(--ink);
    background-color: #fff;
    border-color: var(--navy);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(200, 167, 78, .5);
}

/* Disabled / read-only must still be readable */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--field-disabled);
    color: #3B4557;
    opacity: 1;
    cursor: not-allowed;
}

/* Checkboxes / switches */
.form-check-input {
    border: 1.5px solid var(--field-border);
    width: 1.15em;
    height: 1.15em;
}
.form-check-input:checked {
    background-color: var(--navy);
    border-color: var(--navy);
}
.form-check-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 .25rem rgba(200, 167, 78, .5);
}
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

/* ---------- Validation states (clear + high contrast) ---------- */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--err);
    background-color: #FFF8F7;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--err);
    box-shadow: 0 0 0 .25rem rgba(179, 38, 30, .25);
}
.form-control.is-valid,
.form-select.is-valid { border-color: var(--ok); }
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--ok);
    box-shadow: 0 0 0 .25rem rgba(30, 123, 58, .25);
}
.invalid-feedback {
    color: var(--err);
    font-weight: 600;
    font-size: .875rem;
    margin-top: .3rem;
}
.valid-feedback {
    color: var(--ok);
    font-weight: 600;
    font-size: .875rem;
}
/* Error text gets a small "!" so it is not colour-only */
.invalid-feedback:not(:empty)::before {
    content: "\26A0\FE0E\00a0";
}
.form-hint-warn {
    color: #7A4B00;
    font-size: .875rem;
    font-weight: 600;
    margin-top: .3rem;
}

/* Form-level error summary */
.form-error-summary {
    border: 1.5px solid var(--err);
    background: #FFF8F7;
    color: #7F1D1D;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0A1D4D;
    --bs-btn-border-color: #0A1D4D;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #12296b;
    --bs-btn-hover-border-color: #12296b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0A1D4D;
    --bs-btn-active-border-color: #0A1D4D;
    --bs-btn-focus-shadow-rgb: 200, 167, 78;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0A1D4D;
    --bs-btn-disabled-border-color: #0A1D4D;
}
.btn-outline-primary {
    --bs-btn-color: #0A1D4D;
    --bs-btn-border-color: #0A1D4D;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0A1D4D;
    --bs-btn-hover-border-color: #0A1D4D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0A1D4D;
    --bs-btn-active-border-color: #0A1D4D;
    --bs-btn-focus-shadow-rgb: 200, 167, 78;
    --bs-btn-disabled-color: #0A1D4D;
    --bs-btn-disabled-border-color: #0A1D4D;
}
.btn-warning {
    --bs-btn-color: #0A1D4D;
    --bs-btn-bg: #C8A74E;
    --bs-btn-border-color: #C8A74E;
    --bs-btn-hover-color: #0A1D4D;
    --bs-btn-hover-bg: #B8963A;
    --bs-btn-hover-border-color: #B8963A;
    --bs-btn-active-color: #0A1D4D;
    --bs-btn-active-bg: #B8963A;
    --bs-btn-active-border-color: #B8963A;
    --bs-btn-focus-shadow-rgb: 10, 29, 77;
    font-weight: 600;
}
.btn:focus-visible,
a:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- Cards, alerts, badges ---------- */
.card-header.bg-primary { background-color: var(--navy) !important; color: #fff; }
.card-header h4, .card-header h5 { color: inherit; }
.alert-danger  { color: #7F1D1D; background: #FDECEA; border-color: #F5B5B0; }
.alert-success { color: #14532D; background: #E3F5E9; border-color: #A9DBB9; }
.alert-info    { color: #0A1D4D; background: #E7EEFB; border-color: #B7C8EA; }
.alert-warning { color: #5C3B00; background: #FFF4D6; border-color: #EBCF86; }
.badge.bg-primary { background-color: var(--navy) !important; color: #fff; }
.badge.bg-warning { background-color: var(--gold) !important; color: var(--navy) !important; }
.badge.bg-success { background-color: var(--ok) !important; color: #fff; }
.badge.bg-danger  { background-color: var(--err) !important; color: #fff; }

/* ---------- Gold that is readable ---------- */
.text-gold { color: var(--gold-text) !important; }
.bg-dark .text-gold, footer .text-gold, .sidebar .text-gold,
.bg-navy .text-gold, .hero-slider .text-gold { color: var(--gold) !important; }

/* Site navigation: readable active/hover state */
.navbar .nav-link { color: var(--navy) !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--gold-text) !important; }
.navbar .nav-link.active {
    color: var(--navy) !important;
    border-bottom: 3px solid var(--gold);
    font-weight: 600;
}
.dropdown-menu { border: 1px solid #d5dbe8; box-shadow: 0 8px 24px rgba(10, 29, 77, .15); }
.dropdown-item { color: var(--navy); font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background-color: var(--navy);
    color: #fff;
}

/* Footer uses the brand navy (Bootstrap's bg-dark is a different grey) */
footer.bg-dark { background-color: var(--navy) !important; }

/* Admin top bar = brand navy too (was grey) */
.navbar.navbar-dark.bg-dark { background-color: var(--navy) !important; border-bottom: 3px solid var(--gold); }

/* Table header: navy with white text, readable in every panel */
.table > thead.table-primary > tr > th,
.table > thead.table-primary > tr > td {
    background-color: var(--navy) !important;
    color: #fff !important;
    border-color: #1c2f66;
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}

/* =====================================================================
   COMPANIES (main brand + affiliated / upcoming companies)
   ===================================================================== */
.company-tabs {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.75rem;
}
.company-tab {
    border: 2px solid var(--navy); background: #fff; color: var(--navy);
    border-radius: 50rem; padding: .5rem 1.25rem; font-weight: 600; cursor: pointer;
    transition: background-color .2s, color .2s;
}
.company-tab .count {
    display: inline-block; min-width: 1.6em; padding: 0 .45em; margin-left: .35em;
    border-radius: 50rem; background: var(--gold-tint); color: var(--navy); font-size: .8em; text-align: center;
}
.company-tab:hover { background: #EEF2FB; }
.company-tab.active { background: var(--navy); color: #fff; }
.company-tab.active .count { background: var(--gold); color: var(--navy); }
.company-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.company-card { border-radius: 14px; border: 1px solid #dfe5f1; overflow: hidden; }
.company-card:hover { border-color: var(--gold); }
.company-logo {
    width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #fff;
    border: 1px solid #dfe5f1; flex: 0 0 auto;
}
.company-logo-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--navy); color: var(--gold); font-weight: 700; font-size: 1.35rem; letter-spacing: .5px;
}
.company-badge {
    display: inline-block; padding: .3rem .7rem; border-radius: 50rem; font-size: .78rem; font-weight: 700; line-height: 1.2;
}
.company-badge-upcoming { background: var(--gold-tint); color: #5C4508; border: 1px solid #DCC77E; }
.company-badge-active   { background: #E3F5E9; color: #14532D; border: 1px solid #A9DBB9; }
.company-name { color: var(--navy); font-weight: 700; }
.company-industry {
    display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-text);
}
.company-tagline { font-style: italic; color: #374151; }
.company-services-title { font-size: .8rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.company-services li { padding-left: 1.4rem; position: relative; margin-bottom: .2rem; font-size: .93rem; }
.company-services li i { position: absolute; left: 0; top: .28rem; color: var(--ok); font-size: .8rem; }
.company-services li.more { color: var(--help); padding-left: 0; font-size: .85rem; }

.course-affil {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .6rem;
    border: 1px solid #dfe5f1; border-radius: 10px; background: #F7F9FD;
    color: var(--navy); font-size: .85rem; text-decoration: none;
}
.course-affil img { border-radius: 6px; object-fit: contain; background: #fff; }
.course-affil:hover { border-color: var(--gold); color: var(--navy); }

.main-brand-card {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    background: var(--navy); color: #fff; border-radius: 16px; padding: 1.5rem;
    border-bottom: 4px solid var(--gold);
}
.main-brand-card img { height: 72px; width: auto; border-radius: 10px; background: #fff; padding: 4px; }
.main-brand-card .label { color: var(--gold); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.main-brand-card h2 { color: #fff; font-size: 1.4rem; margin: .1rem 0 .2rem; }
.main-brand-card p { margin: 0; color: #E4E9F5; }

.section-title { color: var(--navy); font-weight: 700; }
.section-title::after {
    content: ""; display: block; width: 64px; height: 4px; background: var(--gold); border-radius: 4px; margin: .6rem auto 0;
}