/*!
Theme Name: Forgotten Trek
Author: Nick Ottens
Author URI: https://forgottentrek.com
Description: Forgotten Trek theme
Version: 1.0
*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body {
	background: #111;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

em { font-style: italic; }

h1, h2 { margin: 1rem 0; }
h3 { margin: .5rem 0; }

h1, h2,
.entry-meta time, .entry-meta .author, .meta-links a { font-weight: normal; }

h3, .entry-content blockquote { font-weight: 600; }

b, strong,
.entry-meta, .meta-links { font-weight: bolder; }

.credits { text-align: justify; }

/* Font Sizes */

h1 { font-size: 2.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1rem; }
figcaption, .entry-footer { font-size: .8rem; }

@media (min-width: 768px) {
	.entry-content p,
	.entry-content ol, .entry-content ul,
	.navigation { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
	h1 { font-size: 3.5rem; }
	h2 { font-size: 2rem; }
	figcaption, .entry-footer { font-size: .9rem; }
}

/* Line Heights */

h1 { line-height: 1.1; }

h2, h3 { line-height: 1.3; }

figure { line-height: 1.5; }

p,
.entry-footer { line-height: 1.7; }

p.credits { margin-top: 0; }

.entry-content ol li, .entry-content ul li { margin: .5rem 0; }

/* Blockquote */

blockquote::before {
	content: "“";
	margin-left: -.5rem;
	position: absolute;
}

blockquote {
	margin: 0;
	padding: 0 0 0 1rem;
}

.comments figcaption:before {
	content: "— ";
}

/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a, a:visited { text-decoration: none; }

a:active, a:focus, a:hover,
.primary-navigation li:focus, .primary-navigation li:hover { cursor: pointer; text-decoration: underline; }

.navigation ul { list-style: none; margin: 0; padding: 0; position: relative; }
.navigation li { display: inline-block; margin-right: .5rem }
@media (min-width: 480px) { .navigation li { margin-right: 1rem } }
.navigation li:last-child { margin: 0; }

.navigation ul li > ul {
	background: #000;
	display: none;
	margin: 0 0 0 -1rem;
	padding: .5rem 0 0;
	position: absolute;
	visibility: hidden;
}

.navigation ul li:hover > ul,
.navigation ul li:hover ul,
.navigation ul li > ul:focus,
.navigation ul li > ul:hover {
	display: block;
	visibility: visible;
}

.navigation ul li:focus-within > ul { /* Keep separate for sake of older browsers */
	display: block;
	visibility: visible;
}

.navigation ul li > ul li {
	border-left: 1px solid;
	border-right: 1px solid;
	display: block;
	margin: 0;
	padding: .5rem 1rem;
}

.navigation ul li > ul li:first-of-type {
	border-top: 1px solid;
	padding-top: 1rem;
}

.navigation ul li > ul li:last-of-type {
	border-bottom: 1px solid;
	padding-bottom: 1rem;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

.site-header,
.archive,
.entry,
.site-footer {
	max-width: 1024px;
	margin: 0 auto;
}

.site-header,
.site-footer {
	padding: 1rem;
}

.archive,
.entry {
	padding: 1rem 1rem 0;
}

.archive-header,
.entry-header {
	padding-bottom: 1rem;
}

.archive-content,
.entry-content {
	padding-top: 1rem;
}

@media (min-width: 480px) {
	.archive-header,
	.entry-header {
		padding-bottom: 2rem;
	}
}

.entry-footer {
	margin-top: 1.5rem;
	margin-bottom: .5rem;
	padding-top: 1.5rem;
}

.comments {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.footer-navigation {
	padding-top: 1rem;
}

@media (min-width: 480px) {
	.archive-content, .entry-content { padding-top: 2rem; }
	.footer-navigation { padding-top: 2rem; }
}

@media (min-width: 768px) {
	.site-header, .site-footer { padding: 2rem; }
	.archive, .entry { padding: 2rem 2rem 0; }
	.entry-footer { margin-top: 2rem; padding-top: 2rem; }
	.comments { margin-top: 2rem; padding-top: 2rem; }
}

@media (min-width: 1024px) {
	.site-header, .site-footer { padding: 3rem; }
	.archive, .entry { padding: 3rem 3rem 0; }
	.archive-header, .entry-header { padding-bottom: 3rem; }
	.archive-content { padding-top: 3rem; }
	.footer-navigation { padding-top: 3rem; }
}

/* Grid */

.gallery {
	display: grid;
	grid-gap: 1rem 2rem;
}

.gallery .wide {
	margin-top: -1rem;
}

.columns-2,
.columns-4 {
	grid-template-columns: repeat(2, 1fr);
}
.columns-2 .wide,
.columns-4 .wide {
	grid-column: 1/3;
}

.columns-3,
.columns-6 {
	grid-template-columns: repeat(3, 1fr);
}
.columns-3 .wide,
.columns-6 .wide {
	grid-column: 1/4;
}

.columns-5 {
	grid-template-columns: repeat(5, 1fr);
}
.columns-5 .wide {
	grid-column: 1/6;
}

@media (min-width: 480px) {
	.archive-content,
	.entry-footer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.archive-content {
		grid-gap: 1rem 2rem;
	}
	.archive-content .wide {
		grid-column: 1/3;
	}
	.archive-content.columns-4 { /* Home page */
		grid-template-columns: repeat(4, 1fr);
	}
	.archive-content.columns-4 .wide { /* Home page */
		grid-column: 1/5;
	}
	.entry-footer {
		grid-gap: 0 1.5rem;
	}
	.archive-content .wide,
	.entry-credits {
		grid-column: 1/3;	
	}
}

@media (min-width: 768px) {
	.archive-content,
	.gallery {
		grid-gap: 1.5rem 3rem;
	}
	.gallery .wide {
		margin-top: -1.5rem;
	}
	.archive-content {
		grid-template-columns: repeat(3, 1fr);
	}
	.archive-content .wide {
		grid-column: 1/4;
	}
	.columns-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	.columns-4 .wide {
		grid-column: 1/5;
	}
	.columns-6 {
		grid-template-columns: repeat(6, 1fr);
	}
	.columns-6 .wide {
		grid-column: 1/7;
	}
	.entry-footer {
		grid-gap: 0 2rem;
	}
}

@media (min-width: 1024px) {
	.archive-content,
	.gallery {
		grid-gap: 2rem 3rem;
	}
	.gallery .wide {
		margin-top: -2rem;
	}
	.entry-footer {
		grid-gap: 1rem 3rem;
	}
}

/* Masthead */

@media (min-width: 1024px) {
	.site-branding,
	.primary-navigation {
		display: inline;
	}
	.primary-navigation {
		float: right;
	}
}

/* Headers */

.archive-header,
.entry-header {
	border-bottom: 3px solid;
}

.entry-footer,
.comments,
.footer-navigation {
	border-top: 3px solid;
}

/* Archive */

.archive-content ul,
.archive-content li {
	list-style: none;
	padding: 0;
}

.archive-content ul {
	margin: 1rem 0;
}

.archive-content li {
	margin: .5rem 0;
}

/* Article */

.entry-content > *:not(.alignwide),
.entry-footer,
.comments {
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
}

.entry-footer span:not(.author) {
	display: block;
}

@media (min-width: 480px) {
	.entry-footer .category,
	.entry-footer .tags {
		text-align: right;
	}
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

img {
	max-width: 100%;
}

.gallery img {
	object-fit: cover;
}

.logo { width: 150px; }
@media (min-width: 480px) { .logo { width: 200px; } }
@media (min-width: 768px) { .logo { width: 250px; } }

figure {
	margin: 1.5rem 0;
}

.gallery figure {
	margin: 0;
}

.alignleft,
.alignright {
	width: 50%;
}
.alignleft {
	float: left;
	margin-left: 0;
	margin-right: 1.5rem !important;
}
.alignright {
	float: right;
	margin-left: 1.5rem !important;
	margin-right: 0;
}

@media (min-width: 768px) {
	figure {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	figcaption {
		padding-top: .5rem;
	}
	.alignleft,
	.alignright {
		margin-top: 1rem;
		width: 25%;
	}
	.alignleft {
		margin-right: 2rem !important;
	}
	.alignright {
		margin-left: 2rem !important;
	}
}

@media (min-width: 1024px) {
	figure {
		margin-top: 2.5rem;
		margin-bottom: 2.5rem;
	}
	.alignleft,
	.alignright {
		margin-top: 1rem;
		margin-bottom: 2.5rem;
	}
	.alignleft {
		margin-right: 2.5rem !important;
	}
	.alignright {
		margin-left: 2.5rem !important;
	}
}

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/

body { color: #ffebde; } /* light white */
figcaption, .comment-meta { color: #d0b0a0; } /* dark white */

h2,
.site-footer a, .site-footer a:visited { color: #165fc5; } /* dark blue */
.footer-navigation { border-color: #165fc5; } /* dark blue */

.current { color: #0099f6 !important; } /* light blue */
h1,
figcaption.entry-author,
.site-footer a:active, .site-footer a:focus, .site-footer a:hover { color: #0099f6; } /* light blue */
.archive-header, .entry-header, .entry-footer, .comments { border-color: #0099f6; } /* light blue */

a, a:visited,
.primary-navigation,
.entry-footer { color: #fdcd06; } /* light gold, TNG color was #fc3 */
.navigation ul li ul li { border-color: #fdcd06 !important; } /* light gold */

a:active, a:focus, a:hover,
.primary-navigation li:focus, .primary-navigation li:hover,
.entry-footer a, .entry-footer a:visited { color: #fa0; } /* dark gold */

/* TNG Colors */

.tng h2,
.tng .site-footer a, .tng .site-footer a:visited { color: #d8d; } /* dark purple */
.tng .footer-navigation { border-color: #d8d; } /* dark purple */

.tng .current { color: #c7f !important; } /* light purple */
.tng h1,
.tng figcaption.entry-author,
.tng .site-footer a:active, .tng .site-footer a:focus, .tng .site-footer a:hover { color: #c7f; } /* light purple */
.tng .archive-header, .tng .entry-header, .tng .entry-footer, .tng .comments { border-color: #c7f; } /* light purple */