/* ==========================================================================
   Kopia – childtema för Kopimistsamfundet
   Idé: allt i temat är en kopia av något – ekande rubriker, kort som ligger
   i buntar, markeringar som när man markerar text inför Ctrl + C.
   ========================================================================== */

:root {
	--kopia-ink: var(--wp--preset--color--contrast);
	--kopia-paper: var(--wp--preset--color--base);
	--kopia-accent: var(--wp--preset--color--accent-3);
	--kopia-mark: var(--wp--preset--color--accent-1);
	--kopia-muted: var(--wp--preset--color--accent-4);
	--kopia-surface: var(--wp--preset--color--accent-5);
	--kopia-line: var(--wp--preset--color--accent-6);
	--kopia-offset: var(--wp--custom--stack-offset, 8px);
	--kopia-radius: var(--wp--custom--radius, 4px);
	--kopia-mono: var(--wp--preset--font-family--mono);
	--kopia-serif: var(--wp--preset--font-family--fraunces);
	--kopia-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Markering = kopiering. */
::selection {
	background: var(--kopia-mark);
	color: var(--kopia-ink);
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
	font-feature-settings: "ss01", "cv11";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Diskret papperskorn över hela sidan. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .wp-block-post-title {
	font-variation-settings: "opsz" 144;
	text-wrap: balance;
}
p { text-wrap: pretty; }

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--kopia-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Sidhuvud
   -------------------------------------------------------------------------- */
.kopia-topbar {
	font-family: var(--kopia-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.kopia-topbar p { margin: 0; }
.kopia-topbar a { text-decoration: none; }

/* Hela sidhuvudet är klistrat; topbaren (34px) glider undan uppåt. */
.kopia-topbar {
	height: 34px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 0 !important;
	overflow: hidden;
}
.wp-site-blocks > header.wp-block-template-part:has(.kopia-header-wrap) {
	position: sticky;
	top: -34px;
	z-index: 100;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.kopia-header-wrap) { top: calc(32px - 34px); }
@media (max-width: 781px) {
	.wp-site-blocks > header.wp-block-template-part:has(.kopia-header-wrap) { top: 0; }
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.kopia-header-wrap) { top: 0; }
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.kopia-header-wrap) { position: relative; }
}

.kopia-header {
	background: color-mix(in srgb, var(--kopia-paper) 84%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(var(--wp--custom--header-blur, 14px));
	backdrop-filter: saturate(1.4) blur(var(--wp--custom--header-blur, 14px));
	border-bottom: 1px solid transparent;
	transition: border-color .3s, padding .3s var(--kopia-ease);
}
.is-scrolled .kopia-header { border-bottom-color: var(--kopia-line); }

/* Kopimi-märket framför webbplatsens namn – följer färgpaletten. */
.kopia-brand a,
.kopia-brand {
	display: inline-flex;
	align-items: center;
	gap: .55em;
}
.kopia-brand::before {
	content: "";
	flex: none;
	width: 1.55em;
	height: 1.45em;
	background: var(--kopia-accent);
	-webkit-mask: url("../images/mark.svg") center / contain no-repeat;
	mask: url("../images/mark.svg") center / contain no-repeat;
	transition: transform .5s var(--kopia-ease);
}
.kopia-brand:hover::before { transform: rotate(-8deg) scale(1.06); }

.kopia-header .wp-block-navigation__container { gap: clamp(.9rem, 2vw, 1.8rem); }
.kopia-header .wp-block-navigation-item__content { position: relative; padding-block: .3em; }
.kopia-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--kopia-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--kopia-ease);
}
.kopia-header .wp-block-navigation-item__content:hover::after,
.kopia-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.kopia-header .wp-block-navigation__submenu-container {
	border: 1.5px solid var(--kopia-ink) !important;
	border-radius: var(--kopia-radius);
	box-shadow: var(--kopia-offset) var(--kopia-offset) 0 -1.5px var(--kopia-paper), var(--kopia-offset) var(--kopia-offset) 0 0 var(--kopia-ink);
	padding: .4rem 0;
	min-width: 260px !important;
}
.kopia-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--kopia-paper) !important;
	color: var(--kopia-ink) !important;
	padding: clamp(16px, 5vw, 48px) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--kopia-serif);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	letter-spacing: -.02em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: inherit;
	font-size: 1rem;
}

.kopia-header .wp-block-search__button {
	border-radius: 999px;
	border: 1.5px solid var(--kopia-line);
	background: transparent;
	color: var(--kopia-ink);
}
.kopia-header .wp-block-search__input { border-radius: 999px; }

