.gap-shell {
	--gap-blue: #06295c;
	--gap-green: #69ad35;
	--gap-border: #d8dee8;
	max-width: 980px;
	margin: 0 auto;
	padding: 28px 16px;
	color: #142033;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.page-id-24 .hostinger-ai-menu,
body.page-id-25 .hostinger-ai-menu,
body.page-id-24 h1.wp-block-post-title,
body.page-id-25 h1.wp-block-post-title {
	display: none;
}

.gap-brand {
	margin-bottom: 24px;
	text-align: center;
}

.gap-brand img {
	max-width: 520px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.gap-card {
	border: 1px solid var(--gap-border);
	border-radius: 8px;
	padding: 22px;
	margin-bottom: 18px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.gap-card h2 {
	margin-top: 0;
	color: var(--gap-blue);
}

.gap-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.gap-form label {
	display: grid;
	gap: 6px;
	font-weight: 600;
}

.gap-form input,
.gap-form select,
.gap-form textarea {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--gap-border);
	border-radius: 6px;
	padding: 8px 10px;
	font: inherit;
	box-sizing: border-box;
}

.gap-check {
	display: flex !important;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
}

.gap-check input {
	width: auto;
	min-height: auto;
}

.gap-status,
.gap-notice {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
	border-left: 5px solid var(--gap-green);
	background: #f5faef;
	padding: 14px 16px;
	margin-bottom: 18px;
}

.gap-error {
	border-left-color: #b42318;
	background: #fff4f2;
}

.gap-muted {
	color: #5b6678;
}

.gap-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 22px;
}

.gap-actions button,
.gap-auth-card button,
.gap-auth-card input[type="submit"],
.gap-form button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 6px;
	padding: 11px 18px;
	background: var(--gap-blue);
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	font: inherit;
	text-shadow: none;
	box-shadow: none;
}

/* 0.3.4: wp_login_form() (used for the embedded Applicant Portal sign-in
   form) renders its submit control as <input type="submit">, not a
   <button>, so it needs its own selector above to pick up the same
   branded pill treatment as "Create account" and the application form's
   buttons. This is styling only - it does not touch the form's action,
   method, or WordPress's own authentication handling. */

.gap-actions button:last-child {
	background: var(--gap-green);
	color: #10200a;
}

.gap-documents {
	margin-top: 14px;
}

.gap-member-row {
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid var(--gap-border);
}

/* 0.3.9: dynamic household-member rows */
.gap-member-row .gap-remove-member-btn {
	align-self: end;
	background: #fff;
	border: 1px solid var(--gap-border);
	color: #b42318;
}

#gap-add-member-btn {
	margin-top: 14px;
}

#gap-household-max-message {
	margin-top: 8px;
}

.gap-form fieldset[disabled] {
	border: 0;
	margin: 0;
	padding: 0;
	opacity: 0.85;
}

.gap-form input[readonly],
.gap-form select:disabled,
.gap-form input:disabled {
	background: #f6f8fb;
	color: #5b6678;
}

.gap-form input.gap-field-error,
.gap-check.gap-field-error {
	border-color: #b42318;
	outline: 1px solid #b42318;
}

.gap-withdraw-card {
	border-color: #f3b4ab;
}

.gap-withdraw-btn {
	background: #b42318 !important;
}

/* 0.3.7: applicant change-request card. Kept separate from the disabled
   application fieldset so its controls remain usable while the submitted
   application itself is read-only. */
.gap-change-request-card {
	border-color: #f0d49a;
	background: #fffaf0;
}

.gap-change-request-form {
	display: grid;
	gap: 10px;
	max-width: 680px;
}

.gap-change-request-form label,
.gap-change-request-summary dt {
	font-weight: 600;
}

.gap-change-request-form select,
.gap-change-request-form textarea {
	width: 100%;
	box-sizing: border-box;
}

.gap-change-request-form button {
	justify-self: start;
}

