/*
Theme Name: Dazzle
Theme URI: https://www.dazzle.nu/
Author: Moa Sjöberg
Description: Fankultur på svenska. Den gamla fanwebbens formspråk i vuxen tappning: sajtens logotyp är en 88x31-knapp, ämnena är en knappvägg och CD-skivans regnbåge är den enda accenten.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: dz-glitter
*/

/* ==========================================================================
   Grund
   ========================================================================== */

:root {
	--natt: #0B0B12;
	--natt-2: #14141F;
	--natt-3: #1B1B28;
	--linje: #2D2C40;
	--kant: #77748F;
	--vit: #F4F3FA;
	--text: #E6E4F0;
	--dis: #B9B6CC;
	--rosa: #FF7AD9;
	--cyan: #7AF0FF;
	--gul: #FFF27A;
	--holo: linear-gradient(100deg, #FF7AD9 0%, #7AF0FF 52%, #FFF27A 100%);
	--display: Righteous, 'Kumbh Sans', system-ui, sans-serif;
	--sans: 'Kumbh Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mjuk: cubic-bezier(.2, .7, .2, 1);
	--las: 42rem;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--natt);
	color: var(--text);
	font-family: var(--sans);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

p, li, dd, td { font-weight: 400; }
strong, b { font-weight: 700; color: var(--vit); }

::selection { background: var(--rosa); color: var(--natt); }

a { color: var(--vit); text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(122, 240, 255, .75); }
a:hover { text-decoration-color: var(--rosa); }

:focus-visible { outline: 3px solid var(--gul); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

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

.a11y-sr, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dz-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 1000;
	background: var(--vit); color: var(--natt); padding: .8rem 1.2rem; font-weight: 700; text-decoration: none;
}
.dz-skip:focus { top: 1rem; }

.dz-dot { margin: 0 .45em; color: var(--kant); }
.dz-arrow { display: inline-block; transition: transform .25s var(--mjuk); }
a:hover .dz-arrow { transform: translateX(3px); }

/* Holografisk text: bara på mörk bakgrund och bara i stora storlekar. */
.dz-holo-text { color: var(--rosa); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dz-holo-text {
		background: var(--holo);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
		-webkit-box-decoration-break: clone; box-decoration-break: clone;
	}
}

/* ==========================================================================
   88x31-knappen
   ========================================================================== */

.dz-knapp {
	--w: 8.25rem;
	position: relative;
	display: inline-grid;
	grid-template-columns: 27% 1fr;
	align-items: stretch;
	width: var(--w);
	aspect-ratio: 88 / 31;
	flex: none;
	background: linear-gradient(var(--v, 100deg), #FF7AD9 0%, #7AF0FF 55%, #FFF27A 100%);
	background-size: 170% 170%;
	background-position: 0% 50%;
	border: 2px solid var(--natt);
	box-shadow: 0 0 0 1px rgba(244, 243, 250, .6);
	transition: background-position .7s var(--mjuk);
	line-height: 1;
}
.dz-knapp::before {
	content: "\2726";
	display: grid; place-items: center;
	background: var(--natt);
	color: var(--gul);
	font-size: calc(var(--w) * .13);
	font-family: system-ui, sans-serif;
	border-right: 1px solid rgba(244, 243, 250, .55);
}
.dz-knapp-in {
	display: grid; place-items: center;
	padding: 0 .2em;
	font-family: var(--display);
	font-size: calc(var(--w) * .135);
	color: var(--natt);
	letter-spacing: .01em;
	white-space: nowrap;
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 rgba(11, 11, 18, .25);
}
.dz-knapp.is-long .dz-knapp-in { font-size: calc(var(--w) * .112); }
.dz-knapp.is-big { --w: 10.5rem; }
.dz-knapp.is-huge { --w: clamp(12rem, 26vw, 19rem); border-width: 3px; }
a:hover .dz-knapp, a:focus-visible .dz-knapp { background-position: 100% 50%; }

/* ==========================================================================
   Sidhuvud
   ========================================================================== */

.dz-header { border-bottom: 1px solid var(--linje); background: var(--natt); position: relative; z-index: 20; }
.dz-header-row { min-height: 5.25rem; gap: 1.5rem; padding-block: .9rem; }

.dz-brand { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--vit); }
.dz-brand-knapp {
	display: inline-grid; place-items: center;
	width: 8.6rem; aspect-ratio: 88 / 31;
	background: var(--holo); background-size: 200% 100%; background-position: 0 0;
	border: 2px solid var(--natt);
	box-shadow: 0 0 0 1px rgba(244, 243, 250, .7), inset 1px 1px 0 rgba(255, 255, 255, .75), inset -1px -1px 0 rgba(11, 11, 18, .2);
	transition: background-position .8s var(--mjuk);
}
.dz-brand-in { font-family: var(--display); font-size: 1.62rem; color: var(--natt); line-height: 1; letter-spacing: .015em; transform: translateY(-1px); }
.dz-brand:hover .dz-brand-knapp, .dz-brand:focus-visible .dz-brand-knapp { background-position: 100% 0; }
.dz-brand-tag { font-size: .98rem; color: var(--dis); font-weight: 500; line-height: 1.25; max-width: 9rem; }
@media (max-width: 600px) { .dz-brand-tag { display: none; } .dz-brand-knapp { width: 7.6rem; } .dz-brand-in { font-size: 1.42rem; } }

.dz-nav { font-size: 1rem; font-weight: 500; }
.dz-nav .wp-block-navigation-item__content {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem;
	color: var(--vit); text-decoration: none;
	background-image: var(--holo); background-repeat: no-repeat; background-size: 0 2px; background-position: .65rem calc(100% - 8px);
	transition: background-size .3s var(--mjuk);
}
.dz-nav .wp-block-navigation-item__content:hover,
.dz-nav .current-menu-item > .wp-block-navigation-item__content,
.dz-nav [aria-current="page"] { background-size: calc(100% - 1.3rem) 2px; }
.dz-nav .wp-block-navigation__submenu-container {
	background: var(--natt-2) !important; border: 1px solid var(--linje) !important; padding: .5rem 0 !important; min-width: 19rem !important;
}
.dz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .3rem 1.1rem; width: 100%; background-position: 1.1rem calc(100% - 8px); }
.dz-nav .wp-block-navigation__submenu-icon { color: var(--dis); width: 24px; height: 24px; display: inline-grid; place-items: center; margin-left: 0 !important; }
.dz-nav .wp-block-navigation__submenu-icon svg { width: 12px; height: 12px; }

