/* ============================================================
   Cincinnati Insurance Companies — Bootstrap 5 Theme
   Based on Brand Guidelines
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT IMPORTS
      Replace src URLs with your licensed font file paths
      or web font service embed code.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'IvyOra Display';
  src: url('../fonts/IvyOraDisplay-Light.woff2') format('woff2'),
       url('../fonts/IvyOraDisplay-Light.woff')  format('woff');
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'IvyOra Display';
  src: url('../fonts/IvyOraDisplay-Medium.woff2') format('woff2'),
       url('../fonts/IvyOraDisplay-Medium.woff')  format('woff');
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('../fonts/UntitledSans-Regular.woff2') format('woff2'),
       url('../fonts/UntitledSans-Regular.woff')  format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('../fonts/UntitledSans-RegularItalic.woff2') format('woff2'),
       url('../fonts/UntitledSans-RegularItalic.woff')  format('woff');
  font-weight: 400;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('../fonts/UntitledSans-Medium.woff2') format('woff2'),
       url('../fonts/UntitledSans-Medium.woff')  format('woff');
  font-weight: 500;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Untitled Sans';
  src: url('../fonts/UntitledSans-MediumItalic.woff2') format('woff2'),
       url('../fonts/UntitledSans-MediumItalic.woff')  format('woff');
  font-weight: 500;
  font-style:  italic;
  font-display: swap;
}


/* ------------------------------------------------------------
   2. BRAND TOKENS — CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {

  /* ── Brand palette ───────────────────────────────────────── */
  --cic-white:            #FFFFFF;
  --cic-blue:             #004D99;
  --cic-bright-blue:      #0165FC;
  --cic-private-blue:     #00264D;
  --cic-dark-grey:        #475A6B;
  --cic-darkest-grey:     #303F4E;
  --cic-light-blue:       #99CCFF;
  --cic-off-blue:         #E6F2FF;
  --cic-light-grey:       #E1E6EA;
  --cic-medium-grey:      #A0B3C0;

  /* ── RGB variants (for rgba() usage) ────────────────────── */
  --cic-blue-rgb:          0,  77, 153;
  --cic-bright-blue-rgb:   1, 101, 252;
  --cic-private-blue-rgb:  0,  38,  77;
  --cic-dark-grey-rgb:    71,  90, 107;
  --cic-darkest-grey-rgb: 48,  63,  78;
  --cic-light-blue-rgb:  153, 204, 255;
  --cic-off-blue-rgb:    230, 242, 255;
  --cic-light-grey-rgb:  225, 230, 234;
  --cic-medium-grey-rgb: 160, 179, 192;

  /* ── Font stacks ─────────────────────────────────────────── */
  --cic-font-display: 'IvyOra Display', 'Times New Roman', Times, serif;
  --cic-font-sans:    'Untitled Sans', Arial, Helvetica, sans-serif;

  /* ── Bootstrap core overrides ────────────────────────────── */

  /* Color roles */
  --bs-blue:                  var(--cic-blue);
  --bs-primary:               var(--cic-blue);
  --bs-primary-rgb:           var(--cic-blue-rgb);
  --bs-secondary:             var(--cic-dark-grey);
  --bs-secondary-rgb:         var(--cic-dark-grey-rgb);
  --bs-info:                  var(--cic-bright-blue);
  --bs-info-rgb:              var(--cic-bright-blue-rgb);
  --bs-light:                 var(--cic-off-blue);
  --bs-light-rgb:             var(--cic-off-blue-rgb);
  --bs-dark:                  var(--cic-private-blue);
  --bs-dark-rgb:              var(--cic-private-blue-rgb);

  /* Links */
  --bs-link-color:            var(--cic-blue);
  --bs-link-hover-color:      var(--cic-bright-blue);
  --bs-link-color-rgb:        var(--cic-blue-rgb);

  /* Body */
  --bs-body-font-family:      var(--cic-font-sans);
  --bs-body-font-size:        1rem;
  --bs-body-font-weight:      400;
  --bs-body-line-height:      1.25;
  --bs-body-color:            var(--cic-private-blue);
  --bs-body-bg:               var(--cic-white);

  /* Headings */
  --bs-heading-color:         var(--cic-private-blue);

  /* Borders */
  --bs-border-color:          var(--cic-light-grey);
  --bs-border-radius:         0.25rem;
  --bs-border-radius-sm:      0.125rem;
  --bs-border-radius-lg:      0.375rem;
  --bs-border-radius-xl:      0.5rem;
  --bs-border-radius-pill:    50rem;

  /* Focus ring */
  --bs-focus-ring-color:      rgba(var(--cic-bright-blue-rgb), 0.35);

  /* Card */
  --bs-card-border-color:     var(--cic-light-grey);
  --bs-card-bg:               var(--cic-white);
}


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
body {
  font-family:      var(--cic-font-sans);
  font-weight:      400;
  line-height:      1.25;
  color:            var(--cic-private-blue);
  background-color: var(--cic-white);
  letter-spacing:   0;
}

