/*
Theme Name: The Nuvelics Times
Theme URI: https://wp.nuvelics.com
Author: Nuvelics
Description: A text-forward broadsheet child theme of Twenty Twenty-Five. Built for
 articles that arrive over the REST API with a title, a standfirst and a body, and no
 artwork -- so the front page is set in type rather than assembled from photographs.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
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: nuvelics-times
*/

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.nt-masthead__bar {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

.nt-masthead__bar p {
	margin: 0;
}

.nt-wordmark a,
.nt-wordmark {
	font-variant-ligatures: none;
	letter-spacing: -0.02em;
	line-height: 0.95;
	text-decoration: none;
}

.nt-wordmark a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--accent-1);
}

.nt-strapline {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

/* The nameplate rule is a pair: a heavy line over a hairline, the way a
   printed masthead separates the name from the news below it. */
.nt-rule-heavy {
	border: 0;
	border-top: 3px solid var(--wp--preset--color--contrast);
	height: 0;
	opacity: 1;
}

.nt-rule-hair {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent-7);
	height: 0;
	opacity: 1;
}

.nt-nav a {
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.nt-nav a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Story furniture
   -------------------------------------------------------------------------- */

/* The section kicker above a headline. post-terms renders its links inline,
   so the colour and tracking have to be set on the anchors themselves. */
.nt-kicker,
.nt-kicker a {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.nt-kicker a:hover {
	text-decoration: underline;
}

.nt-headline a {
	color: inherit;
	text-decoration: none;
	text-wrap: balance;
}

.nt-headline a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.nt-standfirst {
	color: var(--wp--preset--color--accent-2);
	text-wrap: pretty;
}

.nt-byline {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-2);
}

.nt-byline a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Front page
   -------------------------------------------------------------------------- */

/* Headlines arrive from the API at whatever length the story got, and Spanish
   ones run long -- "Naufragio de un ferry frente a Chipre del Norte..." is 99
   characters against the Merz headline's 62. Sized for the short one, the long
   one becomes six lines of display type that swamps the page. This ceiling and
   measure are set so a 99-character headline lands in four lines and a
   62-character one in two, which is the range a front page actually gets. */
.nt-lead .nt-headline {
	font-size: clamp(2rem, 1.1rem + 3.2vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.nt-lead .nt-standfirst {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
	line-height: 1.45;
	max-width: 46ch;
}

/* Column rules between grid items, drawn as left borders on every item that
   is not first in its row. Without knowing the row breaks in CSS alone this
   would need a wrapper per column. */
/* Complements WordPress's own grid collapse, which drops a post-template to a
   single column at max-width 600px. Matching that exact breakpoint is what keeps
   the hairlines and the columns appearing together. */
@media (min-width: 601px) {
	.nt-grid .wp-block-post {
		border-left: 1px solid var(--wp--preset--color--accent-7);
		padding-left: var(--wp--preset--spacing--30);
	}

	.nt-grid--2 .wp-block-post:nth-child(2n + 1),
	.nt-grid--3 .wp-block-post:nth-child(3n + 1) {
		border-left: 0;
		padding-left: 0;
	}
}

.nt-grid .nt-headline {
	line-height: 1.15;
	letter-spacing: -0.012em;
}

.nt-grid .nt-standfirst {
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.nt-article-title {
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.nt-article-standfirst {
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--wp--preset--color--accent-2);
	text-wrap: pretty;
}

/* A drop-cap-free opener: the first paragraph of the body reads slightly
   larger, which is enough to mark the start without the fragility of a
   floated initial letter across two languages. */
.nt-body > p:first-of-type {
	font-size: 1.125rem;
}

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

.nt-colophon {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent-2);
}

.nt-colophon a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Front-page measure and empty tiers
   -------------------------------------------------------------------------- */

/* The lead spans the wide measure so its rules frame the page, but the type
   inside it is capped to a readable line. Both caps are in ch against a fluid
   font size, so they scale down with the headline instead of needing their own
   breakpoints. */
.nt-lead .nt-headline {
	max-width: 30ch;
}

.nt-lead .nt-standfirst {
	max-width: 46ch;
}

/* A tier rule introduces the tier beneath it, and an empty query renders an
   empty container -- so while most stories are still drafts the rule would be a
   line drawn over nothing.
   
   Stated the long way round because :has() may not be nested inside another
   :has(): the direct form, "hide a rule whose next sibling query has no post",
   needs :not(:has()) inside :has() and is thrown out as invalid, silently. So
   the rule starts hidden and the positive, single-level question brings it back.
   That also fails safe -- a browser without :has() support drops a divider
   rather than stranding one above nothing. */
.nt-rule-tier {
	display: none;
}

.nt-rule-tier:has(+ .wp-block-query .wp-block-post) {
	display: block;
}

/* --------------------------------------------------------------------------
   Front-page rail
   -------------------------------------------------------------------------- */

/* The column of secondary stories beside the lead, divided from it by a rule
   the way a printed front page divides its columns. */
.nt-rail {
	border-left: 1px solid var(--wp--preset--color--accent-7);
	padding-left: var(--wp--preset--spacing--40);
}

/* Nothing to put beside the lead yet -- a rule with no column behind it reads
   as a stray line, so it goes with the content. */
.nt-rail:not(:has(.wp-block-post)) {
	border-left: 0;
	padding-left: 0;
}

.nt-rail .wp-block-post + .wp-block-post {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--accent-7);
}

/* Core stacks columns at 781px. Once stacked, a left rule would sit under the
   lead pointing nowhere, so it becomes the horizontal divider instead. */
@media (max-width: 781px) {
	.nt-rail {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--wp--preset--color--accent-7);
		padding-top: var(--wp--preset--spacing--40);
	}

	.nt-rail:not(:has(.wp-block-post)) {
		border-top: 0;
		padding-top: 0;
	}
}