/*
Theme Name: Konfetti
Theme URI: https://friawebben.se/
Author: Rikard Linde
Author URI:
Description: Bygger på temat Speed. Varje bokstav får en slumpmässig färg, som tas fram på nytt vid varje sidvisning. Vit bakgrund, understrukna länkar, neutrala knappar och formulär.
Tags:
Version: 2026.8
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: konfetti
*/

/* Temat har inga beroenden: typsnittet ligger i mappen /fonts,
   färgningen görs i PHP (inc/slumpfarg.php) och ingen JavaScript används. */

/* =========================================================
   1. TYPSNITT
   Figtree ligger i temats mapp /fonts. Inget hämtas från Google.
   ========================================================= */
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   2. FÄRGER
   Alla färger samlas här. Ändra en rad, så ändras hela sajten.
   ========================================================= */
:root {
	--bakgrund: #FFFFFF;      /* vit grund */
	--kort: #FFFFFF;          /* kort och rutor */
	--yta: #F4F4F1;           /* kodrutor */
	--linje: #E4E3DE;
	--text: #1C1C1A;
	--dampad: #6B6A64;
	--markering: #FFE270;     /* gul: bara för <mark>, markerad text */
	--markering-text: #1C1C1A;
	--kant: #8F8E88;          /* kanter på knappar och formulärfält */
	--knapp: #F4F4F1;         /* knappens bakgrund */
	--knapp-hover: #E6E5E0;   /* knappens bakgrund när man pekar */
	--fokus: #1D63C9;

	/* ---- Bokstävernas färger ----
	   Servern (inc/slumpfarg.php) ger varje bokstav en slumpad färgton (--nyans) och ett
	   slumptal 0–1 (--slump). Resten bestäms här:
	   --mattnad     hur stark färgen är (0 % = grå, 100 % = full färg)
	   --ljus-bas    lägsta ljushet
	   --ljus-spann  hur mycket ljusare en bokstav kan bli              */
	--mattnad: 75%;
	--ljus-bas: 22%;
	--ljus-spann: 18%;

	color-scheme: light;
}

/* Varje färgad bokstav. */
.slumpfarg {
	color: hsl(var(--nyans) var(--mattnad) calc(var(--ljus-bas) + var(--ljus-spann) * var(--slump)));
}

/* Dämpade delar av sidan: svagare färger, så att innehållet står i centrum. */
.entry-meta, .entry-footer, #site-description, #footer, .archive-meta,
.wp-caption-text, figcaption {
	--mattnad: 30%;
}

/* Rubriker: starkare färger. */
h1, h2, h3, #site-title {
	--mattnad: 90%;
}

/* Text på gul botten får lite mörkare bokstäver. */
mark {
	--ljus-bas: 16%;
	--ljus-spann: 12%;
	--mattnad: 85%;
}

/* =========================================================
   3. GRUND
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bakgrund);
	color: var(--text);
	font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.55;
}

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

a { color: inherit; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }

/* Ramen håller innehållet lagom brett och centrerat. */
.ram { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* Text som bara skärmläsare ska läsa. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* "Hoppa till innehållet" syns bara när man tabbar dit. */
.hoppa {
	position: absolute; left: 1rem; top: -4rem; z-index: 10;
	padding: .5rem .9rem; border-radius: 4px;
	background: var(--kort); border: 1px solid var(--kant); color: var(--text);
	text-decoration: underline;
}
.hoppa:focus { top: 1rem; }

/* =========================================================
   4. SIDHUVUD
   ========================================================= */
#header { border-bottom: 1px solid var(--linje); }

#header .ram {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 1rem 1.5rem;
	padding-top: 1.25rem; padding-bottom: 1.25rem;
}

#site-title { margin: 0; font-size: 1.35rem; font-weight: 600; }
#site-title a { text-decoration: none; }

#site-description {
	flex-basis: 100%; order: 5;
	margin: -.5rem 0 0; color: var(--dampad); font-size: .95rem;
}

