/*
Theme Name: Ringo Mok
Theme URI: https://www.ringomok.com/
Description: Child theme of Twenty Twenty-Five for ringomok.com. Holds the site's customised templates, parts and styles, and adds infinite scroll to the homepage "More Posts" list.
Author: Ringo Mok
Template: twentytwentyfive
Version: 1.3.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ringomok
*/

/*
 * The site is set like a well-made maths book read at night: one serif family
 * (Newsreader, registered in theme.json) on a deep blue backdrop. The one loud
 * element is the homepage cover; lamplight amber marks only links, focus and
 * the end-of-post tombstone.
 */

/* Backdrop: a dark-to-lighter blue gradient, fixed behind the whole site so it stays put while the page scrolls.
   A fixed pseudo-element rather than background-attachment: fixed, which iOS Safari ignores. */
body {
	background-color: #0f1920;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, #11161c 0%, #101c24 50%, #122833 100%);
}

::selection {
	background: var(--wp--preset--color--lamplight);
	color: var(--wp--preset--color--base);
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--lamplight);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Header: wordmark left, menu right, on every page. */
header.wp-block-template-part .wp-block-site-title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

header.wp-block-template-part .wp-block-navigation {
	font-size: 1.0625rem;
}

:is(header, footer).wp-block-template-part :is(.wp-block-site-title, .wp-block-navigation-item__content) a:hover,
header.wp-block-template-part .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--lamplight);
	text-decoration: none;
}

/* Post titles everywhere: balanced lines, amber on hover instead of an underline. */
.wp-block-post-title {
	text-wrap: balance;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--lamplight);
	text-decoration: none;
}

/* Date and category lines read as a phrase ("8 October 2026 in HSC, Maths"), in italic slate. */
.post-meta,
.post-card-meta {
	font-size: 1rem;
	font-style: italic;
	color: var(--wp--preset--color--slate);
}

.post-meta {
	gap: 0.3em;
}

:is(.post-meta, .post-card-meta) :is(.wp-block-post-date, .wp-block-post-terms) {
	font-size: inherit;
	font-weight: 400;
	color: inherit;
}

:is(.post-meta, .post-card-meta) a {
	color: inherit;
	text-decoration: none;
}

:is(.post-meta, .post-card-meta) a:hover {
	color: var(--wp--preset--color--lamplight);
}

/* Homepage card meta row: categories on the left, date on the right. */
.post-card-meta .wp-block-post-date {
	flex-shrink: 0;
}

/* Cover images sit on a soft shadow, dark enough to read on the backdrop. */
.home .wp-block-post-featured-image img,
.single .post-cover img {
	box-shadow:
		0 2px 6px rgb(0 0 0 / 0.5),
		0 14px 36px rgb(0 0 0 / 0.6);
}

/* Core makes the featured image block position: relative, which paints it (and its shadow) over the
   static title and date that follow it. Positioning those too puts them back on top, in source order. */
.home :is(.wp-block-post-title, .post-card-meta, .home-hero__text) {
	position: relative;
}

/* Homepage cover: the latest post's title set large over the bottom of its image. */
.home-hero .wp-block-post-title {
	margin: 0;
	font-size: clamp(2.375rem, 1.4rem + 3.8vw, 5.5rem);
	font-weight: 480;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
}

.home-hero .home-hero__text {
	gap: 0.75rem;
	padding-top: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.home-hero .wp-block-post:has(.wp-block-post-featured-image) {
		position: relative;
	}

	.home-hero .wp-block-post-featured-image {
		position: relative;
	}

	.home-hero .wp-block-post-featured-image img {
		aspect-ratio: 21 / 9 !important;
	}

	.home-hero .wp-block-post-featured-image::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(
			to top,
			rgb(8 12 16 / 0.9) 0%,
			rgb(8 12 16 / 0.5) 38%,
			rgb(8 12 16 / 0) 64%
		);
	}

	.home-hero .wp-block-post:has(.wp-block-post-featured-image) .home-hero__text {
		position: absolute;
		inset: auto 0 0 0;
		padding: clamp(1.5rem, 3.5vw, 3.5rem);
		pointer-events: none;
	}

	.home-hero .home-hero__text a {
		pointer-events: auto;
	}

	.home-hero .wp-block-post-title {
		max-width: 15ch;
	}

	.home-hero .post-meta {
		color: rgb(221 228 233 / 0.85);
	}
}

/* Card titles: a little heavier and tighter than running text. */
.home .wp-block-query:not(.home-hero) .wp-block-post-title,
.archive .wp-block-post-title {
	font-weight: 520;
	line-height: 1.18;
	letter-spacing: -0.015em;
}

/* Status line under an infinite-scroll Query Loop ("Loading more posts…"). */
.infinite-scroll-status {
	min-height: 1px;
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--slate);
}

.infinite-scroll-status:empty {
	padding-block: 0;
}

/* Opt-in: cards in a Query Loop with the "reveal-on-scroll" class fade up into place as they
   scroll into view (assets/js/home.js). The homepage's card lists use it. */