.dz-nav-search { margin-left: .6rem; }
.dz-nav-search .wp-block-search__inside-wrapper { border: 1px solid var(--kant) !important; background: transparent; padding: 0 !important; min-height: 44px; }
.dz-nav-search .wp-block-search__input { background: transparent; color: var(--vit); border: 0; width: 8.5rem; padding: 0 .7rem; font: inherit; font-size: .98rem; min-height: 42px; }
.dz-nav-search .wp-block-search__input::placeholder { color: var(--dis); opacity: 1; }
.dz-nav-search .wp-block-search__button { background: var(--vit); color: var(--natt); border: 0; margin: 0; padding: 0 .9rem; font-weight: 650; min-height: 42px; border-radius: 0; }
.dz-nav-search .wp-block-search__button:hover { background: var(--holo); }

.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close {
	color: var(--vit); width: 48px; height: 48px; display: inline-grid; place-items: center;
}
.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--natt) !important; color: var(--vit) !important; padding: 1.25rem clamp(1rem, 5vw, 2rem) 2rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem; gap: .2rem; align-items: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--display); font-size: 1.6rem; min-height: 52px; padding: 0; background-position: 0 calc(100% - 6px); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; padding: 0 0 .6rem 1rem !important; min-width: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-family: var(--sans); font-size: 1.1rem; min-height: 44px; padding: 0; background-position: 0 calc(100% - 8px); }
.wp-block-navigation__responsive-container.is-menu-open .dz-nav-search { margin: 1.4rem 0 0; width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .dz-nav-search .wp-block-search__input { width: 100%; font-size: 1.05rem; }

/* ==========================================================================
   Knappar och länkar
   ========================================================================== */

.dz-btn, .dz-copy, .wp-block-search__button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 1.35rem;
	background: var(--vit); color: var(--natt);
	font-family: var(--sans); font-weight: 650; font-size: 1rem;
	border: 0; border-radius: 0; text-decoration: none; cursor: pointer;
	background-size: 200% 100%;
	transition: background-position .5s var(--mjuk), transform .2s var(--mjuk);
}
.dz-btn:hover, .dz-copy:hover { background-image: var(--holo); color: var(--natt); }
.dz-btn:active, .dz-copy:active { transform: translateY(1px); }