/* Large headlines — IvyOra Display Light */
h1, .h1,
h2, .h2 {
  font-family:    var(--cic-font-display);
  font-weight:    300;   /* Light — only for large sizes */
  line-height:    1.15;  /* Required; IvyOra ascenders/descenders are very long */
  letter-spacing: 0;
  color:          var(--cic-private-blue);
}

/* Medium headlines — IvyOra Display Medium */
/* Smaller headlines need more weight due to high contrast */
h3, .h3,
h4, .h4 {
  font-family:    var(--cic-font-display);
  font-weight:    500;   /* Medium — mandatory for smaller IvyOra sizes */
  line-height:    1.15;
  letter-spacing: 0;
  color:          var(--cic-private-blue);
}

/* Small headlines and body — Untitled Sans */
h5, .h5,
h6, .h6 {
  font-family:    var(--cic-font-sans);
  font-weight:    500;
  line-height:    1.25;
  letter-spacing: 0;
  color:          var(--cic-private-blue);
}

/* Bootstrap display classes */
.display-1, .display-2 {
  font-family:    var(--cic-font-display);
  font-weight:    300;
  line-height:    1.15;
  letter-spacing: 0;
}

.display-3, .display-4,
.display-5, .display-6 {
  font-family:    var(--cic-font-display);
  font-weight:    500;
  line-height:    1.15;
  letter-spacing: 0;
}

.lead {
  font-family:  var(--cic-font-sans);
  font-weight:  400;
  font-size:    1.125rem;
  line-height:  1.25;
  color:        var(--cic-dark-grey);
}

a {
  color:           var(--cic-blue);
  text-decoration: underline;
}
a:hover {
  color: var(--cic-bright-blue);
}

hr {
  border-color: var(--cic-light-grey);
  opacity:      1;
}


/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */
.btn {
  font-family:    var(--cic-font-sans);
  font-weight:    500;
  letter-spacing: 0;
}

/* Primary — Blue */
.btn-primary {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--cic-blue);
  --bs-btn-border-color:       var(--cic-blue);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-private-blue);
  --bs-btn-hover-border-color: var(--cic-private-blue);
  --bs-btn-active-bg:          var(--cic-private-blue);
  --bs-btn-focus-shadow-rgb:   var(--cic-blue-rgb);
}

/* Secondary — Dark Grey */
.btn-secondary {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--cic-dark-grey);
  --bs-btn-border-color:       var(--cic-dark-grey);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-darkest-grey);
  --bs-btn-hover-border-color: var(--cic-darkest-grey);
  --bs-btn-active-bg:          var(--cic-darkest-grey);
}

/* Info / Accent CTA — Bright Blue (use sparingly) */
.btn-info {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--cic-bright-blue);
  --bs-btn-border-color:       var(--cic-bright-blue);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-blue);
  --bs-btn-hover-border-color: var(--cic-blue);
  --bs-btn-active-bg:          var(--cic-blue);
}

/* Dark — Private Client Blue */
.btn-dark {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 var(--cic-private-blue);
  --bs-btn-border-color:       var(--cic-private-blue);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-darkest-grey);
  --bs-btn-hover-border-color: var(--cic-darkest-grey);
}

/* Light — Off Blue */
.btn-light {
  --bs-btn-color:              var(--cic-private-blue);
  --bs-btn-bg:                 var(--cic-off-blue);
  --bs-btn-border-color:       var(--cic-light-blue);
  --bs-btn-hover-color:        var(--cic-private-blue);
  --bs-btn-hover-bg:           var(--cic-light-blue);
  --bs-btn-hover-border-color: var(--cic-light-blue);
}

