/*
Theme Name: DSDC 2026
Theme URI: https://dansauve.com
Author: Dan Sauvé
Author URI: https://dansauve.com
Description: Styles for my site, bitch. Now with semantic headings and a flexible layout.
Version: 2.0
Requires at least: 6.3
Text Domain: dsdc
*/

/*
	DSDC 2026 - Screen styles
	Created by Dan Sauvé (www.dansauve.com)

	Headings are styled by class, never by bare tag, so the tag can follow the
	page outline without changing the look. See README.md for the heading guide.

	CONTENTS:
		Tokens
		General
		Links
		Layout
		Header
		Navigation
		Homepage Header
		Headings
		Typography
		Lists
		Posts
		Footer
		Accessibility
		Misc
		Mobile
*/

/* =Tokens
---------------------------------------------------------------------------------------------------- */

:root {
	color-scheme: light dark;

	--bg: #fff;
	--blue: #09f;       /* Links and titles */
	--bar: #09f;        /* The blue line across the top; matches the line baked into the header GIFs */
	--text: #333;
	--muted: #999;
	--ink: #000;        /* Headings */
	--black: #000;      /* The black logo box and menus, in both modes */

	--rule-start: #0b0b0b; /* Dotted heading rule, fading left to right */
	--rule-end: #f5f5f5;
	--sep-mid: #bbb;       /* Dotted separator between posts, strongest in the middle */
	--sep-end: #fdfdfd;

	/* The vine, footer leaves and bullets are cut against white; dark mode swaps or inverts them */
	--vine-art: url("images/wrapper/home-vine.png");
	--leaves-art: url("images/wrapper/footer-leaves.gif");
	--bullet-filter: none;

	--font: Georgia, "Times New Roman", Times, serif;

	--logo-w: clamp(226px, 25%, 260px); /* Black logo box and sidebar column: 226px like the original, a little wider on big screens */
	--gap: 25px;          /* Space between the sidebar and content columns */
	--content-max: 40rem; /* Readable line length for the text column: about 75 characters at the 18px post size */
	--site-max: 915px;    /* Logo column + gap + text column, plus a little room past the text */
}

/* =General (Default HTML Elements)
---------------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: var(--bg) url("images/wrapper/background.jpg") left top repeat-x;
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	margin: 0;
	padding: 0;
}

img,
video,
iframe {
	border: 0;
	height: auto;
	max-width: 100%;
}

/* =Links (Global)
---------------------------------------------------------------------------------------------------- */

a:link,
a:active {
	color: var(--blue);
}

a:visited {
	color: var(--text);
}

a:hover,
a:visited:hover {
	color: var(--blue);
}

/* =Layout
---------------------------------------------------------------------------------------------------- */

.site {
	isolation: isolate; /* Keeps the leaves (z-index -1) behind the content but in front of the page */
	margin: 0 auto;
	position: relative;
	width: min(100% - 2rem, var(--site-max));
}

	/* Footer leaves, as an element so they can sit behind the content */
	.site::after {
		background: var(--leaves-art) no-repeat left bottom;
		bottom: 0;
		content: "";
		height: 342px;
		left: -15px;
		pointer-events: none;
		position: absolute;
		width: 292px;
		z-index: -1;
	}

.site-header,
.site-body,
.site-footer-content {
	column-gap: var(--gap);
	display: grid;
	grid-template-columns: var(--logo-w) minmax(0, var(--content-max));
}

.site-body {
	padding: 69px 0 144px 0; /* Content starts 130px from the top, under the 61px logo box */
}

.content {
	grid-column: 2;
	grid-row: 1;
}

.sidebar {
	grid-column: 1;
	grid-row: 1;
	padding: 0 0 223px 25px; /* Room for the footer leaves when the sidebar is the taller column */
}

	.sidebar strong {
		color: var(--blue);
		font-weight: normal;
	}

/* =Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	align-items: start;
}

.site-title {
	background: var(--black) url("images/wrapper/header-bg.gif") repeat-x left top;
	color: #fff;
	font-size: 1.5rem;
	font-weight: normal;
	min-height: 61px;
	letter-spacing: 0.1em;
	line-height: normal;
	margin: 0;
	padding: 16px 22px 0 0;
	text-align: right;
}

	.site-title a,
	.site-title a:visited,
	.site-title a:hover {
		color: #fff;
		text-decoration: none;
	}

	.site-title strong {
		color: var(--blue);
		font-weight: normal;
	}

/* =Navigation
---------------------------------------------------------------------------------------------------- */

