/* /styles/gratitude.css */
/* Gratitude module — button system (shape, gaps, spacing, states)
   Uses existing tokens set in pixel-overrides.css:
   - --brand-gold (#b08a48)
   - Montserrat font family, black text, white background
   Apply by wrapping the Gratitude UI in a container with class "gratitude".
*/

/* ===== Scope root container ===== */
.gratitude {
  /* inherit theme tokens from pixel-overrides */
  font-family: var(--bs-body-font-family, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  color: var(--bs-body-color, #000);
}

/* ===== Button layout rules (gaps + wrapping) ===== */
.gratitude .gratitude__actions,
.gratitude .btn-group,
.gratitude .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;             /* global gap between buttons */
}

/* Remove margin chaining; rely on gap for consistent spacing */
.gratitude .btn + .btn {
  margin-left: 0 !important;
}

/* ===== Pill spec (shape, sizing, neutral base) ===== */
.gratitude .btn,
.gratitude .nav-link.btn {
  /* Hard-center and align icons/text uniformly */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;

  /* Thin pill sizing — matches your small secondary pills */
  padding: 0.18rem 0.48rem !important;
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  border-radius: 0.5rem !important;
  
  /* FIX: Explicitly set font weight to 400 */
  font-weight: 400 !important;

  /* Visuals — kill Pixel blue, enforce gold-outline look */
  background: #fff !important;
  color: #000 !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Icon alignment inside buttons (Font Awesome, etc.) */
.gratitude .btn > i,
.gratitude .btn > svg,
.gratitude .btn > span.fa,
.gratitude .btn > span.far,
.gratitude .btn > span.fas {
  line-height: 1;
  display: inline-block;
}

/* ===== Primary variant (solid gold) ===== */
.gratitude .btn-primary,
.gratitude .nav-link.btn.btn-primary {
  background-color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  color: #fff !important;
}

/* Outline variant — always gold */
.gratitude .btn-outline-primary,
.gratitude .nav-link.btn.btn-outline-primary {
  color: var(--brand-gold, #b08a48) !important;
  border-color: var(--brand-gold, #b08a48) !important;
  background-color: transparent !important;
}

/* Hover / focus states (both solid and outline keep gold system) */
.gratitude .btn:hover,
.gratitude .btn:focus,
.gratitude .btn:active,
.gratitude .btn:focus-visible,
.gratitude .btn-outline-primary:hover,
.gratitude .btn-outline-primary:focus {
  background-color: #f6efe4 !important;                   /* soft cream hover */
  color: #000 !important;
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.18) !important;
  outline: none !important;
}

/* Solid gold hover state gets a slightly darker gold */
.gratitude .btn-primary:hover,
.gratitude .btn-primary:focus,
.gratitude .btn-primary:active,
.gratitude .btn-primary:focus-visible {
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
}

/* Disabled state — keep shapes; mute interactions */
.gratitude .btn:disabled,
.gratitude .btn.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ===== Non-Bootstrap buttons (e.g., mic/record) =====
   If the mic/record control is a plain <button> without .btn,
   make it visually consistent with the pills.
*/
.gratitude button:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  padding: 0.18rem 0.48rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.2;
  min-height: 30px;
  border-radius: 0.5rem;

  background: #fff;
  color: #000;
  border: 1px solid var(--brand-gold, #b08a48);
  box-sizing: border-box;
  cursor: pointer;
  text-decoration: none;
}

.gratitude button:not(.btn):hover,
.gratitude button:not(.btn):focus-visible {
  background-color: #f6efe4;
  border-color: var(--brand-gold, #b08a48);
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.18);
  outline: none;
}

/* ===== Button groups that should break into rows on small screens ===== */
@media (max-width: 575.98px) {
  .gratitude .gratitude__actions,
  .gratitude .btn-group,
  .gratitude .btn-toolbar {
    gap: 0.5rem;
  }
  .gratitude .btn,
  .gratitude button:not(.btn) {
    white-space: nowrap;
  }
}

/* (removed right-rail grid container rules) */

/* (removed right-rail chip/column styling) */
/* Ensure Gratitude input lines render full-width and the input grows */
.gratitude .row .input-group {
  width: 100% !important;
}

.gratitude .input-group .input-group-text {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: 0.25rem !important;
  padding-right: 0.5rem !important;
  color: inherit !important;
}

.gratitude .input-group .form-control {
  flex: 1 1 auto !important;
  min-width: 0 !important;  /* prevent flex overflow from shrinking */
}
/* --- Gratitude input lines: ensure full-width text boxes --- */
.gratitude .row .col-12 { width: 100% !important; }

.gratitude .input-group {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

.gratitude .input-group .input-group-text {
  flex: 0 0 auto !important;
}

.gratitude .input-group .form-control {
  /* Reassert Bootstrap 5 semantics in case a theme reset them */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 1% !important;     /* Bootstrap uses 1% so flex can compute final width */

  /* Make the input the one and only visible box */
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  background: #fff !important;
  color: #000 !important;
}
/* === Gratitude: standardized panel heading (lighter weight) === */
.gratitude h1,
.gratitude .h1,
.gratitude h2,
.gratitude .h2,
.gratitude h3,
.gratitude .h3,
.gratitude h4,
.gratitude .h4,
.gratitude h5,
.gratitude .h5,
.gratitude h6,
.gratitude .h6 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--brand-gold, #b08a48);
  padding-bottom: 8px;
}

/* Hard-lock the JS-emitted heading class used by Daily Gratitude */
/* Increase specificity by repeating the class name to overcome cascade issues */
.visionmapping__panel.gratitude .visionmapping__heading.visionmapping__heading {
  font-weight: 400 !important;
  color: #000 !important;
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
}


/* Daily Gratitude: decoupled heading weight */
.gratitude .dg__heading {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: #000 !important;
}
/* Force lighter heading in the DG panel, beat Pixel overrides */
.visionmapping__panel.gratitude .dg__heading {
  font-size: 1.1rem !important;
  line-height: 1.3 !important;
  font-weight: 400 !important; /* stop the heavy h3 */
  color: #000 !important;       /* stop any themed blue */
  border-bottom: 1px solid #b08a48;
  padding-bottom: 8px;
  margin-bottom: 12px;
}