/* Outline variants */
.btn-outline-primary {
  --bs-btn-color:              var(--cic-blue);
  --bs-btn-border-color:       var(--cic-blue);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-blue);
  --bs-btn-hover-border-color: var(--cic-blue);
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--cic-blue);
}

.btn-outline-secondary {
  --bs-btn-color:              var(--cic-dark-grey);
  --bs-btn-border-color:       var(--cic-dark-grey);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-dark-grey);
  --bs-btn-hover-border-color: var(--cic-dark-grey);
}

.btn-outline-dark {
  --bs-btn-color:              var(--cic-private-blue);
  --bs-btn-border-color:       var(--cic-private-blue);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--cic-private-blue);
  --bs-btn-hover-border-color: var(--cic-private-blue);
}


/* ------------------------------------------------------------
   5. NAVBAR
   ------------------------------------------------------------ */
.navbar-brand {
  font-family:    var(--cic-font-display);
  font-weight:    500;
  letter-spacing: 0;
}

/* Primary dark navbar (most common) */
.navbar-dark,
.navbar-cic-primary {
  background-color:           var(--cic-blue) !important;
  --bs-navbar-color:          rgba(255,255,255,0.85);
  --bs-navbar-hover-color:    #fff;
  --bs-navbar-active-color:   #fff;
  --bs-navbar-brand-color:    #fff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,0.3);
}

.navbar-dark .nav-link,
.navbar-cic-primary .nav-link {
  font-family:  var(--cic-font-sans);
  font-weight:  400;
  letter-spacing: 0;
}

.navbar-dark .nav-link.active,
.navbar-cic-primary .nav-link.active {
  font-weight: 500;
  color:       #fff;
}

/* Private Client deep-blue variant */
.navbar-cic-private {
  background-color: var(--cic-private-blue) !important;
}

/* Light navbar */
.navbar-light,
.navbar-cic-light {
  background-color: var(--cic-white) !important;
  border-bottom:    1px solid var(--cic-light-grey);
  --bs-navbar-color:         var(--cic-blue);
  --bs-navbar-hover-color:   var(--cic-bright-blue);
  --bs-navbar-active-color:  var(--cic-blue);
  --bs-navbar-brand-color:   var(--cic-blue);
}

.navbar-light .nav-link,
.navbar-cic-light .nav-link {
  font-family:  var(--cic-font-sans);
  font-weight:  400;
}

.navbar-light .nav-link.active,
.navbar-cic-light .nav-link.active {
  font-weight: 500;
  color:       var(--cic-blue);
}


/* ------------------------------------------------------------
   6. CARDS
   ------------------------------------------------------------ */
.card {
  border-color:     var(--cic-light-grey);
  border-radius:    0.25rem;
  background-color: var(--cic-white);
}

.card-header {
  background-color: var(--cic-off-blue);
  border-bottom:    1px solid var(--cic-light-grey);
  font-family:      var(--cic-font-sans);
  font-weight:      500;
  color:            var(--cic-private-blue);
}

.card-title {
  font-family:    var(--cic-font-display);
  font-weight:    500;
  line-height:    1.15;
  letter-spacing: 0;
  color:          var(--cic-private-blue);
}

.card-subtitle {
  font-family: var(--cic-font-sans);
  font-weight: 400;
  color:       var(--cic-dark-grey);
}

.card-text {
  font-family: var(--cic-font-sans);
  font-weight: 400;
  line-height: 1.25;
}

.card-footer {
  background-color: var(--cic-light-grey);
  border-top:       1px solid var(--cic-light-grey);
}

