/*
Theme Name: TOPR
Description: Child theme based on Twentyseventeen.
Author: Adrian Goetz
Template: twentyseventeen
*/

/*
ALSO USING:
styles/front-page.css
styles/navigation.css
*/

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Arvo');

/*--------------------------------------------------------------
Site Wide
--------------------------------------------------------------*/

div#page {
	margin-top: -1px;
}

/* PREVENT COLUMNS IN PAGES */
.entry-content, .entry-header, .comments-area {
	float: none;
	width: auto;
}

/* PREVENT COLUMNS IN PAGES (has to be added to override media query) */
@media screen and (min-width: 48em){
	.entry-content, .entry-header, .comments-area {
		float: none;
		width: auto;
	}
	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive) #primary .entry-header,
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
	    float: none;
	    width: auto;
	}

	.blog:not(.has-sidebar) #primary article, 
	.archive:not(.page-one-column):not(.has-sidebar) #primary article, 
	.search:not(.has-sidebar) #primary article, 
	.error404:not(.has-sidebar) #primary .page-content, 
	.error404.has-sidebar #primary .page-content, 
	body.page-two-column:not(.archive) #primary .entry-content, 
	body.page-two-column #comments {
	    float: none;
	    width: auto;
	}
}

.site-content {
    padding: 2.5em 1em 1em;
}


.entry-title {
	font-size: 2em !important;
}

.edit-link {
	display: none;
}

/* Override the default no-margin list style. */
li {
	margin-left: 1em;
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
/* sitewide message baner */
div.message-banner,
div.warning-banner {
    font-size: 20px;
    padding-left: 5px;
}

div.message-banner {
    background-color: #dcf3f8;
    border-bottom: 3px solid #4a9fb3;
}

div.warning-banner {
    background-color: #fcf0de;
    border-bottom: 3px solid #f0ad4e;
}

div.message-banner p,
div.warning-banner p {
	margin: 0;
	padding: 10px;
}

.site-title {
	font-size: 12px;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.custom-logo-link img {
    display: inline-block;
    max-height: 110px;
    width: auto;
}

.search-field, input[type="search"] {
	background: #ddd;
	border: 1px solid #ffc904;
	border-radius: 0px;
}

.search-field, input[type="search"]:focus {
	background: #fff;
	border: 1px solid #ffc904;
}

.search-form .search-submit {
	position: static;
}

.search-form button {
	background-color: #ffc904;
	border-radius: 0px;
	border: 1px solid #ffc904;
	color: #000;
}

.search-form {
	display: inline-flex;
	width: 100%;
}

.search-submit:hover {
	background-color: #ffeba4;
	border-left: #ffeba4;
}

.login-text a {
	display: none; /* currently not displayed */
	color: #fff;
	float: right;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

.has-header-image .custom-header-media img {
	position: absolute;
	padding-bottom: 0px;
}

.twentyseventeen-front-page.has-header-image .custom-header-media {
	height: 1200px;
	max-height: 400px;
}

.has-header-image.twentyseventeen-front-page .custom-header {
	max-height: 400px;
}

@media screen and (min-width: 48em){

	.site-branding figure {
		width: 50%;
		display: inline-block;
		margin-top: 5%
	}

	.nav-right {
		width: 50%;
		float: right;
		margin-top: 10%;
	}
	.site-branding {
		padding-bottom: 120px;
	}
}

@media screen and (min-width: 979px) {

}

/*--------------------------------------------------------------
Category List
--------------------------------------------------------------*/

.cat-list {
	column-count: 3;
}

.cat-list ul {
	list-style-type: none;
}

.cat-item a:hover {
	text-decoration: underline !important;
}

/*--------------------------------------------------------------
Content Excerpt
--------------------------------------------------------------*/

.entry-title {
	display: flex;
	align-items: center;
}

.entry-title > img {
	display: inline-block;
	width: 64px;
	height: auto;
	margin-right: 1rem;
}