.menu-toggle {
	display: none;
}

.site-nav ul {
	font-size: 1.5rem;
	list-style: none;
	margin: 16px 0 0 0;
	padding: 0;
}

	.site-nav li {
		display: inline;
		line-height: 1.4;
		margin: 0 0.5em 0 0;
		padding: 0;
	}

		.site-nav a,
		.site-nav a:visited {
			color: var(--muted);
			text-decoration: none;
			text-transform: lowercase;
		}

		.site-nav a[aria-current="page"],
		.site-nav a:hover,
		.site-nav a:visited:hover {
			color: var(--blue);
		}

/* =Homepage Header
---------------------------------------------------------------------------------------------------- */

.home .site-header {
	grid-template-columns: var(--logo-w) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	margin: 0 0 25px 0;
	position: relative;
}

	/*
		The vine, top right, growing down out of the blue line like the footer leaves grow up
		out of theirs. A copy of the line is drawn over it so the stems start behind the line,
		and its top 5px of splatter pokes out above the line, off the top of the page.
		Its right edge lines up with the text column's, worked out the same way .site-body's grid does.
	*/
	.home .site-header::before {
		background:
			linear-gradient(var(--bar), var(--bar)) left 0 top 5px / 100% 5px no-repeat,
			var(--vine-art) right top / contain no-repeat;
		content: "";
		height: 196px;
		pointer-events: none;
		position: absolute;
		right: max(0px, 100% - var(--logo-w) - var(--gap) - var(--content-max));
		top: 0;
		width: 240px;
	}

	.home .site-title {
		background: var(--black) url("images/wrapper/header-bg-home.gif") repeat-x left top;
		grid-column: 1;
		grid-row: 1;
	}

	.home .site-nav {
		background: var(--black) url("images/wrapper/home-navigation-background.gif") no-repeat bottom left;
		border-top: 1px solid var(--black);
		grid-column: 1;
		grid-row: 2;
	}

		.home .site-nav ul {
			margin: 112px 0 0 0;
			padding: 0 0 calc(8px + 1em) 0; /* Same space under "contact" as between the items */
		}

			.home .site-nav li {
				display: block;
				margin: 0.75em 1em -0.16em 0;
				text-align: right;
			}

.welcome {
	align-self: end;
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-bottom: 31px; /* Sits the last line on the same baseline as the last menu item */
	position: relative; /* Above the vine */
}

	.welcome h1 {
		color: var(--ink);
		font-size: 1.5rem;
		font-weight: normal;
		margin: 0 0 0.5em 0;
	}

	.welcome p {
		font-size: 1.25rem;
		line-height: 1.25;
		margin: 0 0 0.5em 0;
		text-wrap: pretty;
	}

		.welcome p:last-child {
			margin-bottom: 0;
		}

	.welcome strong {
		color: var(--blue);
		font-weight: normal;
	}

.home .site-body {
	padding-top: 0;
}

/* =Headings
---------------------------------------------------------------------------------------------------- */

/*
	.page-title    h1 on pages and archives: "About", "Thoughts"
	.section-title h2 labels: "Latest thought", "Earlier thoughts", sidebar headings
	.entry-title   post titles (h1 on a post, h3 on the home page, h2 or h3 in lists)
	.prose hN      headings written inside posts and pages
*/

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/* Dotted rule that fades to the right (recreates h2.gif, but stretches with the column) */
.page-title,
.section-title {
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: normal;
	margin: 0 0 1em 0;
	padding: 0;
	position: relative;
}

	.page-title::after,
	.section-title::after {
		background: linear-gradient(90deg, var(--rule-start), var(--rule-end));
		bottom: 0;
		content: "";
		height: 1px;
		left: 0;
		-webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 2px);
		mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 2px);
		position: absolute;
		right: 0;
	}

	.sidebar .section-title {
		margin: 0 0 0.5em 0;
	}