/* Blue card */
.card-cic-blue {
  background-color: var(--cic-blue);
  border-color:     var(--cic-blue);
  color:            #fff;
}
.card-cic-blue .card-title,
.card-cic-blue .card-text,
.card-cic-blue .card-subtitle { color: #fff; }
.card-cic-blue .card-header {
  background-color:  var(--cic-private-blue);
  border-bottom-color: rgba(255,255,255,0.15);
  color: #fff;
}

/* Off-Blue card */
.card-cic-offblue {
  background-color: var(--cic-off-blue);
  border-color:     var(--cic-light-blue);
}

/* Dark card */
.card-cic-dark {
  background-color: var(--cic-private-blue);
  border-color:     var(--cic-private-blue);
  color:            #fff;
}
.card-cic-dark .card-title,
.card-cic-dark .card-text,
.card-cic-dark .card-subtitle { color: #fff; }


/* ------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------ */
.form-label {
  font-family:    var(--cic-font-sans);
  font-weight:    500;
  color:          var(--cic-private-blue);
  letter-spacing: 0;
}

.form-control,
.form-select {
  font-family:   var(--cic-font-sans);
  font-weight:   400;
  color:         var(--cic-private-blue);
  border-color:  var(--cic-medium-grey);
  border-radius: 0.25rem;
  line-height:   1.25;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cic-blue);
  box-shadow:   0 0 0 0.25rem rgba(var(--cic-blue-rgb), 0.25);
  color:        var(--cic-private-blue);
}

.form-control::placeholder {
  color:       var(--cic-medium-grey);
  font-weight: 400;
}

.form-check-input:checked {
  background-color: var(--cic-blue);
  border-color:     var(--cic-blue);
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--cic-blue-rgb), 0.25);
}

.form-text {
  font-family: var(--cic-font-sans);
  font-size:   0.875rem;
  color:       var(--cic-dark-grey);
}

.invalid-feedback { color: #dc3545; }
.valid-feedback   { color: #198754; }


/* ------------------------------------------------------------
   8. TABLES
   ------------------------------------------------------------ */
.table {
  --bs-table-color:        var(--cic-private-blue);
  --bs-table-bg:           var(--cic-white);
  --bs-table-border-color: var(--cic-light-grey);
  font-family:             var(--cic-font-sans);
  line-height:             1.25;
}

.table thead th {
  font-family:      var(--cic-font-sans);
  font-weight:      500;
  color:            var(--cic-private-blue);
  background-color: var(--cic-off-blue);
  border-bottom:    2px solid var(--cic-blue);
  letter-spacing:   0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--cic-off-blue);
  color:            var(--cic-private-blue);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--cic-light-grey);
  color:            var(--cic-private-blue);
}

.table-primary {
  --bs-table-color:        #fff;
  --bs-table-bg:           var(--cic-blue);
  --bs-table-border-color: var(--cic-private-blue);
}

.table-light {
  --bs-table-color:        var(--cic-private-blue);
  --bs-table-bg:           var(--cic-off-blue);
  --bs-table-border-color: var(--cic-light-grey);
}

.table-dark {
  --bs-table-color:        #fff;
  --bs-table-bg:           var(--cic-private-blue);
  --bs-table-border-color: var(--cic-darkest-grey);
}


/* ------------------------------------------------------------
   9. BADGES
   ------------------------------------------------------------ */
.badge {
  font-family:    var(--cic-font-sans);
  font-weight:    500;
  letter-spacing: 0;
}