.gap-change-request-summary {
	display: grid;
	grid-template-columns: minmax(130px, 180px) 1fr;
	gap: 8px 14px;
	margin-bottom: 0;
}

.gap-change-request-summary dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 700px) {
	.gap-grid {
		grid-template-columns: 1fr;
	}

	.gap-actions,
	.gap-status {
		flex-direction: column;
		align-items: stretch;
	}

	.gap-change-request-summary {
		grid-template-columns: 1fr;
	}

	.gap-change-request-summary dd {
		margin-bottom: 8px;
	}
}

/* 0.3.4: accessible focus indicator for every interactive control in the
   applicant-facing forms (registration, sign in, and the application
   itself) - text/email/password fields, selects, textareas, checkboxes,
   radios, buttons, and links. Reuses the same green (--gap-green) ring
   already used for :focus on the native wp-login.php screens in
   login.css, so the two experiences feel consistent.

   Written as two separate rule blocks (:focus, then :focus-visible) on
   purpose: a browser that does not recognize :focus-visible drops only
   that rule and keeps the plain :focus block, so the indicator is never
   silently lost. A browser that understands both applies the same ring
   either way - this is not trying to hide the ring from mouse users, only
   guaranteeing it is never missing for keyboard users.

   outline (not box-shadow or a border change) is used so the ring can
   never clip inside a card's rounded corners or shift surrounding layout:
   outline is painted outside the box and does not participate in layout. */
.gap-shell input:focus,
.gap-shell select:focus,
.gap-shell textarea:focus,
.gap-shell button:focus,
.gap-shell input[type="submit"]:focus,
.gap-shell a:focus {
	outline: 3px solid var(--gap-green);
	outline-offset: 2px;
}

.gap-shell input:focus-visible,
.gap-shell select:focus-visible,
.gap-shell textarea:focus-visible,
.gap-shell button:focus-visible,
.gap-shell input[type="submit"]:focus-visible,
.gap-shell a:focus-visible {
	outline: 3px solid var(--gap-green);
	outline-offset: 2px;
}

/* Checkboxes/radios keep the browser's native control but still need a
   clearly visible ring around the (small) hit target. */
.gap-shell input[type="checkbox"]:focus,
.gap-shell input[type="radio"]:focus {
	outline: 3px solid var(--gap-green);
	outline-offset: 3px;
}

.gap-shell input[type="checkbox"]:focus-visible,
.gap-shell input[type="radio"]:focus-visible {
	outline: 3px solid var(--gap-green);
	outline-offset: 3px;
}

/* Fields that already show a red validation outline keep taking priority
   over the green focus ring while they're actively focused, so an
   applicant fixing an error still sees which field is invalid. Written as
   two separate rule blocks for the same reason as the main focus rules
   above: an unsupported :focus-visible selector must never drop the
   :focus fallback along with it. */
.gap-shell input.gap-field-error:focus {
	outline-color: #b42318;
}

.gap-shell input.gap-field-error:focus-visible {
	outline-color: #b42318;
}

/* ==================================================================
   0.4.0: applicant portal shell - header, sidebar navigation, dashboard,
   progress indicator, action items, messages. Navy / white / soft status
   cards; status is always labelled in text, never by colour alone.
   ================================================================== */
