/*
Theme Name: SuomieSports
Theme URI: https://www.suomiesports.fi
Description: Suomalaisen e-urheilun uutissivusto — tumma lähetysilme. Twenty Twenty-Five -lapsiteema.
Author: SuomieSports
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: suomiesports
*/

/* ------------------------------------------------------------------ *
 * Headlines are Barlow Condensed, body is Barlow. A condensed grotesk is
 * the sports-desk convention and it earns its place here: Finnish
 * headlines are long ("Suomen esports-maajoukkueet lähtevät rakentumaan
 * Riyadhin ENC-lavalle") and a condensed face fits one on two lines
 * where a normal-width one needs three.
 *
 * The palette is the site's own, read out of the Alchemists colour preset
 * it has run since 2020: a purple-slate ground (#362b45), the pink-red
 * (#f92552) it used for every active state, and amber (#ffb400). It stays
 * dark because the SuomieSports wordmark is pale cyan artwork and because
 * the subject is a broadcast — panels on a dark field, the way the area
 * around a stream is laid out. Pink is navigational; amber marks what is
 * happening now. Nothing else is coloured.
 * ------------------------------------------------------------------ */

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

.se-masthead {
	border-bottom: 1px solid var(--wp--preset--color--viiva);
}

.se-masthead .wp-block-site-logo img {
	height: 42px;
	width: auto;
}

.se-masthead .wp-block-site-title a {
	font-weight: 700;
	letter-spacing: -.035em;
	text-decoration: none;
}

:root .se-nav a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--paper);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .005em;
	text-decoration: none;
}

:root .se-nav a:where(:not(.wp-element-button)):hover,
:root .se-nav .current-menu-item > a {
	color: var(--wp--preset--color--korosta);
}

/* ---- Section labels ---------------------------------------------- */

.se-label {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kulta);
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* The rule runs from the label to the edge of the section, so a reader
   scanning down the page sees where each block starts without a box. */
.se-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--viiva);
}

/* ---- Category chip ----------------------------------------------- */

.se-chip a {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--korosta);
	text-decoration: none;
}

.se-chip a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Cards ------------------------------------------------------- */

.se-card { height: 100%; }

.se-card .wp-block-post-featured-image img,
.se-lead .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	border-radius: 4px;
}

.se-card .wp-block-post-title a,
.se-lead .wp-block-post-title a {
	text-decoration: none;
}

.se-card .wp-block-post-title a:hover,
.se-lead .wp-block-post-title a:hover {
	color: var(--wp--preset--color--korosta);
}

.se-meta {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .03em;
	color: var(--wp--preset--color--muted);
}

/* ---- Hero --------------------------------------------------------- */

/* The image sits beside the headline, not above it at full bleed. Full-bleed
   at 21:9 was 620px tall on a laptop and pushed everything else off the fold,
   and the crop cut the subject's head off — esports press shots are portraits
   more often than not. */

/* The body sits flush with the left edge of the picture above it. As a
   constrained group it was centring itself inside the wide column, which read
   as an accidental indent. */





/* ---- Wire band ----------------------------------------------------- */

/* Four headlines across, under the hero, on the panel colour: the strip a
   returning reader scans before deciding whether to stay. Not a sidebar —
   this site's readers arrive on a phone from a Discord link, and a right
   rail is the first thing that disappears there. */
.se-wire {
	background: var(--wp--preset--color--panel);
	border-top: 2px solid var(--wp--preset--color--kulta);
	border-bottom: 1px solid var(--wp--preset--color--viiva);
}

.se-wire .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0 var(--wp--preset--spacing--40);
}

.se-wire .wp-block-post-template > li {
	margin: 0;
	padding-inline-end: var(--wp--preset--spacing--40);
	border-right: 1px solid var(--wp--preset--color--viiva);
}

.se-wire .wp-block-post-template > li:last-child {
	border-right: 0;
	padding-inline-end: 0;
}

.se-wire .wp-block-post-date {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--kulta);
	letter-spacing: .02em;
	margin-bottom: .25rem;
}

.se-wire .wp-block-post-title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.36;
	letter-spacing: 0;
	margin: 0;
}

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

/* Long Finnish compounds ("maailmanmestaruuskilpailut") overflow a narrow
   column before any space appears; allow a break rather than a scrollbar. */
.se-wire .wp-block-post-title,
.se-card .wp-block-post-title,

@media (max-width: 781px) {
	.se-wire .wp-block-post-template > li {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--viiva);
		padding-block-end: .7rem;
	}
	.se-wire .wp-block-post-template > li:last-child { border-bottom: 0; }
}

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

