/*
 * SPA Academy Contest - brand layer.
 *
 * The palette is the academy's own, read from its stylesheet at
 * spanewsacademy.edu.sa/portal/new-layout/css/app.css:
 *
 *   --color-primary    #00b8c3   teal
 *   --color-secondary  #002e4a   navy
 *   --color-tertiary   #f8b81f   gold
 *   --gradient-primary linear-gradient(-90deg, #31b978 0%, #00b8c3 100%)
 *
 * This file only re-points colours. It adds no layout, no component and no
 * new class, so the theme it sits on can be updated without merging anything.
 * Loaded last, after the theme and after the inline block in the layout that
 * defines --main-color, which is why none of this needs !important except
 * where the theme itself used it.
 *
 * ONE DELIBERATE DEPARTURE FROM THE ACADEMY'S CSS. #00b8c3 behind white text
 * gives a contrast ratio of about 2.6:1, which fails WCAG AA for body text -
 * so anything that carries white text uses #00838c, the same hue darkened to
 * about 4.6:1. The bright teal is kept for what it is good at: rules, icons,
 * small marks and hover states, where it is decoration rather than reading.
 */

:root {
    --spa-teal: #00b8c3;
    --spa-teal-ink: #00838c;
    --spa-teal-ink-dark: #006e75;
    --spa-green: #31b978;
    --spa-navy: #002e4a;
    --spa-gold: #f8b81f;
    --spa-tint: #e9f7f8;
    --spa-gradient: linear-gradient(135deg, #31b978 0%, #00b8c3 100%);

    --bs-primary: #00838c;
    --bs-primary-rgb: 0, 131, 140;
}

body {
    --main-color: #00838c;
    --main-color-rgb: 0, 131, 140;
    --main-color-flexable: #00838c;
}

body.night {
    /* On a dark surface the bright teal is the readable one. */
    --main-color: #00b8c3;
    --main-color-rgb: 0, 184, 195;
}

/* Buttons are set TWICE by the theme: once through Bootstrap 5.2's custom
   properties, and then again as plain background-color on the same selectors.
   Overriding only the properties changed nothing at all - the later literal
   won every time - so both are redefined here, against the theme's own
   selectors so specificity matches and load order decides. */
.btn-primary {
    --bs-btn-bg: #00838c;
    --bs-btn-border-color: #00838c;
    --bs-btn-hover-bg: #006e75;
    --bs-btn-hover-border-color: #006e75;
    --bs-btn-active-bg: #005c62;
    --bs-btn-active-border-color: #005c62;
    --bs-btn-disabled-bg: #00838c;
    --bs-btn-disabled-border-color: #00838c;
    --bs-btn-focus-shadow-rgb: 0, 184, 195;
}

.btn-primary,
.btn-primary:focus { color: #fff; background-color: #00838c; border-color: #00838c; }
.btn-primary:hover { color: #fff; background-color: #006e75; border-color: #006e75; }
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle { color: #fff; background-color: #005c62; border-color: #005c62; }

.btn-outline-primary {
    --bs-btn-color: #00838c;
    --bs-btn-border-color: #00838c;
    --bs-btn-hover-bg: #00838c;
    --bs-btn-hover-border-color: #00838c;
    --bs-btn-active-bg: #006e75;
    --bs-btn-active-border-color: #006e75;
    --bs-btn-focus-shadow-rgb: 0, 184, 195;
}

.btn-outline-primary { color: #00838c; border-color: #00838c; }
.btn-outline-primary:hover { color: #fff; background-color: #00838c; border-color: #00838c; }
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active { color: #fff; background-color: #006e75; border-color: #006e75; }

.btn-soft-primary,
.btn-soft-primary:focus,
.btn-soft-primary:hover { background-color: #e9f7f8; color: #00838c; border-color: transparent; }
.btn-soft-primary:hover { background-color: #d3eef0; }

/* The theme's own utility, and the reason the header text vanished:
   PurgeCSS dropped .d-sm-block from the built stylesheet, so the brand
   wordmark kept the .d-none half of "d-none d-sm-block" and was hidden at
   every width. Declared here instead - this file is static and never
   purged. */
.spa-brand-text { display: none; }
@media (min-width: 576px) { .spa-brand-text { display: block; } }

.text-primary { color: #00838c !important; }
.bg-primary { background-color: #00838c !important; }
.border-primary { border-color: #00838c !important; }
.bg-soft-primary { background-color: #e9f7f8 !important; }
.badge.bg-primary { background-color: #00838c !important; }

/* The theme's dark surfaces were a blue-grey navy; the academy's is bluer
   and deeper, and it is the colour the logo sits on. */
.bg-dark, .badge.bg-dark { background-color: #002e4a !important; }

/* The theme's link model is `a{color:inherit}` with a coloured hover, so a
   blanket link colour was the wrong instrument. It repainted every button
   label as well - the markup wraps a <button> in an <a> - and the
   `.btn{color:inherit}` added to correct that then beat
   `.btn-primary{color:#fff}` on load order, giving teal text on a teal
   button. Follow the model instead of fighting it: only the hover, and the
   variables Bootstrap reads. */
:root {
    --bs-link-color: #00838c;
    --bs-link-hover-color: #006e75;
}

a:hover { color: #00838c; }
.top-navbar-link:hover { color: #00838c; }

/* Decoration, where the bright teal belongs. */
.bullet-soft-primary .icon-list-item::before,
.icon-list.bullet-soft-primary li span:first-child { color: #00b8c3; }

hr.brand-rule {
    border: 0;
    height: 3px;
    width: 120px;
    border-radius: 2px;
    background: var(--spa-gradient);
    opacity: 1;
}

/* Toastr's success green is the template's, not anyone's brand. */
.toast-success { background-color: #31b978 !important; }
.toast-info { background-color: #00838c !important; }