/*
 * Brave Connect shortcode styles.
 * Reuses the active theme's semantic CSS custom properties (--color-*) —
 * this plugin defines no colors of its own, only layout for the classes
 * brave-connect renders that the theme doesn't already style.
 */

.course-card__meta {
  color: var(--color-text-muted, #5A3A18);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.course-card__schedule-empty {
  color: var(--color-text-muted, #5A3A18);
  font-size: 0.9375rem;
  font-style: italic;
}

.course-card__classes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #E5CFB2);
}

.course-card__class {
  font-size: 0.875rem;
}

.course-card__class-label {
  font-weight: 600;
  color: var(--color-heading, #361C05);
  margin-bottom: 0.125rem;
}

.course-card__class-time,
.course-card__class-teacher {
  color: var(--color-text-muted, #5A3A18);
}

.course-card__class-status {
  margin-top: 0.25rem;
  font-weight: 600;
}

.course-card__class-status--open {
  color: var(--color-link, #824F21);
}

.course-card__class-status--almost-full {
  color: var(--color-warning, #824F21);
}

.course-card__class-status--full {
  color: var(--color-danger, #9B3A1E);
}

.course-card__class-status--upcoming,
.course-card__class-status--closed {
  color: var(--color-text-muted, #5A3A18);
}

/* Single-course page detailed schedule (brave_render_course_class_detailed) */
.course-schedule__item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border, #E5CFB2);
}

.course-schedule__item:first-child {
  padding-top: 0;
}

.course-schedule__item:last-child {
  border-bottom: none;
}

.course-schedule__label {
  font-weight: 600;
  color: var(--color-heading, #361C05);
  margin-bottom: 0.5rem;
}

.course-schedule__meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}

.course-schedule__row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.course-schedule__row dt {
  flex-shrink: 0;
  width: 7rem;
  color: var(--color-text-muted, #5A3A18);
  font-weight: 600;
}

.course-schedule__row dd {
  margin: 0;
  color: var(--color-text, #1C0D02);
}

.brave-courses--fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem;
  background-color: var(--color-bg-alt, #FAECD3);
  border-radius: 8px;
}

.brave-courses__fallback-text {
  color: var(--color-text, #1C0D02);
}

/* ===================================================================
 * Forms — trial / inquiry / membership (brave_render_form)
 * =================================================================== */
.brave-form-wrap {
  max-width: 640px;
}

.brave-form__heading {
  margin-bottom: 0.75rem;
}

.brave-form__intro {
  color: var(--color-text-muted, #5A3A18);
  margin-bottom: 1.5rem;
}

.brave-form__error-banner {
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  background-color: var(--color-bg-alt, #FAECD3);
  color: var(--color-danger, #9B3A1E);
  font-weight: 600;
}

/* Whole-form errors (rate limit / expired nonce / storage failure) get
   focus() moved here via JS, since there's no specific field to jump to. */
.brave-form__error-banner:focus {
  outline: 2px solid var(--color-danger, #9B3A1E);
  outline-offset: 2px;
}

/* Sits between the phone and email fields — one size down from a field
   label, secondary brown, so it reads as a note rather than a label. When
   phone_or_email fails validation this same slot switches to
   .brave-form__hint--error instead of stacking a second message. */
.brave-form__hint {
  color: var(--color-text-muted, #5A3A18);
  font-size: 0.8125rem;
  margin: -0.5rem 0 1.25rem;
}

.brave-form__hint--error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--color-danger, #9B3A1E);
  font-weight: 600;
  font-size: 0.875rem;
}

.brave-form__success {
  padding: 2rem;
  border-radius: 8px;
  background-color: var(--color-bg-alt, #FAECD3);
  color: var(--color-text, #1C0D02);
}

.brave-form__success-title {
  margin-bottom: 1rem;
}

.brave-form__success-body {
  margin-bottom: 1.5rem;
}

.brave-form__success-contact {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #E5CFB2);
  color: var(--color-text-muted, #5A3A18);
  font-weight: 600;
}

.brave-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
}

.brave-form__field label {
  font-weight: 600;
  color: var(--color-heading, #361C05);
  font-size: 0.9375rem;
}

/* Non-color error marker on the label itself, in addition to the border and
   the icon on the message below — belt and suspenders for WCAG 1.4.1. */
.brave-form__field--error label {
  color: var(--color-danger, #9B3A1E);
}

.brave-form__field input,
.brave-form__field textarea {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border, #E5CFB2);
  border-radius: 4px;
  background-color: var(--color-bg, #FFFDF8);
  color: var(--color-text, #1C0D02);
  font-family: inherit;
  font-size: 1rem;
}

.brave-form__field input:focus,
.brave-form__field textarea:focus {
  outline: 2px solid var(--color-link, #824F21);
  outline-offset: 1px;
}

.brave-form__field textarea {
  resize: vertical;
}

/* Same specificity as the base input/textarea rule above, placed after it —
   wins on source order without needing !important. */
input.brave-form__input--error,
textarea.brave-form__input--error {
  border-color: var(--color-danger, #9B3A1E);
  border-width: 2px;
}

.brave-form__field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--color-danger, #9B3A1E);
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.brave-form__error-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-danger, #9B3A1E);
}

/* Honeypot: off-screen, not display:none — some bots specifically skip
   display:none fields because it's a well-known honeypot signal. */
.brave-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.brave-form button[type="submit"] {
  margin-top: 0.5rem;
}