.dz-link-arrow {
	display: inline-flex; align-items: center; min-height: 44px;
	font-weight: 600; color: var(--vit); text-decoration: none;
	background-image: var(--holo); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 calc(100% - 9px);
	transition: background-size .3s var(--mjuk);
}
.dz-link-arrow:hover { background-size: 100% 3px; }

/* ==========================================================================
   Startsidan
   ========================================================================== */

.dz-hero {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
	padding-block: clamp(3rem, 8vw, 7rem) clamp(3rem, 7vw, 6rem);
}
.dz-hero-title {
	font-family: var(--display); font-weight: 400;
	font-size: clamp(2.55rem, 5.6vw, 5.3rem); line-height: 1.03; letter-spacing: -.005em;
	margin: 0 0 .5em; color: var(--vit); max-width: 15ch; text-wrap: balance;
}
.dz-hero-lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--text); max-width: 36rem; margin: 0 0 1rem; }
.dz-hero-by { color: var(--dis); max-width: 34rem; margin: 0 0 2rem; }
.dz-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 0; }

.dz-hero-art { position: relative; display: grid; place-items: center; }

/* CD-skivan: spegel, regnbåge, spår och navet. */
.dz-cd {
	position: relative; display: block;
	width: min(100%, 25rem); aspect-ratio: 1; border-radius: 50%;
	background:
		radial-gradient(circle at center, var(--natt) 0 7.4%, rgba(255, 255, 255, .7) 7.6% 8.3%, rgba(214, 218, 230, .22) 8.5% 19.6%, rgba(255, 255, 255, .5) 19.8% 20.4%, transparent 20.6%),
		repeating-radial-gradient(circle at center, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
		conic-gradient(from 18deg, #c8ccd8 0deg, #FF7AD9 34deg, #7AF0FF 62deg, #FFF27A 88deg, #d6d9e2 118deg, #7d8294 178deg, #c8ccd8 204deg, #FF7AD9 216deg, #7AF0FF 244deg, #FFF27A 270deg, #d6d9e2 300deg, #7d8294 360deg);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 0 0 1px var(--linje), 0 30px 120px -30px rgba(122, 240, 255, .28);
	transition: transform 1.4s var(--mjuk);
}
.dz-hero-art:hover .dz-cd { transform: rotate(28deg); }
.dz-cd.is-small { width: 5.5rem; }
.dz-cd.is-scratched::after {
	content: ""; position: absolute; left: 14%; top: 30%; width: 72%; height: 3px;
	background: var(--natt); transform: rotate(-24deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

.dz-sparkle { position: absolute; color: var(--vit); line-height: 0; }
.dz-sparkle svg { width: 100%; height: 100%; display: block; }
.dz-sparkle.s1 { width: 2.2rem; top: 4%; left: 6%; color: var(--gul); }
.dz-sparkle.s2 { width: 1.2rem; top: 18%; right: 4%; }
.dz-sparkle.s3 { width: 1.6rem; bottom: 10%; right: 12%; color: var(--cyan); }
.dz-sparkle.s4 { width: .9rem; bottom: 22%; left: 2%; color: var(--rosa); }

/* Glittret blinkar två gånger, högst en gång per 1,6 sekunder, och står sedan still. */
@media (prefers-reduced-motion: no-preference) {
	.dz-sparkle { animation: dz-twinkle 1.6s ease-in-out 2 both; }
	.dz-sparkle.s2 { animation-delay: .35s; }
	.dz-sparkle.s3 { animation-delay: .7s; }
	.dz-sparkle.s4 { animation-delay: 1.05s; }
}
@keyframes dz-twinkle {
	0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
	50% { opacity: .35; transform: scale(.62) rotate(20deg); }
}

.dz-section { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--linje); }
.dz-home > .dz-section:first-of-type { border-top: 1px solid var(--linje); }
.dz-sec-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; margin: 0 0 1.75rem; color: var(--vit); }
.dz-sec-title.is-small { font-size: clamp(1.55rem, 2.4vw, 1.9rem); margin-bottom: 1.25rem; }
.dz-sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: 2.75rem; }
.dz-sec-head .dz-sec-title { margin: 0; }
.dz-sec-lede { color: var(--dis); margin: 0; max-width: 34rem; }

/* Senaste */
.dz-latest { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dz-lead { border-top: 4px solid transparent; border-image: var(--holo) 1; padding-top: 1.6rem; }
.dz-lead-img { display: block; margin: 0 0 1.5rem; }
.dz-lead-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dz-lead-k { margin: 0 0 .8rem; color: var(--rosa); font-weight: 650; font-size: .98rem; }
.dz-lead-title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; margin: 0 0 1rem; text-wrap: balance; }
.dz-lead-title a, .dz-row-title a, .dz-guide-t, .dz-wall-name { text-decoration: none; }
.dz-lead-title a, .dz-row-title a {
	background-image: var(--holo); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%;
	transition: background-size .35s var(--mjuk);
}
.dz-lead-title a:hover, .dz-row-title a:hover { background-size: 100% 2px; }
.dz-lead-ex { font-size: 1.15rem; color: var(--text); margin: 0 0 1rem; max-width: 36rem; }

.dz-meta { margin: 0; font-size: .95rem; color: var(--dis); }
.dz-meta-cat { color: var(--vit); font-weight: 600; }

.dz-row { padding-block: 1.25rem; border-top: 1px solid var(--linje); }
.dz-latest-list .dz-row:first-child { border-top: 0; padding-top: 0; }
.dz-row.has-img { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dz-row-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.dz-row-title { font-family: var(--sans); font-weight: 650; font-size: 1.22rem; line-height: 1.3; margin: 0 0 .4rem; color: var(--vit); letter-spacing: -.005em; }
.dz-row-ex { margin: 0 0 .5rem; color: var(--dis); font-size: 1rem; line-height: 1.55; }

.dz-rows.is-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.5rem; }
.dz-rows.is-3 .dz-row.has-img { display: block; }
.dz-rows.is-3 .dz-row-img { display: block; margin-bottom: 1rem; }

/* Guiderna */
.dz-band { background: var(--natt-2); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); padding-block: clamp(3rem, 7vw, 6rem); }
.dz-band + .dz-section { border-top: 0; }
.dz-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; counter-reset: g; }
.dz-guide { border-top: 1px solid var(--kant); }
.dz-guide a { box-sizing: border-box; display: flex; flex-direction: column; gap: .85rem; padding: 1.6rem 0 .5rem; color: var(--vit); text-decoration: none; height: 100%; }
.dz-guide-t { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; margin-top: .4rem; }
.dz-guide-e { color: var(--dis); font-size: 1rem; line-height: 1.55; }
.dz-guide-more { margin-top: auto; font-weight: 600; padding-top: .4rem; }
.dz-guide a:hover .dz-guide-t { text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* Knappväggen */
.dz-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.dz-wall-head { display: grid; justify-items: start; gap: .7rem; text-decoration: none; color: var(--vit); padding-bottom: .2rem; }
.dz-wall-name { font-weight: 650; font-size: 1.15rem; line-height: 1.3; margin-top: .3rem; }
.dz-wall-head:hover .dz-wall-name { text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: .2em; }
.dz-wall-n { color: var(--dis); font-size: .95rem; margin-top: -.45rem; }
.dz-wall-d { color: var(--dis); font-size: 1rem; line-height: 1.55; margin: .9rem 0 1rem; }
.dz-wall-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.dz-wall-list li { border-bottom: 1px solid var(--linje); }
.dz-wall-list a { display: block; padding: .7rem 0; text-decoration: none; line-height: 1.4; font-weight: 500; }
.dz-wall-list a:hover { text-decoration: underline; text-decoration-color: var(--cyan); }
.dz-wall.is-compact { grid-template-columns: repeat(4, max-content); gap: 1.5rem 2.5rem; }
.dz-wall-head[aria-current="page"] .dz-knapp { box-shadow: 0 0 0 3px var(--vit); }

/* Om och Länka hit */
.dz-home-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); }
.dz-home-about-text p { max-width: 36rem; }
.dz-home-about-link p { color: var(--dis); }

