/**
 * Document Checklist page.
 *
 * Every rule is scoped under .ij-dc. 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 check glyph's colour, the
 * download link's states, and the breakpoints.
 *
 * Because the layout IS inline, every rule below that changes a property the
 * template also sets inline needs !important to win: an inline declaration
 * beats any selector, inside a media query or not. The design's own
 * stylesheet does the same for .dc-panels, and for the same reason. Rules on
 * properties the template does not set inline (order, and the .dc-check
 * colour) deliberately go without it.
 */

/* The base type. Without this the page inherits bb-theme's skin, which sets
   body to Helvetica at weight 400 — every other redesigned page declares the
   same four properties on its own region for exactly this reason. */
.ij-dc { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---- Checklist rows ----------------------------------------------------- */

/* The tick sits beside text that wraps to several lines, so it is pinned to
   the first line rather than centred on the row. */
.ij-dc .dc-check {
	flex: none;
	margin-top: 2px;
	color: var(--brand-green-light);
}

/* The one checklist item that is a link (the sample CPA letter). Its resting
   colour is inline, so only the states live here. */
.ij-dc .dc-dl {
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-dc .dc-dl:hover {
	color: #fff !important;
}

.ij-dc .dc-dl:focus-visible {
	outline: 2px solid var(--brand-green-light);
	outline-offset: 3px;
	border-radius: 4px;
}

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

/* Two cards side by side stop working well before the cards themselves run
   out of room: the dark card's rows wrap to three and four lines first. The
   design drops to one column at 960px. */
@media (max-width: 960px) {
	.ij-dc .dc-panels {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* #canada leads with the dark card, which only reads as a lead beside the
	   white one. Stacked, every panel should open with its heading. */
	.ij-dc .dc-panels > .dc-card-light {
		order: -1;
	}
}

/* The panel's 32px side padding plus each card's 32px minimum leaves a phone
   about 250px of text column. Trimming the outer padding first keeps the
   cards themselves at a readable width. */
@media (max-width: 600px) {
	.ij-dc .dc-panel {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-bottom: 80px !important;
	}

	.ij-dc .dc-panel:not(:first-child) {
		padding-top: 64px !important;
	}

	/* 42px with -1.7px of tracking overflows a 320px viewport on the longest
	   heading ("Checklist for documents. Every item covered."). */
	.ij-dc h1,
	.ij-dc h2 {
		font-size: clamp(28px, 8vw, 42px) !important;
		letter-spacing: -1.1px !important;
	}

	/* The row's tick and its text are 24px apart at every width in the design,
	   which is most of the gap a phone has to spare. */
	.ij-dc .dc-row {
		gap: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ij-dc .dc-dl {
		transition: none;
	}
}