/* RedRoverIQ Knowledge Base brand overrides
   Based on existing KB brand override patterns used by Upstream/Pinnacle,
   adapted to the RedRoverIQ palette and typography. */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root{
    --rr-font: "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --rr-text: rgb(29, 38, 55);
    --rr-text-muted: rgba(29, 38, 55, .70);
    --rr-primary: rgb(46, 51, 87);
    --rr-primary-hover: rgb(37, 41, 71);
    --rr-primary-active: rgb(30, 33, 57);
    --rr-red: #bf0500;
    --rr-red-hover: #a30400;
    --rr-red-active: #890400;
    --rr-success: #2d8a57;
    --rr-info: #2f5f9f;
    --rr-warning: #d9a21b;
    --rr-surface: #ffffff;
    --rr-bg: #f8f8f8;
    --rr-border: #7f8594;
    --rr-border-dark: #5f6676;
    --rr-input-border: #aaaaaa;
    --rr-input-border-hover: #0a0a0a;
}

/* Base */
html,
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.navbar,
.card,
.list-group-item,
p,
li,
span,
small,
h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--rr-font);
}

body{
    color: var(--rr-text);
    background-color: var(--rr-bg);
}

a{
    color: rgba(191, 5, 0, .92);
}
a:hover,
a:focus{
    color: var(--rr-red);
}

.text-primary,
header .btn-primary{
    color: var(--rr-primary) !important;
}
.text-secondary{
    color: var(--rr-text) !important;
}
.text-success{
    color: var(--rr-success) !important;
}
.text-info{
    color: var(--rr-info) !important;
}
.text-warning{
    color: var(--rr-warning) !important;
}
.text-danger,
i.text-secondary,
.bi.text-secondary{
    color: var(--rr-red) !important;
}

/* Header / nav */
header{
    background-color: rgba(46, 51, 87, .08);
    border-bottom: 1px solid rgba(46, 51, 87, .10);
}

.navbar .btn-secondary.ms-lg-4{
    background-color: var(--rr-primary);
    border-color: var(--rr-primary);
    color: #fff;
    border-radius: 99px;
}
.navbar .btn-secondary.ms-lg-4:hover,
.navbar .btn-secondary.ms-lg-4:focus{
    background-color: var(--rr-primary-hover);
    border-color: var(--rr-primary-hover);
    color: #fff;
}
.navbar .btn-secondary.ms-lg-4:active{
    background-color: var(--rr-primary-active);
    border-color: var(--rr-primary-active);
    color: #fff;
}

/* Sidebar / list states */
.list-group-item.active{
    background-color: rgba(46, 51, 87, .92);
    border-color: rgba(46, 51, 87, .92);
    color: #fff;
}
.list-group-item.active:hover{
    background-color: var(--rr-primary);
    border-color: var(--rr-primary);
    color: #fff;
}

/* Buttons */
.btn{
    color: var(--rr-text);
    border-color: var(--rr-border);
    background-color: #fff;
    border-radius: 99px;
    font-weight: 500;
    box-shadow: none;
}

.btn:hover,
.btn:focus{
    border-color: var(--rr-border-dark);
    background-color: #fff;
    color: var(--rr-text);
}

.btn-primary{
    color: #fff;
    background-color: var(--rr-primary);
    border-color: var(--rr-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:not(.btn-check)+.btn:active{
    color: #fff;
    border-color: var(--rr-primary-hover);
    background-color: var(--rr-primary-hover);
}

.btn-secondary{
    color: var(--rr-text);
    border-color: var(--rr-border);
    background-color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus{
    color: var(--rr-text);
    border-color: var(--rr-border-dark);
    background-color: #fff;
}
.btn-secondary:active{
    color: var(--rr-text);
    border-color: var(--rr-border-dark);
    background-color: #fff;
}

.btn-success{
    color: #fff;
    border-color: var(--rr-success);
    background-color: var(--rr-success);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active{
    color: #fff;
    border-color: #256f46;
    background-color: #256f46;
}

.btn-danger{
    color: #fff;
    border-color: var(--rr-red);
    background-color: var(--rr-red);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active{
    color: #fff;
    border-color: var(--rr-red-hover);
    background-color: var(--rr-red-hover);
}

/* Translucent brand blocks */
.bg-primary-trans{
    background-color: rgba(46, 51, 87, .55);
}

/* Cards and form controls */
.card,
.form-control{
    border-radius: 4px;
}
.form-control{
    color: var(--rr-text);
    border-color: var(--rr-input-border);
}
.form-control:hover{
    border-color: var(--rr-input-border-hover);
}
.form-control:focus{
    border-color: var(--rr-input-border-hover);
    box-shadow: 0 0 0 .2rem rgba(46, 51, 87, .08);
}

/* Validation */
.is-valid{
    border-color: var(--rr-success) !important;
}
.is-invalid{
    border-color: var(--rr-red) !important;
}

/* Breadcrumbs */
.fbc-page .fbc-wrap .fbc-items li a{
    color: var(--rr-red);
}

/* Knowledge cards */
a.card{
    border-radius: 4px;
    background-color: #f7f8fa;
    box-shadow: 0 5px 10px rgb(130 140 160 / 18%);
    border: 1px solid rgba(46, 51, 87, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgb(130 140 160 / 22%);
}

/* Hero background */
.bg-image{
    background-image: linear-gradient(rgba(46, 51, 87, .78), rgba(46, 51, 87, .78)), url("../img/redrover-bg.jpg");
    background-size: cover;
    background-position: center center;
}

/* Headings */
h1, h2, h3, h4, h5{
    color: var(--rr-text);
    font-weight: 700;
}
.home main, .blog main {
    background-color: #fff;
}