/* =====================================================================
   Where to Get Care — Care Navigator
   CareFirst brand theme (layered on top of Bootstrap 4)

   Brand rules applied:
   - CareFirst Blue (Process Blue) is dominant across chrome:
     main header aura line, progress bar, primary buttons, most care headers.
   - Main headline bar is WHITE with solid BLACK text (primary combo).
   - Accents (red / green / yellow) are used sparingly:
       * Semantic Red   -> emergencies (negative)
       * Semantic Green -> free / safe virtual care (positive)
         (red + green appear together only as negative vs. positive)
       * Yellow         -> cautions / disclaimers only
   - Light/Background Grey creates depth between content sections.
   - Black is the primary body copy color.
   ===================================================================== */

:root {
  /* Primary */
  --cf-process-blue: #0099cc; /* CareFirst Blue */
  --cf-dark-blue: #003359;
  --cf-interactive-blue: #086ea1;
  --cf-note-blue: #e0f3fb;

  /* Text */
  --cf-soft-black: #303030;
  --cf-black: #000000;
  --cf-dark-grey: #707070;
  --cf-white: #ffffff;

  /* Grey palette / backgrounds */
  --cf-bg-grey: #f6f6f6;
  --cf-highlight-grey: #f2f2f2;
  --cf-border-grey: #e6e6e6;

  /* Accent */
  --cf-green: #126d2d; /* Semantic Green */
  --cf-red: #ce1d3b; /* Semantic Red */
  --cf-yellow: #ffcc33;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body {
  background-color: var(--cf-white);
  color: var(--cf-black);
}

.care-navigator .card,
.result-card {
  border-color: var(--cf-border-grey);
}

.care-navigator legend,
#questionText {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cf-dark-blue);
}

/* Headings in the tool match the page's h2.font-open / h3.font-open */
.care-navigator h4,
.result-card h4,
main h3.font-open {
  font-family: "Open Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cf-dark-blue);
}

#questionCategory,
#stepLabel {
  color: var(--cf-dark-grey) !important;
}

.card-header{
  background-color: var(--cf-white);
}

/* Progress bar */
.progress-bar {
  background-color: var(--cf-process-blue) !important;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-danger {
  background-color: var(--cf-red);
  border-color: var(--cf-red);
}

.btn-primary:disabled {
  background-color: hsl(195, 100%, 25%) !important;
  border-color: hsl(195, 100%, 25%);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #b0182f;
  border-color: #b0182f;
}

.btn-outline-secondary {
  color: var(--cf-dark-grey);
  border-color: var(--cf-dark-grey);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--cf-dark-grey);
  border-color: var(--cf-dark-grey);
  color: var(--cf-white);
}

/* ---------------------------------------------------------------------
   Badges (care-cost pills)
   --------------------------------------------------------------------- */
.badge-primary {
  background-color: var(--cf-process-blue);
  color: var(--cf-white);
}
.badge-danger {
  background-color: var(--cf-red);
  color: var(--cf-white);
}
.badge-success {
  background-color: var(--cf-green);
  color: var(--cf-white);
}
.badge-info {
  background-color: var(--cf-interactive-blue);
  color: var(--cf-white);
}
.badge-secondary {
  background-color: var(--cf-dark-grey);
  color: var(--cf-white);
}
.badge-warning {
  background-color: var(--cf-yellow);
  color: var(--cf-soft-black);
}

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */
.alert-warning {
  background-color: #fff6dc;
  color: var(--cf-soft-black);
}

.alert-info {
  background-color: var(--cf-note-blue);
  color: var(--cf-black) !important;
}

.alert-danger {
  background-color: #fbe3e7;
  border-color: var(--cf-red);
  color: #8e1226;
}

.alert-secondary,
.alert-light {
  background-color: var(--cf-highlight-grey);
  border-color: var(--cf-border-grey);
  color: var(--cf-soft-black);
}

/* ---------------------------------------------------------------------
   Answer options rendered as large, tappable cards
   --------------------------------------------------------------------- */
.answer-card {
  border: 1px solid var(--cf-border-grey);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  background-color: var(--cf-white);
  color: var(--cf-soft-black);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.answer-card:hover,
.answer-card:focus-within {
  border-color: var(--cf-note-blue);
  box-shadow: 0 0 0 0.15rem rgba(0, 153, 204, 0.2);
}

.answer-card.selected {
  background-color: var(--cf-note-blue);
}

.answer-card input {
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------
   Result presentation
   --------------------------------------------------------------------- */
.result-icon {
  font-size: 1.75rem;
  line-height: 1;
}
.result-cost {
  font-size: 0.95rem;
}

.phone-button-large {
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------------
   Mobile touch-target sizing (WCAG 2.5.5 / 44x44 minimum)
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .answer-card {
    padding: 0.875rem;
  }
  .btn {
    min-height: 44px;
  }
}