.entry-title {
	color: var(--blue);
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 0.5em 0;
	padding: 0;
}

	.entry-title a,
	.entry-title a:visited {
		color: var(--blue);
		text-decoration: none;
	}

		.entry-title a:hover,
		.entry-title a:visited:hover {
			text-decoration: underline;
		}

	/* Titles in archive lists read like plain links */
	.entry-title--list {
		font-size: 1rem;
		font-weight: normal;
		line-height: 1.4;
		margin: 0;
	}

		.entry-title--list a {
			text-decoration: underline;
		}

		.entry-title--list a:visited {
			color: var(--text);
		}

		.entry-title--list a:visited:hover {
			color: var(--blue);
		}

/* In-post headings. The .dsdc-hN classes keep the look when the home page shifts levels down. */
.prose h2,
.prose .dsdc-h2 {
	color: var(--ink);
	font-size: 1.375rem;
	line-height: 1.25;
	margin: 2rem 0 0.5rem 0;
}

.prose h3,
.prose .dsdc-h3 {
	color: var(--text);
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 1.5rem 0 0.5rem 0;
}

.prose h4,
.prose .dsdc-h4 {
	color: var(--text);
	font-size: 1.125rem;
	line-height: 1.4;
	margin: 1.25rem 0 0.25rem 0;
}

.prose h5,
.prose .dsdc-h5,
.prose h6,
.prose .dsdc-h6 {
	color: var(--muted);
	font-size: 1.125rem;
	line-height: 1.4;
	margin: 1.25rem 0 0.25rem 0;
}

	.prose > :first-child {
		margin-top: 0;
	}

/* =Typography
---------------------------------------------------------------------------------------------------- */

p {
	line-height: 1.4;
	margin: 0 0 1em 0;
	padding: 0;
}

/* Post and page text runs a step larger and looser than the rest of the site */
.prose {
	font-size: 1.125rem; /* 18px */
}

	.prose p,
	.content .prose li {
		line-height: 1.6;
	}

.prose p {
	text-wrap: pretty;
}

figcaption {
	color: var(--muted);
	font-size: 0.8em;
	text-align: center;
}

/* =Lists
---------------------------------------------------------------------------------------------------- */

.content ul,
.sidebar ul {
	list-style: none;
	margin: 0 0 1em 0;
	padding: 0;
}

	/* The last item's margin collapses into the list's 1em, so space after the list is unchanged */
	.content ul li,
	.sidebar ul li {
		line-height: 1.4;
		list-style: none;
		margin: 0 0 0.5em 0;
		padding: 0 0 0 25px;
		position: relative;
	}

		/* Bullet, as an element so dark mode can filter the image. Sits 1px above the middle of
		   the first line's lowercase letters (0.1em below the line's centre in Georgia), which reads as centred */
		.content ul li::before,
		.sidebar ul li::before {
			background: url("images/wrapper/bullet.gif") no-repeat;
			content: "";
			filter: var(--bullet-filter);
			height: 10px;
			left: 0;
			position: absolute;
			top: calc(0.5lh + 0.1em - 6px);
			width: 20px;
		}

/* Numbered lists match the bulleted ones, with the numbers hanging where the bullets sit */
.content ol {
	margin: 0 0 1em 0;
	padding: 0 0 0 25px;
}

	.content ol li {
		line-height: 1.4;
		margin: 0 0 0.5em 0;
	}

/* Lists in post and page text sit in a step from the paragraphs */
.prose ul,
.prose ol {
	margin-left: 20px;
}

.sidebar ul,
.sidebar p {
	margin-bottom: 1.5em;
}

	.sidebar ul li {
		margin-bottom: 0.1em;
	}

	.sidebar ul li a,
	.sidebar ul li a:visited {
		color: var(--text);
		text-decoration: none;
	}

		.sidebar ul li a:hover,
		.sidebar ul li a:visited:hover {
			color: var(--blue);
			text-decoration: underline;
		}

/* =Posts
---------------------------------------------------------------------------------------------------- */

.entry-meta {
	font-size: 0.85rem;
	margin: -1em 0 1em 0;
	padding: 0.5em 0 0 0;
}

	.entry-meta,
	.entry-meta a,
	.entry-meta a:visited {
		color: var(--muted);
		text-decoration: none;
	}

		.entry-meta a:hover,
		.entry-meta a:visited:hover {
			color: var(--blue);
			text-decoration: underline;
		}

	.post-list .entry-meta {
		margin: 0;
		padding: 0;
	}