.badge.bg-primary   { background-color: var(--cic-blue)          !important; }
.badge.bg-secondary { background-color: var(--cic-dark-grey)     !important; }
.badge.bg-info      { background-color: var(--cic-bright-blue)   !important; color: #fff !important; }
.badge.bg-dark      { background-color: var(--cic-private-blue)  !important; }
.badge.bg-light     { background-color: var(--cic-off-blue)      !important; color: var(--cic-private-blue) !important; }


/* ------------------------------------------------------------
   10. ALERTS
   ------------------------------------------------------------ */
.alert {
  font-family: var(--cic-font-sans);
  line-height: 1.25;
}

.alert-primary {
  --bs-alert-color:        var(--cic-private-blue);
  --bs-alert-bg:           var(--cic-off-blue);
  --bs-alert-border-color: var(--cic-light-blue);
}

.alert-secondary {
  --bs-alert-color:        var(--cic-private-blue);
  --bs-alert-bg:           var(--cic-light-grey);
  --bs-alert-border-color: var(--cic-medium-grey);
}

.alert-info {
  --bs-alert-color:        var(--cic-private-blue);
  --bs-alert-bg:           var(--cic-off-blue);
  --bs-alert-border-color: var(--cic-bright-blue);
}

.alert-dark {
  --bs-alert-color:        #fff;
  --bs-alert-bg:           var(--cic-private-blue);
  --bs-alert-border-color: var(--cic-darkest-grey);
}


/* ------------------------------------------------------------
   11. PAGINATION
   ------------------------------------------------------------ */
.pagination {
  --bs-pagination-color:               var(--cic-blue);
  --bs-pagination-bg:                  var(--cic-white);
  --bs-pagination-border-color:        var(--cic-light-grey);
  --bs-pagination-hover-color:         #fff;
  --bs-pagination-hover-bg:            var(--cic-blue);
  --bs-pagination-hover-border-color:  var(--cic-blue);
  --bs-pagination-active-color:        #fff;
  --bs-pagination-active-bg:           var(--cic-blue);
  --bs-pagination-active-border-color: var(--cic-blue);
  --bs-pagination-disabled-color:      var(--cic-medium-grey);
  --bs-pagination-disabled-bg:         var(--cic-white);
  font-family: var(--cic-font-sans);
}


/* ------------------------------------------------------------
   12. TABS & NAV
   ------------------------------------------------------------ */
.nav-tabs {
  --bs-nav-tabs-border-color:             var(--cic-light-grey);
  --bs-nav-tabs-link-active-color:        var(--cic-blue);
  --bs-nav-tabs-link-active-bg:           var(--cic-white);
  --bs-nav-tabs-link-active-border-color: var(--cic-light-grey) var(--cic-light-grey) var(--cic-white);
  font-family: var(--cic-font-sans);
}

.nav-tabs .nav-link         { color: var(--cic-dark-grey);  font-weight: 400; }
.nav-tabs .nav-link:hover   { color: var(--cic-blue); }
.nav-tabs .nav-link.active  { color: var(--cic-blue);       font-weight: 500; }

.nav-pills {
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg:    var(--cic-blue);
  font-family: var(--cic-font-sans);
}

.nav-pills .nav-link        { color: var(--cic-blue); }
.nav-pills .nav-link:hover  { background-color: var(--cic-off-blue); color: var(--cic-blue); }


/* ------------------------------------------------------------
   13. DROPDOWNS
   ------------------------------------------------------------ */
.dropdown-menu {
  --bs-dropdown-border-color:      var(--cic-light-grey);
  --bs-dropdown-link-color:        var(--cic-private-blue);
  --bs-dropdown-link-hover-color:  var(--cic-private-blue);
  --bs-dropdown-link-hover-bg:     var(--cic-off-blue);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg:    var(--cic-blue);
  --bs-dropdown-header-color:      var(--cic-dark-grey);
  font-family:    var(--cic-font-sans);
  border-radius:  0.25rem;
}

.dropdown-item          { font-weight: 400; letter-spacing: 0; }
.dropdown-item.active,
.dropdown-item:active   { background-color: var(--cic-blue); color: #fff; }

.dropdown-header {
  font-weight:    500;
  font-size:      0.75rem;
  color:          var(--cic-dark-grey);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dropdown-divider { border-color: var(--cic-light-grey); }


/* ------------------------------------------------------------
   14. ACCORDION
   ------------------------------------------------------------ */
.accordion {
  --bs-accordion-border-color:          var(--cic-light-grey);
  --bs-accordion-btn-color:             var(--cic-private-blue);
  --bs-accordion-btn-bg:                var(--cic-white);
  --bs-accordion-btn-active-color:      var(--cic-blue);
  --bs-accordion-btn-active-bg:         var(--cic-off-blue);
  --bs-accordion-btn-icon-color:        var(--cic-blue);
  --bs-accordion-btn-active-icon-color: var(--cic-blue);
  --bs-accordion-active-color:          var(--cic-private-blue);
  --bs-accordion-active-bg:             var(--cic-off-blue);
  font-family: var(--cic-font-sans);
}

.accordion-button           { font-weight: 500; letter-spacing: 0; }
.accordion-button:focus     { box-shadow: 0 0 0 0.25rem rgba(var(--cic-blue-rgb), 0.25); }
.accordion-button:not(.collapsed) {
  color:            var(--cic-blue);
  background-color: var(--cic-off-blue);
  box-shadow:       inset 0 -1px 0 var(--cic-light-blue);
}


/* ------------------------------------------------------------
   15. MODALS
   ------------------------------------------------------------ */
.modal-header {
  background-color: var(--cic-blue);
  border-bottom:    none;
}

.modal-title {
  font-family:    var(--cic-font-display);
  font-weight:    500;
  line-height:    1.15;
  letter-spacing: 0;
  color:          #fff;
}

.modal-header .btn-close { filter: invert(1); }

.modal-body {
  font-family: var(--cic-font-sans);
  line-height: 1.25;
  color:       var(--cic-private-blue);
}

.modal-footer {
  border-top:       1px solid var(--cic-light-grey);
  background-color: var(--cic-off-blue);
}


/* ------------------------------------------------------------
   16. TOOLTIPS & POPOVERS
   ------------------------------------------------------------ */
.tooltip {
  --bs-tooltip-bg:    var(--cic-private-blue);
  --bs-tooltip-color: #fff;
  font-family:        var(--cic-font-sans);
  font-size:          0.8125rem;
}

.popover {
  --bs-popover-border-color:    var(--cic-light-grey);
  --bs-popover-header-bg:       var(--cic-blue);
  --bs-popover-header-color:    #fff;
  --bs-popover-body-color:      var(--cic-private-blue);
  font-family:                  var(--cic-font-sans);
}

.popover-header { font-weight: 500; }


/* ------------------------------------------------------------
   17. BREADCRUMBS
   ------------------------------------------------------------ */
.breadcrumb {
  font-family: var(--cic-font-sans);
  font-size:   0.875rem;
}

.breadcrumb-item a          { color: var(--cic-blue); text-decoration: none; }
.breadcrumb-item a:hover    { color: var(--cic-bright-blue); text-decoration: underline; }
.breadcrumb-item.active     { color: var(--cic-dark-grey); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cic-medium-grey); }


/* ------------------------------------------------------------
   18. LIST GROUPS
   ------------------------------------------------------------ */
.list-group-item {
  font-family:  var(--cic-font-sans);
  line-height:  1.25;
  color:        var(--cic-private-blue);
  border-color: var(--cic-light-grey);
}

.list-group-item.active {
  background-color: var(--cic-blue);
  border-color:     var(--cic-blue);
  color:            #fff;
}

.list-group-item-action:hover {
  background-color: var(--cic-off-blue);
  color:            var(--cic-blue);
}

.list-group-item-primary {
  background-color: var(--cic-off-blue);
  color:            var(--cic-private-blue);
}


/* ------------------------------------------------------------
   19. PROGRESS BARS
   ------------------------------------------------------------ */
.progress {
  background-color: var(--cic-light-grey);
  border-radius:    0.25rem;
}

.progress-bar {
  background-color: var(--cic-blue);
  font-family:      var(--cic-font-sans);
  font-weight:      500;
}

.progress-bar.bg-info      { background-color: var(--cic-bright-blue)  !important; }
.progress-bar.bg-secondary { background-color: var(--cic-dark-grey)    !important; }
.progress-bar.bg-dark      { background-color: var(--cic-private-blue) !important; }


/* ------------------------------------------------------------
   20. SECTION HELPERS
   ------------------------------------------------------------ */

/* Hero — Blue */
.section-cic-hero {
  background-color: var(--cic-blue);
  color:            #fff;
  padding:          4rem 0;
}
.section-cic-hero h1,
.section-cic-hero h2      { color: #fff; }
.section-cic-hero p       { color: rgba(255,255,255,0.9); }
.section-cic-hero .lead   { color: rgba(255,255,255,0.85); }

/* Off-Blue panel */
.section-cic-offblue {
  background-color: var(--cic-off-blue);
  color:            var(--cic-private-blue);
  padding:          3rem 0;
}

/* Deep dark panel — Private Client */
.section-cic-dark {
  background-color: var(--cic-private-blue);
  color:            #fff;
  padding:          3rem 0;
}
.section-cic-dark h1,
.section-cic-dark h2,
.section-cic-dark h3,
.section-cic-dark h4      { color: #fff; }
.section-cic-dark p       { color: rgba(255,255,255,0.9); }

/* Light grey panel */
.section-cic-light {
  background-color: var(--cic-light-grey);
  color:            var(--cic-private-blue);
  padding:          3rem 0;
}

/* White panel */
.section-cic-white {
  background-color: var(--cic-white);
  color:            var(--cic-private-blue);
  padding:          3rem 0;
}


/* ------------------------------------------------------------
   21. FOOTER
   ------------------------------------------------------------ */
.footer-cic-primary {
  background-color: var(--cic-private-blue);
  color:            #fff;
  padding:          2.5rem 0;
  font-family:      var(--cic-font-sans);
}

.footer-cic-primary a           { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-cic-primary a:hover     { color: #fff; text-decoration: underline; }
.footer-cic-primary h5,
.footer-cic-primary h6          { font-family: var(--cic-font-sans); font-weight: 500; color: #fff; }

.footer-cic-secondary {
  background-color: var(--cic-darkest-grey);
  color:            rgba(255,255,255,0.6);
  font-family:      var(--cic-font-sans);
  font-size:        0.875rem;
  padding:          1rem 0;
}
.footer-cic-secondary a         { color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-cic-secondary a:hover   { color: #fff; }


/* ------------------------------------------------------------
   22. BRAND BACKGROUND UTILITIES
   ------------------------------------------------------------ */
.bg-cic-blue          { background-color: var(--cic-blue)          !important; }
.bg-cic-bright-blue   { background-color: var(--cic-bright-blue)   !important; }
.bg-cic-private-blue  { background-color: var(--cic-private-blue)  !important; }
.bg-cic-dark-grey     { background-color: var(--cic-dark-grey)     !important; }
.bg-cic-darkest-grey  { background-color: var(--cic-darkest-grey)  !important; }
.bg-cic-light-blue    { background-color: var(--cic-light-blue)    !important; }
.bg-cic-off-blue      { background-color: var(--cic-off-blue)      !important; }
.bg-cic-light-grey    { background-color: var(--cic-light-grey)    !important; }
.bg-cic-medium-grey   { background-color: var(--cic-medium-grey)   !important; }
.bg-cic-white         { background-color: var(--cic-white)         !important; }


/* ------------------------------------------------------------
   23. BRAND TEXT COLOR UTILITIES
   ------------------------------------------------------------ */
.text-cic-blue          { color: var(--cic-blue)          !important; }
.text-cic-bright-blue   { color: var(--cic-bright-blue)   !important; }
.text-cic-private-blue  { color: var(--cic-private-blue)  !important; }
.text-cic-dark-grey     { color: var(--cic-dark-grey)     !important; }
.text-cic-darkest-grey  { color: var(--cic-darkest-grey)  !important; }
.text-cic-light-blue    { color: var(--cic-light-blue)    !important; }
.text-cic-off-blue      { color: var(--cic-off-blue)      !important; }
.text-cic-light-grey    { color: var(--cic-light-grey)    !important; }
.text-cic-medium-grey   { color: var(--cic-medium-grey)   !important; }
.text-cic-white         { color: var(--cic-white)         !important; }


/* ------------------------------------------------------------
   24. BRAND BORDER UTILITIES
   ------------------------------------------------------------ */
.border-cic-blue          { border-color: var(--cic-blue)          !important; }
.border-cic-bright-blue   { border-color: var(--cic-bright-blue)   !important; }
.border-cic-private-blue  { border-color: var(--cic-private-blue)  !important; }
.border-cic-dark-grey     { border-color: var(--cic-dark-grey)     !important; }
.border-cic-light-grey    { border-color: var(--cic-light-grey)    !important; }
.border-cic-medium-grey   { border-color: var(--cic-medium-grey)   !important; }
.border-cic-off-blue      { border-color: var(--cic-off-blue)      !important; }
.border-cic-light-blue    { border-color: var(--cic-light-blue)    !important; }


/* ------------------------------------------------------------
   25. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------ */
.font-cic-display    { font-family: var(--cic-font-display) !important; }
.font-cic-sans       { font-family: var(--cic-font-sans)    !important; }

/* Headline weights */
.fw-display-light  { font-family: var(--cic-font-display) !important; font-weight: 300 !important; }
.fw-display-medium { font-family: var(--cic-font-display) !important; font-weight: 500 !important; }

/* Line heights per brand spec */
.lh-cic-headline { line-height: 1.15 !important; }
.lh-cic-body     { line-height: 1.25 !important; }

/* ============================================================
   END — Cincinnati Insurance Companies Bootstrap 5 Theme
   ============================================================ */