@media (prefers-reduced-motion: no-preference) {
	.reveal-on-scroll .wp-block-post.will-reveal {
		opacity: 0;
		transform: translateY(1.5rem);
		transition:
			opacity 0.6s ease-out,
			transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--reveal-delay, 0ms);
	}

	.reveal-on-scroll .wp-block-post.will-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Single posts: a display-size title, the date line, then a wide cover. */
.single main h1.wp-block-post-title {
	margin-bottom: 0;
	font-size: clamp(2.625rem, 1.7rem + 3.1vw, 4.5rem);
	font-weight: 480;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.single main .post-meta {
	margin-block-start: 1rem;
}

.single .post-cover {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Running text of posts and pages. */
.wp-block-post-content :is(p, li) {
	text-wrap: pretty;
}

.wp-block-post-content > :is(h2, h3, h4) {
	margin-block-start: 2.4em;
}

.wp-block-post-content > :is(h2, h3, h4) + * {
	margin-block-start: 0.75em;
}

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--lamplight) 60%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--lamplight);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
}

.wp-block-post-content figcaption,
.wp-block-post-content .wp-element-caption {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--wp--preset--color--slate);
}

.wp-block-post-content .wp-block-quote {
	border-color: var(--wp--preset--color--lamplight);
	font-style: italic;
}

.wp-block-post-content .wp-block-table :is(th, td) {
	padding: 0.5em 0.75em;
	border-color: rgb(221 228 233 / 0.18);
}

/* List block "Parts" style (functions.php): items labelled (a), (b), (c), like the parts of an exam
   question. !important beats the inline list-style-type the block saves; browsers without
   @counter-style drop the rule and keep that lower-alpha (a. b. c.). */
@counter-style rm-parts {
	system: extends lower-alpha;
	prefix: "(";
	suffix: ") ";
}

.wp-block-list.is-style-parts {
	list-style-type: rm-parts !important;
}

/* Long display equations scroll sideways on phones instead of spilling off the page. */
.MathJax_Display,
.MJXc-display,
mjx-container[display="true"] {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	padding-block: 0.2em;
}

/* Page transitions (assets/js/transitions.js). Every page change fades the old page out and the
   new one in. From a post list to a post, the card's cover moves and grows into the post's cover,
   and the post's text fades in once the image is nearly in place. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 200ms ease-in both rm-fade-out;
}

::view-transition-new(root) {
	animation: 300ms ease-out 100ms both rm-fade-in;
}

.vt-card-to-post .post-cover {
	view-transition-name: post-cover;
}

.vt-card-to-post::view-transition-group(post-cover) {
	animation-duration: 550ms;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The card shows a crop of the cover image, so the two only match at the start. The card's image
   fades out straight away and the post's full image, cropped to the moving frame, does the rest; the
   frame carries the shadow so neither snapshot brings its own. */
.vt-card-to-post::view-transition-group(post-cover) {
	box-shadow:
		0 2px 6px rgb(0 0 0 / 0.5),
		0 14px 36px rgb(0 0 0 / 0.6);
}

.vt-card-to-post::view-transition-old(post-cover),
.vt-card-to-post::view-transition-new(post-cover) {
	height: 100%;
	object-fit: cover;
	mix-blend-mode: normal;
}

.vt-card-to-post::view-transition-old(post-cover) {
	z-index: 1;
	animation: 90ms linear both rm-fade-out;
}

.vt-card-to-post::view-transition-new(post-cover) {
	animation: none;
}

.is-vt-source img,
.vt-card-to-post .post-cover img {
	box-shadow: none !important;
}

.vt-card-to-post::view-transition-old(root) {
	animation-duration: 160ms;
}

.vt-card-to-post::view-transition-new(root) {
	animation: 380ms ease-out 300ms both rm-fade-in;
}

@keyframes rm-fade-out {
	to {
		opacity: 0;
	}
}

@keyframes rm-fade-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* MathJax's "Typesetting math: 98%" progress box; the equations appear on their own. */
#MathJax_Message {
	display: none !important;
}

/* End of a post: a tombstone, as at the end of a proof. */
.single .wp-block-post-content::after {
	content: "";
	display: block;
	max-width: var(--wp--style--global--content-size);
	height: 0.6em;
	margin: 2.5rem auto 0;
	background: linear-gradient(var(--wp--preset--color--lamplight), var(--wp--preset--color--lamplight)) right center / 0.6em 0.6em no-repeat;
}

/* Footer: name and tagline left; search and the standing pages right. */
.site-footer {
	margin-block-start: var(--wp--preset--spacing--60);
	border-top: 1px solid rgb(221 228 233 / 0.1);
}

.site-footer .wp-block-site-title {
	font-size: 1.125rem;
	font-weight: 600;
}

.site-footer .wp-block-site-tagline {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--wp--preset--color--slate);
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	font-size: 0.9375rem;
}

.site-footer__links a {
	text-decoration: none;
}

.site-footer__links a:hover {
	color: var(--wp--preset--color--lamplight);
}

.site-footer .wp-block-search__input {
	min-width: min(18rem, 80vw);
	padding: 0.55em 0.8em;
	border: 1px solid rgb(221 228 233 / 0.18);
	border-radius: 6px;
	background: rgb(255 255 255 / 0.04);
	color: var(--wp--preset--color--accent-4);
	font: inherit;
	font-size: 0.9375rem;
}

.site-footer .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--slate);
}