/**
 * Am I Qualified page.
 *
 * Every rule is scoped under .ij-qualified. The .faq-chev class is shared with
 * the FAQs page, so an unscoped rule here would reach into it.
 *
 * Layout lives in the template's inline styles, as on every other redesigned
 * page. This file carries only what an inline style attribute cannot express:
 * the disclosure marker, hover and focus states, and the breakpoints.
 */

.ij-qualified { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---- Disclosures -------------------------------------------------------- */

.ij-qualified details > summary {
	list-style: none;
	cursor: pointer;
}

.ij-qualified details > summary::-webkit-details-marker {
	display: none;
}

.ij-qualified details > summary::marker {
	content: '';
}

/* The plus turns into a cross, which is why the glyph is a plus and not a
   chevron — 45 degrees is the whole animation. */
.ij-qualified .faq-chev {
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-qualified details[open] > summary .faq-chev {
	transform: rotate(45deg);
}

.ij-qualified details > summary:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---- Links and buttons -------------------------------------------------- */

/* The one inline link on the page sits in a route card's body. Underlining is
   what marks it as a link, since it inherits the paragraph's colour. */
.ij-qualified .aq-route p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ij-qualified .aq-route p a:hover,
.ij-qualified .aq-route p a:focus-visible {
	color: var(--brand-green-dark);
}

.ij-qualified .aq-cta-primary,
.ij-qualified .aq-cta-secondary {
	transition:
		background 200ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-qualified .aq-cta-primary:hover,
.ij-qualified .aq-cta-primary:focus-visible {
	background: var(--brand-green-dark);
}

.ij-qualified .aq-cta-secondary:hover,
.ij-qualified .aq-cta-secondary:focus-visible {
	background: var(--slate-50);
}

/* ---- Route cards -------------------------------------------------------- */

.ij-qualified .aq-route-icon {
	flex: none;
	color: var(--brand-green);
}

.ij-qualified .aq-route-inverse .aq-route-icon {
	color: var(--brand-green-light);
}

/* The last point in a card sits on the card's own edge, so its rule would
   read as a stray line under the list. */
.ij-qualified .aq-route li:last-child {
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ij-qualified .faq-chev,
	.ij-qualified .aq-cta-primary,
	.ij-qualified .aq-cta-secondary {
		transition: none;
	}
}

/* ---- Breakpoints -------------------------------------------------------- */

@media (max-width: 1100px) {
	.ij-qualified .aq-routes {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 760px) {
	.ij-qualified .aq-routes {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ij-qualified .aq-faq {
		gap: 48px !important;
	}

	.ij-qualified details > summary {
		gap: 16px !important;
	}
}