// =============================================================================
// Layouts
// =============================================================================

.site-content,
.site-footer {
	position: relative;
	padding: @gutter-width @gutter-width @gutter-width;
	background-color: #fff;
	border-top: @orange-line;
	box-shadow: 1px 1px 10px fade(#000, 10%);
}

.site-main {
	position: relative;
	width: @width-main;
	float: left;
}

.sidebar-primary,
.sidebar-secondary {
	width: @width-secondary;
	float: right;
}

.sidebar-secondary {
	clear: right;
}

/* =============================================================================
   Layout:  Header
   ========================================================================== */

.site-header {
	padding: (@gutter-width + 20px) 0 (@gutter-width + 10px);
}

.site-title {
	float: left;
	margin: 0 0 0 @gutter-width;
	#font > .shorthand(46, normal);
	text-shadow: 0 1px 0 #fff;
	letter-spacing: -2px;

	img {
		max-width: 100%;
		width: auto\9; // IE7-8 need help adjusting responsive images
		height: auto; // Scale the height according to the width, otherwise you get stretching
		vertical-align: middle;
	}

	a {
		color: @link-color;

		&:hover { color: @link-color-hover; }
	}
}

.site-description {
	float: right;
	margin: @gutter-width-small @gutter-width 0 0;
	padding: 2px 8px;
	.font-size(@headings-size-small);
	font-weight: normal;
	background-color: #fff;
	background-color: fade(#fff, 53%);
	border-radius: 3px;
	color: @gray;

	&:empty {
		background: none;
	}
}

/**
 * Use Flexbox to vertical center the site title and description
 */
.flexbox {
	.site-header .home-link {
		.flex-display();
	}

	.site-title {
		float: none;
		margin: auto auto auto @gutter-width;
	}

	.site-description {
		float: none;
		margin: auto @gutter-width auto auto;
	}
}

/* =============================================================================
   Layout:  Footer
   ========================================================================== */

.site-footer {
	position: relative;
	margin: @gutter-width 0;
	background-color: #fff;
	text-shadow: 1px 1px 0 #fff;

	.copyright,
	.credit {
		width: 50%;
		margin: 0;
	}

	.copyright {
		float: left;
	}

	.credit,
	.column-last {
		float: right;
		text-align: right;
	}
}

/**
 * Footer Widget Area
 */
.sidebar-subsidiary {
	clear: both;
	margin-top: @gutter-width-small;

	/* Two columns */
	&.two-col .widget-area {
		float: left;
		width: 48%;
		margin-right: 4%;
	}

	&.two-col .widget-area + .widget-area {
		margin-right: 0;
	}

	/* Three columns */
	&.three-col .widget-area {
		float: left;
		width: 31%;
		margin-right: 3.5%;
	}

	&.three-col .widget-area + .widget-area + .widget-area {
		margin-right: 0;
	}
}

/* =============================================================================
   Layout:  Theme Layouts
   ========================================================================== */

/**
 * One column layout
 */
.layout-1c .site-main {
	float: none;
	width: 100%;
}

/* Make sure that the layout on the front page doesn't get overwritten in the Theme Customizer preview */
body.page-template-template-front-page .site-main {
	&:extend(.layout-1c .site-main);
	margin: 0;
}

/**
 * Two columns
 */
.layout-2c-r {
	.site-main {
		float: right;
	}

	.sidebar-primary,
	.sidebar-secondary {
		float: left;
		clear: left;
		margin-left: ( -(@gutter-width-small - 10px) );
	}
}

/**
 * Three columns
 */
.layout-3c-c,
.layout-3c-r,
.layout-3c-l {
	.sidebar-primary,
	.sidebar-secondary {
		clear: none;
		width: @three-col-sidebar-width;
	}
}

.layout-3c-l,
.layout-3c-r {
	.site-main {
		width: @three-col-main-width;
	}
}

/* Three columns, center */
.layout-3c-c {
	.site-main {
		float: left;
		width: @three-col-main-width;
  		margin-left: ( @three-col-main-width / 2 );
	}

	.sidebar-primary {
		float: left;
		margin-left: ( -(@three-col-main-width + @three-col-sidebar-width + @gutter-width) ); // -765px
	}

	.sidebar-secondary {
		float: right;
		margin-right: ( -(@gutter-width-small - 10px) );
	}
}

/* Three columns, left */
.layout-3c-l {
	.site-main {
		float: left;
	}

	.sidebar-primary,
	.sidebar-secondary {
		float: left;
		margin-left: @gutter-width-small;
	}

	.sidebar-primary {
		margin-left: @gutter-width;
	}

	.sidebar-secondary {
		margin-right: ( -(@gutter-width-small - 10px) );
	}
}

/* Three columns, right */
.layout-3c-r {
	.site-main {
		float: right;
	}

	.sidebar-primary,
	.sidebar-secondary {
		float: left;
		margin-right: @gutter-width-small;
	}

	.sidebar-primary {
		margin-left: ( -(@gutter-width-small - 10px) );
	}
}