/* Menyn: vanliga länkar på en rad. */
#menu { margin-left: auto; }
#menu ul {
	display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
	list-style: none; margin: 0; padding: 0;
}
/* Undermenyer visas som vanliga länkar i samma rad. */
#menu ul ul { display: contents; }
#menu a { display: block; padding: .25rem 0; text-decoration: none; }
#menu a:hover { text-decoration: underline; }
/* Aktuell sida: understruken och lite fetare. */
#menu .current-menu-item > a,
#menu .current_page_item > a { text-decoration: underline; font-weight: 600; }

/* Sökrutan. */
.search-form { display: flex; gap: .4rem; }
.search-form label { display: block; }

/* =========================================================
   FORMULÄRFÄLT
   Vit ruta, tunn grå kant, lätt rundade hörn.
   ========================================================= */
input[type="search"], input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="number"], input[type="tel"], textarea, select {
	max-width: 100%;
	padding: .45rem .65rem;
	font: inherit; font-size: 1rem; color: var(--text);
	background: var(--kort); border: 1px solid var(--kant); border-radius: 4px;
}
.search-field { width: 14rem; }

/* =========================================================
   5. KNAPPAR
   ========================================================= */
.search-submit, input[type="submit"], button, .wp-block-button__link {
	font: inherit; font-size: 1rem; cursor: pointer;
	padding: .45rem .9rem; border: 1px solid var(--kant); border-radius: 4px;
	background: var(--knapp); color: var(--text);
	text-decoration: none;
}
.search-submit:hover, input[type="submit"]:hover, button:hover, .wp-block-button__link:hover {
	background: var(--knapp-hover);
}

/* =========================================================
   6. LAYOUT: INNEHÅLL + SIDOSPALT
   ========================================================= */
#container { padding-top: 2.5rem; padding-bottom: 4rem; }

/* Två spalter på breda skärmar, men bara om sidospalten finns. */
@media (min-width: 60rem) {
	#container:has(#sidebar) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: 3rem;
		align-items: start;
	}
}

/* =========================================================
   7. RUBRIKER FÖR ARKIV, KATEGORIER, SÖK
   ========================================================= */
.header { margin-bottom: 2rem; }
.header .entry-title {
	font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600;
	line-height: 1.2; margin: 0 0 .4rem;
}
.archive-meta { color: var(--dampad); max-width: 40rem; }

/* =========================================================
   8. INLÄGG I LISTOR
   Utan ram. Luft mellan inläggen skiljer dem åt.
   ========================================================= */
body:not(.singular) #content article {
	margin: 0 0 2.75rem;
}
body:not(.singular) .entry-title {
	font-size: 1.4rem; font-weight: 600; line-height: 1.25;
	margin: 0 0 .3rem;
}
body:not(.singular) .entry-title a { text-decoration: none; }
body:not(.singular) .entry-title a:hover { text-decoration: underline; }
.entry-summary p { margin: .6rem 0 0; }
.entry-summary img { margin-top: .75rem; }

/* =========================================================
   9. ENSKILT INLÄGG OCH SIDA
   ========================================================= */
.singular #content article { max-width: 42rem; }

.singular .entry-title {
	font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 600;
	line-height: 1.2;
	margin: 0 0 .75rem;
}
.singular .entry-title a { text-decoration: none; }

.entry-meta { color: var(--dampad); font-size: .95rem; margin-bottom: 1.5rem; }
.entry-meta a { text-decoration: underline; }
.meta-sep { opacity: .5; padding: 0 .25rem; }

.post-edit-link {
	display: inline-block; margin: 0 0 .75rem;
	padding: .15rem .6rem; border: 1px solid var(--kant); border-radius: 4px;
	background: var(--knapp); font-size: .85rem; text-decoration: none;
}

/* Brödtext. Länkar är understrukna, som webbläsarens standard. */
.entry-content { font-size: 1.125rem; line-height: 1.7; }
.entry-content > * { margin-top: 0; margin-bottom: 1.25rem; }
.entry-content h2, .entry-content h3, .entry-content h4 {
	font-weight: 600; line-height: 1.25;
	margin-top: 2.25rem; margin-bottom: .6rem;
}
.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }

