/* === Style Rules for BLOG === */
/* These rules build on and modify rules in style.css to customize appearance of blog pages */

/* === Structural Rules === */
/* Structural elements only in this area: margins, padding, and other decorations are set farther down in this sheet */

/* HEADER ELEMENTS LAYOUT */
/* The banner logo and the menu are side by side instead of stacked like on the home page, except for very small screens */
@media (min-width: 600px) { /* TODO check this number - was 420, changed to 600 to match other rules - if this works, consider making a varibale for "mobile width" */
	header {
		display: flex;
		justify-content: space-between;
	}

	div[role="banner"] { /* this holds the img element */
		width: 30%; /* smaller to fit image next to menu - see div[role="banner"] in style.css as well */
	}
	
	nav[role="menu"] {
		padding-top: var(--space-m);
	}
}


/* MAIN CONTENT ELEMENTS LAYOUT */
/* Pages with lists of posts */
main article.post-listing {
	max-width: 100%; /* allows articles on a listing page to expand to full width of content column */
	justify-self: stretch; /* keeps shorter content from collapsing */
}

article.post-listing {
	display: grid; /* new grid for date and post next to each other */
	grid-template-columns:
		.2875fr
		1fr;
	grid-template-areas: "date-link post-div";
	gap: var(--space-xs-s);
}

article.post-listing a.date-link { /* puts date in the first column */
	grid-column: date-link; 
}

article.post-listing div { /* puts content in the second column */
	grid-column: post-div;
}

/* Navigation for paginated lists of posts */
nav.page-nav {
	display: flex;
	flex-flow: row;
}

nav.page-nav div {
	width: calc(100% / 3);
}

/* Single article pages */
/* Single article footer */
footer.article-footer {
	display: grid;
	grid-template-columns: /* this makes it take up the full width of main column*/
		1fr
		minmax(0, calc(60ch - 4vw))
		1fr; 
	grid-template-areas: "prev metadata next";
}

/* Single article metadata */
div.article-metadata {
	grid-column: metadata; /* middle column of article-footer grid */
	align-self: center; /* centers vertically in article-footer grid */
	/* new grid for date and tags */
	display: grid; 
	width: 100%;
	grid-template-columns: 1fr 1fr; /* date and tags next to each other */
	gap: var(--space-xs-s);
}

/* Single article navigation */
div.prev-article {
	grid-column: prev; /* left column of article-footer grid */
}

div.next-article {
	grid-column: next; /* right column of article-footer grid */
	justify-self: end; /* right justifies text */
}

div.prev-next { 
	align-self: center; /* centers vertically in article-footer grid */
}


/* === Typography Rules === */
time { 
	font-size: var(--font-step-0); /* a little larger than on frontpage */
}

section.archive-listing time {
	color: var(--color-main-middle); /* lightens a little bit to deemphasize */
}
 
div.prev-next, nav.page-nav { 
	font-size: var(--font-step--1); /* single article and paginated list navigation */
}

nav.page-nav .next-page {
	text-align: right; /* setting for prev-page is unnecessary because it's already left-justified */
}

nav.page-nav .current-page {
	text-align: center;
}

span.count {
	font-size: var(--font-step--1); /* makes the number a little smaller when there are post counts in lists */
}


/* Links */
a.post-tag {
	font-size: var(--font-step-0);
}

article.post-listing a time { /* date in lists of posts */
	font-family: "new-spirit", serif;
	font-weight: 700;
	font-size: var(--font-step--1);
	color: var(--color-main-middle);
}

section.archive-listing a.archive-heading { /* Periodic Archive month heading, similar to h2 */
	font-family: "new-spirit", serif;
	font-size: var(--font-step-1);
	color: var(--color-main-dark);
}

section.archive-listing a.archive-heading:hover { /* Periodic Archive month heading, similar to h2 */
	color: var(--color-main-darker);
}

a.title-link:hover,
a.date-link:hover,
.tag-listing a:hover,
article.post-listing.quip a.date-link:hover,
article.post-listing.pic a.date-link:hover,
section.archive-listing a.archive-heading:hover {
	text-decoration: none; /* no underline on hover */
}


/* === Lists === */
/* Tag Listing: Items as Blocks */
/* Rules that decorate the li elements are in the margin-padding-decoration section below */
section.tag-listing ul { 
	display: flex;
	flex-wrap: wrap;
}


/* Periodic Archive: List of Lists */
/* Rules that decorate the li elements are in the margin-padding-decoration section below */
section.archive-listing ul li ul { /* this targets the list of posts under the month title */
	display: grid; /* the parent grid */
	grid-template-columns: .375fr 1fr;
	grid-template-areas: "date article-link";
	column-gap: var(--space-s);
}