/* Dotted separator between posts on the home page (recreates sep.gif) */
.post-stream > article + article {
	margin-top: 3rem;
	padding-top: 3rem;
	position: relative;
}

	.post-stream > article + article::before {
		background: linear-gradient(90deg, var(--sep-end), var(--sep-mid), var(--sep-end));
		content: "";
		height: 1px;
		left: 0;
		-webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 2px);
		mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 2px);
		position: absolute;
		right: 0;
		top: 0;
	}

/* "Earlier thoughts" under the full latest post on the home page */
.post-stream > article + .section-title {
	margin-top: 3rem;
}

/* Under the "Earlier thoughts" list: lined up with the post titles, in the date lines' size and grey */
.more-link {
	font-size: 0.85rem;
	padding: 0 0 0 25px;
}

	.more-link a:link,
	.more-link a:visited {
		color: var(--muted);
	}

	.more-link a:hover,
	.more-link a:visited:hover {
		color: var(--blue);
	}

.pagination {
	margin: 20px 0;
	text-align: center;
}

	.pagination a {
		color: var(--blue);
		margin: 0 5px;
		text-decoration: none;
	}

		.pagination a:hover {
			text-decoration: underline;
		}

	.pagination .current {
		background-color: var(--ink);
		color: var(--bg);
		padding: 5px 10px;
	}

.wp-block-columns {
	margin-bottom: 0;
}

/* =Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background: transparent url("images/wrapper/footer.gif") repeat-x left bottom;
	margin: -125px 0 0 0;
	padding: 0;
}

	.site-footer-content {
		align-items: end;
		min-height: 125px;
		margin: 0 auto;
		width: min(100% - 2rem, var(--site-max));
	}

		.site-footer-content p {
			color: var(--muted);
			font-size: 0.85rem;
			grid-column: 2;
			margin: 0 0 60px 0; /* In the clear space beside the leaves' last tip */
		}

.site-footer a,
.site-footer a:visited {
	color: var(--muted);
}

.site-footer a:hover,
.site-footer a:visited:hover {
	color: var(--blue);
}

/* =Accessibility
---------------------------------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: var(--black);
	clip-path: none;
	color: #fff;
	height: auto;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	position: fixed !important;
	text-decoration: none;
	top: 0.5rem;
	width: auto;
	z-index: 100;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* =Misc.
---------------------------------------------------------------------------------------------------- */

.hidden {
	display: none;
}

