/*
 * Årets julklapp: gemensamma stilar för årsartiklarna.
 * Flyttade från inbäddade <style>-block i inläggen (.aj-history och .aj-extra).
 * Laddas av pluginet Årets julklapp pelarsida på alla inlägg och sidor.
 */

/* Tidsbilden för varje år */
.aj-history {
	margin: 2rem 0;
	padding: 0;
	line-height: 1.7;
}

.aj-history h2 {
	margin-top: 1.5rem;
}

.aj-history h3 {
	margin-top: 1.5rem;
}

.aj-history-source {
	font-size: .9em;
}

.aj-history-detail {
	padding: 1rem 1.2rem;
	margin: 1.5rem 0;
	border: 1px solid #b8c1ad;
	border-radius: 10px;
	background: #f5f0e4;
	color: #203f34;
}

.aj-history-detail summary {
	font-weight: 700;
	cursor: pointer;
}

.aj-history-detail summary:focus-visible {
	outline: 3px solid #985622;
	outline-offset: 4px;
}

.aj-history-detail p {
	margin-bottom: 0;
}

/* Fördjupningsrutan med verktyg och frågor */
.aj-extra {
	box-sizing: border-box;
	margin: 32px 0;
	padding: clamp(18px, 4vw, 30px);
	border: 1px solid #b8c1ad;
	border-radius: 16px;
	background: #f5f0e4;
	color: #203f34;
	max-width: 100%;
	clear: both;
}

.aj-extra * {
	box-sizing: border-box;
}

.aj-extra h2 {
	margin: 0 0 14px;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.2;
}

.aj-extra p {
	line-height: 1.65;
}

.aj-extra details {
	margin: 12px 0;
	padding: 14px 16px;
	background: #fffdf7;
	border: 1px solid #c8c3b4;
	border-radius: 9px;
}

.aj-extra summary {
	cursor: pointer;
	font-weight: 700;
	line-height: 1.5;
}

.aj-extra summary:focus-visible,
.aj-extra input:focus-visible {
	outline: 3px solid #985622;
	outline-offset: 3px;
}

.aj-extra label {
	display: block;
	margin: 14px 0;
	font-weight: 600;
}

.aj-extra input {
	display: block;
	width: 100%;
	max-width: 260px;
	padding: 10px;
	border: 1px solid #637367;
	border-radius: 6px;
	background: white;
	color: #203f34;
	font: inherit;
}

.aj-extra output {
	display: block;
	padding: 18px;
	margin: 18px 0;
	background: #203f34;
	color: #fffdf7;
	border-radius: 9px;
	font-size: 22px;
	font-weight: 700;
}

.aj-extra .aj-note {
	font-size: 14px;
}

.aj-extra svg {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto 20px;
}