/*
Theme Name:   Bygdeband
Theme URI:    https://bygdeband.se/
Description:  Barntema till GeneratePress för Bygdeband, guiden till Sveriges kyrkor, socknar, hembygdsgårdar och marknader. Linnepapper, faluröd och häradskartans färger. Det vävda bandet under sidhuvudet är sajtens signatur. Temat registrerar posttypen plats (län > kommun > socken > plats) med adressen /sverige/ och skriver ut vägskyltar, platskort, undersidor och strukturerad data automatiskt.
Author:       Redaktionen
Template:     generatepress
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  bygdeband
License:      GPL-2.0-or-later
*/

/* =========================================================
   KOMPONENTER FÖR INNEHÅLL (klistras in i Text-fliken)
   ---------------------------------------------------------
   .bb-ingress            Inledande stycke i större stil
   .bb-fakta              Faktaruta. <div class="bb-fakta"><h3>Sockenfakta</h3><dl><dt>Landskap</dt><dd>Gotland</dd>...</dl></div>
   .bb-tidslinje          <ol class="bb-tidslinje"><li><span class="bb-ar">1200-talet</span><strong>Rubrik</strong> Text</li></ol>
   .bb-kortlista/.bb-kort Arkivkort i rutnät. <div class="bb-kortlista"><a class="bb-kort" href=""><span class="bb-kort-typ">Kyrka</span><strong>Namn</strong><span>Kort text</span></a></div>
   .bb-marknad            Marknadskort med kalenderblad. <div class="bb-marknad"><div class="bb-datum"><b>29</b>nov</div><div><h3>Namn</h3><p>Plats, tider</p></div></div>
   .bb-jamfor             Kartjämförelse med reglage. Shortcode [bb_jamfor fore="URL" efter="URL" fore_text="1860-talet" efter_text="I dag"]
   .bb-kalla              Källhänvisning med kopieringsknapp. <p class="bb-kalla">Riksarkivet, Tofta kyrkoarkiv, husförhörslängd AI:1</p>
   .bb-tips               Tipsruta i ockra
   .bb-varning            Uppmärksamhetsruta i faluröd
   .bb-internlankar       Internlänksbox. <div class="bb-internlankar"><h3>Läs vidare</h3><ul><li><a href="">...</a></li></ul></div>
   .bb-band               Vävt band som avdelare. <hr class="bb-band">
   .bb-hero               Startsidans toppyta med höjdkurvor
   .bb-faq                <details class="bb-faq"><summary>Fråga</summary><p>Svar</p></details>
   ========================================================= */

