/*
Theme Name: Changing Minds
Description: Tema för changingminds.se, byggt från designförslaget i Fas 1 (2026-10-16). Allt innehåll är vanliga block.
Author: Hatten av
Version: 1.3.3
Requires at least: 6.6
Text Domain: changingminds
*/

/* Färgerna kommer från theme.json (--wp--preset--color--*). Klasserna cm-* sätts på vanliga block. */
:root {
	--cm-papper: var(--wp--preset--color--papper);
	--cm-papper-2: var(--wp--preset--color--papper-2);
	--cm-vit: var(--wp--preset--color--vit);
	--cm-svart: var(--wp--preset--color--svart);
	--cm-mjuk: var(--wp--preset--color--mjuk);
	--cm-turkos: var(--wp--preset--color--turkos);
	--cm-sol: var(--wp--preset--color--sol);
	--cm-apelsin: var(--wp--preset--color--apelsin);
	--cm-korall: var(--wp--preset--color--korall);
	--cm-linje: #d9d1c1;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; }
.wp-site-blocks { padding-top: 0; }
main.cm-main { margin-top: 0; }
main.cm-main > .entry-content, main.cm-main > .wp-block-post-content { margin-top: 0; }
:where(.wp-block-post-content) > * { margin-block-start: 0; }

/* Sektioner */
.cm-sektion { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.cm-sektion.cm-utan-topp { padding-top: 0; }
.cm-mork { background: var(--cm-svart); color: var(--cm-papper); }
.cm-turkos { background: var(--cm-turkos); color: var(--cm-vit); }
.cm-papper2 { background: var(--cm-papper-2); }
.cm-etikett { font-weight: 600; font-size: .78rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-turkos); margin-bottom: 18px !important; }
.cm-mork .cm-etikett, .cm-turkos .cm-etikett { color: var(--cm-sol); }
.cm-ingress { font-size: var(--wp--preset--font-size--ingress); line-height: 1.5; color: var(--cm-mjuk); max-width: 40em; }
.cm-mork .cm-ingress { color: #c9c4b8; }
.cm-turkos .cm-ingress { color: #d8ecea; }
.cm-sektion :where(h1, h2, h3) { margin-top: 0; margin-bottom: .5em; }
/* Smala textblock ska ligga till vänster i sektionerna, inte centreras av WP:s constrained-layout */
.is-layout-constrained > :is(.cm-ingress, .cm-stort, .cm-fakta) { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-right: auto !important; }
.cm-avslut.is-layout-constrained > .cm-ingress { margin-left: auto !important; }

/* Knappar: standard svart, stilar "Sol" och "Linje" */
.wp-block-button__link { transition: transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link::after { content: " →"; }
.wp-block-button.is-style-sol .wp-block-button__link { background: var(--cm-sol); color: var(--cm-svart); }
.wp-block-button.is-style-linje .wp-block-button__link { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.cm-sektion .wp-block-buttons { margin-top: 32px; gap: 12px; }

/* Sidhuvud */
.cm-sidhuvud { background: rgba(246, 242, 234, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cm-linje); min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
/* Sidhuvudet fastnar överst: det är template-part-elementet (header) som måste vara sticky */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 20; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.cm-sidhuvud .cm-logga img { height: 34px; width: auto; }
.cm-sidhuvud .cm-logga { margin: 0; }
.cm-sidhuvud .wp-block-navigation { font-weight: 500; font-size: .98rem; gap: 28px; }
.cm-sidhuvud .wp-block-navigation a { text-decoration: none; }
.cm-sidhuvud .wp-block-navigation .current-menu-item > a { color: var(--cm-turkos); }
.cm-sidhuvud .wp-block-button__link { padding: 12px 20px; font-size: .92rem; }
.cm-sidhuvud .wp-block-navigation__responsive-container.is-menu-open { background: var(--cm-papper); padding: 24px 16px; }
@media (max-width: 600px) { .cm-sidhuvud .wp-block-buttons { display: none; } }

/* Hero */
.cm-hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); }
.cm-hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--cm-sol) 62%); }
.cm-hero-grid { gap: clamp(32px, 5vw, 72px) !important; }
.cm-hero-bild { position: relative; }
.cm-hero-bild .cm-omslag img { border-radius: 20px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.cm-hero-bild .cm-stampel { position: absolute; width: clamp(96px, 12vw, 150px); left: -36px; bottom: -36px; margin: 0; }
.cm-hero-bild .cm-stampel img { border-radius: 50%; box-shadow: 0 12px 30px rgba(0,0,0,.18); transform: rotate(-8deg); }
/* Siffra + förklaring: siffran till vänster, texten centrerad mot den bakom en tunn linje */
.cm-fakta { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; margin-top: 40px !important; padding-top: 28px; border-top: 1px solid var(--cm-linje); max-width: 36em; }
.cm-fakta > * { margin: 0 !important; }
.cm-fakta p:not(.cm-tal) { padding-left: 24px; border-left: 2px solid var(--cm-korall); line-height: 1.5; }
.cm-fakta .cm-tal { font-family: var(--wp--preset--font-family--rubrik); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--cm-korall); white-space: nowrap; }
.cm-fakta p:not(.cm-tal) { color: var(--cm-mjuk); font-size: .98rem; }
@media (max-width: 781px) {
	.cm-hero-bild .cm-omslag img { aspect-ratio: 4/3; }
	.cm-hero-bild .cm-stampel { left: auto; right: 12px; bottom: -28px; }
	.cm-fakta { grid-template-columns: 1fr; row-gap: 12px; }
}

/* Logotyprad */
.cm-logorad { border-block: 1px solid var(--cm-linje); padding-top: 28px; padding-bottom: 28px; background: var(--cm-vit); }
.cm-logorad > p { text-align: center; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-mjuk); margin-bottom: 18px; }
.cm-logos { gap: 8px 28px !important; justify-content: center; }
.cm-logos figure { margin: 0; }
.cm-logos img { height: 64px; width: 64px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .8; }

