/*
 * Ruth Sanders Social Work – brand colours
 * Replaces the Start Bootstrap "Creative" orange (#f4623a) with the logo palette.
 * Load this AFTER css/styles.css.
 *
 *   Navy   #0B4471  – "Ruth Sanders" wordmark (primary)
 *   Blue   #16609A  – left figure
 *   Red    #BE1E34  – right figure / "SOCIAL WORK" (accent, buttons)
 *   Maroon #97162A  – shaded red (hover / pressed)
 */

:root {
    --rssw-navy: #0B4471;
    --rssw-navy-rgb: 11, 68, 113;
    --rssw-blue: #16609A;
    --rssw-blue-rgb: 22, 96, 154;
    --rssw-red: #BE1E34;
    --rssw-red-rgb: 190, 30, 52;
    --rssw-maroon: #97162A;
    --rssw-maroon-dark: #7A1122;

    /* Bootstrap theme variables */
    --bs-primary: var(--rssw-navy);
    --bs-primary-rgb: var(--rssw-navy-rgb);
    --bs-orange: var(--rssw-red);
    --bs-link-color: var(--rssw-blue);
    --bs-link-hover-color: var(--rssw-navy);
}

/* Links */
a { color: var(--rssw-blue); }
a:hover { color: var(--rssw-navy); }

/* Buttons – red, like "SOCIAL WORK" in the logo */
.btn-primary {
    --bs-btn-bg: var(--rssw-red);
    --bs-btn-border-color: var(--rssw-red);
    --bs-btn-hover-bg: var(--rssw-maroon);
    --bs-btn-hover-border-color: var(--rssw-maroon);
    --bs-btn-focus-shadow-rgb: var(--rssw-red-rgb);
    --bs-btn-active-bg: var(--rssw-maroon-dark);
    --bs-btn-active-border-color: var(--rssw-maroon-dark);
    --bs-btn-disabled-bg: var(--rssw-red);
    --bs-btn-disabled-border-color: var(--rssw-red);
}
.btn-outline-primary {
    --bs-btn-color: var(--rssw-red);
    --bs-btn-border-color: var(--rssw-red);
    --bs-btn-hover-bg: var(--rssw-red);
    --bs-btn-hover-border-color: var(--rssw-red);
    --bs-btn-focus-shadow-rgb: var(--rssw-red-rgb);
    --bs-btn-active-bg: var(--rssw-maroon);
    --bs-btn-active-border-color: var(--rssw-maroon);
}
/* White button on the navy About section: navy text, red on hover */
.btn-light { --bs-btn-color: var(--rssw-navy); --bs-btn-hover-color: var(--rssw-red); --bs-btn-active-color: var(--rssw-red); }

/* Short rule under headings */
hr.divider { background-color: var(--rssw-red); }
hr.divider-light { background-color: #fff; }

/* Service icons */
.text-primary { color: var(--rssw-blue) !important; }

/* Navigation */
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:active,
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav.navbar-shrink .navbar-brand:hover,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover { color: var(--rssw-red) !important; }
#mainNav.navbar-shrink .navbar-brand { color: var(--rssw-navy); }

/* Masthead: show the photo in its natural colours (no tint over it).
   A soft shadow keeps the white heading readable on the trees and water. */
header.masthead {
    background: url("../assets/img/bg-masthead.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}
header.masthead h1,
header.masthead h2,
header.masthead p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35);
}
header.masthead .text-white-75 { color: rgba(255, 255, 255, 0.95) !important; }
header.masthead hr.divider { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
/* Keep the navbar links readable over the photo before it turns white */
@media (min-width: 992px) {
    #mainNav:not(.navbar-shrink) .navbar-brand,
    #mainNav:not(.navbar-shrink) .navbar-nav .nav-item .nav-link { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
    #mainNav:not(.navbar-shrink) .brand-mark-white { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
}

/* Form focus rings */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #8AB0CD;
    box-shadow: 0 0 0 0.25rem rgba(var(--rssw-blue-rgb), 0.25);
}
.form-check-input:checked { background-color: var(--rssw-blue); border-color: var(--rssw-blue); }
.btn-close:focus { box-shadow: 0 0 0 0.25rem rgba(var(--rssw-blue-rgb), 0.25); }

/* Required-field asterisk in brand red */
.text-danger { color: var(--rssw-red) !important; }

/* Anything else using Bootstrap's "primary" tints */
.alert-primary, .list-group-item-primary { color: var(--rssw-navy); background-color: #E3ECF4; border-color: #C9DAE8; }
.link-primary { color: var(--rssw-blue) !important; }
.link-primary:hover, .link-primary:focus { color: var(--rssw-navy) !important; }

/* ---------- Logo in the navbar ---------- */
#mainNav .navbar-brand { gap: 0.6rem; }
#mainNav .navbar-brand .brand-mark { height: 44px; width: auto; flex-shrink: 0; transition: opacity 0.2s ease; }
/* Colour mark on the white bar (mobile, and desktop once scrolled) */
#mainNav .brand-mark-white { display: none; }
@media (min-width: 992px) {
    /* Over the navy photo at the top of the page, use the white mark */
    #mainNav:not(.navbar-shrink) .brand-mark-colour { display: none; }
    #mainNav:not(.navbar-shrink) .brand-mark-white { display: inline-block; }
}
@media (max-width: 991.98px) {
    #mainNav .navbar-brand { color: var(--rssw-navy); }
}
@media (max-width: 400px) {
    #mainNav .navbar-brand { font-size: 1rem; gap: 0.45rem; }
    #mainNav .navbar-brand .brand-mark { height: 36px; }
}