/* --------------------------------------------------------------------------
   Typografiska byggstenar
   -------------------------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--kopia-mono) !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
	line-height: 1.4 !important;
	color: var(--kopia-muted);
	display: flex;
	align-items: center;
	gap: .8em;
}
.is-style-eyebrow::before {
	content: "";
	width: 2.2em;
	height: 1.5px;
	background: var(--kopia-accent);
	flex: none;
}
.has-text-align-center.is-style-eyebrow { justify-content: center; }

.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	max-width: 38ch;
}

/* Eko: rubriken skrivs ut två gånger – originalet och dess kopia. */
.is-style-eko {
	text-shadow: .045em .045em 0 var(--kopia-accent);
}
.is-style-eko mark,
.is-style-eko em { text-shadow: none; }

/* Inline-markering (blockeditorns "Markera") får markeringspennans ton. */
mark:not(.has-inline-color),
.kopia-highlight {
	background: linear-gradient(transparent 52%, var(--kopia-mark) 52%, var(--kopia-mark) 92%, transparent 92%);
	color: inherit;
	padding-inline: .08em;
}

kbd,
.kopia-kbd code {
	display: inline-block;
	font-family: var(--kopia-mono);
	font-size: .8em;
	line-height: 1;
	padding: .45em .6em .4em;
	border: 1.5px solid currentColor;
	border-bottom-width: 3px;
	border-radius: 6px;
	background: var(--kopia-paper);
	color: var(--kopia-ink);
}
.kopia-kbd {
	font-family: var(--kopia-mono);
	font-size: .85rem;
	display: flex;
	align-items: center;
	gap: .6em;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Kopierad bunt – kort som ligger i två kopior bakom varandra
   -------------------------------------------------------------------------- */
.is-style-stack {
	position: relative;
	background: var(--kopia-paper);
	border: 1.5px solid var(--kopia-ink);
	border-radius: var(--kopia-radius);
	box-shadow:
		var(--kopia-offset) var(--kopia-offset) 0 -1.5px var(--kopia-paper),
		var(--kopia-offset) var(--kopia-offset) 0 0 var(--kopia-ink),
		calc(var(--kopia-offset) * 2) calc(var(--kopia-offset) * 2) 0 -1.5px var(--kopia-paper),
		calc(var(--kopia-offset) * 2) calc(var(--kopia-offset) * 2) 0 0 var(--kopia-ink);
	transition: transform .35s var(--kopia-ease), box-shadow .35s var(--kopia-ease);
	margin-right: calc(var(--kopia-offset) * 2);
	margin-bottom: calc(var(--kopia-offset) * 2);
}
.is-style-stack:not(.has-background) { background: var(--kopia-paper); }
a:hover > .is-style-stack,
.is-style-stack:hover,
.is-style-stack:focus-within {
	transform: translate(calc(var(--kopia-offset) * -.5), calc(var(--kopia-offset) * -.5));
	box-shadow:
		calc(var(--kopia-offset) * 1.5) calc(var(--kopia-offset) * 1.5) 0 -1.5px var(--kopia-paper),
		calc(var(--kopia-offset) * 1.5) calc(var(--kopia-offset) * 1.5) 0 0 var(--kopia-ink),
		calc(var(--kopia-offset) * 3) calc(var(--kopia-offset) * 3) 0 -1.5px var(--kopia-paper),
		calc(var(--kopia-offset) * 3) calc(var(--kopia-offset) * 3) 0 0 var(--kopia-accent);
}
.wp-block-image.is-style-stack { padding: 0; overflow: visible; }
.wp-block-image.is-style-stack img { border-radius: calc(var(--kopia-radius) - 1px); display: block; }

/* Hela kortet klickbart om det innehåller en länk med klassen kopia-stretch. */
.kopia-portal { position: relative; }
.kopia-portal .kopia-stretch a { text-decoration: none; }
.kopia-portal .kopia-stretch a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.kopia-portal .kopia-arrow {
	font-family: var(--kopia-mono);
	transition: transform .35s var(--kopia-ease);
}
.kopia-portal:hover .kopia-arrow { transform: translate(4px, -4px); color: var(--kopia-accent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.kopia-hero { position: relative; overflow: clip; }
.kopia-hero h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: .95;
	letter-spacing: -.035em;
	font-weight: 400;
}
.kopia-hero h1 em {
	font-style: italic;
	font-weight: 300;
}

/* Symbolen i tre lager: originalet och två kopior. */
.kopia-symbol {
	position: relative;
	aspect-ratio: 1 / .92;
	width: min(100%, 460px);
	margin-inline: auto;
	min-height: 0 !important;
	isolation: isolate;
}
.kopia-symbol::before,
.kopia-symbol::after,
.kopia-symbol__layer::before {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: url("../images/mark.svg") center / contain no-repeat;
	mask: url("../images/mark.svg") center / contain no-repeat;
	z-index: 0;
}
.kopia-symbol::before {
	background: var(--kopia-mark);
	transform: translate(9%, 7%);
	animation: kopia-drift 9s ease-in-out infinite;
}
.kopia-symbol::after {
	background: var(--kopia-accent);
	transform: translate(4.5%, 3.5%);
	animation: kopia-drift 9s ease-in-out infinite reverse;
}
.kopia-symbol > .kopia-symbol__layer {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0 !important;
}
.kopia-symbol__layer::before { background: var(--kopia-ink); }
@keyframes kopia-drift {
	0%, 100% { translate: 0 0; }
	50% { translate: -2% 1.5%; }
}

.kopia-hero__note {
	position: absolute !important;
	right: 0;
	bottom: 4%;
	z-index: 3;
	transform: rotate(-4deg);
	background: var(--kopia-paper);
	border: 1.5px solid var(--kopia-ink);
	padding: .6rem .9rem;
	border-radius: var(--kopia-radius);
	box-shadow: 4px 4px 0 var(--kopia-ink);
}

/* --------------------------------------------------------------------------
   Rullande band
   -------------------------------------------------------------------------- */
.is-style-marquee {
	overflow: hidden;
	white-space: nowrap;
	border-block: 1.5px solid var(--kopia-ink);
}
.is-style-marquee > * {
	display: inline-block !important;
	width: max-content;
	max-width: none !important;
	margin: 0 !important;
	animation: kopia-marquee 38s linear infinite;
}
.is-style-marquee:hover > * { animation-play-state: paused; }
@keyframes kopia-marquee {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   De fyra K:na
   -------------------------------------------------------------------------- */
.kopia-num {
	font-family: var(--kopia-serif) !important;
	font-size: clamp(3.5rem, 7vw, 5.5rem) !important;
	line-height: .9 !important;
	font-weight: 300 !important;
	font-variation-settings: "opsz" 144;
	color: transparent !important;
	-webkit-text-stroke: 1.5px var(--kopia-ink);
	letter-spacing: -.04em;
	margin: 0;
}
.kopia-k:hover .kopia-num {
	color: var(--kopia-accent) !important;
	-webkit-text-stroke-color: var(--kopia-accent);
}
.kopia-num { transition: color .35s var(--kopia-ease); }

.is-style-k-list {
	list-style: none;
	padding-left: 0 !important;
	counter-reset: k;
	border-top: 1.5px solid var(--kopia-ink);
}
.is-style-k-list > li {
	counter-increment: k;
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--kopia-line);
}
.is-style-k-list > li::before {
	content: counter(k, decimal-leading-zero);
	font-family: var(--kopia-mono);
	font-size: .8rem;
	color: var(--kopia-accent);
	padding-top: .3em;
}

/* --------------------------------------------------------------------------
   Läsläge
   -------------------------------------------------------------------------- */
.kopia-prose > p:first-of-type::first-letter,
.kopia-dropcap::first-letter {
	float: left;
	font-family: var(--kopia-serif);
	font-size: 4.6em;
	line-height: .82;
	font-weight: 400;
	padding: .06em .12em 0 0;
	color: var(--kopia-accent);
	text-shadow: .04em .04em 0 var(--kopia-mark);
}
.kopia-prose > p > strong:first-child {
	font-family: var(--kopia-serif);
	font-weight: 600;
	font-size: 1.08em;
	background: linear-gradient(transparent 58%, color-mix(in srgb, var(--kopia-mark) 70%, transparent) 58%);
}
.kopia-prose > blockquote,
.kopia-prose > .wp-block-quote { position: relative; }
.kopia-prose > ul,
.kopia-prose > ol { padding-left: 1.2em; }
.kopia-prose > ul li::marker { color: var(--kopia-accent); }
.kopia-prose > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 2em;
}
.kopia-prose > h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 1.8em;
}
.kopia-prose img { border-radius: var(--kopia-radius); }