section.archive-listing ul li ul li {
	grid-column: date / article-link;
	display: grid; /* need to give the li its own new grid (nested within the parent grid) */
	grid-template-columns: subgrid; /* and we still want to follow the column layout from the parent grid */
}

section.archive-listing ul li ul li time {
	grid-column: date; /* first column */
}

section.archive-listing ul li ul li a {
	grid-column: article-link; /* second column */
}


/* === Margins, Spacing, and Decorations === */
/* These rules are for fine tuning and highlighting specific items on pages. */
/* Check the Structural section above for rules for placing larger blocks. */

/* Pages with lists of posts */
main > article h2 { /* restricts to post listing pages, not frontpage */
	margin-left: var(--space-2xs); /* lines title up with text in post listing pages */
}

article.post-listing {
	margin-bottom: var(--space-m);
	margin-left: var(--space-2xs)
}

article.post-listing a.date-link { /* styles the first column */
	padding: calc(var(--space-m) - var(--space-3xs)) var(--space-s) var(--space-s) var(--space-s); /* top bumped down to better match text */
	overflow: hidden; /* truncate long months on small screens */
	text-overflow: ellipsis;
	text-align: center;
}

article.post-listing div { /* styles second column */
	padding: var(--space-s) var(--space-m) var(--space-s) 0;
}

article.post-listing:last-of-type {
	margin-bottom: var(--space-l-xl); /* a little extra room for the last one, pushes down page navigation if it exists */
}

article.post-listing.quip a.date-link,
article.post-listing.long,
article.post-listing.pic a.date-link { /* styles borders for posts in lists */
	border: 1px solid var(--color-main-middle);
	border-radius: .5em;
}

article.post-listing.quip a.date-link:hover,
article.post-listing.pic a.date-link:hover { /* styles hovers for posts in lists */
	background: var(--color-main-lightest);
}

article.post-listing.pic > div {
	padding-right: var(--space-s); /* let pictures be a little wider than text */
}

article.post-listing.pic img {
	border-radius: .5em; /* round the corners of images in posts in lists */
}

main article.pic p {
	padding-left: 0; /* match to image width instead of indenting, in list or on single page */
}

/* Navigation for paginated lists of posts */
nav.page-nav {
	margin-left: var(--space-2xs); /* lines up with articles */
	margin-bottom: var(--space-l);
	padding: var(--space-s);
	border: 1px solid var(--color-main-middle);
	border-radius: .5em;
}

nav.page-nav div p {
	margin-bottom: 0;
}


/* Single article pages */
article.article-post { 
	margin-bottom: var(--space-l-xl);
}

article.article-post.quip {
	margin-top: var(--space-2xl); /* give a ton of space to the top on article page since it doesn't have a title */
}

article.article-post.pic {
	margin-top: var(--space-l); /* give some space to the top on article page since it doesn't have a title */
}

/* Single article footer */
footer.article-footer {
	margin-bottom: var(--space-m);
}

/* Single article metadata */
div.article-metadata {
	padding: var(--space-xs);
	border: 1px solid var(--color-main-middle);
	border-radius: .5em;
}

div.article-metadata p {
	margin-bottom: 0;
}

/* Single article navigation */
div.prev-next { 
	padding: var(--space-s);
}


/* Tag Listing */
section.tag-listing li {
	margin-bottom: var(--space-m);
	margin-right: var(--space-s);
}

section.tag-listing li a {
	display: inline-block; /* makes the whole block clickable */
	padding: var(--space-s) var(--space-m);
	border: 1px solid var(--color-main-light);
	border-radius: .5em;
	text-align: center;
}

section.tag-listing li a:hover {
	background: var(--color-main-lightest);
}


/* Periodic Archive */
section.archive-listing ul li ul { /* this targets the list of posts under the month title */
	margin-left: var(--space-xs); /* tucks the date/link li elements under the month heading */
}

section.archive-listing > ul > li {
	margin-bottom: var(--space-s);
}

section.archive-listing a.archive-heading {
	margin-bottom: var(--space-3xs);
}


/* === Dark Color Scheme === */
@media (prefers-color-scheme: dark) {
	section.tag-listing li a:hover,
	article.post-listing.quip a.date-link:hover, 
	article.post-listing.pic a.date-link:hover { 
		background: oklch(from var(--color-main-darkest) l 0.04 h / 0.25); /* mix with above to keep background color subtle */
	}
}