/*
 * Shared UI for the public eligibility pages (step_1, step_2, more_info).
 * Added 2026-08-17.
 *
 * The step pages were a bare Bootstrap card: inputs with placeholders and no
 * labels, no indication of how many steps there were, and a small default-size
 * submit button. This gives them the same card/label/button language as the
 * rebuilt result page and makes the touch targets usable on a phone, which is
 * where nearly all of this traffic is.
 */

.elg-step {
	--elg-navy: #182B55;   /* the exact navy baked into img/auis_logo.png */
	--elg-gold: #c99700;
	--elg-line: #e3e7ec;
	--elg-muted: #6b7683;
	padding: 1.5rem 0 3rem;
}

.elg-step__card {
	background: #fff;
	border: 1px solid var(--elg-line);
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 40, 85, .07);
	padding: 1.5rem 1.25rem;
	max-width: 720px;
	margin: 0 auto;
}
@media (min-width: 576px) {
	.elg-step__card { padding: 2rem; }
}

.elg-step__meta {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--elg-gold);
	margin: 0 0 .35rem;
}
.elg-step__title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--elg-navy);
	margin: 0 0 1.5rem;
	line-height: 1.3;
}

/* progress bar */
.elg-progress {
	display: flex;
	gap: .4rem;
	margin-bottom: 1.5rem;
}
.elg-progress span {
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background: var(--elg-line);
}
.elg-progress span.is-done { background: var(--elg-navy); }

/* fields */
.elg-field { margin-bottom: 1.15rem; }
.elg-field > label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--elg-muted);
	margin-bottom: .4rem;
	line-height: 1.4;
}
.elg-step .form-control,
.elg-step select.form-control,
.elg-step input[type="text"] {
	width: 100%;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--elg-navy);
	padding: .7rem .85rem;
	border: 1px solid #d9dee5;
	border-radius: 9px;
	background: #fbfcfd;
	min-height: 46px;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.elg-step .form-control:focus,