/* Kopiera citat-knapp (läggs till av kopia.js). */
.kopia-copy-btn {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin-top: .9rem;
	padding: .45em .8em;
	font-family: var(--kopia-mono);
	font-size: .72rem;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kopia-ink);
	background: transparent;
	border: 1.5px solid var(--kopia-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}
.kopia-copy-btn:hover { border-color: var(--kopia-ink); background: var(--kopia-mark); }
.kopia-copy-btn svg { width: 1em; height: 1em; }

/* Förloppsindikator högst upp på sidan. */
.kopia-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	z-index: 1000;
	background: var(--kopia-accent);
	transform-origin: 0 50%;
	transform: scaleX(var(--kopia-progress, 0));
	pointer-events: none;
}
.admin-bar .kopia-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopia-progress { top: 46px; } }

.kopia-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1001;
	transform: translate(-50%, 140%);
	padding: .8rem 1.2rem;
	font-family: var(--kopia-mono);
	font-size: .8rem;
	background: var(--kopia-ink);
	color: var(--kopia-paper);
	border-radius: 999px;
	box-shadow: 5px 5px 0 var(--kopia-accent);
	transition: transform .45s var(--kopia-ease);
}
.kopia-toast.is-visible { transform: translate(-50%, 0); }

/* Kopiera länk-knapp */
.wp-block-button.is-style-copy-link .wp-block-button__link::before {
	content: "⧉";
	margin-right: .5em;
	font-family: var(--kopia-mono);
}