.gap-portal {
	max-width: 1180px;
	padding: 16px 12px 28px;
}
.gap-portal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 6px 0 14px;
	border-bottom: 1px solid var(--gap-border);
	margin-bottom: 0;
}
.gap-portal-header .gap-brand { margin: 0; text-align: left; }
.gap-portal-header .gap-brand img { max-width: 300px; margin: 0; }
.gap-portal-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gap-portal-welcome { font-weight: 700; color: var(--gap-blue); font-size: 17px; }
.gap-portal-header-links { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gap-portal-body {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 0;
	background: #f4f6f9;
	border: 1px solid var(--gap-border);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}
.gap-portal-nav {
	background: var(--gap-blue);
	color: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
.gap-portal-nav ul { list-style: none; margin: 0; padding: 8px 0 0; }
.gap-portal-nav li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	border-left: 4px solid transparent;
}
.gap-portal-nav li a:hover { background: rgba(255, 255, 255, 0.08); }
.gap-portal-nav li a.is-current { background: rgba(255, 255, 255, 0.14); border-left-color: var(--gap-green); font-weight: 700; }
.gap-portal-nav li a:focus, .gap-portal-nav li a:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.gap-nav-icon { width: 22px; height: 22px; flex-shrink: 0; }
.gap-nav-badge {
	display: inline-block;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #d92d20;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	margin-left: auto;
}
.gap-portal-nav-footer {
	margin-top: auto;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #dfe7f3;
}
.gap-portal-nav-footer svg { width: 44px; height: 40px; color: #fff; }
.gap-portal-main { padding: 22px 24px 28px; min-width: 0; }
.gap-portal-main h1 { color: var(--gap-blue); font-family: Georgia, "Times New Roman", serif; font-size: 30px; margin: 0 0 12px; }
.gap-portal-main h2 { font-family: Georgia, "Times New Roman", serif; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gap-portal-main .gap-card-link { margin-left: auto; font-size: 14px; font-weight: 400; font-family: system-ui, sans-serif; }
.gap-portal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 4px 0;
	font-size: 14px;
}
.gap-portal-footer-links { display: flex; gap: 16px; }

/* Dashboard */
.gap-dash-intro { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.gap-dash-intro > div:first-child { flex: 1 1 380px; }
.gap-dash-intro p { margin: 6px 0 0; }
.gap-id-card {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #eaf7ec;
	border: 1px solid #b7e0c0;
	border-radius: 8px;
	padding: 12px 16px;
	min-width: 260px;
}
.gap-id-card svg { width: 40px; height: 40px; color: #1c6b2e; flex-shrink: 0; }
.gap-id-card-label { display: block; font-size: 13px; color: #3f4c60; }
.gap-id-card-value { display: block; font-size: 22px; font-weight: 700; color: var(--gap-blue); }
.gap-id-card-sub { display: block; font-size: 13px; color: #3f4c60; }
.gap-attention-banner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border-color: #f0d49a;
	background: #fff6e8;
}
.gap-attention-banner h2 { margin: 0 0 4px; font-size: 18px; color: #7a4d00; }
.gap-attention-banner p { margin: 4px 0; }
.gap-attention-banner-icon, .gap-next-step-icon, .gap-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-weight: 700;
	flex-shrink: 0;
	font-family: Georgia, serif;
}
.gap-attention-banner-icon { background: #b4780e; color: #fff; }
.gap-stepper {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	position: relative;
}
.gap-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 4px; }
.gap-step::before {
	content: "";
	position: absolute;
	top: 17px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: var(--gap-border);
	z-index: 0;
}
.gap-step:first-child::before { display: none; }
.gap-step-complete::before { background: #1c6b2e; }
.gap-step-marker {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	background: #dfe4ec;
	color: #3f4c60;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--gap-border);
}
.gap-step-complete .gap-step-marker { background: #1c6b2e; color: #fff; }
.gap-step-current .gap-step-marker { background: #1a4d8f; color: #fff; box-shadow: 0 0 0 3px #b7d0f0; }
.gap-step-label { margin-top: 8px; font-weight: 600; font-size: 14px; color: #3f4c60; }
.gap-step-current .gap-step-label { color: #1a4d8f; }
.gap-step-complete .gap-step-label { color: #1c6b2e; }
.gap-step-state { position: absolute; left: -9999px; }
.gap-step-note { font-size: 12px; color: #5b6678; margin-top: 2px; }
.gap-next-step {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	background: #eaf1fb;
	border: 1px solid #b7d0f0;
	border-radius: 8px;
	padding: 14px 16px;
}
.gap-next-step-icon { background: #1a4d8f; color: #fff; }
.gap-next-step-text { flex: 1 1 300px; display: grid; gap: 2px; }
.gap-next-step-text strong { color: var(--gap-blue); font-size: 17px; }
.gap-button-primary, .gap-button-secondary {
	display: inline-block;
	border-radius: 6px;
	padding: 11px 18px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid var(--gap-blue);
}
.gap-button-primary { background: var(--gap-blue); color: #fff; }
.gap-button-secondary { background: #fff; color: var(--gap-blue); }
.gap-button-primary:hover, .gap-button-secondary:hover { background: #143a6e; color: #fff; }
.gap-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gap-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: #d92d20;
	color: #fff;
	font-size: 13px;
	font-family: system-ui, sans-serif;
}
.gap-action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gap-action-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--gap-border); }
.gap-action-required { background: #fff4f2; border-color: #f3b4ab; }
.gap-action-required .gap-action-icon { background: #b42318; color: #fff; }
.gap-action-info { background: #eaf1fb; border-color: #b7d0f0; }
.gap-action-info .gap-action-icon { background: #1a4d8f; color: #fff; }
.gap-action-severity { font-weight: 700; }
.gap-action-text a { color: #142033; font-weight: 600; }
.gap-message-cards { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.gap-message-card a { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--gap-border); border-radius: 6px; text-decoration: none; color: #142033; background: #f6f8fb; }
.gap-message-card-unread a { border-left: 4px solid #d92d20; }
.gap-message-card-from { font-size: 13px; font-weight: 700; color: var(--gap-blue); }
.gap-message-card-body { color: #3f4c60; }
.gap-link-list { list-style: none; margin: 0 0 10px; padding: 0; }
.gap-link-list li { border-bottom: 1px solid #edf0f5; }
.gap-link-list a { display: flex; justify-content: space-between; padding: 10px 2px; text-decoration: none; font-weight: 600; color: #1a4d8f; }
.gap-link-list a::after { content: "\203A"; font-size: 20px; line-height: 1; color: #3f4c60; }
.gap-contact-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.gap-faq { padding-left: 18px; }
.gap-faq li { margin-bottom: 8px; }
.gap-callout { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--gap-border); margin-bottom: 12px; }
.gap-callout p { margin: 0; }
.gap-callout-amber { background: #fff6e8; border-color: #e6bd65; }
.gap-callout-blue { background: #eaf1fb; border-color: #b7d0f0; }
.gap-callout-gray { background: #f4f6f9; border-color: #c7cfdb; }
.gap-req { color: #b42318; font-weight: 700; margin-left: 2px; }
.gap-required-legend { margin-top: 0; }
.gap-form select.gap-field-error { border-color: #b42318; outline: 1px solid #b42318; }
.gap-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gap-msg { border: 1px solid var(--gap-border); border-radius: 8px; padding: 10px 14px; max-width: 88%; background: #f6f8fb; }
.gap-msg-staff { border-left: 4px solid var(--gap-blue); margin-right: auto; }
.gap-msg-applicant { border-left: 4px solid var(--gap-green); margin-left: auto; background: #f5faef; }
.gap-msg-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.gap-msg-body { overflow-wrap: anywhere; }
.gap-message-form textarea { width: 100%; box-sizing: border-box; }
.screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
	.gap-portal-body { grid-template-columns: 1fr; }
	.gap-portal-nav ul { display: flex; flex-wrap: wrap; padding: 4px; }
	.gap-portal-nav li a { padding: 10px 12px; font-size: 14px; border-left: 0; border-bottom: 3px solid transparent; }
	.gap-portal-nav li a.is-current { border-bottom-color: var(--gap-green); }
	.gap-portal-nav-footer { display: none; }
	.gap-portal-main { padding: 16px 12px 22px; }
	.gap-dash-grid { grid-template-columns: 1fr; }
	.gap-stepper { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.gap-step-label { font-size: 12px; }
	.gap-step-note { display: none; }
	.gap-step-current .gap-step-note { display: block; }
	.gap-portal-header-right { align-items: flex-start; }
	.gap-msg { max-width: 100%; }
}