/* ---------- Typsnitt (lokalt, inga anrop till Google) ---------- */
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* ---------- Färger och mått ---------- */
:root {
	--bb-papper: #f7f2e7;
	--bb-papper-2: #efe7d6;
	--bb-papper-3: #e4d8c0;
	--bb-vit: #fffdf8;
	--bb-black: #2a241d;
	--bb-black-2: #5c5246;
	--bb-linje: #d6c9ae;
	--bb-falu: #8e2f22;
	--bb-falu-mork: #6e2219;
	--bb-skog: #3e5b3a;
	--bb-ang: #7d8f4e;
	--bb-ockra: #c58b2b;
	--bb-sjo: #4b7288;
	--bb-skylt: #5d3b23;
	--bb-rubrik: "Fraunces", Georgia, "Times New Roman", serif;
	--bb-text: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
	--bb-radie: 6px;
	--bb-skugga: 0 1px 0 rgba(42, 36, 29, .06), 0 6px 18px -10px rgba(42, 36, 29, .35);
	/* Det vävda bandet: rutmönster som efterliknar bandvävning i rödfärg, ockra och skogsgrönt */
	--bb-bandet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Crect width='28' height='14' fill='%238e2f22'/%3E%3Cpath d='M0 7 7 0 14 7 7 14Z' fill='%23c58b2b'/%3E%3Cpath d='M14 7 21 0 28 7 21 14Z' fill='%233e5b3a'/%3E%3Cpath d='M4 7 7 4 10 7 7 10Z' fill='%23f7f2e7'/%3E%3Cpath d='M18 7 21 4 24 7 21 10Z' fill='%23f7f2e7'/%3E%3Crect y='0' width='28' height='1.5' fill='%236e2219'/%3E%3Crect y='12.5' width='28' height='1.5' fill='%236e2219'/%3E%3C/svg%3E");
	/* Höjdkurvor till startsidans toppyta */
	--bb-kurvor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke='%233e5b3a' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M-20 210C60 170 110 230 190 190S330 120 440 160'/%3E%3Cpath d='M-20 180C50 140 120 200 200 160S320 90 440 130'/%3E%3Cpath d='M-20 150C40 110 130 170 210 130S310 60 440 100'/%3E%3Cpath d='M-20 120C40 80 140 140 220 100S300 30 440 70'/%3E%3Cpath d='M120 80c30-26 80-24 96 2s-18 46-52 40-70-16-44-42Z'/%3E%3Cpath d='M140 82c18-14 48-12 56 2s-12 26-32 22-40-10-24-24Z'/%3E%3Cpath d='M-20 240C70 205 120 255 200 222S340 160 440 195'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Grund ---------- */
body {
	background-color: var(--bb-papper);
	color: var(--bb-black);
	font-family: var(--bb-text);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .main-title {
	font-family: var(--bb-rubrik);
	color: var(--bb-black);
	font-variation-settings: "SOFT" 50, "WONK" 0;
	letter-spacing: -.01em;
}
h1, .entry-title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 650; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 620; line-height: 1.2; margin-top: 2.2em; }
h3 { font-size: 1.3rem; font-weight: 620; line-height: 1.3; margin-top: 1.8em; }
h4 { font-size: 1.1rem; font-weight: 650; }
.entry-content h2::before {
	content: "";
	display: block;
	width: 56px;
	height: 7px;
	margin-bottom: .55em;
	background: var(--bb-bandet) 0 50% / auto 7px repeat-x;
	border-radius: 2px;
}
a { color: var(--bb-falu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--bb-falu-mork); text-decoration-thickness: 2px; }
::selection { background: rgba(197, 139, 43, .35); }
:focus-visible { outline: 3px solid var(--bb-ockra); outline-offset: 2px; }
strong, b { font-weight: 650; }
hr { border: 0; height: 1px; background: var(--bb-linje); margin: 2.5em 0; }
blockquote {
	border-left: 3px solid var(--bb-ockra);
	background: var(--bb-papper-2);
	padding: 1em 1.3em;
	font-family: var(--bb-rubrik);
	font-style: italic;
	font-size: 1.12em;
	margin: 1.8em 0;
}
blockquote p:last-child { margin-bottom: 0; }
img { border-radius: var(--bb-radie); }
figure.wp-caption, .wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
	font-size: .85em;
	color: var(--bb-black-2);
	font-style: italic;
	padding-top: .4em;
}

/* ---------- Sidhuvud ---------- */
.site-header {
	background: var(--bb-vit);
	position: relative;
	padding-bottom: 14px;
}
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 14px;
	background: var(--bb-bandet) 0 0 / 28px 14px repeat-x;
}
.inside-header { padding-top: 18px; padding-bottom: 18px; }
.main-title { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.main-title a { color: var(--bb-black); text-decoration: none; display: inline-flex; align-items: center; gap: .45em; }
.main-title a:hover { color: var(--bb-falu); }
.bb-emblem { width: 38px; height: 38px; flex: 0 0 38px; }
.site-description {
	font-family: var(--bb-text);
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bb-black-2);
	margin-top: .35em;
}
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a {
	font-family: var(--bb-text);
	font-weight: 600;
	font-size: 1rem;
	color: var(--bb-black);
	letter-spacing: .01em;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a { color: var(--bb-falu); background: transparent; }
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--bb-falu);
	background: transparent;
	box-shadow: inset 0 -3px 0 var(--bb-falu);
}
.main-navigation ul ul { background: var(--bb-vit); box-shadow: var(--bb-skugga); border-radius: 0 0 var(--bb-radie) var(--bb-radie); }
.main-navigation .main-nav ul ul li a { font-weight: 500; font-size: .95rem; }
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: var(--bb-black); background: transparent; }

