/*
 * content.css — brödtext, brödsmulor och blogglistan.
 *
 * Allt här hörde till base.css tills det visade sig att ingen av
 * reglerna används på startsidan — sajtens viktigaste sida och den enda
 * där varje byte i den renderingsblockerande kedjan syns i LCP. De
 * laddas nu bara på sidor som faktiskt har brödsmulor, brödtext eller
 * en lista med inlägg.
 *
 * Lagren är deklarerade i base.css. Skriv aldrig !important här.
 */

@layer layout {
	/*
	 * Läsbar spalt för brödtext i inlägg och sidor. Rubriken ligger utanför
	 * .entry__content i single.php och måste få samma spalt — annars klistras
	 * den mot vänsterkanten medan brödtexten står centrerad.
	 *
	 * page.php lägger rubriken direkt i .entry utan något .entry__header
	 * omkring, och den föll därför ur spalten. Det syntes inte förrän de
	 * juridiska sidorna kom: alla sidor före dem hade en egen mall.
	 */
	.entry > .entry__title,
	.entry__header > *,
	.entry__content > * {
		max-width: var(--content-max);
		margin-inline: auto;
	}

	.entry__header {
		margin-block-end: var(--space-l);
	}

	.entry__header > * + * {
		margin-block-start: var(--space-2xs);
	}

	/* Avsändare · datum · uppdaterad — en dämpad rad under rubriken. */
	.entry__meta {
		color: var(--color-body);
		font-size: var(--step--1);
	}

	.entry__sep {
		margin-inline: 0.35em;
	}

	.entry__content > * + * {
		margin-block-start: var(--space-s);
	}

	.entry__content > :is(h2, h3) + * {
		margin-block-start: var(--space-2xs);
	}

	/*
	 * Sidhuvudet över blogglistan och arkiven. Rejält med luft under:
	 * rubriken hade annars suttit ihop med första inläggets bild och
	 * lästs som en bildtext.
	 */
	.page-header {
		margin-block-end: var(--space-xl);
	}

	.post-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		gap: var(--space-l);
	}
}

@layer components {
	.page-header__eyebrow {
		margin: 0 0 var(--space-3xs);
		font-size: var(--step--1);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	/*
	 * Ett steg större än h1 i övrigt. Blogglistan och arkiven har ingen
	 * hero och inget annat som bär sidans topp — rubriken är hela
	 * ingången, och i h1:s vanliga grad läste den som en mellanrubrik.
	 */
	.page-title {
		margin: 0;
		font-size: clamp(2.4rem, 1.85rem + 2.6vw, 3.6rem);
		line-height: 1.05;
	}

	.page-header__lede {
		margin-block-start: var(--space-2xs);
		max-width: 46ch;
		color: var(--color-body);
	}

	/*
	 * Inläggens brödtext. Mellanrubrikerna bär hela strukturen i ett inlägg
	 * — utan extra luft ovanför läser de som fetstilta stycken.
	 */
	.entry__content > :is(h2, h3) {
		margin-block-start: var(--space-l);
	}

	.entry__content :is(ul, ol) {
		padding-inline-start: 1.25em;
	}

	.entry__content li + li {
		margin-block-start: var(--space-2xs);
	}

	.breadcrumbs ol {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		padding: 0;
		list-style: none;
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.breadcrumbs li + li::before {
		content: "/";
		margin-inline-end: var(--space-2xs);
	}

	/*
	 * 4:3 och inte kvadrat: ett blogginlägg är text, och en kvadratisk
	 * bild trycker ner rubriken under vikningen på en telefon.
	 */
	.post-card__media img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-card);
		object-fit: cover;
	}

	.post-card__title {
		font-size: var(--step-1);
		margin-block-start: var(--space-2xs);
	}

	.post-card__meta {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/*
	 * Sidnumreringen under listan. WordPress skriver ut en `<ul>` utan en
	 * enda stil av sig själv — utan de här reglerna staplas sidnumren
	 * lodrätt som en punktlista. Samma utseende som butikens, se shop.css.
	 */
	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		margin-block-start: var(--space-l);
	}

	.pagination .page-numbers {
		display: grid;
		place-items: center;
		min-width: 2.5rem;
		height: 2.5rem;
		padding-inline: var(--space-2xs);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
		color: var(--color-body);
		font-size: var(--step--1);
		font-variant-numeric: tabular-nums;
		text-decoration: none;
	}

	.pagination .page-numbers.current {
		border-color: var(--color-button);
		background: var(--color-button);
		color: var(--color-button-text);
	}

	/* ------------------------------------------------------------------ */
	/* Arkivtexten längst ner                                              */
	/* ------------------------------------------------------------------ */

	/*
	 * Kategorins, varumärkets och behovens beskrivning står sist på sidan
	 * i stället för under rubriken — se inc/archive-text.php för varför.
	 * Linjen och luften ovanför gör att den läser som en fotnot till
	 * sortimentet och inte som ännu en produktsektion man missat.
	 *
	 * Ligger i content.css och inte i shop.css trots att butiken är dess
	 * största användare: samma block står på bloggens arkiv, och den här
	 * filen är den enda som laddas på båda.
	 */
	.archive-note {
		max-width: var(--content-max);
		margin-block-start: var(--space-2xl);
		padding-block-start: var(--space-l);
		border-block-start: 1px solid var(--color-line);
		color: var(--color-body);
	}

	.archive-note__title {
		margin: 0 0 var(--space-s);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--color-ink);
	}

	.archive-note__text > * {
		margin-block: 0;
	}

	.archive-note__text > * + * {
		margin-block-start: var(--space-s);
	}

	/*
	 * Första stycket är termbeskrivningen — samma text som Google visar
	 * som meta description. Den bär sammanfattningen, resten är
	 * fördjupning, och den skillnaden ska synas utan att man läser båda.
	 */
	.archive-note__text > p:first-child {
		color: var(--color-ink);
	}

	.archive-note__text a {
		color: var(--color-accent-ink);
	}
}