/* components/01-visual-styling/02-typography/02-type/type.scss */
/* BEGIN type.scss */



/* common css */
/* Font Family */

.tk-arsenal {
	font-family: "Arsenal", sans-serif;
}

.tk-libre-franklin {
	font-family: "Libre Franklin", sans-serif;
}

/* Old type families - May remove once rebranding is complete */

.tk-ff-meta-web-pro {
	font-family: "ff-meta-web-pro", sans-serif;
}

.tk-kulturista-web {
	font-family: "kulturista-web", serif;
}

.tk-open-sans {
	font-family: "open-sans", sans-serif;
}

/* End Font Family */

/* BEGIN intro.scss */

.intro {
	font-size: 1.125rem;
	line-height: 1.5;
	font-weight: 400;
}

.heading-paragraph-design p {
	line-height: 1.5;
}
#intro .d-flex,#anchor-list .d-flex,#blockquote-sec .d-flex {
	border-top: 2px solid #86acd5;
	padding-top: 53px;
	padding-bottom: 53px;
}
/* END intro.scss */

/* Default Anchor */
a {
    color: $blue;
    text-decoration:underline
}

// a:visited {
//     color: $grey-b;
//     text-decoration: underline;
//     background-color:transparent
// }

a:active, a:focus, a:hover {
    color: $blue;
    background-color: $grey;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* Alt Anchor */
.grey-anchor {
	color: $blue;
	text-decoration: underline;
	// font-weight: 400;
	background-color: $grey;
	&:hover {
		color: $grey;
		background-color: $blue;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

/* Orange Variant */
.orange-anchor {
	color: $orange-a11y;
	text-decoration: underline;
	// font-weight: 400;
}

.orange-anchor:hover {
	color: $blue;
	background-color: $grey;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* Background Variants */

.blue-bg {
	a {
		color: $white;
		&:hover {
			color: $blue;
		}
	}
	.grey-anchor {
		color: $blue;
		&:hover {
			color: $white;
			background-color: $grey-d;
			-webkit-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}
	}
	.orange-anchor {
		color: $orange;
	}
}

.grey-bg {
	a {
		color: $blue;
		&:hover {
			color: $grey;
			background-color: $blue;
			-webkit-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}
	}
	.grey-anchor {
		background-color: $grey-b;
	}
	.orange-anchor {
		color: $orange-a11y;
	}
}

.orange-a11y-bg {
	a {
		color: $white;
		&:hover {
			color:$blue;
		}
	}
	.orange-anchor {
		color: $white;
	}
	.grey-anchor {
		color: $blue;
		&:hover {
			color: $white;
		}
	}
}

.orange-bg {
	a {
		color: $white;
		&:hover {
			color:$blue;
		}
	}
	.orange-anchor {
		color: $white;
	}
	.grey-anchor {
		color: $blue;
		&:hover {
			color: $white;
		}
	}
}

/* End Anchor Designs */

.border-top-5px-orange {
	border-top: 5px solid $orange;
}

pre, code {
	color: $blue;
}
code {
	font-size: 14px;
}
pre {
	white-space: pre-line;
}


/* Dark Mode - Typography Styles */
@include color-mode(dark) {
	pre, code {
		color: $white;
	}
	.page-text-wrapper {
		color:$white;
	}
	p, ul li, ol li {
		color: $white;
	}
	a {
		color: $white;
		&:hover {
			color:$blue;
		}
	}
	.paragraph-text {
		color:$white;
	}
	.grey-bg, .orange-bg {
		h2 {
			color: $blue;
		}
		p.intro {
			color:$blue;
		}
	}
	a.grey-anchor {
		color:$blue;
		&:hover {
			color:$white;
		}
	}
	.grey-bg, .grey-b-bg {
		a {
			color: $blue;
			&:hover {
				color: $grey;
				background-color: $blue;
				-webkit-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
			}
		}
		p, code, pre, ul li, ol li {
			color: $blue;
		}
	}

	.grey-bg {
		&.card {
			.card-title, .card-text {
				color: $blue;
				p, ul, li, a {
					color: $blue;
				}
			}
		}
	}

}
/* Dark Mode - Typography END */

@include media-breakpoint-down(lg) {
	.paragraph-text {
		font-size: 14px;
		line-height: 1.6;
	}
}
/* END type.scss */