/*
 * Customer theme: Humane Society of Polk County, FL
 * Palette sourced from humanesocietyofpolkcounty.org (Divi/WordPress child theme CSS).
 *   Primary blue:    #0267c1  /  #206DB9
 *   Light accent:    #2ea5ec
 *   Brand green:     #26c484
 *   Dark navy:       #132a3d
 *
 * To activate: set "Theme": "FL-PolkCounty" in appsettings.json.
 */

/* ── Bootstrap token overrides ───────────────────────────────────────── */
:root {
    --bs-primary:             #0267c1;
    --bs-primary-rgb:         2, 103, 193;

    --bs-secondary:           #132a3d;
    --bs-secondary-rgb:       19, 42, 61;

    --bs-success:             #26c484;
    --bs-success-rgb:         38, 196, 132;

    --bs-warning:             #ffc107;
    --bs-warning-rgb:         255, 193, 7;

    --bs-danger:              #dc3545;
    --bs-danger-rgb:          220, 53, 69;

    --bs-info:                #2ea5ec;
    --bs-info-rgb:            46, 165, 236;

    /* Softer radius — friendly shelter aesthetic */
    --bs-border-radius:       0.5rem;
    --bs-border-radius-lg:    0.75rem;
    --bs-border-radius-sm:    0.35rem;

    --bs-body-font-family:    system-ui, -apple-system, "Segoe UI", Roboto,
                              "Helvetica Neue", Arial, sans-serif;
    --bs-body-color:          #212529;
    --bs-body-bg:             #f8fbff;

    --bs-link-color:          #0267c1;
    --bs-link-color-rgb:      2, 103, 193;
    --bs-link-hover-color:    #014e93;

    --bs-border-color:        #cce0f5;

    /* ── Navbar ─────────────────────────────────────────────────────────
       The live site uses header background imagery that doesn't port to
       this app; we approximate it with the brand's light-green-cyan accent
       (#7bdcb5) as a flat header band, with dark text for contrast. */
    --app-navbar-bg:          #7bdcb5;
    --app-navbar-border:      #5fc8a0;
    --app-navbar-brand-color: #132a3d;
    --app-navbar-link-color:  #132a3d;

    /* ── Section accent: Owner Contact card header text ─────────────── */
    --app-contact-header-color: #132a3d;

    /* ── Footer ─────────────────────────────────────────────────────── */
    --app-footer-bg:          #132a3d;
    --app-footer-color:       #aed6f1;
}

/* ── Component overrides ─────────────────────────────────────────────── */

/* Navbar: bright blue accent bar at bottom */
header nav.navbar {
    border-bottom: 3px solid #0267c1 !important;
}

/* Navbar toggler on the light header band — dark icon, subtle dark border */
header nav .navbar-toggler {
    border-color: rgba(19,42,61,0.25);
}
header nav .navbar-toggler-icon {
    filter: none;
}

/* Active/hover nav links — blue on the light header */
header nav .nav-link:hover {
    color: #0267c1 !important;
}

/* Primary buttons — Polk County blue */
.btn-primary {
    --bs-btn-bg:               #0267c1;
    --bs-btn-border-color:     #014e93;
    --bs-btn-hover-bg:         #014e93;
    --bs-btn-hover-border-color: #013a6e;
    --bs-btn-active-bg:        #013a6e;
    --bs-btn-color:            #ffffff;
    --bs-btn-hover-color:      #ffffff;
    font-weight: 600;
}

/* Section card: Animal Information (bg-primary bg-opacity-10) */
.card-header.bg-primary.bg-opacity-10 {
    background-color: rgba(2, 103, 193, 0.09) !important;
}

/* Section card: Details & Traits (bg-success bg-opacity-10) */
.card-header.bg-success.bg-opacity-10 {
    background-color: rgba(38, 196, 132, 0.1) !important;
}

/* Section card: Owner Contact (bg-warning bg-opacity-10) */
.card-header.bg-warning.bg-opacity-10 {
    background-color: rgba(2, 103, 193, 0.07) !important;
    border-left-color: #0267c1 !important;
}

/* Form cards: soft blue-tinted shadow */
.card.shadow-sm {
    box-shadow: 0 2px 8px rgba(2, 103, 193, 0.1) !important;
    border-color: #daeaf8 !important;
    border-radius: var(--bs-border-radius) !important;
}

/* Footer */
footer.footer {
    background-color: var(--app-footer-bg) !important;
    border-top-color: #0d1e2b !important;
}
footer.footer a {
    color: var(--app-footer-color) !important;
    text-decoration: underline;
}
footer.footer a:hover {
    color: #ffffff !important;
}