/**
 * No Tax Docs page.
 *
 * Every rule is scoped under .ij-notax. The .faq-chev class is shared with the
 * FAQs and Am I Qualified pages, so scoping is not optional here.
 *
 * 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-notax { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

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

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

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

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

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

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

.ij-notax 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 coverage paragraph. Underlining
   is what marks it, since it inherits the paragraph's colour. */
.ij-notax .ntdcover p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

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

.ij-notax .ntd-cta:hover,
.ij-notax .ntd-cta:focus-visible {
	background: var(--brand-green-dark);
}

/* ---- Explore cards ------------------------------------------------------ */

.ij-notax .ntd-explore {
	transition:
		transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-notax .ntd-explore:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-overlay);
}

.ij-notax .ntd-explore-icon {
	color: var(--brand-green);
}

.ij-notax .ntd-explore-cta {
	transition: gap 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-notax .ntd-explore:hover .ntd-explore-cta {
	gap: 10px;
}

/* The whole card is the link, so the focus ring belongs on the card. */
.ij-notax .ntd-explore:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ij-notax .faq-chev,
	.ij-notax .ntd-cta,
	.ij-notax .ntd-explore,
	.ij-notax .ntd-explore-cta {
		transition: none;
	}

	.ij-notax .ntd-explore:hover {
		transform: none;
	}
}

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

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

	/* The coverage photo stacks under its copy rather than beside it. */
	.ij-notax .ntdcover {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 760px) {
	.ij-notax .ntdgrid,
	.ij-notax .ntdhero,
	.ij-notax .ntdexplore {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.ij-notax .ntdfaq {
		gap: 48px !important;
	}

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

/* The program card titles are <h3>s, which the sitewide phone ladder
   (mobile.css, max-width 560px) cuts to 19px. In the design they are plain
   <div>s, so the ladder never reaches them and they stay at 24px. */
@media (max-width: 560px) {
	.ij-notax .ntd-card h3 { font-size: 24px !important; letter-spacing: -0.7px !important; }
}