/*
Theme Name: Phasma Theme
Theme URI: https://phasma.cloud/themes/phasma-theme
Author: Phasma
Author URI: https://phasma.ca
Description: The base theme the Phasma rebuild rail builds on. A fixed parent with no settings: its element and layout rules sit in one CSS layer, so a child theme's stylesheet always wins. Pair it with a phasma-site child.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://phasma.cloud/themes/phasma-theme
*/


/*
 * Two tiers (DD-PT2.2 as amended 2026-11-11):
 *
 * 1. Element defaults and every wrapper/layout rule sit inside `@layer phasma-base`. Unlayered CSS
 *    beats layered CSS whatever the specificity, so the child's stylesheet always wins over them.
 *    The element values match the previous base theme's, element by element (DD-PT6, the A2
 *    specimen). The wrappers carry no layout except the page column on .site-main (DD-PT5).
 * 2. The chrome components (header, navigation, footer, skip link and screen-reader text, page
 *    header, entry meta, post navigation, comments) are UNLAYERED, at the ordinary class
 *    specificity the previous base theme used for the same job, so a carried element rule
 *    (`p { font-size: … }`) cannot reach into them, while the platform's later, equally or more
 *    specific blocks still win. `:where()` holds a scope without adding specificity.
 *
 * No rule is !important. tests/static_checks.py enforces both tiers.
 */