.se-entry :where(p) { line-height: 1.74; }

.se-entry h2 {
	margin-top: 2em;
	margin-bottom: .5em;
	font-size: var(--wp--preset--font-size--x-large);
}

.se-entry h3 { margin-top: 1.7em; margin-bottom: .45em; }

.se-entry blockquote {
	border-left: 3px solid var(--wp--preset--color--kulta);
	padding-left: 1.15em;
	margin-inline: 0;
	font-style: normal;
}

.se-entry .wp-block-image img {
	height: auto;
	max-width: 100%;
	border-radius: 4px;
}

.se-entry figcaption {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* The archive was written under three previous themes and carries inline
   colours that assumed a light background — dark text on a dark field.
   Force the body colour back for text nodes that set their own. */
.se-entry [style*="color:#000"],
.se-entry [style*="color: #000"],
.se-entry [style*="color:#111"],
.se-entry [style*="color:#222"],
.se-entry [style*="color:#333"],
.se-entry font[color] {
	color: var(--wp--preset--color--paper) !important;
}

.se-entry table {
	font-size: var(--wp--preset--font-size--small);
	border-collapse: collapse;
	width: 100%;
}

.se-entry figure.wp-block-table { overflow-x: auto; }

.se-entry table th,
.se-entry table td {
	border: 1px solid var(--wp--preset--color--viiva);
	padding: .45em .7em;
}

.se-entry table th {
	background: var(--wp--preset--color--panel);
	text-align: left;
}

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

.se-footer {
	border-top: 1px solid var(--wp--preset--color--viiva);
}

.se-footer .wp-block-categories,
.se-footer .wp-block-categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.se-footer .wp-block-categories li { margin: 0 0 .35em; }

/* ---- Small screens ------------------------------------------------ */

@media (max-width: 781px) {
	.se-masthead .wp-block-site-logo img { height: 32px; }
	.se-wire .wp-block-post-template > li { grid-template-columns: 3.2rem 1fr; }
}

/* ---- Quality floor ------------------------------------------------ */

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Wordmark present: the site name is redundant in the masthead, but stays in
   the document for assistive tech and for installs with no logo set. */
.com-has-logo .se-masthead .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Category chips ------------------------------------------------ */

/* A post here carries four to six categories, and printing them all made the
   chip row heavier than the headline it belonged to. Show one line and let the
   rest fall away. */
.se-cat,
.se-beat,
.se-chip {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: .1rem;
}

/* ---- Hero: lead story plus the next two ---------------------------- */

/* A single full-width picture ran the whole fold and told the reader about
   one story. The lead now takes 58% of the row and the next two sit beside
   it, so the top of the page carries three headlines instead of one and the
   picture is a normal editorial width rather than a band. */
.se-hero .wp-block-post-featured-image {
	aspect-ratio: auto !important;
	overflow: hidden;
	margin: 0;
	border-radius: 4px;
}

.se-hero .wp-block-post-featured-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	aspect-ratio: auto !important;
	/* Esports press shots are portraits of people. A centred crop of a 16:9
	   box takes them across the chest; biasing upward keeps the face. */
	object-position: center 28%;
}

.se-hero-main .wp-block-post-featured-image { height: clamp(200px, 24vw, 330px); }
.se-hero-side .wp-block-post-featured-image { height: clamp(120px, 13vw, 165px); }

.se-hero-main .wp-block-post-title a,
.se-hero-side .wp-block-post-title a { text-decoration: none; }

.se-hero-main .wp-block-post-title a:hover,
.se-hero-side .wp-block-post-title a:hover { color: var(--wp--preset--color--korosta); }

.se-hero-main .wp-block-post-excerpt { max-width: 54ch; }

.se-hero-main .wp-block-post-title,
.se-hero-side .wp-block-post-title {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* The two side stories are separated by a rule, not by a card edge. */
.se-side-item {
	padding-bottom: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--viiva);
}

.se-hero-side .wp-block-post-template > li:last-child .se-side-item {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Fourteen posts were authored by a user id that does not exist on this site,
   so the byline rendered empty and left an orphan separator before the date.
   The posts are reassigned, but a missing author should never print a dot. */
.se-meta .wp-block-post-author-name:empty { display: none; }
.se-meta .wp-block-post-author-name:empty + .se-sep { display: none; }

@media (max-width: 781px) {
	.se-hero-main .wp-block-post-featured-image { height: 200px; }
	.se-hero-side .wp-block-post-featured-image { height: 160px; }
}