.dz-linkme { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.dz-linkme-show { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; border: 1px dashed var(--kant); background: var(--natt-2); }
.dz-linkme-1x { width: 88px; height: 31px; }
.dz-linkme-4x { width: 352px; height: auto; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.dz-linkme-code label { display: block; font-weight: 600; margin-bottom: .45rem; color: var(--vit); }
.dz-linkme-code textarea {
	width: 100%; box-sizing: border-box; resize: vertical; background: var(--natt); color: var(--text);
	border: 1px solid var(--kant); border-radius: 0; padding: .8rem; font: .88rem/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; margin-bottom: .8rem;
}
.dz-copy-status { min-height: 1.5em; margin: .5rem 0 0; color: var(--cyan); font-size: .95rem; }

/* ==========================================================================
   Artiklar och sidor
   ========================================================================== */

.dz-article-head, .dz-hero-img, .dz-body, .dz-author { max-width: var(--las); margin-inline: auto; }
.dz-article-head { padding-block: clamp(2.5rem, 6vw, 5rem) 2rem; }
.dz-kick { margin: 0 0 1.2rem; font-weight: 650; font-size: 1rem; }
.dz-kick a { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; text-decoration: none; color: var(--vit); }
.dz-kick a::before { content: ""; width: .9rem; height: .9rem; background: var(--holo); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 5.6 3.4 9.9 12 12-8.6 2.1-11.3 6.4-12 12-.7-5.6-3.4-9.9-12-12C8.6 9.9 11.3 5.6 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 5.6 3.4 9.9 12 12-8.6 2.1-11.3 6.4-12 12-.7-5.6-3.4-9.9-12-12C8.6 9.9 11.3 5.6 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.dz-kick a:hover { text-decoration: underline; text-decoration-color: var(--rosa); }
.dz-article-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.06; margin: 0 0 1.25rem; color: var(--vit); text-wrap: balance; }
.dz-dek, .dz-dek p { font-size: clamp(1.15rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--text); margin: 0 0 1.5rem; }
.dz-dek .wp-block-post-excerpt__more-text { display: none; }
.dz-byline { gap: 0; font-size: .98rem; color: var(--dis); align-items: center; }
.dz-byline > * { margin: 0 !important; }
.dz-byline .wp-block-post-author-name { color: var(--vit); font-weight: 600; margin-left: .3em !important; }
.dz-byline .dz-upd::before, .dz-byline .wp-block-post-date::before { content: "·"; margin: 0 .45em; color: var(--kant); }

.dz-hero-img { margin-bottom: 2.5rem; }
.dz-hero-img:empty { display: none; }
.dz-hero-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dz-hero-img figure { margin: 0; }

.dz-body { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.72; padding-bottom: 1rem; }
.dz-body > * { margin-block: 0 1.25em; }
.dz-body p { max-width: 68ch; }
.dz-body h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.65rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 2.2em 0 .7em; color: var(--vit); scroll-margin-top: 1.5rem; }
.dz-body h3 { font-family: var(--sans); font-weight: 700; font-size: 1.22em; line-height: 1.3; margin: 1.8em 0 .5em; color: var(--vit); }
.dz-body h2 strong, .dz-body h2 b { font-weight: inherit; }
.dz-body ul, .dz-body ol { padding-left: 1.6em; }
.dz-body li { margin-bottom: .5em; }
.dz-body ul { list-style: none; }
.dz-body ul > li { position: relative; }
.dz-body ul > li::before {
	content: ""; position: absolute; left: -1.45em; top: .42em; width: .78em; height: .78em; background: var(--holo);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 5.6 3.4 9.9 12 12-8.6 2.1-11.3 6.4-12 12-.7-5.6-3.4-9.9-12-12C8.6 9.9 11.3 5.6 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 5.6 3.4 9.9 12 12-8.6 2.1-11.3 6.4-12 12-.7-5.6-3.4-9.9-12-12C8.6 9.9 11.3 5.6 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dz-body ol > li::marker { color: var(--cyan); font-weight: 700; }
.dz-body a { text-decoration-thickness: 1px; text-decoration-color: rgba(122, 240, 255, .8); }
.dz-body a:hover { background: var(--holo); color: var(--natt); text-decoration-color: var(--natt); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dz-body a:hover strong { color: var(--natt); }
.dz-body blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4em; border-left: 4px solid; border-image: var(--holo) 1; font-size: 1.15em; color: var(--vit); }
.dz-body figure { margin: 2em 0; }
.dz-body figure img { display: block; }
.dz-body figcaption { color: var(--dis); font-size: .92rem; margin-top: .6rem; }
.dz-body code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; background: var(--natt-3); padding: .12em .35em; color: var(--vit); }
.dz-body pre { background: var(--natt-2); border: 1px solid var(--linje); padding: 1rem 1.2rem; overflow-x: auto; font-size: .88rem; line-height: 1.55; }
.dz-body pre code { background: none; padding: 0; }
.dz-body table { width: 100%; border-collapse: collapse; font-size: .98em; font-variant-numeric: tabular-nums; }
.dz-body th, .dz-body td { text-align: left; padding: .65rem .8rem .65rem 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.dz-body th { color: var(--vit); font-weight: 700; border-bottom-color: var(--kant); }
.dz-body .wp-block-table { overflow-x: auto; }
.dz-body dl { margin: 0 0 1.5em; }
.dz-body dt { color: var(--vit); margin-top: 1.1em; }
.dz-body dd { margin: .25em 0 0; padding-left: 1.1em; border-left: 2px solid var(--linje); }
.dz-body hr { border: 0; height: 1px; background: var(--linje); margin: 2.5em 0; }

.dz-fakta { margin: 2em 0; padding: 1.4rem 1.6rem 1.1rem; background: var(--natt-2); border: 1px solid var(--linje); border-top: 3px solid transparent; border-image: none; position: relative; }
.dz-fakta::before { content: ""; position: absolute; left: -1px; right: -1px; top: -3px; height: 3px; background: var(--holo); }
.dz-fakta > :first-child { margin-top: 0; }
.dz-fakta > :last-child { margin-bottom: 0; }
.dz-fakta h3, .dz-fakta .dz-fakta-h { font-family: var(--sans); font-weight: 700; font-size: 1.05em; color: var(--vit); margin: 0 0 .6em; }
.dz-fakta p, .dz-fakta li { font-size: .97em; }

.dz-author { border-top: 1px solid var(--linje); margin-top: 3rem; padding-block: 2rem 1rem; }
.dz-author > * { margin-block: 0 .5rem; }
.dz-author-k { color: var(--dis); font-size: .95rem; margin: 0 !important; }
.dz-author-name { font-family: var(--display); font-size: 1.6rem; color: var(--vit); }
.dz-author .wp-block-post-author-biography { color: var(--text); max-width: 38rem; }
.dz-author-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.dz-more .dz-row:first-child { }

/* Guiden */
.dz-guide-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem; border-bottom: 1px solid var(--linje); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.dz-guide-head-text { max-width: 48rem; }
.dz-guide-head .dz-article-title { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.dz-arch-knapp { line-height: 0; }
.dz-read { display: grid; grid-template-columns: 15rem minmax(0, var(--las)); gap: clamp(2rem, 5vw, 5rem); justify-content: center; align-items: start; }
.dz-read .dz-body { margin: 0; max-width: none; }
.dz-read-aside { position: sticky; top: 1.5rem; }
.dz-toc { font-size: .98rem; }
.dz-toc-label { font-family: var(--display); font-size: 1.25rem; color: var(--vit); margin: 0 0 .8rem; }
.dz-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linje); counter-reset: t; }
.dz-toc li { counter-increment: t; }
.dz-toc a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--dis); line-height: 1.4; }
.dz-toc a:hover { color: var(--vit); border-left-color: var(--rosa); }

