@import "settings";
@import "helpers";

// SET-UP CORE FONT SIZING
// Base fontsizing styles, no specific elements here. Use _base.scss for that.

// Core typography
// ------------------------------------------------------------

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?boycsg');
	src:url('../fonts/icomoon.eot?#iefixboycsg') format('embedded-opentype'),
		url('../fonts/icomoon.woff?boycsg') format('woff'),
		url('../fonts/icomoon.ttf?boycsg') format('truetype'),
		url('../fonts/icomoon.svg?boycsg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@mixin icon-font($type) {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	@if ( $type == "icon-arrow-dropdown") {
		content: "\e600";
	}
	@if ( $type == "icon-arrow-right") {
		content: "\e601";
	}
}
.icon-arrow-dropdown:before {
	@include icon-font("icon-arrow-dropdown");
}
.icon-arrow-right:before {
	@include icon-font("icon-arrow-right");
}

// Font mixins

@mixin font-nudista-thin {
	font-family: "nudista-web", sans-serif;
	font-weight: 200;
}

@mixin font-nudista {
	font-family: "nudista-web", sans-serif;
	font-weight: 300;
}

@mixin font-nudista-bold {
	font-family: "nudista-web", sans-serif;
	font-weight: 500;
}

@mixin font-roboto-thin {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

@mixin font-roboto {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

@mixin font-roboto-bold {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

html {
	// Reset the default "browser" font-size (This is NOT the default font-size for the site text)
	font-size : $browser-font-size;
}


body {
	-webkit-font-smoothing: antialiased;
	color: $txt-clr;
	@include font-roboto;

	// The actual base font-size of the site
	font-size: em-calc($fs-default, $browser-font-size);
	line-height: lh-calc($lh-default);
}

#{headings()} {
	color: $txt-clr-headings;

	a {
		color: $txt-clr-headings-link;

		&:hover, &:focus {
			color: $txt-clr-headings-link-alt;
		}
	}
}

a {
	#{headings()} {
		color: $txt-clr-headings-link;
	}

	&:hover, &:focus {
		#{headings()} {
			color: $txt-clr-headings-link-alt;
		}
	}
}

p, ul, ol, dl {
	@include margin-vertical(em-calc($lh-default));
}

strong, b {
	font-weight: 500;
}

// h1 is responsive. Bigger from 40em and up.
h1, .h1 {
	@include font-nudista;
	text-transform: uppercase;
	font-size: em-calc($fs-h1-1);
	line-height: lh-calc($lh-h1-1, $fs-h1-1);
	@include margin-vertical(em-calc($lh-default, $fs-h1-1));
}

h2, .h2 {
	@include font-nudista;
	font-size: em-calc($fs-h2-1);
	line-height: lh-calc($lh-h2-1, $fs-h2-1);
	@include margin-vertical(em-calc($lh-default, $fs-h2-1));
}

h3, .h3 {
	@include font-nudista;
	font-size: em-calc($fs-h3);
	line-height: lh-calc($lh-h3, $fs-h3);
	@include margin-vertical(em-calc($lh-default, $fs-h3));
}

h4, .h4 {
	font-weight: 300;
	font-size: em-calc($fs-h4);
	line-height: lh-calc($lh-h4, $fs-h4);
	@include margin-vertical(em-calc($lh-default, $fs-h4));
}

h5, .h5 {
	text-transform: uppercase;
	font-weight: 500;
	font-size: em-calc($fs-h5);
	line-height: lh-calc($lh-h5, $fs-h5);
	margin-top: em-calc($lh-default, $fs-h5);
	margin-bottom: 0;
}

h6, .h6 {
	font-weight: 500;
	font-size: em-calc($fs-h6);
	line-height: lh-calc($lh-h6, $fs-h6);
	margin-top: em-calc($lh-default, $fs-h6);
	margin-bottom: 0;
}

a {
	@include transition(color 0.2s linear);

	text-decoration: none;
	color: $txt-clr-link;

	&:hover, &:active {
		color: $txt-clr-link-alt;
	}
}

p {
	&.small {
		font-size: em-calc($fs-s);
	}
}

table {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;

	th {
		text-align: left;
		font-weight: 500;
		padding-right: 10%;
	}

	th, td {
		vertical-align: top;
		@include padding-vertical(em-calc(3px));
	}
}


dl {
	@include proper-clearfix;
}

	dt {
		color: $gray-4;
		margin-top: em-calc($fs-default / 2);

		&:first-child {
			margin-top: 0;
		}
	}

	dd {
		margin: 0;
		padding: 0;
	}

hr {
	display: block;
	border: 0;
	height: 0;
	border-bottom: 1px dashed $gray-7;
	margin: 0;
	padding: 0;
	clear: both;
}

.muted {
	color: $txt-clr-muted;
}


// Block variations of text color

.block-alt, .block-alt-2 {
	color: $txt-clr-alt;

	#{headings()} {
		color: $txt-clr-headings-alt;
	}
}

// Text columns

.has-columns-2 {
	@include columns(auto 2);
	@include column-gap($gutter-w);
}

.has-columns-3 {
	@include columns(auto 3);
	@include column-gap($gutter-w);
}

.has-columns-4 {
	@include columns(auto 4);
	@include column-gap($gutter-w);
}