/* ---------- Innehållsytor ---------- */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
	background: var(--bb-vit);
	border-radius: var(--bb-radie);
	box-shadow: var(--bb-skugga);
}
.separate-containers .site-main { margin-top: 28px; margin-bottom: 28px; }
.entry-content { font-size: 1.04em; }
.entry-content > p:first-of-type { margin-top: 0; }
.entry-meta, .entry-meta a { color: var(--bb-black-2); font-size: .88rem; }
.entry-content ul, .entry-content ol { margin-left: 1.3em; }
.entry-content li { margin-bottom: .35em; }
.entry-content ul li::marker { color: var(--bb-falu); }
.entry-content ol li::marker { color: var(--bb-falu); font-weight: 700; font-family: var(--bb-rubrik); }

.bb-ingress, .entry-content > .bb-ingress {
	font-size: 1.24em;
	line-height: 1.55;
	color: var(--bb-black);
	font-weight: 400;
	margin-bottom: 1.4em;
}

/* ---------- Tabeller i husförhörsstil ---------- */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: .95em;
	background: var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	overflow: hidden;
	margin: 1.6em 0;
}
.entry-content th {
	font-family: var(--bb-text);
	font-weight: 700;
	font-size: .78em;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	background: var(--bb-papper-2);
	color: var(--bb-black);
	border-bottom: 2px solid var(--bb-falu);
	padding: .7em .9em;
}
.entry-content td {
	padding: .6em .9em;
	border: 0;
	border-bottom: 1px solid var(--bb-papper-3);
	vertical-align: top;
}
.entry-content tbody tr:nth-child(even) td { background: #fbf7ee; }
.entry-content tbody tr:last-child td { border-bottom: 0; }
.bb-tabellwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Vägskyltar (brödsmulor) ---------- */
.bb-skyltar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 1.2em;
	padding: 0;
	list-style: none;
	font-size: .82rem;
}
.bb-skyltar li { margin: 0; display: flex; align-items: center; gap: 6px; }
.bb-skyltar li + li::before {
	content: "";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid var(--bb-skylt);
	opacity: .55;
}
.bb-skyltar a, .bb-skyltar span {
	display: inline-block;
	background: var(--bb-skylt);
	color: #fff;
	font-weight: 650;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 3px 9px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1.5px var(--bb-skylt), inset 0 0 0 3px #fff;
	line-height: 1.5;
}
.bb-skyltar a:hover { background: var(--bb-falu); box-shadow: inset 0 0 0 1.5px var(--bb-falu), inset 0 0 0 3px #fff; color: #fff; }
.bb-skyltar li:last-child span { background: transparent; color: var(--bb-black-2); box-shadow: none; padding-left: 2px; font-weight: 600; }

/* ---------- Platskort under rubriken ---------- */
.bb-platskort {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: .9em 0 1.6em;
	font-size: .85rem;
}
.bb-platskort span, .bb-platskort a {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: 3px 10px;
	border: 1px solid var(--bb-linje);
	border-radius: 999px;
	background: var(--bb-papper);
	color: var(--bb-black);
	text-decoration: none;
	font-weight: 600;
}
.bb-platskort .bb-typ { background: var(--bb-falu); border-color: var(--bb-falu); color: #fff; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
.bb-platskort a:hover { border-color: var(--bb-falu); color: var(--bb-falu); }
.bb-platskort svg { width: 14px; height: 14px; }

/* ---------- Faktaruta ---------- */
.bb-fakta {
	background: var(--bb-papper);
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	padding: 0 1.2em 1em;
	margin: 1.8em 0;
	position: relative;
	overflow: hidden;
}
.bb-fakta > h3, .bb-fakta > h4, .bb-fakta > .bb-fakta-rubrik {
	margin: 0 -1.2em 1em;
	padding: .55em 1.2em .5em;
	background: var(--bb-skog);
	color: #fff;
	font-size: .82rem;
	font-family: var(--bb-text);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bb-fakta dl { margin: 0; display: grid; grid-template-columns: minmax(110px, 38%) 1fr; }
.bb-fakta dt, .bb-fakta dd {
	margin: 0;
	padding: .45em 0;
	border-bottom: 1px dashed var(--bb-linje);
}
.bb-fakta dt { font-weight: 650; color: var(--bb-black-2); font-size: .92em; padding-right: 1em; }
.bb-fakta dd { font-size: .98em; }
.bb-fakta dt:nth-last-of-type(1), .bb-fakta dd:last-of-type { border-bottom: 0; }
@media (min-width: 1000px) {
	.bb-fakta.bb-hoger { float: right; width: 340px; margin: .3em 0 1.2em 1.8em; }
}

/* ---------- Tidslinje ---------- */
.bb-tidslinje, .entry-content .bb-tidslinje {
	list-style: none;
	margin: 1.8em 0;
	padding: 0 0 0 1.9em;
	position: relative;
}
.bb-tidslinje::before {
	content: "";
	position: absolute;
	left: 7px;
	top: .4em;
	bottom: .4em;
	width: 3px;
	background: var(--bb-papper-3);
	border-radius: 2px;
}
.bb-tidslinje li { position: relative; margin: 0 0 1.3em; padding: 0; }
.bb-tidslinje li::before {
	content: "";
	position: absolute;
	left: -1.9em;
	top: .35em;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--bb-vit);
	border: 3px solid var(--bb-falu);
	box-sizing: border-box;
}
.bb-tidslinje li::marker { content: ""; }
.bb-tidslinje .bb-ar {
	display: inline-block;
	font-family: var(--bb-rubrik);
	font-weight: 700;
	color: var(--bb-falu);
	font-size: 1.05em;
	margin-right: .5em;
}
.bb-tidslinje strong { display: block; font-size: 1.02em; }

/* ---------- Arkivkort ---------- */
.bb-kortlista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 1.4em 0 2em;
}
.bb-kort {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .25em;
	padding: 1.3em 1.1em 1em 1.1em;
	background:
		linear-gradient(var(--bb-falu), var(--bb-falu)) 0 2.35em / 100% 1px no-repeat,
		repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(75, 114, 136, .16) 27px, rgba(75, 114, 136, .16) 28px) 0 2.4em / 100% calc(100% - 2.4em) no-repeat,
		var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: 4px;
	box-shadow: var(--bb-skugga);
	color: var(--bb-black);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
	min-height: 140px;
}
.bb-kort::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bb-papper-3);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
a.bb-kort:hover, a.bb-kort:focus { transform: translateY(-2px) rotate(-.3deg); box-shadow: 0 10px 24px -12px rgba(42, 36, 29, .5); color: var(--bb-black); }
.bb-kort-typ {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bb-falu);
	margin-bottom: .55em;
	line-height: 1;
}
.bb-kort strong { font-family: var(--bb-rubrik); font-size: 1.15rem; line-height: 1.25; font-weight: 650; }
.bb-kort span:not(.bb-kort-typ) { font-size: .9rem; color: var(--bb-black-2); line-height: 28px; }
.bb-kort img { width: calc(100% + 2.2em); max-width: none; margin: -1.3em -1.1em .8em; border-radius: 4px 4px 0 0; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Marknadskort med kalenderblad ---------- */
.bb-marknad {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 1.1em;
	align-items: start;
	padding: 1em;
	margin: 1.1em 0;
	background: var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	box-shadow: var(--bb-skugga);
}
.bb-marknad h3, .bb-marknad h4 { margin: 0 0 .25em; font-size: 1.18rem; }
.bb-marknad p { margin: 0 0 .35em; font-size: .95rem; }
.bb-marknad p:last-child { margin-bottom: 0; }
.bb-datum {
	text-align: center;
	background: var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: 6px;
	overflow: hidden;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--bb-black-2);
	padding-bottom: .35em;
	line-height: 1.2;
}
.bb-datum b {
	display: block;
	background: var(--bb-falu);
	color: #fff;
	font-family: var(--bb-rubrik);
	font-size: 2rem;
	letter-spacing: 0;
	padding: .2em 0 .1em;
	margin-bottom: .3em;
	text-transform: none;
}
.bb-datum b + i { display: block; font-style: normal; }
.bb-marknad .bb-etiketter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5em; }
.bb-etiketter span { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bb-papper-2); color: var(--bb-skog); letter-spacing: .03em; }