.entry-content a { text-decoration: underline; }
.entry-content a:hover { text-decoration-thickness: 2px; }

/* Foton: svagt rundade hörn. */
.entry-content img, .entry-summary img, .wp-post-image { border-radius: 4px; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.wp-caption-text, figcaption { color: var(--dampad); font-size: .9rem; margin-top: .4rem; }

.entry-content blockquote {
	margin-left: 0; padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--linje);
	font-size: 1.2rem;
}

.entry-content pre, .entry-content code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em;
	background: var(--yta); border-radius: 8px;
}
.entry-content code { padding: .1em .35em; }
.entry-content pre { padding: 1rem 1.25rem; overflow-x: auto; }
.entry-content pre code { padding: 0; background: none; }

.entry-content hr { border: 0; border-top: 2px dashed var(--linje); margin: 2.5rem 0; }

.entry-content table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.entry-content th { text-align: left; border-bottom: 2px solid var(--text); padding: .5rem .75rem .5rem 0; }
.entry-content td { border-bottom: 1px solid var(--linje); padding: .6rem .75rem .6rem 0; }

.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li { margin-bottom: .35rem; }
.entry-content li::marker { color: var(--dampad); }

mark { background: var(--markering); color: var(--markering-text); padding: 0 .15em; border-radius: 3px; }

.entry-links:empty { display: none; }

/* Sidfot i inlägget: kategorier och etiketter. */
.entry-footer {
	margin-top: 2.5rem; padding-top: 1.25rem;
	border-top: 1px solid var(--linje);
	color: var(--dampad); font-size: .95rem;
	display: flex; flex-wrap: wrap; gap: .4rem 1rem;
}
.entry-footer a { text-decoration: underline; }

/* "Läs mer" */
.more-link { text-decoration: underline; }

/* =========================================================
   10. BLÄDDRA: ÄLDRE / NYARE
   ========================================================= */
.nav-links {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
	margin-top: 2rem;
}
.nav-links a {
	display: inline-block; padding: .45rem .9rem; border-radius: 4px;
	border: 1px solid var(--kant); background: var(--knapp);
	text-decoration: none;
}
.nav-links a:hover { background: var(--knapp-hover); }
.nav-next { margin-left: auto; }

/* =========================================================
   11. SIDOSPALT
   ========================================================= */
#sidebar { margin-top: 3rem; }
@media (min-width: 60rem) { #sidebar { margin-top: 0; } }
#sidebar ul.xoxo { list-style: none; margin: 0; padding: 0; }
.widget-container {
	margin: 0 0 2.25rem;
}
.widget-title, .widget-container h2, .widget-container .wp-block-heading {
	font-size: 1.05rem; font-weight: 600; margin: 0 0 .6rem;
}
.widget-container ul { list-style: none; margin: 0; padding: 0; }
.widget-container li { padding: .45rem 0; border-bottom: 1px solid var(--linje); font-size: .95rem; }
.widget-container li:last-child { border-bottom: 0; }
.widget-container a { text-decoration: underline; }

/* =========================================================
   13. SIDFOT
   ========================================================= */
#footer { border-top: 1px solid var(--linje); color: var(--dampad); font-size: .9rem; }
#footer .ram { padding-top: 2rem; padding-bottom: 2.5rem; }
#license { margin: 0; max-width: 44rem; }

/* =========================================================
   14. BLOCKREDIGERARENS JUSTERINGAR
   ========================================================= */
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content::after { content: ""; display: table; clear: both; }

/* =========================================================
   15. SMÅ SKÄRMAR
   ========================================================= */
@media (max-width: 44rem) {
	#header .ram { flex-direction: column; align-items: flex-start; }
	#menu { margin-left: 0; }
	.search-form, .search-form label, .search-field { width: 100%; }
	#site-description { margin-top: 0; }
}