/* Sidhuvud, meny, sidfot och mallarnas omslag. Bara på sajten, inte i editorn. */

/* Sidhuvudet skapar ett eget lager så att den utfällda mobilmenyn hamnar ovanför innehållet, även positionerade block som hero. */
.loft-sidhuvud {
	position: relative;
	z-index: 100;
	padding-block: var(--loft-avstand-s);
	border-bottom: 1px solid var(--loft-farg-kant);
	background: var(--loft-farg-bakgrund);
}
.loft-sidhuvud__inre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--loft-avstand-s) var(--loft-avstand-m);
}
/* min-width: 0 låter ett långt webbplatsnamn brytas i stället för att tvinga fram sidledsscroll. */
.loft-sidhuvud__logga { min-width: 0; font-weight: var(--loft-vikt-fet); text-decoration: none; color: inherit; }
.loft-sidhuvud .custom-logo-link { display: block; }
.loft-sidhuvud .custom-logo { width: auto; max-height: var(--loft-logga-hojd); }

.loft-meny { min-width: 0; }
.loft-meny ul { display: flex; flex-wrap: wrap; gap: var(--loft-avstand-xs) var(--loft-avstand-m); list-style: none; margin: 0; padding: 0; }
.loft-meny a { color: inherit; text-decoration: none; }
.loft-meny a:hover, .loft-meny .current-menu-item > a { color: var(--loft-farg-accent); }

.loft-menyknapp { display: none; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

/*
 * Mobilmenyn. Brytpunkten är loft_menybrytpunkt() (standard 48rem, filtret loft/menybrytpunkt).
 * Skriptet i <head> sätter klassen ar-mobil på <html> under brytpunkten och har-js före första
 * målningen, så att menyn är hopfälld från början och innehållet inte flyttas när main.js startar.
 * Har main.js inte startat när sidan har laddats klart tas har-js bort igen och menyn visas som
 * vanlig lista (inc/assets.php). ar-meny-aktiv sätts av main.js när menyfunktionen är igång, även
 * om skriptet kommer sent. Utan någon av klasserna (JavaScript avstängt eller blockerat) visas
 * menyn som vanlig lista.
 */
.ar-mobil:is(.har-js, .ar-meny-aktiv) .loft-menyknapp { display: block; }
.ar-mobil:is(.har-js, .ar-meny-aktiv) .loft-meny { display: none; }
.ar-mobil:is(.har-js, .ar-meny-aktiv) .loft-meny.ar-oppen {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--loft-farg-bakgrund);
	border-bottom: 1px solid var(--loft-farg-kant);
	padding: var(--loft-avstand-m) var(--loft-kantmarginal);
}
.ar-mobil .loft-meny ul { flex-direction: column; gap: var(--loft-avstand-s); }
/* Utan JavaScript finns ingen ar-mobil. Menyn är då en lista som radbryts, och på smala skärmar en kolumn. */
@media (max-width: 48rem) {
	html:not(.har-js, .ar-meny-aktiv) .loft-meny ul { flex-direction: column; gap: var(--loft-avstand-s); }
}

/*
 * Undermenyer (filtret loft/meny_djup). Utan JavaScript visas de som inbäddade listor och knapparna
 * döljs. Med JavaScript öppnas de med knappen efter länken: som utfällda rutor på bred skärm och i
 * flödet i mobilmenyn. De är hopfällda redan när har-js sätts i <head>, som mobilmenyn, så att
 * inget flyttas medan main.js laddas.
 */
