/* ============================================================
   18 — The invitation note and the Teaching tab.

   Two surfaces, one set of rules:
     /invite/                  .rh-teacher-page  (standalone, in the site frame,
                               and only ever for a link that no longer works)
     /my-account/              .rh-invite-note   (one line above the registration
                               form, when the reader arrived with an invitation)
     /my-account/teaching/     .rh-teaching      (inside WooCommerce My Account)

   Every color, size and space here is a phase1 token read, never a
   new value.

   There is no honeypot rule any more, and there should not be: the
   invitation form this file used to style is gone, and an invited
   person now registers on the ordinary WooCommerce registration
   form, which carries its own protections.

   Mobile first. Deborah will do this on a phone.
   ============================================================ */

/* ---- the standalone invitation page  ---------------------------- */

.rh-teacher-main {
  display: block;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-9);
}

.rh-teacher-invite h1 {
  font-family: var(--d);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--tx);
  margin: 0 0 var(--sp-3);
}

.rh-teacher-invite__lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--tx-2);
  margin: 0 0 var(--sp-6);
}

.rh-invite-note {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-left: 3px solid var(--river);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--tx);
}

.rh-invite-note strong {
  font-family: var(--b);
  color: var(--clay-tx);
  word-break: break-word;
}

/* ---- the Teaching tab ------------------------------------------ */

.rh-teaching h2 {
  font-family: var(--d);
  font-size: var(--fs-h3);
  color: var(--tx);
  margin: 0 0 var(--sp-3);
}

.rh-teaching h3 {
  font-family: var(--b);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-tx);
  margin: var(--sp-7) 0 var(--sp-3);
}

.rh-teaching__who {
  font-size: var(--fs-body);
  color: var(--tx-2);
  margin: 0 0 var(--sp-2);
}

.rh-teaching__classes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rh-teaching__class {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}

.rh-teaching__class:last-child {
  border-bottom: 0;
}

.rh-teaching__title {
  display: block;
  font-family: var(--d);
  font-size: var(--fs-h4);
  color: var(--tx);
  line-height: 1.25;
}

.rh-teaching__when,
.rh-teaching__where {
  display: block;
  font-size: var(--fs-meta);
  color: var(--tx-2);
  margin-top: var(--sp-1);
}

/* ---- the form, shared by both surfaces -------------------------- */

.rh-teacher-form {
  margin: 0;
}

.rh-teacher-field {
  margin: 0 0 var(--sp-5);
}

.rh-teacher-field label {
  display: block;
  font-family: var(--b);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx);
  margin-bottom: var(--sp-2);
}

.rh-teacher-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--sp-3);
  font-size: 16px; /* under 16px, iOS Safari zooms the page on focus */
  font-family: var(--b);
  color: var(--tx);
  background: var(--surface);
  border: 1.5px solid var(--sage);
  border-radius: var(--r);
}

.rh-teacher-field input:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.rh-teacher-field input[aria-invalid="true"] {
  border-color: var(--rust);
}

.rh-teacher-hint {
  display: block;
  font-size: var(--fs-fine);
  color: var(--tx-3);
  margin-top: var(--sp-2);
}

.rh-teacher-check {
  margin: 0 0 var(--sp-6);
}

.rh-teacher-check label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--tx);
  cursor: pointer;
}

.rh-teacher-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--rust);
}

.rh-teacher-btn {
  display: inline-block;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--b);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--on-ink);
  background: var(--rust);
  border: 0;
  border-radius: var(--r);
  text-decoration: none;
  cursor: pointer;
}

.rh-teacher-btn:hover,
.rh-teacher-btn:focus-visible {
  background: var(--ink);
  color: var(--on-ink);
}

.rh-teacher-notice {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--tx);
  background: var(--surface);
  border-left: 4px solid var(--rust);
}

.rh-teacher-notice--ok {
  border-left-color: var(--river);
}

/* ---- roomier once there is room -------------------------------- */

@media (min-width: 700px) {
  .rh-teacher-main {
    padding: var(--sp-9) var(--sp-5) var(--sp-10);
  }

  .rh-teacher-invite h1 {
    font-size: var(--fs-h1);
  }

  .rh-teacher-field input {
    max-width: 380px;
  }
}