.elg-step input[type="text"]:focus,
.elg-step select.form-control:focus {
	outline: none;
	background: #fff;
	border-color: var(--elg-navy);
	box-shadow: 0 0 0 3px rgba(0, 40, 85, .12);
}
.elg-step .form-control.is-invalid {
	border-color: #b3261e;
	background: #fdf6f5;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

/* two-up on wider screens, stacked on a phone */
.elg-grid { display: grid; gap: 0 1rem; }
@media (min-width: 576px) { .elg-grid--2 { grid-template-columns: 1fr 1fr; } }

/* submit */
.elg-step input[type="submit"],
.elg-step .elg-next {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding: .8rem 1.5rem;
	font-size: 1.02rem;
	font-weight: 700;
	color: #fff;
	background: var(--elg-navy);
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	transition: background .15s, transform .1s;
}
@media (min-width: 576px) {
	.elg-step input[type="submit"],
	.elg-step .elg-next { width: auto; min-width: 180px; }
}
.elg-step input[type="submit"]:hover { background: #013a76; }
.elg-step input[type="submit"]:active { transform: translateY(1px); }
.elg-step input[type="submit"]:focus-visible { outline: 3px solid var(--elg-gold); outline-offset: 2px; }

/* the "your answers so far" recap on step 2 */
.elg-recap {
	background: #f4f7fa;
	border: 1px solid var(--elg-line);
	border-radius: 11px;
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
	font-size: .9rem;
	line-height: 1.7;
	color: var(--elg-navy);
}
.elg-recap strong { color: var(--elg-muted); font-weight: 600; }
.elg-recap__edit {
	display: inline-block;
	margin-top: .6rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--elg-navy);
	text-decoration: underline;
}
.elg-recap__edit:hover { color: #013a76; }

/* validation message box used by validate_form()/validate_subjects() */
.elg-step #msgBox:empty { display: none; }
.elg-step #msgBox .alert {
	border-radius: 9px;
	font-size: .9rem;
	padding: .75rem 1rem;
	margin-bottom: 1.15rem;
}

/* more_info.php */
.elg-info {
	max-width: 620px;
	margin: 0 auto;
	background: #fff;
	border-radius: 14px;
	padding: 2rem 1.5rem;
	text-align: center;
	color: #002855;
	font-size: 1.02rem;
	line-height: 1.7;
	box-shadow: 0 2px 10px rgba(0, 40, 85, .07);
}


/* ===========================================================================
 * Header / footer for the applicant-facing pages.
 * The band colour is #182B55 on purpose: auis_logo.png is a flat PNG with an
 * opaque background of exactly that value, so any other shade shows the logo
 * as a lighter square sitting on the bar.
 * ========================================================================= */
.elg-header {
	background: #182B55;
	border-bottom: 3px solid #c99700;
}
.elg-header__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: .75rem 1.25rem;
	display: flex;
	align-items: center;
}
.elg-header__brand {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	text-decoration: none;
	color: #fff;
}
.elg-header__brand:hover { text-decoration: none; color: #fff; }
.elg-header__brand:focus-visible { outline: 3px solid #c99700; outline-offset: 3px; }
/* No border, no radius, no shadow -- the image must sit flush against the bar
   for the two navies to read as a single surface. */
.elg-header__brand img {
	display: block;
	width: 56px;
	height: 56px;
	background: #182B55;
}
.elg-header__text { display: flex; flex-direction: column; line-height: 1.2; }
.elg-header__name {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .06em;
}
.elg-header__sub {
	font-size: .82rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .78);
}

.elg-footer {
	margin-top: 3rem;
	background: #182B55;
	color: rgba(255, 255, 255, .8);
}
/* The margin above gives the footer breathing room under a form page, whose
   content sits on the light page background. The landing hero is a full-bleed
   navy panel, so there that margin renders as a pale stripe between two dark
   blocks -- the gap ends where the hero does. */
.lang-hero + .elg-footer { margin-top: 0; }
.elg-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
	text-align: center;
	font-size: .875rem;
}
.elg-footer__org { margin: 0 0 .3rem; font-weight: 600; color: #fff; }
.elg-footer__contact { margin: 0; }
/* An email address and a phone number are Latin/numeric strings. Inside an RTL
   page they inherit direction:rtl, and the bidi algorithm moves the leading +
   to the far end -- +964 770 461 5555 renders as 5555 461 770 964+. Pinning
   them to LTR keeps them readable in Arabic and Kurdish. */
.elg-footer__contact a {
	color: rgba(255, 255, 255, .85);
	text-decoration: underline;
	direction: ltr;
	unicode-bidi: isolate;
}
.elg-footer__contact a:hover { color: #fff; }
.elg-footer__contact span { margin: 0 .5rem; opacity: .5; }

@media (max-width: 575px) {
	.elg-header__inner { padding: .6rem .9rem; }
	.elg-header__brand img { width: 44px; height: 44px; }
	.elg-header__name { font-size: 1rem; }
	.elg-header__sub { font-size: .75rem; }
	.elg-footer__inner { padding: 1.25rem .9rem; }
	/* stacked on a phone, but only as wide as the text so the underline does
	   not run the full width of the screen */
	.elg-footer__contact a { display: block; width: fit-content; margin: .15rem auto; }
	.elg-footer__contact span { display: none; }
}

/* --- form polish ------------------------------------------------------- */

/* Sticky footer without a wrapper element: body is the column, whatever the
   page uses as its main region grows, the footer keeps its own height. Without
   this the footer floats half-way up a short form page. */
body { min-height: 100vh; display: flex; flex-direction: column; background: #eef1f5; }
body > main, body > .lang-hero { flex: 1 0 auto; }
body > .elg-footer { flex-shrink: 0; }

.elg-req { color: #b3261e; margin-inline-start: .15rem; }
.elg-hint {
	display: block;
	margin-top: .35rem;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--elg-muted);
}

/* native selects render a tiny arrow at desktop sizes; give them a clear one
   and enough height to be a comfortable tap target */
.elg-step select.form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7683'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .7rem center;
	background-size: 18px 18px;
	padding-inline-end: 2.2rem;
}
html[dir="rtl"] .elg-step select.form-control {
	background-position: left .7rem center;
}

.elg-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--elg-line);
}
.elg-back {
	font-size: .9rem;
	font-weight: 600;
	color: var(--elg-muted);
	text-decoration: none;
}
.elg-back:hover { color: var(--elg-navy); text-decoration: underline; }

@media (max-width: 575px) {
	.elg-actions-row { flex-direction: column-reverse; align-items: stretch; }
	.elg-actions-row .elg-back { text-align: center; padding: .5rem 0; }
}