/* Aroma Recipe Card — scoped styles (CSP-safe; external file only) */
:root{
  /* Use existing tokens if present, with safe fallbacks */
  /* Do NOT self-reference custom properties; let upstream define --brand-gold */
  --text-color: var(--bs-body-color, #000);
  --bg-color: #fff;
  --muted: #6c757d;
}


/* Wrap */
.rc-wrap{
  font-family: var(--bs-body-font-family, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  color: var(--text-color);
}

/* Sections */
/* Sections: hard-lock gold border (beat generic resets) */
.rc-wrap .apoth-section{
  background: var(--bg-color) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--brand-gold, #b08a48) !important;
  border-radius: .5rem !important;
  background-clip: padding-box !important;
  padding: .875rem;
  margin-bottom: 1rem;
}
/* Titles */
.rc-wrap .rc-title{
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 .5rem 0;
  color: var(--text-color);
}

/* Labels + hints */
.rc-wrap label{
  display: block;
  font-weight: 600;
  margin-bottom: .25rem;
}
.rc-wrap .apoth-hint,
.rc-wrap .rc-hint{
  color: var(--muted);
  font-size: .875rem;
}

/* Inline labels + hints only for field headers inside the recipe card grid */
.rc-wrap .rc-row > * > label{
  display: inline-block !important;     /* allow hint to sit on the same line */
  margin-bottom: 0 !important;          /* avoid extra gap before the control */
  vertical-align: baseline !important;
  white-space: nowrap !important;       /* keep INTENDED USE (OPTIONAL) and TOTAL VOLUME (ML) on one line */
}
.rc-wrap .rc-row > * > .rc-hint,
.rc-wrap .rc-row > * > .apoth-hint,
.rc-wrap .rc-row > * > small{
  display: inline-block !important;     /* defeat Bootstrap's block hints */
  white-space: nowrap !important;       /* keep "(OPTIONAL)" & "(ML)" together */
  font-size: .8rem !important;          /* slight downsize to fit */
  margin-left: .25rem !important;       /* spacing from label text */
  margin-top: 0 !important;             /* cancel .form-text top margin */
  vertical-align: baseline !important;
}

/* Keep inline hints on the same line as the label text (descendant case) */
.rc-wrap label .rc-hint,
.rc-wrap label .apoth-hint,
.rc-wrap label small{
  display: inline-block;
  white-space: nowrap;
  font-size: .8rem;
  margin-left: .25rem;
  line-height: 1;
}

/* Label has ANY later sibling hint (not just immediate) — make the label inline too */
.rc-wrap label:has(~ .rc-hint),
.rc-wrap label:has(~ .apoth-hint),
.rc-wrap label:has(~ .form-text),
.rc-wrap label:has(~ small){
  display: inline-block !important;
  margin-bottom: 0 !important;
  vertical-align: baseline !important;
}

/* Style the sibling hint (works for immediate or non-immediate siblings) */
.rc-wrap label ~ .rc-hint,
.rc-wrap label ~ .apoth-hint,
.rc-wrap label ~ .form-text,
.rc-wrap label ~ small{
  display: inline-block !important;
  white-space: nowrap !important;   /* keep "(OPTIONAL)" and "(ML)" together */
  font-size: .8rem !important;
  margin-left: .25rem !important;
  margin-top: 0 !important;         /* defeat Bootstrap’s .form-text block spacing */
  vertical-align: baseline !important;
}

/* Grid rows */
.rc-wrap .rc-row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
}

/* Phones: 1-up to prevent label/input collisions */
.rc-wrap .rc-row > *{
  grid-column: span 12;
  min-width: 0;                    /* allow content to shrink inside the grid cell */
}

/* ≥576px (sm): back to 2-up */
@media (min-width: 576px){
  .rc-wrap .rc-row > *{ grid-column: span 6; }
}

/* ≥992px (lg): 4-up as before */
@media (min-width: 992px){
  .rc-wrap .rc-row > *{ grid-column: span 3; }
}

/* Inputs */
/* Inputs: explicit width/style/color so no theme kills borders */
.rc-wrap input[type="text"],
.rc-wrap input[type="number"],
.rc-wrap select,
.rc-wrap textarea{
  width: 100%;
  background: #fff !important;
  color: var(--text-color) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--brand-gold, #b08a48) !important;
  border-radius: .375rem !important;
  background-clip: padding-box !important;
  padding: .5rem .625rem;
  line-height: 1.4;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}


.rc-wrap textarea{ resize: vertical; }
/* === Keep label + hint on the same line when a field has both === */
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint),
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint),
.rc-wrap .rc-row > *:has(> label):has(> .form-text),
.rc-wrap .rc-row > *:has(> label):has(> small){
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: .25rem;
}