/* Arkiv och sök */
.dz-archive-head { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: clamp(2.5rem, 6vw, 5rem) 2rem; border-bottom: 1px solid var(--linje); }
.dz-archive-head .dz-arch-knapp { margin-bottom: 1.75rem; }
.dz-arch-n { color: var(--dis); margin: 0 0 .6rem; font-size: 1rem; }
.dz-archive-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.06; margin: 0 0 1rem; color: var(--vit); }
.dz-archive-head .dz-dek { max-width: 40rem; }
.dz-archive-head .dz-search { max-width: 34rem; margin-top: 1rem; }
.dz-feed { padding-bottom: 2rem; }
.dz-feed-list { list-style: none; margin: 0; padding: 0; }
.dz-qrow { padding-block: 1.75rem; border-bottom: 1px solid var(--linje); }
.dz-qrow:has(.dz-qrow-img) { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.dz-qrow-img { margin: 0; }
.dz-qrow-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.dz-qrow-text { max-width: 46rem; }
.dz-qrow-text > * { margin-block: 0 .5rem; }
.dz-qrow .dz-row-title { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.dz-qrow .dz-row-ex p { margin: 0; }
.dz-qrow .wp-block-post-excerpt__more-text { display: none; }
.wp-block-query-pagination { margin-top: 2rem; gap: 1rem; font-weight: 600; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }

.dz-search .wp-block-search__inside-wrapper { display: flex; gap: 0; }
.dz-search .wp-block-search__input { flex: 1; min-height: 48px; background: transparent; color: var(--vit); border: 1px solid var(--kant); border-right: 0; border-radius: 0; padding: 0 1rem; font: inherit; }
.dz-search .wp-block-search__input::placeholder { color: var(--dis); opacity: 1; }
.dz-search .wp-block-search__button { margin: 0; }

/* 404 */
.dz-404-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
.dz-404-art { display: grid; place-items: center; }
.dz-404 .dz-search { max-width: 32rem; }

/* Alla artiklar */
.dz-alla { list-style: none !important; padding: 0 !important; border-top: 1px solid var(--linje); }
.dz-alla li { padding: .7rem 0; border-bottom: 1px solid var(--linje); margin: 0 !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem; }
.dz-alla li::before { display: none; }
.dz-alla time { color: var(--dis); font-size: .95rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Sidfot
   ========================================================================== */

.dz-footer { border-top: 1px solid var(--linje); padding-block: 0 2rem; margin-top: clamp(3rem, 6vw, 5rem); position: relative; }
.dz-footer-cd { display: flex; justify-content: flex-end; margin-top: -2.75rem !important; margin-bottom: 1.5rem !important; }
.dz-footer-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; padding-bottom: 3rem; }
.dz-footer-brand p { color: var(--dis); max-width: 26rem; font-size: 1rem; }
.dz-footer-brand a:not(.dz-brand) { color: var(--vit); }
.dz-footer-h { font-family: var(--display); font-size: 1.15rem; color: var(--vit); margin: 0 0 .8rem; }
.dz-footer ul { list-style: none; margin: 0; padding: 0; }
.dz-footer nav li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--dis); text-decoration: none; font-size: 1rem; line-height: 1.35; }
.dz-footer nav li a:hover { color: var(--vit); text-decoration: underline; text-decoration-color: var(--rosa); }
.dz-footer-bottom { border-top: 1px solid var(--linje); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
.dz-footer-bottom p { margin: 0; color: var(--dis); font-size: .95rem; }
.dz-friskrivning { max-width: 46rem; }

/* ==========================================================================
   Mindre skärmar
   ========================================================================== */

@media (max-width: 1100px) {
	.dz-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
	.dz-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dz-wall.is-compact { grid-template-columns: repeat(2, max-content); }
	.dz-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dz-footer-brand { grid-column: 1 / -1; }
	.dz-read { grid-template-columns: minmax(0, var(--las)); }
	.dz-read-aside { position: static; border: 1px solid var(--linje); padding: 1.25rem 1.4rem; background: var(--natt-2); }
}

@media (max-width: 860px) {
	.dz-hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
	.dz-hero-art { order: -1; justify-items: start; }
	.dz-hero-art .dz-cd { width: 9.5rem; }
	.dz-sparkle.s1 { left: 9rem; top: 0; }
	.dz-sparkle.s2 { left: 11.5rem; right: auto; top: 45%; }
	.dz-sparkle.s3 { left: 8.5rem; right: auto; bottom: 0; }
	.dz-sparkle.s4 { display: none; }
	.dz-sec-head { grid-template-columns: 1fr; }
	.dz-latest { grid-template-columns: 1fr; }
	.dz-home-about { grid-template-columns: 1fr; }
	.dz-rows.is-3 { grid-template-columns: 1fr; }
	.dz-guide-head { grid-template-columns: 1fr; }
	.dz-guide-head .dz-arch-knapp { order: -1; }
	.dz-404-inner { grid-template-columns: 1fr; }
	.dz-404-art .dz-cd { width: 11rem; }
	.dz-qrow:has(.dz-qrow-img) { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.dz-guides { grid-template-columns: 1fr; }
	.dz-wall { grid-template-columns: 1fr; gap: 2.25rem; }
	.dz-wall.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
	.dz-wall.is-compact .dz-knapp.is-big { --w: 8.5rem; }
	.dz-footer-cols { grid-template-columns: 1fr; gap: 2rem; }
	.dz-row.has-img { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
	.dz-linkme-show { padding: 1rem; }
	.dz-footer-cd { margin-top: -2rem !important; }
	.dz-footer-cd .dz-cd.is-small { width: 4rem; }
	.dz-knapp.is-huge { --w: 13rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.dz-hero-art:hover .dz-cd { transform: none; }
}

@media print {
	body { background: #fff; color: #000; }
	.dz-header, .dz-footer, .dz-more, .dz-hero-art { display: none; }
	.dz-holo-text { color: #000; -webkit-text-fill-color: #000; background: none; }
}

/* Mobilmenyn: allt vänsterställt. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; }