@layer phasma-base {
	:root {
		--contrast: #222222;
		--contrast-2: #575760;
		--contrast-3: #b2b2be;
		--base: #f0f0f0;
		--base-2: #f7f8f9;
		--base-3: #ffffff;
		--accent: #1e73be;
	}

	/* Reset */
	html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr,
	h1, h2, h3, h4, h5, h6 {
		margin: 0;
		padding: 0;
		border: 0;
	}

	html {
		font-family: sans-serif;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		box-sizing: border-box;
	}

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

	main {
		display: block;
	}

	button, input, optgroup, select, textarea {
		font-family: inherit;
		font-size: 100%;
		margin: 0;
	}

	[type="search"] {
		-webkit-appearance: textfield;
		appearance: textfield;
		outline-offset: -2px;
	}

	/* Elements */
	body, button, input, select, textarea {
		font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-weight: normal;
		text-transform: none;
		font-size: 17px;
		line-height: 1.5;
	}

	body {
		background-color: var(--base-3);
		color: var(--contrast);
	}

	p {
		margin-bottom: 1.5em;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: inherit;
		font-size: 100%;
		font-style: inherit;
		font-weight: inherit;
	}

	h1 {
		font-size: 42px;
		margin-bottom: 20px;
		line-height: 1.2em;
		font-weight: normal;
		text-transform: none;
	}

	h2 {
		font-size: 35px;
		margin-bottom: 20px;
		line-height: 1.2em;
		font-weight: normal;
		text-transform: none;
	}

	h3 {
		font-size: 29px;
		margin-bottom: 20px;
		line-height: 1.2em;
		font-weight: normal;
		text-transform: none;
	}

	h4 {
		font-size: 24px;
	}

	h5 {
		font-size: 20px;
	}

	h4, h5, h6 {
		margin-bottom: 20px;
	}

	pre {
		background: rgba(0, 0, 0, 0.05);
		font-family: inherit;
		font-size: inherit;
		line-height: normal;
		margin-bottom: 1.5em;
		padding: 20px;
		overflow: auto;
		max-width: 100%;
	}

	blockquote {
		border-left: 5px solid rgba(0, 0, 0, 0.05);
		padding: 20px;
		font-size: 1.2em;
		font-style: italic;
		margin: 0 0 1.5em;
		position: relative;
	}

	blockquote p:last-child {
		margin: 0;
	}

	table, th, td {
		border: 1px solid rgba(0, 0, 0, 0.1);
	}

	table {
		border-collapse: separate;
		border-spacing: 0;
		border-width: 1px 0 0 1px;
		margin: 0 0 1.5em;
		width: 100%;
	}

	th, td {
		padding: 8px;
		border-width: 0 1px 1px 0;
	}

	th {
		font-weight: bold;
	}

	hr {
		background-color: rgba(0, 0, 0, 0.1);
		border: 0;
		height: 1px;
		margin-bottom: 40px;
		margin-top: 40px;
	}

	fieldset {
		padding: 0;
		border: 0;
		min-width: inherit;
	}

	fieldset legend {
		padding: 0;
		margin-bottom: 1.5em;
	}

	ul, ol {
		margin: 0 0 1.5em 3em;
	}

	ul {
		list-style: disc;
	}

	ol {
		list-style: decimal;
	}

	li > ul, li > ol {
		margin-bottom: 0;
		margin-left: 1.5em;
	}

	dt {
		font-weight: bold;
	}

	dd {
		margin: 0 1.5em 1.5em;
	}

	b, strong {
		font-weight: bold;
	}

	dfn, cite, em, i {
		font-style: italic;
	}

	address {
		margin: 0 0 1.5em;
	}

	code, kbd, tt, var {
		font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	}

	abbr, acronym {
		border-bottom: 1px dotted #666;
		cursor: help;
	}

	mark, ins {
		text-decoration: none;
	}

	sup, sub {
		font-size: 75%;
		height: 0;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	sup {
		bottom: 1ex;
	}

	sub {
		top: .5ex;
	}

	small {
		font-size: 75%;
	}

	big {
		font-size: 125%;
	}

	img {
		height: auto;
		max-width: 100%;
	}

	embed, iframe, object {
		max-width: 100%;
	}

	/* Forms */
	button, input[type="button"], input[type="reset"], input[type="submit"] {
		background: #55555e;
		color: #ffffff;
		border: 1px solid transparent;
		cursor: pointer;
		-webkit-appearance: button;
		padding: 10px 20px;
	}

	button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus,
	input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {
		color: #ffffff;
		background-color: #3f4047;
	}

	input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"],
	input[type="tel"], input[type="number"], textarea, select {
		border: 1px solid var(--base);
		border-radius: 0;
		padding: 10px 15px;
		max-width: 100%;
		color: var(--contrast);
		background-color: var(--base-2);
	}

	input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus,
	input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
		border-color: var(--contrast-3);
	}

	textarea {
		width: 100%;
	}

	/* Links */
	a, button, input {
		transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
	}

	a {
		color: var(--accent);
		text-decoration: underline;
	}

	a:hover, a:focus, a:active {
		color: var(--contrast);
	}

	.entry-title a, .site-branding a, .site-logo a, a.button, .wp-block-button__link, .main-navigation a {
		text-decoration: none;
	}

	/* Core's classic-theme button rules (its `classic-theme-styles`, dequeued in functions.php so that
	   the values below can reach the element), carried here inside the layer. */
	.wp-block-button__link {
		color: #ffffff;
		background-color: #32373c;
		border-radius: 9999px;
		box-shadow: none;
		text-decoration: none;
		padding: calc(0.667em + 2px) calc(1.333em + 2px);
		font-size: 1.125em;
	}

	.wp-block-file__button {
		background: #32373c;
		color: #ffffff;
		text-decoration: none;
	}

	.button, .wp-block-button .wp-block-button__link {
		padding: 10px 20px;
		display: inline-block;
	}

	.wp-block-button .wp-block-button__link {
		font-size: inherit;
		line-height: inherit;
	}

	a.button, a.wp-block-button__link:not(.has-background) {
		color: #ffffff;
		background-color: #55555e;
	}

	a.button:hover, a.button:focus,
	a.wp-block-button__link:not(.has-background):hover,
	a.wp-block-button__link:not(.has-background):focus,
	a.wp-block-button__link:not(.has-background):active {
		color: #ffffff;
		background-color: #3f4047;
	}

	/* Alignments and captions */
	.alignleft {
		float: left;
		margin-right: 1.5em;
	}

	.alignright {
		float: right;
		margin-left: 1.5em;
	}

	.aligncenter {
		clear: both;
		display: block;
		margin: 0 auto;
	}

	.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
		max-width: 100%;
		height: auto;
	}

	.wp-caption {
		margin-bottom: 1.5em;
		max-width: 100%;
		position: relative;
	}

	.wp-caption img[class*="wp-image-"] {
		display: block;
		margin: 0 auto 0;
		max-width: 100%;
	}

	.wp-caption img {
		position: relative;
		vertical-align: bottom;
	}

	.wp-caption .wp-caption-text {
		font-size: 75%;
		padding-top: 5px;
		opacity: 0.8;
	}

	.wp-block-image figcaption {
		font-size: 13px;
		text-align: center;
	}

	.wp-block-gallery, ul.blocks-gallery-grid {
		margin-left: 0;
	}

	.gallery {
		margin-bottom: 1.5em;
	}

	.gallery-item {
		display: inline-block;
		text-align: center;
		vertical-align: top;
		width: 100%;
	}

	.gallery-columns-2 .gallery-item { max-width: 50%; }
	.gallery-columns-3 .gallery-item { max-width: 33.33%; }
	.gallery-columns-4 .gallery-item { max-width: 25%; }
	.gallery-columns-5 .gallery-item { max-width: 20%; }
	.gallery-columns-6 .gallery-item { max-width: 16.66%; }
	.gallery-columns-7 .gallery-item { max-width: 14.28%; }
	.gallery-columns-8 .gallery-item { max-width: 12.5%; }
	.gallery-columns-9 .gallery-item { max-width: 11.11%; }

	.gallery-caption {
		display: block;
	}

	.gallery-item img {
		vertical-align: bottom;
	}

	.gallery-icon {
		padding: 5px;
	}

	.wp-block-post-template {
		margin-left: 0;
	}

	.wp-block-group__inner-container {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	.site-main .wp-block-group__inner-container {
		padding: 40px;
	}

	.entry-content .alignwide {
		margin-left: -40px;
		width: calc(100% + 80px);
		max-width: calc(100% + 80px);
	}

	.no-sidebar .entry-content .alignfull {
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		max-width: 100vw;
		width: auto;
	}


	/* The page column (DD-PT5). No side padding, so a carried `box-sizing` rule cannot move it: the
	   column is the text width, and the gutter is the space max-width leaves. */
	.site-main {
		max-width: min(var(--phasma-container-max, 1200px), calc(100% - 80px));
		margin-left: auto;
		margin-right: auto;
		padding: 40px 0;
	}

	.site-content, .entry-header {
		word-wrap: break-word;
	}

	.entry-title {
		margin-bottom: 0;
	}

	.entry-title a {
		color: var(--contrast);
	}

	.entry-title a:hover {
		color: var(--contrast-2);
	}

	.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
		margin-top: 2em;
	}

	.entry-content > p:last-child, .entry-summary > p:last-child, .page-content > p:last-child,
	.taxonomy-description p:last-child {
		margin-bottom: 0;
	}

	.featured-image {
		line-height: 0;
		margin-bottom: 2em;
	}

	.post-image:not(:first-child) {
		margin-top: 2em;
	}

	.blog .site-main > article + article,
	.archive .site-main > article + article,
	.search .site-main > article + article {
		margin-top: 40px;
	}

	.page-links {
		clear: both;
		margin: 0 0 1.5em;
	}

	@media (max-width: 768px) {
		.site-main {
			max-width: min(var(--phasma-container-max, 1200px), calc(100% - 60px));
			padding: 30px 0;
		}

		.site-main .wp-block-group__inner-container {
			padding: 30px;
		}

		.entry-content .alignwide {
			margin-left: -30px;
			width: calc(100% + 60px);
			max-width: calc(100% + 60px);
		}

		.alignleft, .alignright {
			float: none;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
	}
}

