/**
 * Womni designtokens — speglar womni-stilguide.html och komponentbiblioteket.
 * Scopat till pluginets egna omslag så att inget läcker ut i temat.
 */

/* Typsnitt levereras med pluginet (egna familjenamn) så att de inte kan
   krocka med temats, blockeras av cookie-/GDPR-plugins eller saknas. */
@font-face {
	font-family: 'Womni Signika';
	src: url('../fonts/signika-700.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Womni Roboto';
	src: url('../fonts/roboto-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Womni Roboto';
	src: url('../fonts/roboto-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Womni Roboto';
	src: url('../fonts/roboto-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.wch-wrapper,
.wch-single {
	/* Palett (bastoner = steg 70 i stilguiden) */
	--w-purple:        #4c1f5e;
	--w-purple-90:     #2d1237;
	--w-purple-50:     #8336a2;
	--w-purple-10:     #f6eefa;
	--w-terracotta:    #c9855e;
	--w-terracotta-90: #824b2c;
	--w-terracotta-30: #e7c8b7;
	--w-lavender:      #f4eaff;
	--w-lavender-30:   #faf5ff;
	--w-sand:          #f4eee4;
	--w-sand-30:       #faf7f3;
	--w-ink:           #1b1420;
	--w-ink-body:      #4a3f52;
	--w-ink-soft:      #8a7c8f;
	--w-line:          #e6ded2;
	--w-white:         #fafafa;

	/* Typografi */
	--w-font-head: 'Womni Signika', 'Signika', 'Segoe UI', system-ui, sans-serif;
	--w-font-body: 'Womni Roboto', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

	/* 8-punktsgrid */
	--w-s1: 8px;
	--w-s2: 16px;
	--w-s3: 24px;
	--w-s4: 32px;
	--w-s5: 40px;
	--w-s6: 48px;
	--w-s8: 64px;
	--w-s10: 80px;

	/* Radier & skuggor enligt komponentbiblioteket */
	--w-r-sm: 14px;
	--w-r-md: 16px;
	--w-r-lg: 20px;
	--w-r-pill: 999px;
	--w-shadow-hover: 0 14px 34px rgba(76, 31, 94, 0.12);
	--w-shadow-btn:   0 10px 20px rgba(76, 31, 94, 0.22);
	--w-focus: 0 0 0 4px var(--w-lavender);
	--w-ease: 0.18s ease;

	font-family: var(--w-font-body);
	color: var(--w-ink);
	-webkit-font-smoothing: antialiased;
}

.wch-wrapper *,
.wch-single * {
	box-sizing: border-box;
}

/* ---------- Delade komponenter ---------- */

.wch-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	border-radius: var(--w-r-pill);
	padding: 12px 24px;
	font-family: var(--w-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--w-ease), box-shadow var(--w-ease), background var(--w-ease), color var(--w-ease);
}
.wch-btn:hover { transform: translateY(-2px); box-shadow: var(--w-shadow-btn); }
.wch-btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.wch-btn-primary { background: var(--w-purple); color: #fff; }
.wch-btn-outline { background: var(--w-white); color: var(--w-purple); border: 1.5px solid var(--w-purple); }
.wch-btn-soft    { background: var(--w-lavender); color: var(--w-purple); }
.wch-btn-arrow { transition: transform var(--w-ease); }
.wch-btn:hover .wch-btn-arrow,
a:hover .wch-btn-arrow { transform: translateX(4px); }

.wch-btn-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--w-lavender);
	color: var(--w-purple);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--w-ease), color var(--w-ease), transform var(--w-ease);
}
.wch-btn-icon:hover { background: var(--w-purple); color: #fff; transform: scale(1.06); }

.wch-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--w-r-pill);
	padding: 6px 14px;
	font-family: var(--w-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}
.wch-tag-soft    { background: var(--w-lavender); color: var(--w-purple); }
.wch-tag-active  { background: var(--w-terracotta); color: #fff; }
.wch-tag-outline { background: var(--w-white); border: 1.5px solid var(--w-line); color: var(--w-ink); }
.wch-tag-x {
	background: none;
	border: 1.5px dashed var(--w-ink-soft);
	color: var(--w-ink-soft);
	cursor: pointer;
	transition: border-color var(--w-ease), color var(--w-ease);
}
.wch-tag-x:hover { border-color: var(--w-terracotta); color: var(--w-terracotta-90); }

.wch-spinner {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 3px solid var(--w-lavender);
	border-top-color: var(--w-purple);
	animation: wch-spin 0.8s linear infinite;
}
@keyframes wch-spin { to { transform: rotate(360deg); } }

.wch-info-block {
	background: var(--w-lavender);
	border-left: 4px solid var(--w-purple);
	border-radius: var(--w-r-sm);
	padding: 18px 20px;
	color: var(--w-ink-body);
	line-height: 1.65;
}

/* Synligt tangentbordsfokus */
.wch-wrapper :focus-visible,
.wch-single :focus-visible {
	outline: 2px solid var(--w-purple);
	outline-offset: 2px;
	box-shadow: var(--w-focus);
}

@media (prefers-reduced-motion: reduce) {
	.wch-wrapper *,
	.wch-single * {
		transition: none !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.wch-wrapper .screen-reader-text,
.wch-single .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;
}

/* Löptext: skydda mot temats typsnittsregler på enskilda element. */
.wch-wrapper :is(p, li, a, span, time, label, input, select, option, button, td, th, blockquote, figcaption, cite),
.wch-single :is(p, li, a, span, time, label, input, select, option, button, td, th, blockquote, figcaption, cite) {
	font-family: var(--w-font-body);
}

/* Fri layout (Beaver Builder): innehållet ska inte ärva temats inläggsbredd eller marginaler. */
.wch-free-content {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}