/**
 * Typography
 *
 * Description: Contains styling for typography.
 * Version: 1.0.8
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Webfonts
 * 2.0 - Classes
 * 3.0 - Base settings
 * 4.0 - Headings
 *   4.1 - Headings (reduced level by 1)
 *   4.2 - Headings (reduced level by 2)
 * 5.0 - Paragraphs
 * 6.0 - Links
 * 7.0 - Tables
 *   7.1 - Tables (responsive)
 * 8.0 - Lists
 *   8.1 - Step list
 * 9.0 - Figure & figcaption
 * 10.0 - DL, DD, DT
 * 11.0 - Other elements (hr)
 * 12.0 - Label
 * 13.0 - Index number
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Webfonts
 * -----------------------------------------------------------------------------
 */

@font-face {
  font-family: 'brandosans';
  src: url('../../fonts/brandosans-text-v100-web/brandosans-text-v100.eot'); /* IE9 Compat Modes */
  src: url('../../fonts/brandosans-text-v100-web/brandosans-text-v100.eot') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/brandosans-text-v100-web/brandosans-text-v100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/brandosans-text-v100-web/brandosans-text-v100.woff') format('woff'); /* Pretty Modern Browsers */
       //url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       //url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


/**
 * 2.0 - Base settings
 * -----------------------------------------------------------------------------
 */

body {
	font-family: $font-family-base;
	font-size: $font-size-base;
	line-height: $line-height-standard;
	color: $text-color;
	word-wrap: break-word;
}
img {
	border: 0 none;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
.t-rte, .mceContentBody {
	@include clearfix();

	img {
		margin-bottom: em(20px);
	}
}
.t-rte {
	&.max-width {
		max-width: em(700px);
	}

	&.alternative {
		padding-top: em(30px);

		h2 {
			border-bottom: 4px solid $accent-color;
			padding-bottom: em(11px, getFontsize($h2-sizes, 'medium'));
			padding-top: em(24px, getFontsize($h2-sizes, 'medium'));
		}

		@media (max-width: $device-small-max) {
			padding-top: 0;

			h2 {
				padding-bottom: em(4px, getFontsize($h2-sizes, 'small'));
				padding-top: em(18px, getFontsize($h2-sizes, 'small'));
				margin-bottom: em(-3px, getFontsize($h2-sizes, 'small'));
			}
		}
	}

	&.t-small {
		font-size: em(16px);

		&.border {
			border-top: em(4px, 16px) solid $accent-color;
			padding-top: em(26px, 16px);
			margin-top: em(5px, 16px);
		}

		@media (max-width: $device-small-max) {
			font-size: getFontsize($p-sizes, 'small');

			&.border {
				margin-top: em(-14px, getFontsize($p-sizes, 'small'));
				padding-top: em(20px, getFontsize($p-sizes, 'small'));
			}
		}
	}

	&.border {
		border-top: em(4px) solid $accent-color;
		padding-top: em(26px);
		margin-top: em(5px);
	}
}



/**
 * 3.0 - Classes
 * -----------------------------------------------------------------------------
 */

.t-center {
	text-align: center;
}
.t-right {
	text-align: right;
}
.t-strong {
	font-weight: 600;
}
.t-accent {
	color: $accent-color;
}



/**
 * 4.0 - Headings
 * -----------------------------------------------------------------------------
 */

h1, h2, h3, h4, h5, h6, .h-headline, .h-subheadline, .h-byline, .h-standfirst, .h-related, .h-promo, .h {
	font-family: $font-family-alt;
	margin: 0;
	font-weight: 400;
	font-style: normal;
	line-height: $line-height-standard;
	vertical-align: baseline;
	//text-rendering: optimizelegibility;

	em, i {
		font-family: AbrilText-Italic;
		font-weight: normal;
		font-style: normal;
	}

	&.t-strong {
		font-weight: 600;
	}
}

h1, .h-headline {
	@include font-size($h1-sizes);
	font-weight: 600;

	&.small {
		@include font-size($h1-small-sizes);
	}
}

h2, .h-subheadline {
	@include font-size($h2-sizes);

	&.border {
		border-bottom: 4px solid $accent-color;
		padding-bottom: em(11px, getFontsize($h2-sizes, 'medium'));
	}
}

h3, .h-byline {
	@include font-size($h3-sizes);
}

header > p.h-byline {
	margin-bottom: em(-5px, 28px);
}

@media (max-width: $device-small-max) {
	header > p.h-byline {
		@include font-size($h4-sizes);
		margin-bottom: em(-5px, getFontsize($h4-sizes, 'small')) !important;
	}
}

h4, .h-standfirst {
	@include font-size($h4-sizes);
}

h5, .h-related {
	@include font-size($h5-sizes);
	//font-weight: 600;
}

h6, .h-promo {
	@include font-size($h6-sizes);
}


/**
 * 4.1 - Headings (reduced level by 1)
 * -----------------------------------------------------------------------------
 */

.reduce-header-level-1 {
	h1, .h-headline {
		@include font-size($h2-sizes);
	}

	h2, .h-subheadline {
		@include font-size($h3-sizes);
	}

	h3, .h-byline {
		@include font-size($h4-sizes);
	}

	h4, .h-standfirst {
		@include font-size($h5-sizes);
	}

	h5, .h-related {
		@include font-size($h6-sizes);
	}
}


/**
 * 4.2 - Headings (reduced level by 2)
 * -----------------------------------------------------------------------------
 */

.reduce-header-level-2 {
	h1, .h-headline {
		@include font-size($h3-sizes);
	}

	h2, .h-subheadline {
		@include font-size($h4-sizes);
	}

	h3, .h-byline {
		@include font-size($h5-sizes);
	}

	h4, .h-standfirst {
		@include font-size($h6-sizes);
	}

	h5, .h-related {
		@include font-size($h6-sizes);
	}
}



/**
 * 5.0 - Paragraphs and blockquote
 * -----------------------------------------------------------------------------
 */

p {
	@include font-size($p-sizes);

	&.changedate {
		@include font-size($p-small-sizes);
		padding-top: em(20px, getFontsize($p-small-sizes, null));
	}

	&.preamble {
		@include font-size($preamble-sizes);
		font-weight: 600;
		max-width: em(700px, getFontsize($preamble-sizes, 'medium'));

		&.small {
			@include font-size($p-sizes);
		}
	}

	&.release {
		font-family: $font-family-alt;
		font-weight: bold;
		float: left;
		margin-bottom: em(13px);
		margin-top: em(2px);
	}

	&.date {
		margin-bottom: em(15px, getFontsize($p-sizes, 'medium'));
    	margin-right: em(20px, getFontsize($p-sizes, 'medium'));

		&:before {
			@include huddingeIcons();
			@extend .icon-thin-026_time_clock_watch;
			padding-right: em(5px);
			vertical-align: middle;
			margin-top: -4px;
			display: inline-block;
		}
	}
}



/**
 * 6.0 - Links
 * -----------------------------------------------------------------------------
 */

a {
	color: $link-color;
	text-decoration: none;

	&:hover {
		color: $link-focus-color;
		text-decoration: underline;
	}

	&:active {
		color: $link-visited-color;
		text-decoration: underline;
	}

	&.small {
		@include font-size($p-small-sizes);
	}

	&.arrow {
		@include addLinkArrow();
	}

	&.no-link-arrow, .no-link-arrow & {
		&:after {
			display: none;
		}
	}

	&.text-color {
		color: $text-color;
	}

	&.document-link {
		font-weight: 600;
		position: relative;

		&:before {
			@include huddingeIcons();
			//@extend .icon-thin-063_paper_document_file_word;
			@extend .icon-file-text-o;
			display: inline-block;
			font-size: em(30px);
			vertical-align: middle;
			margin-top: em(-5px, 30px);
			padding-right: em(16px, 30px);
			text-decoration: none !important;
		}
	}
}



/**
 * 7.0 - Tables
 * -----------------------------------------------------------------------------
 */

table {
	margin-bottom: $margin-standard;
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;

	caption {
		text-align: left;
		@include font-size($h4-sizes);
	}

	.t-rte &, .mceContentBody & {
		font-size: em(17px);

		th, td {
			padding-top: em(8px, 17px);
			padding-bottom: em(8px, 17px);
		}
	}

	&.is-stripped {
		th, td {
			border: 0;
		}
		th {
			background-color: transparent;
			border-top: 0;
			border-bottom: 2px solid $grey;
		}
		td {
			border-bottom: 1px solid $grey-light;
		}
		tr:nth-of-type(2n+1) {
			td {
				background-color: $grey-lighter;
			}
		}
	}

	&.table-list {
		font-size: em(17px);

		th, td {
			padding-top: em(8px, 17px);
			padding-bottom: em(8px, 17px);
		}

		th {
			background-color: transparent;
			font-weight: 400;
			border-top: 0;

			.h-standfirst {
				font-size: em(24px, 17px);
				margin-top: -2px !important;
				margin-bottom: 0 !important;
			}
		}
	}
}
th, td {
	text-align: left;
	vertical-align: top;
	padding: 0.6em 1em 0.4em;
	border-bottom: 1px solid $grey-light;

	p {
		margin: 0;
	}
}
th {
	background-color: $grey-lighter;
	border-top: 1px solid $grey;
	padding: 0.7em 1em 0.3em;
}

td {
	border-left: 1px solid $grey-light;

	&:first-child {
		border-left: 0;
	}
}

td[class^="l-size"], td[class*=" l-size"], th[class^="l-size"], th[class*=" l-size"] {
	float: none;
}


/**
 * 7.1 - Tables (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.table-scrollable {
		width: 100%;
		overflow-y: auto;
		margin-bottom: $margin-standard;
		position: relative;

		> table {
			margin-bottom: 0;
			width: auto;
			max-width: none;
		}

		&::-webkit-scrollbar
		{
			-webkit-appearance: none;
			width: 14px;
			height: 14px;
		}

		&::-webkit-scrollbar-thumb
		{
			border-radius: 8px;
			border: 3px solid #fff;
			background-color: rgba(0, 0, 0, .3);
		}
	}
}



/**
 * 8.0 - Lists
 * -----------------------------------------------------------------------------
 */

ul, ol {
	@include font-size($p-sizes, $typography-breakpoints, '.mceContentBody', true);

	.t-rte & {
		@include font-size($p-sizes, $typography-breakpoints, false);

		@media (max-width: $device-small-max) {
			li {
				padding-left: em(0px);
				margin-bottom: em(10px);
			}
		}
	}

	.t-rte &, .mceContentBody & {
		margin-bottom: $margin-standard;
		padding-left: em(34px);

		li {
			margin-bottom: em(15px);
			padding-left: em(8px);

			p {
				margin-bottom: 0;
			}
		}
	}
}

ol {
	.t-rte &, .mceContentBody & {
		li {
			padding-left: em(13px);
		}
	}
	.t-rte & li {
		@media (max-width: $device-small-max) {
			padding-left: em(10px);
		}
	}
}


/**
 * 8.1 - Step list
 * -----------------------------------------------------------------------------
 */
.step, ol.step, ul.step {
	$size: 25px;
	list-style-type: none;
	padding: em(2px) 0 0 0;
	margin: 0;
	counter-reset: li-counter;
	padding-left: em(16px);

	> li {
		position: relative;
		padding-left: em(40px);
	}
	> li:after {
		position: absolute;
		top: 0;
		left: 0;
		width: $size;
		height: $size;
		font-weight: 600;
		font-size: em(17px);
		line-height: em(24px, 17px);
		text-align: center;
		color: $white;
		content: counter(li-counter);
		counter-increment: li-counter;
		vertical-align: center;
	}
	> li:before {
		position: absolute;
		top: 0;
		left: 0;
		width: $size;
		height: $size;
		line-height: $size;
		text-align: center;
		vertical-align: center;
		background-color: $black;
		border-radius: $size;
		content: "";
	}

	@media (max-width: $device-small-max) {
		margin: $margin-standard / 2 0 $margin-standard;
		padding-left: em(0px);

		> li:after {
			font-size: em(17px, getFontsize($p-sizes, 'small'));
		}
	}
}



/**
 * 9.0 - Figure & figcaption
 * -----------------------------------------------------------------------------
 */

figure {
	margin: 0;

	img {
		.t-rte & {
			margin-bottom: em(10px) !important;
		}
	}
}

figcaption {
	border-bottom: 1px solid $grey-light;
	padding: 0 em(15px) em(15px) 0;
	@include font-size($p-small-sizes);

	&.no-border {
		border-bottom: none;
	}

	p {
		margin: 0 !important;
	}

	.t-rte &, .mceContentBody & {
		margin-bottom: em(20px, getFontsize($p-small-sizes, null));
		margin-top: em(-8px, getFontsize($p-small-sizes, null));
	}
}



/**
 * 10.0 - DL, DD, DT
 * -----------------------------------------------------------------------------
 */

dl {
	overflow: hidden;
	margin: 0 0 em(20px);

	a {
		@include addLinkArrow();
	}

	dt {
		display: block;
		float: left;
		min-width: em(160px);
		font-weight: 600;
	}

	&.dl-narrow dt {
		min-width: em(110px);
	}

	dt, dd {
		padding-bottom: 1px;
	}

	dd {
		display: inline;
		margin: 0;
		overflow: hidden;
	}

	dd:after {
		display: block;
		content: '';
		clear: both;
	}

	&.small {
		font-size: em(16px);
	}

	@media (max-width: $device-small-max) {
		dt, dd {
			display: block;
			min-width: 0;
			width: 100%;
			float: none;
		}

		dd {
			margin-bottom: em(20px);
		}
	}
}



/**
 * 11.0 - Other elements (hr)
 * -----------------------------------------------------------------------------
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid $accent-color-negative;
	margin: $margin-standard 0 em(19px);
	padding: 0;

	&.thick {
		border-top: 4px solid $accent-color-negative;
	}

	&.grey-light {
		border-color: $grey-light;
	}

	&.block-hr {
		margin: em(4px) $margin-standard / 2 em(39px);
	}

	@media (max-width: $device-small-max) {
		margin: $margin-standard * 0.75 0 em(19px);
	}
}



/**
 * 12.0 - Label
 * -----------------------------------------------------------------------------
 */

.text-label {
	font-size: em(14px);
	display: inline-block;
	text-transform: uppercase;
	background-color: $accent-color;
	color: $white;
	padding: 3px 10px 1px;
	border-radius: 6px;
	margin-right: 6px;
}

#tip-form-link {
	position: fixed;
	right: 0;
	top: 30%;
	background-color: $accent-color;
	color: $white;
	padding: 10px 20px;
	text-align: center;
	z-index: 900;

	.text-label {
		background-color: $white;
		color: $accent-color;
		margin-right: -3px;
		margin-bottom: 5px;
	}

	&:hover {
		text-decoration: none;
		background-color: $accent-color-dark;
	}

	@media (max-width: $device-small-max) {
		display: none;
	}
}



/**
 * 13.0 - Index number
 * -----------------------------------------------------------------------------
 */

.index-number {
	text-align: right;
	padding-right: em(30px);

	@extend .h-byline;

	&.large {
		@extend .h-subheadline;
	}

	@media (max-width: $device-small-max) {
		display: inline;
		text-align: left;
		float: left;
		padding-right: em(30px);

		+ h2, + h3 {
			display: inline;
		}
	}
}