/* Fem frågor */
.cm-fragor { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px !important; counter-reset: fraga; }
.cm-fraga { position: relative; background: var(--f, var(--cm-sol)); color: var(--cm-svart); padding: 26px 22px 30px; border-radius: 4px 4px 18px 4px; box-shadow: 0 10px 24px rgba(30,36,34,.10); min-height: 220px; display: flex; flex-direction: column; margin: 0 !important; transition: transform .2s ease; }
.cm-fraga:nth-child(odd) { transform: rotate(-1.2deg); }
.cm-fraga:nth-child(even) { transform: rotate(1deg) translateY(10px); }
.cm-fraga:hover { transform: rotate(0) translateY(-4px); }
.cm-fraga::before { counter-increment: fraga; content: counter(fraga); font: 700 .9rem/1 var(--wp--preset--font-family--rubrik); opacity: .55; margin-bottom: auto; }
.cm-fraga h3 { font-size: 1.45rem; margin: 18px 0 8px !important; }
.cm-fraga h3 a { text-decoration: none; }
.cm-fraga h3 a::after { content: ""; position: absolute; inset: 0; }
.cm-fraga p { font-size: .95rem; line-height: 1.45; margin: 0; }
.cm-f1 { --f: var(--cm-turkos); color: var(--cm-vit); }
.cm-f3 { --f: var(--cm-apelsin); }
.cm-f4 { --f: #f3b46a; }
.cm-f5 { --f: var(--cm-korall); color: var(--cm-vit); }
@media (max-width: 960px) { .cm-fragor { grid-template-columns: repeat(2, 1fr); } .cm-fraga { min-height: 180px; } .cm-fraga:last-child { grid-column: span 2; } }
@media (max-width: 520px) { .cm-fragor { grid-template-columns: 1fr; } .cm-fraga:last-child { grid-column: auto; } .cm-fraga { transform: none !important; } }

/* Delad skärm (kolumner) */
.cm-delad { gap: clamp(32px, 6vw, 88px) !important; }
/* Beskurna bilder 4:3; "cm-fri" behåller bildens egna proportioner (ingen aspect-ratio här, då tappar lazy-bilder höjden) */
.cm-delad .wp-block-image:not(.cm-fri) img { border-radius: 18px; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cm-fri img { border-radius: 0; }
/* Vit platta bakom frilagda bilder (sätts som extra CSS-klass på bildblocket). Rund variant: vit cirkel bakom, bilden klipps inte. */
.cm-platta img { background: var(--cm-vit); border-radius: 18px !important; padding: clamp(16px, 3vw, 32px); box-shadow: 0 10px 28px rgba(30,36,34,.08); }
.cm-platta-rund img { background: radial-gradient(circle closest-side, var(--cm-vit) 98%, transparent 100%); }
.cm-delad figure { margin: 0; }
.cm-delad h3 { margin-top: 36px !important; }

/* Lista med prickar */
.cm-lista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.cm-lista li { padding-left: 34px; position: relative; }
.cm-lista li::before { content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 18px; border-radius: 50%; background: var(--cm-sol); box-shadow: inset 0 0 0 4px var(--cm-vit); outline: 2px solid var(--cm-sol); }

/* Tre kort */
.cm-tre { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px !important; }
.cm-kort { background: var(--cm-vit); border: 1px solid var(--cm-linje); border-radius: 18px; padding: 32px; margin: 0 !important; }
.cm-mork .cm-kort { background: #2a312e; border-color: #3a423f; }
.cm-nr { font: 700 .85rem/1 var(--wp--preset--font-family--rubrik); color: var(--cm-turkos); letter-spacing: .1em; }
.cm-mork .cm-nr { color: var(--cm-sol); }
@media (max-width: 860px) { .cm-tre { grid-template-columns: 1fr; } }

/* Verktyg */
/* Verktygskort: sex kolumner, varje kort tar två. Är de fem blir de två första breda (3+3 över 2+2+2). */
.cm-verktyg { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 48px !important; }
.cm-verktyg > .cm-verktyg-kort { grid-column: span 2; }
.cm-verktyg > .cm-verktyg-kort:nth-child(1):nth-last-child(5), .cm-verktyg > .cm-verktyg-kort:nth-child(2):nth-last-child(4),
.cm-verktyg > .cm-verktyg-kort:nth-child(1):nth-last-child(4), .cm-verktyg > .cm-verktyg-kort:nth-child(2):nth-last-child(3),
.cm-verktyg > .cm-verktyg-kort:nth-child(3):nth-last-child(2), .cm-verktyg > .cm-verktyg-kort:nth-child(4):nth-last-child(1) { grid-column: span 3; }
.cm-verktyg-kort { background: var(--cm-vit); border-radius: 18px; overflow: hidden; border: 1px solid var(--cm-linje); margin: 0 !important; padding: 0 0 30px; }
.cm-verktyg-kort figure { margin: 0 0 26px; background: var(--cm-papper-2); height: 280px; display: grid; place-items: center; padding: 24px; }
@media (max-width: 600px) { .cm-verktyg-kort figure { height: 220px; } }
.cm-verktyg-kort figure img { max-height: 232px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 600px) { .cm-verktyg-kort figure img { max-height: 172px; } }
.cm-verktyg-kort > :not(figure) { padding-inline: 28px; }
.cm-verktyg-kort p { font-size: .97rem; color: var(--cm-mjuk); margin: 0; }
@media (max-width: 960px) { .cm-verktyg { grid-template-columns: repeat(2, 1fr); } .cm-verktyg > .cm-verktyg-kort { grid-column: span 1 !important; } .cm-verktyg > .cm-verktyg-kort:last-child:nth-child(odd) { grid-column: span 2 !important; } }
@media (max-width: 600px) { .cm-verktyg { grid-template-columns: 1fr; } .cm-verktyg > .cm-verktyg-kort:last-child:nth-child(odd) { grid-column: span 1 !important; } }

/* Film */
.cm-film { border-radius: 20px; overflow: hidden; background: #000; margin-top: 40px !important; }
.cm-film video { width: 100%; display: block; aspect-ratio: 16/9; }

/* Citat */
.cm-citat { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px !important; }
.cm-citat .wp-block-quote { margin: 0 !important; background: var(--cm-sol); padding: 32px 30px; border: 0; border-radius: 4px 4px 18px 4px; font-weight: 500; font-size: 1.12rem; line-height: 1.5; }
.cm-citat .wp-block-quote:nth-child(2) { background: #d6ebe8; }
.cm-citat .wp-block-quote:nth-child(3) { background: #f7d3c0; }
.cm-citat cite { display: block; margin-top: 18px; font: 700 .9rem var(--wp--preset--font-family--rubrik); font-style: normal; }
@media (max-width: 860px) { .cm-citat { grid-template-columns: 1fr; } }

/* Stort citat */
.cm-stort { font: 600 var(--wp--preset--font-size--stor)/1.2 var(--wp--preset--font-family--rubrik); letter-spacing: -0.015em; max-width: 26em; margin: 0; }
.cm-stort-kalla { margin-top: 22px !important; opacity: .8; }

/* Avslut */
.cm-avslut { text-align: center; }
.cm-avslut .cm-ingress { margin-inline: auto; }
.cm-avslut .wp-block-buttons { justify-content: center; }

/* Processteg */
.cm-steg { display: grid !important; grid-template-columns: 120px 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: 56px 0; border-top: 1px solid var(--cm-linje); align-items: start; margin: 0 !important; }
.cm-steg > * { margin: 0 !important; }
.cm-siffra { font: 700 5rem/0.9 var(--wp--preset--font-family--rubrik); color: var(--s, var(--cm-turkos)); }
.cm-steg .wp-block-image:not(.cm-fri) img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.cm-s2 { --s: #c99a14; } .cm-s3 { --s: var(--cm-apelsin); } .cm-s4 { --s: #d98a3a; } .cm-s5 { --s: var(--cm-korall); }
@media (max-width: 860px) { .cm-steg { grid-template-columns: 1fr; gap: 16px; } .cm-siffra { font-size: 3.5rem; } }

/* Logovägg */
.cm-logovagg { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--cm-linje); border: 1px solid var(--cm-linje); border-radius: 18px; overflow: hidden; margin-top: 48px !important; }
.cm-logovagg figure { background: var(--cm-vit); aspect-ratio: 1; display: grid; place-items: center; padding: 18px; margin: 0 !important; }
.cm-logovagg img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 860px) { .cm-logovagg { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .cm-logovagg { grid-template-columns: repeat(3, 1fr); } }

/* Case */
.cm-case { display: grid !important; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); padding: 56px 0; border-top: 1px solid var(--cm-linje); align-items: start; margin: 0 !important; }
.cm-case > * { margin: 0 !important; }
.cm-case .wp-block-image img { border-radius: 14px; border: 1px solid var(--cm-linje); max-height: 440px; width: auto; }
.cm-case h4 { color: var(--cm-turkos); margin: 18px 0 4px !important; }
.cm-ref { font-weight: 600; margin-top: 12px !important; }
@media (max-width: 860px) { .cm-case { grid-template-columns: 1fr; } }

/* Pris */
.cm-pris { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; margin-top: 24px !important; }
.cm-pris > * { margin: 0 !important; }
.cm-pris .cm-tal { font: 700 3rem/1 var(--wp--preset--font-family--rubrik); }
.cm-pris p:not(.cm-tal) { color: var(--cm-mjuk); }

/* Sidfot */
.cm-sidfot { background: var(--cm-svart); color: #c9c4b8; padding-top: 72px; padding-bottom: 40px; font-size: .95rem; margin-top: 0; }
.cm-sidfot .cm-logga img { height: 30px; width: auto; filter: brightness(0) invert(.92); }
.cm-sidfot h4 { color: var(--cm-papper); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.cm-sidfot a { text-decoration: none; }
.cm-sidfot a:hover { color: var(--cm-sol); }
.cm-sidfot .cm-lankar { list-style: none; padding: 0; display: grid; gap: 8px; }
.cm-sidfot .cm-rad { border-top: 1px solid #333b38; padding-top: 24px; margin-top: 16px !important; font-size: .85rem; }

/* Artiklar och case-inlägg */
.cm-artikel { max-width: 760px; margin-inline: auto; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.cm-artikel .wp-block-post-featured-image img { border-radius: 18px; max-height: 520px; width: 100%; object-fit: cover; }
.cm-artikel .wp-block-post-date { color: var(--cm-mjuk); font-size: .9rem; }
.cm-arkiv { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.cm-arkiv .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cm-arkiv .wp-block-post { background: var(--cm-vit); border: 1px solid var(--cm-linje); border-radius: 18px; padding: 28px; margin: 0; }
.cm-arkiv .wp-block-post-title a { text-decoration: none; }
@media (max-width: 860px) { .cm-arkiv .wp-block-post-template { grid-template-columns: 1fr; } }

/* Kossan (bild med inbränd text om ordet brand) */
.cm-ko-sektion { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }
.cm-ko img { width: 100%; border-radius: 18px; }