/*
 * Base element styles on top of Bootstrap 3.4.1 (A16): the rendered defaults of the Joomla site
 * (typography, links, lists, images). Values: tokens.css. Written from scratch (Q25).
 */

body {
	font-family: var(--icf-font-body);
	font-size: var(--icf-size-font-base);
	font-weight: 400;
	line-height: 1.42857143;
	color: var(--icf-color-text);
}

a {
	color: var(--icf-color-text);
	text-decoration: none;
	transition: color var(--icf-motion-link), background-color var(--icf-motion-link);
}

/* Focus keeps Bootstrap's link focus colour (the reference never overrides it); only hover turns blue. */
a:focus {
	color: #23527c;
	text-decoration: none;
}

a:hover {
	color: var(--icf-color-primary);
	text-decoration: none;
}

/* No ring after a mouse click, as on the reference; a visible ring for keyboard focus (deviation A19). */
a:focus:not(:focus-visible) {
	outline: 0;
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Text for screen readers only. */
.icf-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--icf-font-body);
	font-weight: 400;
	line-height: 1.1;
	color: inherit;
}

h3, .h3 {
	font-size: 36px;
}

h4, .h4 {
	font-size: 30px;
}

h4, .h4, h5, .h5, h6, .h6 {
	margin-top: 10.5px;
	margin-bottom: 10.5px;
}

p {
	line-height: var(--icf-size-line-p);
}

ul,
menu,
dir {
	margin: 0;
	padding: 0;
}

ul,
li {
	list-style-type: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

label {
	font-weight: 400;
}

code {
	background: none !important;
}

blockquote {
	border-color: var(--icf-color-primary);
}

/* Bootstrap container: flush at ≥1200px, 15px gutters below (as the Joomla template). */
.container {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1200px) {
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.icf-admin-notice {
	padding: 10px 15px;
	background: #fcf8e3;
	border: 1px solid #faebcc;
	color: #8a6d3b;
}
