/* Ambassador programme — project-wide supplement to the Nextory design system.
 *
 * Cascade, in order:
 *   1. ../_assets/css/nextory.css   brand: tokens, buttons, typography  (never edit)
 *   2. ../_css/ambassadors.css         this file: rules common to every ambassador page
 *   3. ./style.css                     one page's own deviations
 *
 * PUBLIC PAGES ONLY. Internal tools (prospect simulator, admin backoffice) load
 * Basecoat instead, whose bundle inlines Tailwind's preflight and would fight
 * both nextory.css and this file. Never load Basecoat and this together.
 *
 * Mobile-first, three min-width breakpoints (30rem / 48rem / 64rem) per
 * ui-directive.md. Creators arrive from Instagram and TikTok, so the phone
 * layout is the real layout and the wider ones are the enhancement.
 */

/* ---------- base: phone, 320px floor ---------- */

main {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.logo { height: 1.5rem; max-width: 100%; }

.lang-select { display: flex; align-items: center; gap: 0.5rem; }
.lang-select select { width: auto; }

section { margin-block: 1.75rem; }

label { display: block; margin-top: 1rem; }

input[type="text"], input[type="email"], input[type="url"],
input[type="date"], input[type="file"], select {
  width: 100%;
  padding: 0.625rem;
  margin-top: 0.25rem;
  /* 16px minimum. Anything smaller makes iOS Safari zoom the viewport on
     focus, which throws the creator out of the form mid-entry. */
  font-size: 1rem;
  min-height: 2.75rem; /* ≥44px tap target */
  border: 1px solid var(--color-sand-300, #d8d2c8);
  border-radius: 0.375rem;
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-purple, #5b3fd1);
  outline-offset: 2px;
}

/* Inline validation. Errors carry text and an icon-free red border; colour is
   never the only signal, because the message beneath says what is wrong. */
input[aria-invalid="true"], select[aria-invalid="true"],
fieldset[aria-invalid="true"] { border-color: #c0392b; }

.field-error { color: #c0392b; font-size: 0.8125rem; margin-top: 0.25rem; }

.banner { padding: 0.75rem 1rem; border-radius: 0.375rem; background: #fdecea; color: #7f231c; }

img { max-width: 100%; height: auto; }

/* nextory.css has no :disabled rule, so a disabled button still looks
   clickable. .btn:hover only ever changes `filter`, so that is what has to be
   cancelled — overriding `background` would do nothing. The enabled look still
   comes entirely from the shared .btn/.btn-cta classes. */
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:disabled:hover { filter: none; }

/* The primary action is full-width on a phone: the thumb should not have to aim. */
.btn-primary-action { width: 100%; min-height: 3rem; }

/* Two fields side by side once the line length allows it (see 48rem below). */
.field-row label { margin-top: 1rem; }

/* ---------- 30rem / 480px: large phone ---------- */

@media (min-width: 30rem) {
  main { padding: 1.5rem 1.5rem 4rem; }
  .header { padding: 1rem 1.5rem; }
  .logo { height: 1.75rem; }
  .btn-primary-action { width: auto; min-width: 12rem; }
}

/* ---------- 48rem / 768px: tablet ---------- */

@media (min-width: 48rem) {
  section { margin-block: 2.5rem; }
  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

/* ---------- 64rem / 1024px: desktop ---------- */

@media (min-width: 64rem) {
  main { padding-top: 2.5rem; }
}