/*
 * AI-Recruit — public (job board + application form) styles.
 * Copyright (c) 2026 AtoZ INFOWAY INC. All rights reserved. Proprietary.
 *
 * Deliberately minimal, unopinionated styling — enough for the job board and
 * application form to be usable out of the box on any theme without fighting
 * it for layout. Sites wanting a fuller match to their theme can override
 * these classes in their own stylesheet.
 */

.airec-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.airec-search input[type="search"] { flex: 1; min-width: 200px; }

.airec-listing { display: flex; flex-direction: column; gap: 16px; }
.airec-card {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 20px;
}
.airec-card__title { margin: 0 0 6px; }
.airec-card__title a { text-decoration: none; }
.airec-card__meta { margin: 0 0 8px; }
.airec-card__excerpt { margin: 0 0 12px; }

.airec-tag {
	display: inline-block;
	background: #f0f0f1;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 12px;
	margin-right: 6px;
}
.airec-tag--closed { background: #fcf0f1; color: #d63638; }

.airec-btn {
	display: inline-block;
	background: #2271b1;
	color: #fff;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.airec-btn--outline {
	background: transparent;
	color: #2271b1;
	border: 1px solid #2271b1;
}

.airec-pagination { margin-top: 16px; }

.airec-apply { margin-top: 24px; }
.airec-apply__title { margin-bottom: 12px; }
.airec-form .airec-field { margin-bottom: 14px; }
.airec-form label { display: block; margin-bottom: 4px; font-weight: 600; }
.airec-form input[type="text"],
.airec-form input[type="email"],
.airec-form input[type="tel"],
.airec-form input[type="file"],
.airec-form textarea { width: 100%; max-width: 480px; }
.airec-hp { position: absolute; left: -9999px; }

.airec-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.airec-notice--success { background: #edfaef; color: #00a32a; }
.airec-notice--warning { background: #fcf9e8; color: #996800; }
.airec-notice--error { background: #fcf0f1; color: #d63638; }

/* Builder-driven application fields. */
.airec-field--group { border: 1px solid #e2e4e7; border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; }
.airec-field--group legend { font-weight: 600; padding: 0 4px; }
.airec-choice { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.airec-field--check label { display: flex; align-items: flex-start; gap: 8px; }
.airec-help { display: block; font-size: .875em; opacity: .75; margin: 2px 0 4px; }

/* ── Position details card ─────────────────────────────────────────────── */
/*
 * Built from the theme's own colours rather than a palette of ours. The border
 * and the muted label colour are the theme's text colour at low opacity, so the
 * card reads as part of the page on a light theme, a dark one, or a branded one
 * — and it follows along when the theme changes. A site that wants it to look
 * like us can still set --airec-pd-* anywhere in its stylesheet.
 */
.airec-pd {
  --airec-pd-line: color-mix(in srgb, currentColor 14%, transparent);
  --airec-pd-muted: color-mix(in srgb, currentColor 65%, transparent);
  --airec-pd-bg: transparent;

  background: var(--airec-pd-bg);
  border: 1px solid var(--airec-pd-line);
  border-radius: 10px;
  padding: 20px 22px; margin: 28px 0; max-width: 380px;
  font-size: .95em;
}
/* Older browsers get a plain grey that is legible either way, since
   color-mix would otherwise leave the border invisible. */
@supports not (color: color-mix(in srgb, currentColor 10%, transparent)) {
  .airec-pd { border-color: rgba(128,128,128,.35); }
  .airec-pd__k { color: rgba(128,128,128,1); }
}
.airec-pd__title {
  font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 16px; color: var(--airec-pd-muted);
}
.airec-pd__rows { display: flex; flex-direction: column; gap: 13px; margin: 0; }
.airec-pd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; }
.airec-pd__k { color: var(--airec-pd-muted); flex: 0 0 auto; }
.airec-pd__v { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Job page layouts ──────────────────────────────────────────────────── */
/*
 * Only the side-by-side layout needs any CSS; the others are document order.
 * The card comes first in the markup so a phone shows the facts before the
 * prose, and grid puts it back on the right on a wide screen.
 */
.airec-layout { container-type: inline-size; margin: 28px 0; }
.airec-layout__grid { display: grid; gap: 12px 40px; align-items: start; }
.airec-layout__aside .airec-pd { margin: 0; max-width: none; }

/*
 * Two columns when this block is wide enough — measured on the block itself,
 * not the window, because a theme with a narrow reading measure has no room to
 * split however wide the screen is. Source order puts the card first so a phone
 * gets the facts before the prose; grid puts it back on the right above 46rem.
 */
@container (min-width: 46rem) {
  .airec-layout__grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
  .airec-layout__main { grid-column: 1; grid-row: 1; }
  .airec-layout__aside { grid-column: 2; grid-row: 1; position: sticky; top: 2rem; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .airec-layout__grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
    .airec-layout__main { grid-column: 1; grid-row: 1; }
    .airec-layout__aside { grid-column: 2; grid-row: 1; }
  }
}

/* Structured description sections. */
.airec-jd { margin: 24px 0; }
.airec-jd__h { margin: 22px 0 8px; }
.airec-jd__b p:last-child { margin-bottom: 0; }

/* ── The questionnaire, under the application form ─────────────────────── */
.airec-quiz { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(128,128,128,.25); }
@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
  .airec-quiz { border-top-color: color-mix(in srgb, currentColor 14%, transparent); }
}
.airec-quiz__title { margin: 0 0 14px; }