.loft-meny li { position: relative; }
.loft-meny__undermenyknapp {
	inline-size: 2rem;
	block-size: 2rem;
	margin-inline-start: 0.125rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	vertical-align: middle;
	cursor: pointer;
}
html:not(.har-js, .ar-meny-aktiv) .loft-meny__undermenyknapp { display: none; }
.loft-meny__undermenyknapp::before {
	content: "";
	display: block;
	inline-size: 0.45em;
	block-size: 0.45em;
	margin: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--loft-overgang);
}
.loft-meny__undermenyknapp[aria-expanded="true"]::before { transform: translateY(25%) rotate(-135deg); }
.loft-meny .sub-menu { flex-direction: column; gap: var(--loft-avstand-xs); }
:is(.har-js, .ar-meny-aktiv) .loft-meny .sub-menu { display: none; }
:is(.har-js, .ar-meny-aktiv) .loft-meny .ar-oppen > .sub-menu { display: flex; }
html:not(.ar-mobil).ar-meny-aktiv .loft-meny > ul > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-inline-size: 14rem;
	padding: var(--loft-avstand-s);
	border: 1px solid var(--loft-farg-kant);
	background: var(--loft-farg-bakgrund);
}
.loft-meny .sub-menu .sub-menu, .ar-mobil .loft-meny .sub-menu { padding-inline-start: var(--loft-avstand-s); }
.ar-mobil .loft-meny .sub-menu { margin-top: var(--loft-avstand-xs); }

/* Mallar utan block: inlägg, arkiv, sökresultat, 404 */
.loft-mall { padding-block: var(--loft-sektion); }
.loft-lista__post { margin-block: var(--loft-avstand-l); }

/*
 * Synlig reservrubrik på sidor utan hero. Rubriken får samma luft ovanför som en sektion,
 * men mindre under, eftersom första blocket har egen luft ovanför.
 */
.loft-sidrubrik { padding-block: var(--loft-sektion) 0; }
.loft-sidrubrik__rubrik { margin-bottom: 0; }

.loft-sidfot {
	background: var(--loft-farg-mork);
	color: var(--loft-farg-pa-mork);
	font-size: var(--loft-storlek-s);
}
/* :where() håller specificiteten låg, så att delarnas egna marginaler gäller. */
:where(.loft-sidfot) ul { list-style: none; margin: 0; padding: 0; }

/* min() gör att kolumnerna krymper under 14rem på mycket smala skärmar. */
.loft-sidfot__inre {
	display: grid;
	gap: var(--loft-avstand-l) var(--loft-avstand-m);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	padding-block: var(--loft-avstand-l);
}
.loft-sidfot__inre > * { min-width: 0; }
.loft-sidfot__kolumn > * + * { margin-top: var(--loft-avstand-s); }

.loft-sidfot__rubrik {
	font-family: var(--loft-typsnitt-brod);
	font-size: var(--loft-storlek-m);
	font-weight: var(--loft-vikt-fet);
	margin-bottom: var(--loft-avstand-xs);
}
.loft-sidfot__kolumn > .loft-sidfot__rubrik + * { margin-top: 0; }

.loft-sidfot__logga { display: inline-block; max-width: 100%; font-size: var(--loft-storlek-l); font-weight: var(--loft-vikt-fet); text-decoration: none; }
.loft-sidfot__logga-bild { width: auto; max-height: var(--loft-logga-hojd-sidfot); }

.loft-sidfot__kontakt { font-style: normal; }
.loft-sidfot__meny li + li { margin-top: var(--loft-avstand-xs); }

/* Länkytan är minst 2.75rem för pekskärmar. Den negativa marginalen linjerar första ikonen med texten ovanför. */
.loft-sidfot__sociala {
	display: flex;
	flex-wrap: wrap;
	margin-inline-start: calc((var(--loft-ikon-storlek) - 2.75rem) / 2);
}
.loft-sidfot__sociala a {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	transition: opacity var(--loft-overgang);
}
.loft-sidfot__sociala a:hover { opacity: 0.75; }
.loft-sidfot__sociala svg { inline-size: var(--loft-ikon-storlek); block-size: var(--loft-ikon-storlek); }

.loft-sidfot__undre { border-top: 1px solid var(--loft-farg-kant-pa-mork); padding-block: var(--loft-avstand-m); }
.loft-sidfot__undre-inre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--loft-avstand-xs) var(--loft-avstand-m);
}
.loft-sidfot__undre-inre > * { min-width: 0; margin: 0; }
.loft-sidfot__lankar ul { display: flex; flex-wrap: wrap; gap: var(--loft-avstand-xs) var(--loft-avstand-m); }