/* ------------------------------------------------------------------------------------------------
 * Tier 2: the chrome components, unlayered.
 * --------------------------------------------------------------------------------------------- */

/* Skip link and screen-reader text */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Header: branding left, navigation right, held on the page column (DD-PT5, DD-PT7) */
.site-header {
	position: relative;
	background-color: var(--base-3);
}

:where(.site-header) .inside-header {
	display: flex;
	align-items: center;
	min-height: 100px;
	/* The header row sits on the page column, so the title lines up with the content's edge (the
	   "text" container alignment). No side padding: a carried box-sizing rule cannot move it. */
	max-width: min(var(--phasma-container-max, 1200px), calc(100% - 80px));
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

:where(.site-header) .site-logo {
	display: inline-block;
	max-width: 100%;
	margin-right: 1em;
}

.site-header .header-image {
	vertical-align: middle;
}

:where(.site-header) .site-branding a, :where(.site-header) .site-logo a {
	text-decoration: none;
}

:where(.site-header) .main-title {
	margin: 0;
	font-size: 25px;
	line-height: 1.2em;
	word-wrap: break-word;
	font-weight: bold;
	text-transform: none;
}

:where(.site-header) .main-title a, :where(.site-header) .main-title a:hover {
	color: var(--contrast);
}

/* The title's link keeps the title's size: a carried `a { font-size }` must not shrink the home
   link to a 17px line (a tap target), as an element rule did on the first labs. */
:where(.site-header) .main-title a {
	font-size: inherit;
	line-height: inherit;
}

:where(.site-header) .site-description {
	margin: 0;
	line-height: 1.5;
	font-weight: normal;
	text-transform: none;
	font-size: 15px;
	color: var(--contrast-2);
}

/* Navigation */
.main-navigation {
	position: relative;
	z-index: 100;
	margin-left: auto;
	background-color: var(--base-3);
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	font-weight: normal;
	text-transform: none;
	font-size: 15px;
	text-decoration: none;
}

.main-navigation .main-nav ul li a {
	padding-left: 20px;
	padding-right: 20px;
	line-height: 60px;
	color: var(--contrast);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--accent);
}

.main-navigation .main-nav ul ul li a {
	line-height: normal;
	padding: 10px 20px;
	font-size: 14px;
}

.main-navigation ul ul {
	background-color: var(--base);
}

.menu-toggle, .sub-menu-toggle {
	background-color: transparent;
	color: inherit;
	border: 0;
	margin: 0;
	cursor: pointer;
}

.menu-toggle:hover, .menu-toggle:focus, .sub-menu-toggle:hover, .sub-menu-toggle:focus {
	background-color: transparent;
	color: inherit;
}