/* =Mobile
---------------------------------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {

	html {
		font-size: 106.25%; /* 17px */
	}

	.site {
		width: 100%;
	}

		.site::after {
			display: none; /* The leaves move into the footer */
		}

	/* Header: full-width logo bar with the menu button on the right */

	.site-header,
	.home .site-header {
		display: block;
		margin: 0;
		position: relative;
	}

		/* No vine on phones: there's no room for it beside the intro */
		.home .site-header::before {
			display: none;
		}

	.site-title,
	.home .site-title {
		background: var(--black) url("images/wrapper/header-bg.gif") repeat-x left top;
		min-height: 69px;
		padding: 19px 0 0 1.25rem;
		text-align: left;
	}

	/* Two thin lines that turn into an X when the menu is open; 44px tap target */
	.menu-toggle {
		background: none;
		border: 0;
		cursor: pointer;
		display: block;
		height: 44px;
		padding: 0;
		position: absolute;
		right: calc(1.25rem - 10px); /* Lines line up with the text's right edge */
		top: 15px;
		width: 44px;
	}

		.menu-toggle .bar {
			background: #fff;
			border-radius: 1px;
			height: 2px;
			left: 10px;
			position: absolute;
			top: calc(50% - 1px);
			transform: translateY(-4px);
			transition: transform 0.2s ease;
			width: 24px;
		}

			.menu-toggle .bar + .bar {
				transform: translateY(4px);
			}

			.menu-toggle[aria-expanded="true"] .bar {
				transform: rotate(45deg);
			}

			.menu-toggle[aria-expanded="true"] .bar + .bar {
				transform: rotate(-45deg);
			}

	@media (hover: hover) {
		.menu-toggle:hover .bar {
			background: var(--bar);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.menu-toggle .bar {
			transition: none;
		}
	}

	.site-nav,
	.home .site-nav {
		background: var(--black);
		border-top: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 69px;
		z-index: 10;
	}

		/* Without JavaScript the menu just sits under the logo bar */
		html:not(.js) .site-nav {
			position: relative;
		}

		.js .site-nav:not(.is-open) {
			display: none;
		}

		/* The logo's splatter runs off the bottom of the bar; carry it on, thinning out, into the open menu */
		.site-nav::before {
			background: url("images/wrapper/splatter-trail.svg") no-repeat left top;
			content: "";
			height: 60px;
			left: 0;
			pointer-events: none;
			position: absolute;
			top: 0;
			width: 280px;
		}

		.site-nav ul,
		.home .site-nav ul {
			font-size: 1.25rem;
			margin: -0.5em 0 0 0; /* Same space above "about" (from the logo) and below "contact" as between the items */
			padding: 0 0 0.95em 0;
			position: relative; /* Links above the splatter */
		}

			.site-nav li,
			.home .site-nav li {
				display: block;
				margin: 0;
				text-align: left;
			}

				.site-nav a {
					display: block;
					padding: 0.4em 1.25rem;
				}

				/* White on the black menu so it stands out; the current page stays blue */
				.site-nav a:link,
				.site-nav a:visited {
					color: #fff;
				}

				.site-nav a[aria-current="page"],
				.site-nav a:hover,
				.site-nav a:visited:hover {
					color: var(--blue);
				}

	.welcome {
		margin: 2rem 0 3rem 0;
		max-width: none;
		padding: 0 1.25rem;
	}

	/* Body: one column, no sidebar */

	.site-body {
		display: block;
		padding: 2rem 1.25rem 2rem 1.25rem;
	}

		.home .site-body {
			padding-top: 0;
		}

	.sidebar {
		display: none;
	}

	/* Footer: leaves move here, smaller, with the copyright beside them */

	.site-footer {
		isolation: isolate;
		margin: 0;
		position: relative;
	}

		.site-footer::before {
			background: var(--leaves-art) no-repeat left bottom / 200px auto;
			bottom: 0;
			content: "";
			height: 234px;
			left: -10px;
			pointer-events: none;
			position: absolute;
			width: 200px;
			z-index: -1;
		}

		.site-footer-content {
			display: flex;
			height: auto;
			justify-content: flex-end;
			min-height: 240px;
			padding: 0 1.25rem 0 calc(185px + 1rem);
			width: 100%;
		}

			.site-footer-content p {
				margin-bottom: 30px;
				text-align: right;
			}

}

/* =Dark Mode
---------------------------------------------------------------------------------------------------- */

/*
	Same design on a dark page: light text, the dotted rules flipped, and the vine and leaves
	swapped for inverted copies (black art becomes light, white edge halos turn dark so they
	blend in) with the blue kept at #09f to match the lines. The copies are baked PNGs, not a
	CSS filter: Chrome runs filters in the display's colour space, which shifts the blue on
	wide-gamut screens. The black logo box and menus stay black.
*/
@media (prefers-color-scheme: dark) {

	:root {
		--bg: #15181b;
		--blue: #3aa9ff;
		--text: #c9ced3;
		--muted: #8b939a;
		--ink: #f1f3f5;

		--rule-start: #e1e4e8;
		--rule-end: #23272b;
		--sep-mid: #5b6168;
		--sep-end: var(--bg);

		--stripe: #1a2733; /* Tint between the background's diagonal lines */

		--vine-art: url("images/wrapper/home-vine-dark.png");
		--leaves-art: url("images/wrapper/footer-leaves-dark.png");
		--bullet-filter: invert(1) brightness(1.7);
	}

	/* The light background is a JPEG; redraw it in CSS: blue line, then "/" stripes fading out */
	body {
		background:
			linear-gradient(var(--bar), var(--bar)) 0 5px / 100% 5px no-repeat,
			linear-gradient(transparent 15px, var(--bg) 240px) 0 0 / 100% 250px no-repeat,
			repeating-linear-gradient(135deg, var(--bg) 0 0.75px, var(--stripe) 0.75px 4.24px) 0 0 / 100% 250px no-repeat,
			var(--bg);
	}

}