/* --------------------------------------------------------------------------
   Inläggskort och listor
   -------------------------------------------------------------------------- */
.kopia-card { height: 100%; display: flex; flex-direction: column; }
.kopia-card .wp-block-post-featured-image { overflow: hidden; }
.kopia-card .wp-block-post-featured-image img {
	transition: transform .6s var(--kopia-ease), filter .6s;
	filter: grayscale(.35) contrast(1.05);
}
.kopia-card:hover .wp-block-post-featured-image img { transform: scale(1.04); filter: none; }
.kopia-card .wp-block-post-title a { background: linear-gradient(var(--kopia-mark), var(--kopia-mark)) 0 88% / 0 .35em no-repeat; transition: background-size .45s var(--kopia-ease); }
.kopia-card:hover .wp-block-post-title a { background-size: 100% .35em; }

.wp-block-query-pagination { font-family: var(--kopia-mono); font-size: .85rem; }
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.4em;
	height: 2.4em;
	border-radius: 999px;
	text-decoration: none;
}
.wp-block-query-pagination-numbers .current { background: var(--kopia-ink); color: var(--kopia-paper); }

/* --------------------------------------------------------------------------
   Sidfot
   -------------------------------------------------------------------------- */
.kopia-footer a { text-decoration: none; }
.kopia-footer a:hover { text-decoration: underline; color: inherit; }
.kopia-footer .kopia-wordmark {
	font-size: clamp(3rem, 11vw, 10rem) !important;
	line-height: .88 !important;
	letter-spacing: -.045em !important;
	font-weight: 300 !important;
	text-shadow: .035em .035em 0 var(--kopia-accent);
}
.kopia-footer .is-style-eyebrow { color: inherit; opacity: .7; }
.kopia-footer .wp-block-search__input {
	background: transparent;
	color: inherit;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding-inline: 1rem;
}
.kopia-footer .wp-block-search__button {
	border-radius: 999px;
	background: var(--kopia-accent);
	border-color: var(--kopia-accent);
	color: #fff;
}
.kopia-footer .wp-block-search__input::placeholder { color: inherit; opacity: .6; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.kopia-404 {
	font-size: clamp(7rem, 30vw, 22rem) !important;
	line-height: .8 !important;
	font-weight: 300 !important;
	letter-spacing: -.06em !important;
	color: transparent !important;
	-webkit-text-stroke: 2px var(--kopia-ink);
	text-shadow: .05em .05em 0 var(--kopia-mark), .1em .1em 0 var(--kopia-accent);
}

/* --------------------------------------------------------------------------
   Responsivt och tillgänglighet
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	:root { --kopia-offset: 6px; }
	.kopia-hero .kopia-symbol { width: min(72%, 320px); }
	.kopia-hide-mobile { display: none !important; }
	.wp-block-column.kopia-k {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--kopia-line);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.is-style-marquee { white-space: normal; }
	.is-style-marquee > * { animation: none !important; }
}

@media print {
	body::before, .kopia-header-wrap, .kopia-footer, .kopia-progress, .kopia-copy-btn, .is-style-marquee { display: none !important; }
	.kopia-prose a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Editor: visa märket i site-title även där. */
.editor-styles-wrapper .kopia-symbol { pointer-events: none; }

/* --------------------------------------------------------------------------
   Småjusteringar
   -------------------------------------------------------------------------- */
.kopia-plain-list { list-style: none; }
.kopia-on-dark { border-top-color: currentColor !important; }
.kopia-on-dark > li::before { color: currentColor !important; opacity: .7; }
.kopia-on-dark a { text-decoration: none; }
.kopia-on-dark a:hover { text-decoration: underline; color: inherit; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group { margin-block-start: 0; }

/* Överrubrikens streck syns även på färgade sektioner. */
.has-background:not(.has-base-background-color):not(.has-accent-5-background-color) .is-style-eyebrow::before { background: currentColor; }