/* Rulleskøjter.dk stylesheet.
   Slimmed from the original WP "Goran" theme (~3050 lines) down to just the
   selectors this site actually emits: 5-item top nav, hero band, route grid,
   article content, footer.
*/

/* ===================================================================
   1. Reset
   =================================================================== */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, cite, code, em, strong, sub, sup,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tr, th, td,
article, aside, figure, figcaption, footer, header, main, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
*, *:before, *:after { box-sizing: border-box; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; }
article, aside, figure, figcaption, footer, header, main, nav, section { display: block; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
img { height: auto; max-width: 100%; }

/* ===================================================================
   2. Typography
   =================================================================== */
html { font-size: 100%; line-height: 1.5em; }
body {
	color: #242424;
	font-family: "Noto Sans", sans-serif;
	background: #e1dfdf;
	word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: bold; }
h1 { margin: 0 auto 12px; font-size: 2.25em;  line-height: 1.33333em; }
h2 { margin: 0 auto 12px; font-size: 1.875em; line-height: 1.6em; }
h3 { margin: 0 auto 16px; font-size: 1.5em;   line-height: 2em; }
h4 { margin: 0 auto 17px; font-size: 1.375em; line-height: 1.636364em; }
h5 { margin: 0 auto 21px; font-size: 1.125em; line-height: 1.33333em; }
p  { margin-bottom: 24px; }
b, strong { font-weight: bold; }
em, i, cite { font-style: italic; }
blockquote {
	padding-left: 24px;
	margin: 0 auto 24px;
	border-left: 2px solid #e74f4e;
	font-family: "Noto Serif", serif;
}
blockquote p { margin-bottom: 0; }
ul, ol { margin: 0 0 24px 0; }
ul { list-style: square inside; }
ol { list-style: decimal inside; }
li > ul, li > ol { margin-bottom: 0; margin-left: 5%; }

/* ===================================================================
   3. Links
   =================================================================== */
a {
	color: #e74f4e;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}
a:visited { font-weight: normal; }
a:hover, a:focus, a:active { color: #242424; outline: none; }

.hero .entry-content a { color: #fff; }
.hero .entry-content a:hover,
.hero .entry-content a:focus,
.hero .entry-content a:active { color: rgba(255, 255, 255, 0.7); }

.site-footer a { color: #fff; }
.site-info a { font-weight: normal; }
.site-footer a:hover, .site-footer a:focus, .site-footer a:active { color: #d2cfcf; }

/* ===================================================================
   4. Accessibility
   =================================================================== */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.screen-reader-text:focus {
	clip: auto !important;
	display: block;
	top: 5px;
	left: 5px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	background: #f1f1f1;
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	color: #21759b;
	font-size: 14px;
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
}

/* ===================================================================
   5. Alignments and clearfix
   =================================================================== */
.alignleft   { display: inline; float: left;  margin-right: 24px; }
.alignright  { display: inline; float: right; margin-left: 24px; }
.aligncenter { clear: both; display: block; margin: 0 auto; }

.clear:before, .clear:after,
.entry-content:before, .entry-content:after,
.site-content:before, .site-content:after,
.site-footer:before, .site-footer:after,
.site-header:before, .site-header:after { content: ''; display: table; }
.clear:after,
.entry-content:after,
.site-content:after,
.site-footer:after,
.site-header:after { clear: both; }

/* ===================================================================
   6. Layout
   =================================================================== */
.site { background: #fff; }

.hero .hentry,
.hero-wrapper,
.no-sidebar-full .content-area,
.site {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.content-area,
.grid,
.hero .hentry,
.site {
	width: 100%;
}

.content-area,
.grid-area,
.site-footer {
	padding-right: 24px;
	padding-left: 24px;
}

.content-area { padding-top: 24px; }

.site-content { position: relative; background: #fff; }

.site-header {
	background: #b23d3c;
	color: #fff;
}

.site-footer {
	background: #403f3f;
	color: #d2cfcf;
	font-size: 0.875em;
	line-height: 1.71429em;
}
.site-info {
	padding: 24px 0;
	border-top: 1px solid #555353;
}

/* Fat footer columns */
.footer-cols { padding: 24px 0; }
.footer-col { padding: 12px 0; }
.footer-col h5 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 1em;
	line-height: 1.5;
	text-transform: uppercase;
}
.footer-col h5 + ul { margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 2px 0; border: 0; }
.footer-col a { font-weight: normal; }

.content-wrapper + .grid-area { border-top: 2px solid #d2cfcf; }

/* ===================================================================
   7. Navigation (mobile-first: collapsed menu + hamburger toggle)
   =================================================================== */
.menu-toggle {
	display: block;
	width: 100%;
	padding: 12px;
	background: #202020;
	border: 0;
	border-radius: 0;
	color: #fff;
	font: inherit;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}
.menu-toggle:hover,
.menu-toggle:focus,
.main-navigation.toggle-on .menu-toggle { background: #302f2f; }
.menu-toggle:before {
	content: '\2630';
	display: inline-block;
	padding-right: 8px;
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: bottom;
}

.main-navigation { color: #fff; font-weight: bold; text-transform: uppercase; }
.main-navigation a,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active { color: inherit; }
.main-navigation.toggle-on .menu-primary { display: block; }

.menu-primary {
	display: none;
	padding: 24px;
	background: #403f3f;
}
.menu-primary ul { margin-bottom: 0; list-style: none; font-size: 110%; }
.menu-primary li { padding: 12px 0; border-top: 1px solid #302f2f; }
.menu-primary li:first-child { padding-top: 0; border-top: 0; }
.menu-primary li:last-child { padding-bottom: 0; }
.menu-primary a { display: block; }

/* ===================================================================
   8. Hero (header band, optionally with full-bleed background image)
   =================================================================== */
.hero {
	padding: 24px;
	background-color: #b8c3d6;
	min-height: 210px;
}
.hero-image .hero {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.hero .page-title,
.hero .hentry { position: relative; color: #fff; }
.hero .page-title {
	margin-bottom: 0;
	padding-bottom: 1px;
	text-align: center;
	text-transform: uppercase;
}
.hero .hentry { margin-bottom: -24px; }
.hero blockquote { border-left-color: rgba(255, 255, 255, 0.7); }

/* ===================================================================
   9. Article content
   =================================================================== */
.hentry { margin: 0; }

.entry-title, .page-title { text-transform: uppercase; }
.entry-title a { color: #242424; }
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active { color: #e74f4e; }

.post-thumbnail {
	position: relative;
	display: inline-block;
	margin: 0 auto 24px auto;
}
.post-thumbnail img {
	display: block;
	margin: 0;
	border-radius: 4px;
}

.more-link {
	display: inline-block;
	font-weight: bold;
	text-transform: uppercase;
}
.more-link:after {
	content: '';
	display: inline-block;
	margin-bottom: 2px;
	margin-left: 4px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #e74f4e;
	transition: all 0.15s ease-in-out;
}
.more-link:hover:after,
.more-link:focus:after,
.more-link:active:after { border-left-color: #242424; }

/* ===================================================================
   10. Route grid (cards on /ruter and the index shortcut box)
   =================================================================== */
.grid { padding-top: 24px; }
.grid:first-of-type { padding-top: 0; border-top: 0; }
.grid .hentry { margin-bottom: 0; text-align: center; }
.grid .entry-summary { text-align: left; }

.grid a.post-thumbnail img {
	border: 2px solid transparent;
	transition: all 0.15s ease-in-out;
}
.grid a.post-thumbnail:hover img { border-color: #e74f4e; }

.grid .entry-title {
	margin: 0 auto 24px;
	font-size: 1em;
	line-height: 1.5em;
}
.grid .entry-summary p:last-of-type { text-align: center; }

/* In the grid, "Vis rute" turns into a red pill button instead of an arrow. */
.grid .more-link {
	padding: 12px 24px;
	background: #e74f4e;
	border-radius: 4px;
	color: #fff;
}
.grid .more-link:hover,
.grid .more-link:focus,
.grid .more-link:active { background: #242424; color: #fff; }
.grid .more-link:after { display: none; }

/* ===================================================================
   11. Responsive breakpoints
   =================================================================== */
@media screen and (min-width: 600px) {
	li > ul, li > ol { margin-left: 24px; }
	.site { width: 600px; }
	body.hero-image .hero { padding: 48px 24px; }
}

@media screen and (min-width: 768px) {
	.site { width: 768px; }
	.no-sidebar-full .content-area { float: none; }
	.hero .hentry,
	.hero-wrapper,
	.no-sidebar-full .content-area { width: 672px; }
	.content-area { padding-top: 48px; }
	.content-area,
	.grid-area,
	.site-footer { padding-right: 48px; padding-left: 48px; }
	.grid { padding-bottom: 24px; }
	.hentry { margin-bottom: 24px; }
	.hero { padding-top: 48px; padding-bottom: 48px; }
	body.hero-image .hero { padding: 96px 0; }
}

@media screen and (min-width: 600px) {
	.footer-col { float: left; width: 50%; padding-right: 24px; }
	.footer-col:nth-of-type(2n+1) { clear: left; }
}

@media screen and (min-width: 1020px) {
	.site { width: 1020px; }
	.footer-col { width: 25%; padding-right: 24px; }
	.footer-col:nth-of-type(2n+1) { clear: none; }
	.footer-col:nth-of-type(4n+1) { clear: left; }

	/* Inline horizontal nav, hide hamburger. */
	.menu-toggle { display: none; }
	.menu-primary { display: block; padding: 0; background: transparent; }
	.main-navigation { float: right; width: 560px; margin-top: 24px; margin-bottom: 24px; }
	.main-navigation ul { margin: 0; padding-left: 0; list-style: none; text-align: center; }
	.main-navigation li {
		display: inline-block;
		padding: 0;
		margin: 0 12px;
		border-top: 0;
		text-align: left;
	}
	.main-navigation a {
		display: block;
		padding-top: 12px;
		padding-bottom: 10px;
		border-bottom: 2px solid transparent;
	}
	.main-navigation a:hover,
	.main-navigation a:focus,
	.main-navigation a:active,
	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a { border-bottom-color: #fff; }

	/* Header overlays the hero on desktop. */
	.hero-image .site-header {
		position: relative;
		z-index: 2;
		margin-bottom: -96px;
		background: rgba(0, 0, 0, 0.225);
		text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	}

	/* Layout: three-column grid. */
	.hero .hentry,
	.hero-wrapper,
	.no-sidebar-full .content-area { width: 876px; }
	.content-area,
	.site-info { float: left; margin-left: 72px; }
	.content-area { width: 560px; }
	.grid-area { padding-right: 72px; padding-left: 72px; }
	.grid {
		float: left;
		width: 244px;
		margin-right: 72px;
		padding-top: 72px;
	}
	.grid:nth-of-type(3n+3) { margin-right: 0; }
	.grid:nth-of-type(3n+1) { clear: left; }
	.grid:nth-of-type(2),
	.grid:nth-of-type(3) { padding-top: 0; border-top: 0; }
	.grid { padding-bottom: 48px; }

	.content-area { padding-right: 0; padding-left: 0; padding-top: 72px; }

	.hentry { margin-bottom: 48px; }
	.hero { padding-top: 72px; padding-bottom: 72px; }
	body.hero-image .hero.with-featured-image { padding: 240px 0 144px; }
	body.hero-image .hero.without-featured-image { padding: 192px 0 96px; }
}

@media screen and (min-width: 1230px) {
	.site { width: 1230px; }
	.hero .hentry,
	.hero-wrapper,
	.no-sidebar-full .content-area { width: 1086px; }
	.content-area,
	.main-navigation { width: 100%; }
	.grid { width: 314px; }
	body.hero-image .hero.with-featured-image { padding: 312px 0 216px; }
	body.hero-image .hero.without-featured-image { padding: 240px 0 144px; }
}