/*
 * Recruitment channel (public apply) form: centred card + flex field row.
 * Linked directly from views/forms/recruitment_channel_form.php, after the core
 * external-form CSS (core never fires the module's forms_head hook).
 */

body.rec-channel-form {
  background: #f1f5f9;
  padding: 0;
}

.rec-cf-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 16px 48px;
}

.rec-cf-logo {
  margin-bottom: 24px;
  text-align: center;
}

.rec-cf-logo .logo {
  display: inline-block;
  margin-top: 0;
}

.rec-cf-logo img {
  max-height: 64px;
  width: auto;
  margin: 0 auto;
}

.rec-cf-logo .logo-text {
  color: #0f172a;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.rec-cf-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 32px;
}

/* Flex row: fields of different heights wrap cleanly instead of floating into a staircase. */
.rec-cf-fields {
  display: flex;
  flex-wrap: wrap;
}

.rec-cf-fields::before,
.rec-cf-fields::after {
  display: none;
}

/*
 * Every field takes the full row by default. Where a Bootstrap col-* class has a width
 * at the current breakpoint, flex-basis goes back to `auto` so that width applies
 * (col-sm-6 is half a row from 768px up and full width below it).
 */
.rec-cf-fields > * {
  flex: 0 0 100%;
  min-width: 0;
}

.rec-cf-fields > [class*="col-xs-"] {
  flex-basis: auto;
}

@media (min-width: 768px) {
  .rec-cf-fields > [class*="col-sm-"] {
    flex-basis: auto;
  }
}

@media (min-width: 992px) {
  .rec-cf-fields > [class*="col-md-"] {
    flex-basis: auto;
  }
}

@media (min-width: 1200px) {
  .rec-cf-fields > [class*="col-lg-"] {
    flex-basis: auto;
  }
}

.rec-cf-fields .submit-btn-wrapper {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .rec-cf-page {
    padding: 16px 12px 32px;
  }

  .rec-cf-card {
    padding: 20px 16px;
  }
}

/* Embedded in an iframe: no grey page background, card chrome or logo (plain white, as before). */
html.rec-cf-embedded body.rec-channel-form {
  background: #fff;
}

html.rec-cf-embedded .rec-cf-page {
  max-width: none;
  padding: 15px;
}

html.rec-cf-embedded .rec-cf-logo {
  display: none;
}

html.rec-cf-embedded .rec-cf-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}