/* Put the label and the hint together on row 1 */
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint) > label,
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint) > label,
.rc-wrap .rc-row > *:has(> label):has(> .form-text) > label,
.rc-wrap .rc-row > *:has(> label):has(> small) > label{
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: inline-block !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}

/* The hint sits beside the label on row 1 */
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint) > .rc-hint,
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint) > .apoth-hint,
.rc-wrap .rc-row > *:has(> label):has(> .form-text) > .form-text,
.rc-wrap .rc-row > *:has(> label):has(> small) > small{
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: inline-block !important;
  white-space: nowrap !important;    /* keep "(OPTIONAL)" and "(ML)" together */
  margin: 0 0 0 .25rem !important;
  line-height: 1 !important;
  font-size: .8rem !important;       /* tighter to avoid wrap without shrinking labels */
}

/* Inputs/controls drop to row 2 spanning full width */
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint) > input,
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint) > select,
.rc-wrap .rc-row > *:has(> label):has(> .rc-hint) > textarea,
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint) > input,
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint) > select,
.rc-wrap .rc-row > *:has(> label):has(> .apoth-hint) > textarea,
.rc-wrap .rc-row > *:has(> label):has(> .form-text) > input,
.rc-wrap .rc-row > *:has(> label):has(> .form-text) > select,
.rc-wrap .rc-row > *:has(> label):has(> .form-text) > textarea,
.rc-wrap .rc-row > *:has(> label):has(> small) > input,
.rc-wrap .rc-row > *:has(> label):has(> small) > select,
.rc-wrap .rc-row > *:has(> label):has(> small) > textarea{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}


/* Placeholder */
.rc-wrap ::placeholder{ color: var(--muted); opacity: .85; }

/* Focus ring */
/* Keep gold on focus */
.rc-wrap input[type="text"]:focus,
.rc-wrap input[type="number"]:focus,
.rc-wrap select:focus,
.rc-wrap textarea:focus{
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 0 0 .2rem rgba(176,138,72,.25) !important;
}

/* Radio group (recipe type) */
.rc-wrap input[type="radio"]{
  margin-right: .35rem;
}
.rc-wrap [name="recipeType"] + span,
.rc-wrap label input[type="radio"] + *{
  vertical-align: middle;
}

/* Buttons */
/* Match “Perfect Secondary Navbar Pill” inside the recipe card */
.rc-wrap .hub-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.24rem !important;

  /* Thin, uniform internal whitespace */
  padding: 0.18rem 0.48rem !important;
  min-height: 30px !important;
  line-height: 1.2 !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;

  /* Visuals */
  border: 1px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  background: #fff !important;

  /* External spacing: 0.375rem on all sides -> 0.75rem between items */
  margin: 0.375rem !important;

  /* Behavior */
  box-sizing: border-box !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Default black text only for non-Credits pills inside the card */
.rc-wrap .hub-btn:not(.credit-button){
  color: #000 !important;
}


/* Keep the same thin look on hover/focus/active without thickening */
.rc-wrap .hub-btn:hover,
.rc-wrap .hub-btn:focus,
.rc-wrap .hub-btn:active{
  background: #fff !important;
  border-color: var(--brand-gold, #b08a48) !important;
  outline: none !important;
}

/* Desktop-only: force black text like your navbar pills */
@media (min-width: 992px){
  .rc-wrap .hub-btn:not(.credit-button),
  .rc-wrap .hub-btn:not(.credit-button):hover,
  .rc-wrap .hub-btn:not(.credit-button):focus,
  .rc-wrap .hub-btn:not(.credit-button):active{
    color: #000 !important;
  }
}

/* Utility used by the card */
.rc-wrap .is-hidden{ display: none !important; }