.menu-toggle {
	display: none;
	padding: 0 20px;
	line-height: 60px;
	font-size: 15px;
	color: var(--contrast);
}

.menu-toggle svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: currentColor;
}

.menu-toggle .close-label, .main-navigation.toggled .menu-toggle .open-label {
	display: none;
}

.main-navigation.toggled .menu-toggle .close-label {
	display: inline;
}

.sub-menu-toggle {
	display: none;
	padding: 0 20px;
}

.sub-menu-toggle::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}

.sub-menu-toggle[aria-expanded="true"]::before {
	transform: translateY(25%) rotate(-135deg);
}

@media (min-width: 769px) {
	.main-navigation .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	/* The sub-menu indicator on wide screens: drawn on the parent's link, no extra tab stop. */
	.main-navigation .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0.4em;
		height: 0.4em;
		margin-left: 10px;
		margin-right: 12px;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-30%) rotate(45deg);
	}

	.main-navigation ul ul .menu-item-has-children > a::after {
		transform: rotate(-45deg);
	}

	.main-navigation ul ul {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 99999;
		width: 200px;
		text-align: left;
		box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
		display: none;
	}

	.main-navigation ul ul ul {
		top: 0;
		left: 100%;
	}

	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul {
		display: block;
	}

	.main-navigation li.submenu-closed > ul {
		display: none;
	}

	:where(.nav-below-header .site-header) .inside-header {
		flex-wrap: wrap;
	}

	.main-navigation:where(.nav-below-header *) {
		flex-basis: 100%;
		margin-left: 0;
	}
}

@media (max-width: 768px) {
	:where(.site-header) .inside-header {
		flex-wrap: wrap;
		max-width: min(var(--phasma-container-max, 1200px), calc(100% - 60px));
	}

	.main-navigation {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.main-navigation.toggled {
		flex-basis: 100%;
	}

	.menu-toggle {
		display: block;
	}

	.main-navigation .main-nav {
		display: none;
		flex-basis: 100%;
	}

	.main-navigation.toggled .main-nav {
		display: block;
	}

	.main-navigation .main-nav li {
		display: flex;
		flex-wrap: wrap;
		text-align: left;
	}

	.main-navigation .main-nav li > a {
		flex: 1;
	}

	.main-navigation ul ul {
		display: none;
		flex-basis: 100%;
	}

	.sub-menu-toggle {
		display: block;
	}

	.sub-menu-toggle[aria-expanded="true"] + ul {
		display: block;
	}
}

/* Page header (list views, 404) */
.page-header {
	margin-bottom: 20px;
}

.page-header > *:last-child {
	margin-bottom: 0;
}

/* Entry meta: the date and author under a post's title, its terms after the content */
.entry-meta {
	font-size: 85%;
	margin-top: .5em;
	line-height: 1.5;
	color: var(--contrast-2);
}

footer.entry-meta {
	margin-top: 2em;
}

:where(.entry-meta) .posted-on .updated {
	display: none;
}

:where(.entry-meta) .byline {
	display: inline;
}

footer.entry-meta .byline, footer.entry-meta .posted-on {
	display: block;
}

:where(.entry-meta) .cat-links, :where(.entry-meta) .tags-links, :where(.entry-meta) .comments-link {
	display: block;
}

/* Post navigation (a single post's previous/next) and list pagination */
.post-navigation {
	overflow: hidden;
}

.post-navigation .nav-previous .prev::before {
	content: "\2190\00a0" / "";
}

.post-navigation .nav-next .next::after {
	content: "\00a0\2192" / "";
}

.pagination {
	margin-top: 40px;
}

:where(.pagination) .nav-links > * {
	padding: 0 5px;
}

:where(.pagination) .nav-links > *:first-child {
	padding-left: 0;
}

:where(.pagination) .nav-links .current {
	font-weight: bold;
}

/* Comments */
.comments-area {
	margin-top: 40px;
}

:where(.comments-area) .comment-list, :where(.comments-area) .comment-list .children {
	list-style: none;
	margin-left: 0;
}

:where(.comments-area) .comment-list .children {
	padding-left: 30px;
}

:where(.comments-area) .comment-body {
	margin-bottom: 1.5em;
}

:where(.comments-area) .comment-meta .avatar {
	float: left;
	margin-right: 10px;
	border-radius: 50%;
}

/* Footer */
.site-info {
	text-align: center;
	font-size: 15px;
	background-color: var(--base-3);
}

:where(.site-info) .inside-site-info {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 20px 40px;
}

@media (max-width: 768px) {
	:where(.site-info) .inside-site-info {
		padding-left: 30px;
		padding-right: 30px;
	}

	.entry-meta {
		font-size: inherit;
	}

	.entry-meta a {
		line-height: 1.8em;
	}
}