/**
 * Ijara Process page.
 *
 * Every rule is scoped under .ij-process. The .faq-chev class is shared with
 * the FAQs and Am I Qualified pages, so an unscoped rule here would reach into
 * them.
 *
 * 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-process { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

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

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

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

.ij-process 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-process .faq-chev {
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* ---- Download cards ----------------------------------------------------- */

.ij-process .langcard {
	transition:
		background 200ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-process .langcard:hover {
	background: var(--color-success-soft);
	transform: translateY(-2px);
}

.ij-process .langcard:hover .lang-arrow {
	color: var(--brand-green-dark);
}

.ij-process .langcard:focus-visible {
	outline: 2px solid var(--brand-green);
	outline-offset: 3px;
}

/* ---- Call to action ----------------------------------------------------- */

.ij-process .proc-cta {
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-process .proc-cta:hover {
	background: var(--brand-green-dark);
}

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

@media (max-width: 1100px) {
	.ij-process .langgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 900px) {
	.ij-process .stepsplit {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 760px) {
	.ij-process .langgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* The stacking effect depends on each card sticking while the next scrolls
   over it. Stacked one-column cards are taller than the viewport, so the
   sticky offset would trap the top of a card off-screen — below 900px the
   cards simply flow. */
@media (max-width: 900px) {
	.ij-process #steps ~ section > div > div {
		position: static !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ij-process .langcard,
	.ij-process .faq-chev,
	.ij-process .proc-cta {
		transition: none;
	}

	.ij-process .langcard:hover {
		transform: none;
	}
}