/* ---------- Kartjämförelse ---------- */
.bb-jamfor {
	--pos: 50%;
	position: relative;
	margin: 1.8em 0;
	border-radius: var(--bb-radie);
	overflow: hidden;
	box-shadow: var(--bb-skugga);
	background: var(--bb-papper-2);
	user-select: none;
	touch-action: pan-y;
}
.bb-jamfor img { display: block; width: 100%; height: auto; border-radius: 0; margin: 0; }
.bb-jamfor .bb-jamfor-fore { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.bb-jamfor .bb-jamfor-fore img { width: 100%; height: 100%; object-fit: cover; }
.bb-jamfor .bb-jamfor-linje {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 3px;
	margin-left: -1.5px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
	pointer-events: none;
}
.bb-jamfor .bb-jamfor-linje::after {
	content: "\2194";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border-radius: 50%;
	background: var(--bb-falu);
	color: #fff;
	font-size: 20px;
	line-height: 38px;
	text-align: center;
	box-shadow: 0 0 0 3px #fff;
}
.bb-jamfor input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.bb-jamfor .bb-jamfor-etikett {
	position: absolute;
	top: 10px;
	padding: 2px 9px;
	background: rgba(42, 36, 29, .78);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	border-radius: 4px;
	pointer-events: none;
}
.bb-jamfor .bb-jamfor-etikett.vanster { left: 10px; }
.bb-jamfor .bb-jamfor-etikett.hoger { right: 10px; }
.bb-jamfor + .bb-jamfor-text { font-size: .85em; color: var(--bb-black-2); margin-top: -1.1em; font-style: italic; }

/* ---------- Källhänvisning ---------- */
.bb-kalla {
	position: relative;
	font-size: .9rem;
	padding: .7em 1em .7em 1em;
	padding-right: 6.5em;
	background: var(--bb-papper);
	border-left: 3px solid var(--bb-sjo);
	border-radius: 0 var(--bb-radie) var(--bb-radie) 0;
	color: var(--bb-black);
	font-variant-numeric: tabular-nums;
}
.bb-kalla::before {
	content: "Källa";
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bb-sjo);
}
.bb-kalla .bb-kopiera {
	position: absolute;
	right: .6em;
	top: 50%;
	transform: translateY(-50%);
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid var(--bb-sjo);
	background: var(--bb-vit);
	color: var(--bb-sjo);
	cursor: pointer;
	line-height: 1.3;
}
.bb-kalla .bb-kopiera:hover { background: var(--bb-sjo); color: #fff; }

/* ---------- Tips och varning ---------- */
.bb-tips, .bb-varning {
	padding: 1em 1.2em 1em 3.2em;
	border-radius: var(--bb-radie);
	margin: 1.6em 0;
	position: relative;
	font-size: .97em;
}
.bb-tips { background: #f8edd7; border: 1px solid #e8cf9e; }
.bb-varning { background: #f6e3de; border: 1px solid #e3b7ab; }
.bb-tips::before, .bb-varning::before {
	position: absolute;
	left: 1em;
	top: .95em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	text-align: center;
	line-height: 1.5em;
	font-size: .95em;
}
.bb-tips::before { content: "i"; background: var(--bb-ockra); font-family: var(--bb-rubrik); font-style: italic; }
.bb-varning::before { content: "!"; background: var(--bb-falu); }
.bb-tips > :last-child, .bb-varning > :last-child { margin-bottom: 0; }
.bb-tips > :first-child, .bb-varning > :first-child { margin-top: 0; }

/* ---------- Internlänksbox ---------- */
.bb-internlankar {
	margin: 2.4em 0 1em;
	padding: 1.1em 1.2em 1.2em;
	background: var(--bb-papper);
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	position: relative;
}
.bb-internlankar::before {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	top: -1px;
	height: 7px;
	background: var(--bb-bandet) 0 50% / auto 7px repeat-x;
	border-radius: var(--bb-radie) var(--bb-radie) 0 0;
}
.bb-internlankar h2, .bb-internlankar h3, .bb-internlankar .bb-internlankar-rubrik {
	margin: .3em 0 .7em;
	font-size: 1.05rem;
	font-family: var(--bb-text);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bb-black-2);
}
.bb-internlankar h2::before { display: none; }
.bb-internlankar ul, .entry-content .bb-internlankar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-internlankar li { margin: 0; }
.bb-internlankar a {
	display: inline-block;
	padding: 5px 12px;
	background: var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--bb-black);
}
.bb-internlankar a:hover { border-color: var(--bb-falu); color: var(--bb-falu); }

/* ---------- Vävt band som avdelare ---------- */
hr.bb-band, .bb-band {
	height: 14px;
	border: 0;
	background: var(--bb-bandet) 0 0 / 28px 14px repeat-x;
	margin: 2.6em 0;
	border-radius: 2px;
}

/* ---------- FAQ ---------- */
.bb-faq {
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	background: var(--bb-vit);
	margin: .6em 0;
	overflow: hidden;
}
.bb-faq summary {
	cursor: pointer;
	list-style: none;
	padding: .8em 2.6em .8em 1em;
	font-family: var(--bb-rubrik);
	font-weight: 620;
	font-size: 1.05em;
	position: relative;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after {
	content: "+";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--bb-text);
	font-size: 1.4em;
	color: var(--bb-falu);
	font-weight: 400;
}
.bb-faq[open] summary::after { content: "\2212"; }
.bb-faq[open] summary { border-bottom: 1px dashed var(--bb-linje); }
.bb-faq > :not(summary) { padding: 0 1em; }
.bb-faq > p:first-of-type { padding-top: .8em; }

/* ---------- Startsidans toppyta ---------- */
.bb-hero {
	position: relative;
	padding: clamp(2em, 6vw, 4em) clamp(1.2em, 4vw, 3em);
	margin: 0 0 2em;
	background: var(--bb-kurvor) 0 0 / 420px 260px, linear-gradient(160deg, #f3ead6, var(--bb-papper));
	border-radius: var(--bb-radie);
	border: 1px solid var(--bb-linje);
	overflow: hidden;
}
.bb-hero h1, .bb-hero .bb-hero-rubrik {
	font-size: clamp(2.2rem, 5.5vw, 3.6rem);
	line-height: 1.05;
	margin: 0 0 .35em;
	max-width: 16ch;
	font-family: var(--bb-rubrik);
	font-weight: 680;
}
.bb-hero h1 em, .bb-hero .bb-hero-rubrik em { color: var(--bb-falu); font-style: italic; font-weight: 500; }
.bb-hero p { font-size: 1.15em; max-width: 46ch; margin-bottom: 1.2em; }
.bb-hero .bb-sok { display: flex; max-width: 520px; box-shadow: var(--bb-skugga); border-radius: var(--bb-radie); }
.bb-sok input[type="search"] {
	flex: 1;
	border: 1px solid var(--bb-linje);
	border-right: 0;
	border-radius: var(--bb-radie) 0 0 var(--bb-radie);
	padding: .8em 1em;
	font-size: 1.05rem;
	background: var(--bb-vit);
	color: var(--bb-black);
}
.bb-sok button {
	border: 0;
	border-radius: 0 var(--bb-radie) var(--bb-radie) 0;
	background: var(--bb-falu);
	color: #fff;
	font-weight: 700;
	padding: 0 1.3em;
	font-size: 1rem;
	cursor: pointer;
}
.bb-sok button:hover { background: var(--bb-falu-mork); }
.bb-genvagar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.3em; }
.bb-genvagar a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em .95em;
	border-radius: 4px;
	background: var(--bb-skylt);
	color: #fff;
	font-weight: 650;
	text-decoration: none;
	box-shadow: inset 0 0 0 1.5px var(--bb-skylt), inset 0 0 0 3px #fff;
}
.bb-genvagar a:hover { background: var(--bb-falu); box-shadow: inset 0 0 0 1.5px var(--bb-falu), inset 0 0 0 3px #fff; color: #fff; }

/* ---------- Knappar och formulär ---------- */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link {
	background: var(--bb-falu);
	color: #fff;
	border-radius: var(--bb-radie);
	font-weight: 700;
	font-family: var(--bb-text);
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover, a.wp-block-button__link:hover,
button:focus, html input[type="button"]:focus, input[type="submit"]:focus, a.button:focus { background: var(--bb-falu-mork); color: #fff; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
	background: var(--bb-vit);
	border: 1px solid var(--bb-linje);
	border-radius: var(--bb-radie);
	color: var(--bb-black);
}
input:focus, textarea:focus, select:focus { border-color: var(--bb-ockra); background: #fff; }

/* ---------- Sidofält och widgetar ---------- */
.sidebar .widget {
	background: var(--bb-vit);
	border-radius: var(--bb-radie);
	box-shadow: var(--bb-skugga);
	font-size: .95rem;
}
.widget-title {
	font-size: .8rem !important;
	font-family: var(--bb-text) !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bb-black-2);
	padding-bottom: .55em;
	border-bottom: 2px solid var(--bb-falu);
}
.sidebar .widget ul li { border-bottom: 1px dashed var(--bb-papper-3); padding: .35em 0; margin: 0; }
.sidebar .widget ul li:last-child { border-bottom: 0; }
.sidebar .widget a { color: var(--bb-black); text-decoration: none; }
.sidebar .widget a:hover { color: var(--bb-falu); }

/* ---------- Arkiv och listningar ---------- */
.page-header h1, .page-title { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.archive .entry-summary, .blog .entry-summary, .search .entry-summary { font-size: .98rem; color: var(--bb-black-2); }
.post-image img { border-radius: var(--bb-radie); }
.paging-navigation .page-numbers.current { color: var(--bb-falu); font-weight: 700; }
.read-more, a.read-more { font-weight: 700; }

/* ---------- Sidfot ---------- */
.site-footer { position: relative; }
.site-footer::before {
	content: "";
	display: block;
	height: 14px;
	background: var(--bb-bandet) 0 0 / 28px 14px repeat-x;
}
.site-info, .footer-widgets {
	background: var(--bb-black);
	color: #e8dfcc;
}
.site-info { font-size: .85rem; }
.site-info a, .footer-widgets a { color: #f1e5c7; }
.site-info a:hover, .footer-widgets a:hover { color: #fff; }
.footer-widgets .widget-title { color: #f1e5c7; border-bottom-color: var(--bb-ockra); }
.bb-sidfot-not { display: block; opacity: .75; margin-top: .3em; font-size: .92em; }

/* ---------- Automatiska block på platssidor ---------- */
.bb-auto { margin-top: 2.6em; }
.bb-auto > h2 { margin-top: 0; }
.bb-auto > h2::before { display: block; }

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
	body { font-size: 17px; }
	.inside-header { padding-top: 12px; padding-bottom: 12px; }
	.main-title { font-size: 1.55rem; }
	.bb-emblem { width: 32px; height: 32px; flex-basis: 32px; }
	.bb-marknad { grid-template-columns: 64px 1fr; gap: .8em; }
	.bb-datum b { font-size: 1.6rem; }
	.bb-fakta dl { grid-template-columns: 1fr; }
	.bb-fakta dt { border-bottom: 0; padding-bottom: 0; }
	.bb-kalla { padding-right: 1em; padding-bottom: 2.8em; }
	.bb-kalla .bb-kopiera { top: auto; bottom: .6em; transform: none; }
	.bb-hero .bb-sok { flex-direction: column; box-shadow: none; gap: 8px; }
	.bb-sok input[type="search"] { border-right: 1px solid var(--bb-linje); border-radius: var(--bb-radie); }
	.bb-sok button { border-radius: var(--bb-radie); padding: .8em 1em; }
}

/* ---------- Utskrift (släktforskare skriver ut) ---------- */
@media print {
	.site-header, .site-footer, .sidebar, .bb-internlankar, .bb-kopiera, .main-navigation, .comments-area { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.inside-article { box-shadow: none !important; }
	a { color: #000; }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}