/* -------------------------------
    Global spacing variables
--------------------------------- */
/*
*  Global colour variables
*
*  1 - Greyscale colours
*  2 - System colours
*  3 - Accent colours
*    3.1 - Main
*    3.2 - Light
*    3.3 - Dark
*    3.4 - Callout backgrounds
*/
/*** 1 - Greyscale colours ***/
/*** 2 - System colours ***/
/*** 3 - Accent colours ***/
/* Main */
/* Light */
/* Dark */
/* callout backgrounds */
/* icon colours */
/* service ontario header colours */
/* Rem calc function */
/* Pixel to REM Conversion */
/*** 1 - Breakpoint sizes for media queries ***/
/* -------------------------------
    Focus placeholder variables
--------------------------------- */
/* -------------------------------
    Focus placeholder
--------------------------------- */
/* -------------------------------
    Global font-weight variables
--------------------------------- */
.ontario-task {
	border-bottom: 0.125rem solid #cccccc;
	padding: 1.25rem 0;
	list-style: none;
}
.ontario-task__content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
@media screen and (max-width: 40em) {
	.ontario-task__content {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.5rem;
	}
}
.ontario-task .ontario-task__text {
	display: flex;
	flex-direction: column;
}
.ontario-task__label {
	text-align: left;
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 600;
	display: inline-block;
}
@media screen and (max-width: 40em) {
	.ontario-task__label {
		margin-bottom: 0.5rem;
	}
}
.ontario-task__label a {
	text-decoration: none;
	color: inherit;
}
.ontario-task__label a:hover {
	text-decoration: underline;
}
.ontario-task__link {
	display: block;
	text-decoration: none;
	color: #0066cc;
	font-weight: normal;
}
.ontario-task__hint-text--true {
	margin-bottom: 0.5rem;
}
.ontario-task--error {
	padding-left: 1rem;
	border-left: 0.25rem solid #cd0000;
	margin-left: -0.125rem;
}
.ontario-task .ontario-hint {
	margin-bottom: 0;
}

.ontario-task:focus-within {
	outline: 4px solid #009adb;
}

.ontario-task__link .ontario-task__label {
	text-decoration: underline;
}

.ontario-task__link:focus {
	outline: none;
	box-shadow: none;
}

.ontario-task:has(.ontario-task__link):hover {
	background-color: rgb(242.25, 242.25, 242.25);
}

.ontario-task--status-completed .ontario-task__link .ontario-task__label,
.ontario-task--status-inprogress .ontario-task__link .ontario-task__label,
.ontario-task--status-notstarted .ontario-task__link .ontario-task__label,
.ontario-task--status-optional .ontario-task__link .ontario-task__label,
.ontario-task--status-error .ontario-task__link .ontario-task__label {
	color: #0066cc;
	text-decoration: underline;
}
.ontario-task--status-completed .ontario-task__link:visited .ontario-task__label,
.ontario-task--status-inprogress .ontario-task__link:visited .ontario-task__label,
.ontario-task--status-notstarted .ontario-task__link:visited .ontario-task__label,
.ontario-task--status-optional .ontario-task__link:visited .ontario-task__label,
.ontario-task--status-error .ontario-task__link:visited .ontario-task__label {
	color: #551a8b;
}
.ontario-task--status-completed .ontario-task__link:hover .ontario-task__label,
.ontario-task--status-inprogress .ontario-task__link:hover .ontario-task__label,
.ontario-task--status-notstarted .ontario-task__link:hover .ontario-task__label,
.ontario-task--status-optional .ontario-task__link:hover .ontario-task__label,
.ontario-task--status-error .ontario-task__link:hover .ontario-task__label {
	color: #00478f;
}
.ontario-task--status-completed .ontario-task__link:active .ontario-task__label,
.ontario-task--status-inprogress .ontario-task__link:active .ontario-task__label,
.ontario-task--status-notstarted .ontario-task__link:active .ontario-task__label,
.ontario-task--status-optional .ontario-task__link:active .ontario-task__label,
.ontario-task--status-error .ontario-task__link:active .ontario-task__label {
	color: #002142;
}

ontario-hint-text::part(hint-text) {
	margin: 0;
}
