/*
 * Nynäshamnsbostäder: markup printed by the nynasbo-shortcodes module.
 * It renders outside Elementor documents, so global classes cannot reach it (design-system note 26).
 * Every value is a token; nothing here is a design decision of its own.
 */

/*
 * Roboto, self-hosted: live's theme loads it from Google Fonts and uses it for its buttons, the
 * header search and the news meta line; stage named it without loading it, so a Mac drew those in
 * its default serif. One variable file per subset covers every weight (fetched 2026-10-27, v51).
 */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/haus-fonts/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/uploads/haus-fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Närhet: place and distance, one row each. */
.fact-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
}
.fact-list dt,
.fact-list dd {
	margin: 0;
	padding-block: var(--space-gap-xs);
	border-block-end: 1px solid var(--border-subtle);
}
.fact-list dd {
	text-align: end;
	font-weight: 600;
}

/* Dokument: one file per row, with its type and size. */
.doc-list {
	display: grid;
	gap: var(--space-gap-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.doc-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-gap-sm);
	min-height: var(--size-control);
	padding: var(--space-gap-xs) var(--space-inset-sm);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	text-decoration: none;
}
.doc-list a:hover {
	background: var(--surface-secondary);
}
.doc-list__meta {
	flex: 0 0 auto;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* Fastighetsvärd and other contact people. */
.contact-card {
	display: flex;
	align-items: center;
	gap: var(--space-gap-sm);
}
.contact-card__img {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-pill);
	object-fit: cover;
	background: var(--surface-secondary);
}
.contact-card__name {
	margin: 0;
	font-weight: 600;
}
.contact-card__meta {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
}

/* Kontaktuppgifter: address, phone numbers and opening hours from the options page. */
.contact-list {
	display: grid;
	gap: var(--space-gap-sm);
	margin: 0;
}
.contact-list p {
	margin: 0;
}
.contact-list a {
	color: inherit;
}
.contact-list__label {
	display: block;
	font-family: var(--font-family-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	opacity: 0.8;
}
.contact-list__hours {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 0 var(--space-gap-md);
	margin: 0;
}
.contact-list__hours dt,
.contact-list__hours dd {
	margin: 0;
}

/* Avvikande öppettider: a band above the header, shown only while the toggle is on. */
.notice {
	padding: var(--space-gap-xs) var(--space-gutter);
	background: var(--surface-warm);
	color: var(--text-primary);
	text-align: center;
}
.notice p {
	margin: 0;
}

/* Tillval: the gallery, three across, opening Elementor's lightbox. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-gap-sm);
}
.gallery-grid a {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-secondary);
}
.gallery-grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (max-width: 767px) {
	.gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Page copy, as on www.nynasbo.se (Identisk med live, block 3). The theme on live sets these for
 * every post body, so they apply to the post-content widget wherever a template uses it. Measured
 * on live at 1280px, 2026-10-26. #262626, #DADDDD, #E5E7E7 and #C10E29 are live's own theme
 * colours and have no token here; they are kept as values so the copy stays exact.
 *
 * Live's theme sizes headings and spacing in rem and steps its root size down with the screen
 * (responsive.css): 11px to 1262px, then 10, 9 from 767px and 8 from 479px. Here that root is
 * --nynasbo-copy-rem, so every value below that live writes in rem follows the same steps.
 * Above 1262px it stays at 11px: live grows to 13 and 14px from 1440px, and desktop is kept as built.
 * Body text is 15px at every width on live, so it stays a pixel value.
 */
:root {
	--nynasbo-copy-rem: 11px;
}
@media (max-width: 1262px) {
	:root {
		--nynasbo-copy-rem: 10px;
	}
}
@media (max-width: 767px) {
	:root {
		--nynasbo-copy-rem: 9px;
	}
}
@media (max-width: 479px) {
	:root {
		--nynasbo-copy-rem: 8px;
	}
}
/* Live's theme breaks a word that is longer than its line (body: overflow-wrap break-word). The
   page title sits in a flex row, so it also needs leave to shrink below its longest word. */
body {
	overflow-wrap: break-word;
}
.elementor .e-heading-base.s-sida-h1 {
	min-width: 0;
}
.elementor-widget-theme-post-content {
	color: #262626;
	font-family: var(--font-family-primary), sans-serif;
	font-size: 15px;
	line-height: 22px;
}
.elementor-widget-theme-post-content p {
	margin: 0 0 var(--nynasbo-copy-rem);
}
.elementor-widget-theme-post-content h2 {
	display: inline-block;
	margin: 0 0 calc(var(--nynasbo-copy-rem) / 2);
	border-bottom: 1px solid #DADDDD;
	color: #262626;
	font-family: var(--font-family-primary), sans-serif;
	font-size: calc(var(--nynasbo-copy-rem) * 2);
	font-weight: 500;
	line-height: 1.2;
}
.elementor-widget-theme-post-content h2::after {
	content: "";
	display: block;
	position: relative;
	top: 2px;
	width: 60px;
	height: 3px;
	background: #C10E29;
}
.elementor-widget-theme-post-content h3 {
	margin: 0 0 calc(var(--nynasbo-copy-rem) / 2);
	color: #262626;
	font-family: var(--font-family-primary), sans-serif;
	font-size: calc(var(--nynasbo-copy-rem) * 1.75);
	font-weight: 500;
	line-height: 1.2;
}
/* Live's theme pulls a heading that opens a block up by a fifth of its size. */
.elementor-widget-theme-post-content > :is(h1, h2, h3, h4, h5, h6):first-child,
.elementor-widget-theme-post-content section[data-vc="col"] > :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-top: -0.2em;
}
/* Live's classic (non-WPBakery) post body: the last block has no bottom margin. */
.elementor-widget-theme-post-content:not(:has(section[data-vc])) > :last-child {
	margin-bottom: 0;
}
/* The rest of live's heading scale inside copy (h2 and h3 above): Bricolage 500, #262626, half a rem under. */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6 {
	margin: 0 0 calc(var(--nynasbo-copy-rem) / 2);
	color: #262626;
	font-family: var(--font-family-primary), sans-serif;
	font-weight: 500;
	line-height: 1.2;
}
.elementor-widget-theme-post-content h1 {
	font-size: calc(var(--nynasbo-copy-rem) * 2.5);
}
.elementor-widget-theme-post-content h4 {
	font-size: calc(var(--nynasbo-copy-rem) * 1.5);
}
.elementor-widget-theme-post-content h5 {
	font-size: calc(var(--nynasbo-copy-rem) * 1.25);
}
.elementor-widget-theme-post-content h6 {
	font-size: var(--nynasbo-copy-rem);
}
.elementor-widget-theme-post-content blockquote {
	margin: 0 0 var(--nynasbo-copy-rem);
	padding: 30.75px 37.5px 37.5px 41.7px;
	font-family: Roboto, sans-serif;
}
.elementor-widget-theme-post-content hr {
	height: 0;
	margin: var(--nynasbo-copy-rem) 0;
	border: 0;
	border-top: 1px solid #E5E7E7;
}
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
	margin: 0 0 var(--nynasbo-copy-rem);
	padding-left: 22.5px;
}
.elementor-widget-theme-post-content li > p {
	margin: 0;
}
.elementor-widget-theme-post-content a {
	display: inline-block; /* live's theme: a link is its own box in the line */
	color: var(--text-link);
	text-decoration: underline;
}
.elementor-widget-theme-post-content img {
	vertical-align: middle;
}
/* WordPress alignment as live's theme sets it. */
.elementor-widget-theme-post-content [data-align="right"] {
	display: block;
	float: right;
	margin: 0 0 0 30px;
}
.elementor-widget-theme-post-content [data-align="left"] {
	display: block;
	float: left;
	margin: 0 30px 0 0;
}
.elementor-widget-theme-post-content [data-align="center"] {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
/* Live's theme (responsive.css) on narrower screens: rules get more air, a left or right image
   stops floating and centres under 768px, and quotes tighten on a phone. The rule's margin is
   !important on live too, so it survives the last-child reset (an hr closing a list item). */
@media (max-width: 1262px) {
	.elementor-widget-theme-post-content hr {
		margin: 4em 0 !important;
	}
}
@media (max-width: 959px) {
	.elementor-widget-theme-post-content hr {
		margin: 3em 0 !important;
	}
}
@media (max-width: 768px) {
	.elementor-widget-theme-post-content figure:is([data-align="left"], [data-align="right"]) {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
}
@media (max-width: 767px) {
	.elementor-widget-theme-post-content :is(img, figure):is([data-align="left"], [data-align="right"]) {
		display: block;
		float: none;
		margin: 1em auto;
	}
}
@media (max-width: 479px) {
	.elementor-widget-theme-post-content blockquote {
		padding: 2em 2em 2em 3em;
	}
	.elementor-widget-theme-post-content blockquote p {
		font-size: 16px;
	}
	.elementor-widget-theme-post-content figcaption {
		font-size: 12px;
	}
}
/* Tables as live's theme draws them: collapsed hairlines, 1rem cells, no fill or stripes. */
.elementor-widget-theme-post-content table {
	width: auto;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 22px;
}
/* A table that carries a width attribute keeps it, as on live, even where it runs past the column. */
.elementor-widget-theme-post-content table[width] {
	width: revert-layer;
}
.elementor-widget-theme-post-content table td,
.elementor-widget-theme-post-content table th {
	padding: var(--nynasbo-copy-rem);
	border: 1px solid #D0D7D8; /* live's table rule, no token */
	background: rgba(255, 255, 255, 0.4);
	vertical-align: middle;
	text-align: left;
	line-height: 22px;
}
.elementor-widget-theme-post-content table tbody > tr:nth-child(odd) > td,
.elementor-widget-theme-post-content table tbody tr:hover > td {
	background: rgba(255, 255, 255, 0.4);
}

/* WPBakery's row box, kept from prod so the copy's spacing matches (see content-import body()). */
.elementor-widget-theme-post-content section[data-vc="row"] {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.elementor-widget-theme-post-content section[data-vc="col"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0 15px;
}
@media (min-width: 768px) {
	.elementor-widget-theme-post-content section[data-vc="col"] {
		width: var(--vc-w, 100%);
	}
}
.elementor-widget-theme-post-content section[data-vc]::before,
.elementor-widget-theme-post-content section[data-vc]::after {
	content: " ";
	display: table;
}
.elementor-widget-theme-post-content section[data-vc]::after {
	clear: both;
}
/* WPBakery's own rule (.wpb_text_column :last-child): the last thing in a column has no bottom margin. */
.elementor-widget-theme-post-content section[data-vc="col"] :last-child {
	margin-bottom: 0;
}

/* The first box and the Boxes rows: text beside an image that fills its half. */
.elementor-widget-theme-post-content .first-box-section .row,
.elementor-widget-theme-post-content .boxes-repeater-section .row {
	display: flex;
	/* Prod's .row shares its name with the global class row; where a page prints that class it must not change these rows. */
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	min-height: 300px;
	margin: 0 0 30px;
	background: var(--surface-secondary);
}
.boxes-repeater-section .text-column {
	font-size: var(--nynasbo-copy-rem); /* live's theme base; prod's .normal-text wrapper lifts it to 15px */
	line-height: 1.5; /* live: a factor, so an 18px span gets 27px lines (22.5px at 15px) */
	/* Live: the rows inherit the theme's system font; the copy is Bricolage only where a span says so. */
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.first-box-section .text-column,
.boxes-repeater-section .text-column {
	flex: 0 0 50%;
	box-sizing: border-box;
	align-self: center;
	padding: 20px 15px;
}
.first-box-section .image-column,
.boxes-repeater-section .image-column {
	flex: 0 0 50%;
	min-height: 300px;
	background-position: 50% 50%;
	background-size: cover;
}
.boxes-repeater-section .row:nth-child(even) .text-column {
	order: 2;
}
.boxes-repeater-section .row:last-child,
.first-box-section:last-child .row {
	margin-bottom: 0;
}
.boxes-repeater-section .text-column p,
.boxes-repeater-section [data-normal-text] {
	font-size: 15px; /* live's theme sizes paragraphs, not lists; .normal-text lifts everything */
}
/* A table in a Boxes row has no size of its own on live: it takes the row's base, 1rem with 1.5 lines. */
.boxes-repeater-section .text-column table,
.boxes-repeater-section .text-column table :is(td, th) {
	font-size: inherit;
	line-height: 1.5;
}
/* Live leaves the red mark off the headings inside the Boxes rows. */
.boxes-repeater-section h2::after {
	content: none;
}
/* WPBakery's single image: an inline-block figure, aligned by the element, with no margin. */
.content-figure {
	margin: 0;
}
.content-figure img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
@media (max-width: 767px) {
	.elementor-widget-theme-post-content .first-box-section .row,
	.elementor-widget-theme-post-content .boxes-repeater-section .row {
		flex-direction: column;
	}
	.first-box-section .text-column,
	.boxes-repeater-section .text-column,
	.boxes-repeater-section .row:nth-child(even) .text-column {
		order: 0;
		align-self: stretch;
	}
}

/* Undersidor: a hub page's children, two across. */

.subpages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-gap-sm);
	margin: var(--space-gap-lg) 0 0;
	padding: 0;
	list-style: none;
}
.subpages__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-gap-xs);
	height: 100%;
	box-sizing: border-box;
	padding: var(--space-inset-md);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: var(--surface-primary);
	color: var(--text-primary);
	text-decoration: none;
}
.subpages__card:hover {
	border-color: var(--border-strong);
	background: var(--surface-secondary);
}
.subpages__title {
	font-family: var(--font-family-secondary), sans-serif;
	font-size: 1.125rem;
	font-weight: 600;
}
.subpages__text {
	color: var(--text-secondary);
	font-size: 0.9375rem;
}
@media (max-width: 767px) {
	.subpages {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Header, as on www.nynasbo.se (Identisk med live, block 2). Elementor's nav-menu and search-form
 * widgets have no controls for these details, so they live here, keyed on the header's hook class.
 * Values measured on live at 1280px, 2026-10-26; the few without a token are noted.
 */
.site-header .btn {
	white-space: nowrap;
}

/* Sticky: live fixes only the menu row from 960px up (its theme switches it off at max-width 959px); the logo row scrolls away, and below that
 * nothing sticks. The kit makes the whole header sticky, so it is pulled up by the logo row's height,
 * which nynasbo-live-copy.php measures into --nynasbo-hdr-offset (the row grows with the notice band). */
@media (min-width: 960px) {
	html header.elementor-location-header {
		top: calc(-1 * var(--nynasbo-hdr-offset, 70px));
	}
}
@media (max-width: 959px) {
	html header.elementor-location-header {
		position: relative;
	}
}

/* "Registrera dig i kön" carries live's class mobile-menu-visible: live hides it from 1440px up. */
@media (min-width: 1440px) {
	.site-header .elementor-nav-menu--main .menu-item.mobile-menu-visible {
		display: none;
	}
}

/* MINA SIDOR: live's body letter spacing reaches the button too at 1262px and below. */
@media (max-width: 1262px) {
	.site-header .s-hdr-minasidor {
		letter-spacing: 0.5px;
	}
}

/* MINA SIDOR: the user icon sits in the button's 48px left padding. */
.site-header .s-hdr-minasidor {
	position: relative;
}
.site-header .s-hdr-minasidor::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 288a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3 0 498.3 13.7 512 30.7 512h450.6c17 0 30.7-13.7 30.7-30.7C512 392.2 439.8 320 350.7 320H161.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 288a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm-94.7 32C72.2 320 0 392.2 0 481.3 0 498.3 13.7 512 30.7 512h450.6c17 0 30.7-13.7 30.7-30.7C512 392.2 439.8 320 350.7 320H161.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Menu items: left-aligned, wrapping onto a second row where they do not fit, as live does. */
.site-header .elementor-element.elementor-element-hdr-nav {
	flex: 1 1 0;
	min-width: 0;
}
.site-header .elementor-element.elementor-element-hdr-sok {
	flex: 0 0 auto;
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu {
	flex-wrap: wrap;
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item {
	padding: 10px 20px 10px 10px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:hover,
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item.highlighted {
	background: var(--surface-accent-subtle);
	border-color: #000; /* live: a 1px black outline on hover, no token */
}
/* Live's arrow is absolute, 5px from the item's right edge, so an item with a submenu is no wider
 * than one without (text + 32px); in the flow it added 12px to every such item. */
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item {
	position: relative;
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item > .sub-arrow {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0; /* Elementor pulls the arrow up with margin-block: -10px */
	padding: 0;
	font-size: 12px;
	color: var(--text-accent); /* live: #0F3C53, a shade off the text */
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item > .sub-arrow svg {
	width: 10px;
	height: 10px;
}
/* Live's menu rows start 16px below the bar's top (86px on a 70px logo row), not centred. */
.site-header .elementor-element.elementor-element-hdr-nav {
	align-self: flex-start;
	margin-top: 16px;
}
@media (max-width: 767px) {
	.site-header .elementor-element.elementor-element-hdr-nav {
		align-self: center;
		margin-top: 0;
	}
}

/* Live marks the section you are in, not only the page: a parent of the current page is orange too. */
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > .elementor-item,
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > .elementor-item {
	color: var(--surface-highlight);
}

/* Submenus: a pale panel with a soft shadow. #EDF1F2 has no token. */
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main .sub-menu {
	min-width: 220px !important;
	padding: 8px 0;
	border-radius: var(--radius-md);
	background: #EDF1F2;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
	padding: 5px 10px;
	line-height: 19.5px;
	border: 0;
}

/* Mobile menu: the burger sits on the beige bar, the panel opens full width under it. */
.site-header .elementor-element.elementor-element-hdr-nav .elementor-menu-toggle {
	background: transparent;
}
.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--dropdown {
	font-family: var(--font-family-secondary), sans-serif;
}

/* Search: a 156px outlined field and a dark SÖK button, both 41px high. */
.site-header .elementor-element.elementor-element-hdr-sok .elementor-search-form__container {
	gap: 3px;
	min-height: 41px;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.site-header .elementor-element.elementor-element-hdr-sok .elementor-search-form__input {
	width: 156px;
	flex: 0 0 156px;
	height: 41px;
	padding: 0 10px;
	border: 1px solid var(--text-accent);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-accent);
	text-transform: uppercase;
}
/* Raised past (0,5,0): the widget's own button-type rule sets 16.67px side padding, which pushed SÖK off centre. */
.site-header .elementor-element.elementor-element-hdr-sok.elementor-widget.elementor-widget-search-form .elementor-search-form__submit {
	width: 50px;
	min-width: 50px;
	height: 41px;
	padding: 0;
	border-radius: var(--radius-sm);
	background: var(--surface-accent);
	color: var(--text-primary-inverted);
	text-transform: uppercase;
}
@media (max-width: 767px) {
	.site-header .elementor-element.elementor-element-hdr-sok .elementor-search-form__input {
		width: 110px;
		flex-basis: 110px;
	}
}

/*
 * Footer, as on www.nynasbo.se (Identisk med live, block 2): icon lines in the address block and
 * the two link lists with an arrow and a hairline under each item. Measured on live at 1280px.
 */
.s-ftr-adress,
.s-ftr-box,
.s-ftr-telefon,
.s-ftr-epost {
	position: relative;
}
.s-ftr-adress::before,
.s-ftr-box::before,
.s-ftr-telefon::before,
.s-ftr-epost::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.s-ftr-adress::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
}
.s-ftr-box::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 10h6M9 14h6M9 18h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1M9 10h6M9 14h6M9 18h4'/%3E%3C/svg%3E");
}
.s-ftr-telefon::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.s-ftr-epost::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
.elementor-element-ftr-snabb-nav .elementor-nav-menu--main .menu-item,
.elementor-element-ftr-extern-nav .elementor-nav-menu--main .menu-item {
	padding: 4px 0;
	border-bottom: 1px solid #EDF1F2; /* live's hairline, no token */
}
.elementor-element-ftr-snabb-nav .elementor-nav-menu--main .elementor-item,
.elementor-element-ftr-extern-nav .elementor-nav-menu--main .elementor-item {
	position: relative;
	padding-left: 18px !important;
}
.elementor-element-ftr-snabb-nav .elementor-nav-menu--main .elementor-item::before,
.elementor-element-ftr-extern-nav .elementor-nav-menu--main .elementor-item::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 1;
	/* Elementor's pointer effect owns this pseudo-element: hidden and filled by default. */
	opacity: 1 !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
}

/*
 * Header on a tablet (768–1024px), as live's WPBakery columns lay it out (measured 2026-10-27 at
 * 768, 860, 960, 1023 and 1024): a 15px gutter; the logo is its column, 25% less 30px, capped at
 * 210px, with 5px above and below; MINA SIDOR ends at 7/12 of the width below 992px and at the
 * right edge from 992px up; the search is a quarter column (25% less 30px, capped at 209px) and the
 * menu wraps in the rest, 30px from it. Percentages here are of the 15px-padded box (C = W - 30),
 * hence the odd constants: 25% of W less 30 is 25% of C less 22.5.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	/* The section class adds the 40px tablet gutter around the inner rows; live has none. */
	.site-header .elementor-element.elementor-element-hdr-top,
	.site-header .elementor-element.elementor-element-hdr-navbar {
		padding-inline: 0;
	}
	.site-header .elementor-element.elementor-element-hdr-top-inner,
	.site-header .elementor-element.elementor-element-hdr-navbar-inner {
		padding-inline: 15px;
	}
	.site-header .elementor-element.elementor-element-hdr-top-inner {
		min-height: 0;
		padding-block: 5px;
	}
	/* vw, not %: the image sits in a shrink-wrapped link, so a percentage has nothing to resolve against. */
	.site-header .elementor-element.elementor-element-hdr-top-inner img {
		width: min(210px, calc(25vw - 30px));
		height: auto;
	}
	/* The menu carries the row's 15px top and 6px bottom, so the search stays centred in the whole row. */
	.site-header .elementor-element.elementor-element-hdr-navbar-inner {
		min-height: 0;
		padding-block: 0;
		column-gap: 30px;
	}
	.site-header .elementor-element.elementor-element-hdr-nav {
		margin-block: 15px 6px;
	}
	.site-header .elementor-element.elementor-element-hdr-sok {
		flex: 0 0 min(209px, calc(25% - 22.5px));
	}
	.site-header .elementor-element.elementor-element-hdr-sok .elementor-search-form__input {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
}
/* Below 768px live's logo column is half the width: the logo is 60px high at most, so it grows
   from 165px wide on a 390px phone to 210px from 480px up, with 5px above and below it. */
@media (max-width: 767px) {
	.site-header .elementor-element.elementor-element-hdr-top-inner {
		min-height: 0;
		padding-block: 5px;
	}
	.site-header .elementor-element.elementor-element-hdr-top-inner img {
		width: min(210px, calc(50vw - 30px));
		height: auto;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.site-header .elementor-element-hdr-top-inner .s-hdr-minasidor {
		margin-inline-end: calc(41.6667% + 12.5px);
	}
}

/*
 * Tablet (768–1024px). Live's theme keeps a fixed 30px page gutter across this range, where the
 * kit's --space-gutter is fluid (31px at 768, 40px at 1024). Redefined here, design-system Rule 19.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	:root:root {
		--space-gutter: 30px;
	}
	/* Front page bands centred at 1000px on a desktop carry no gutter of their own; below 1030px they need one. */
	.elementor .elementor-element.elementor-element-start-genvagar,
	.elementor .elementor-element.elementor-element-start-nyheter,
	.elementor .elementor-element.elementor-element-start-omraden {
		padding-inline: var(--space-gutter);
	}
}

/*
 * Content width between a phone and a desktop, as live's theme steps .content_wrap (responsive.css):
 * 440px to 639px, 600px to 767px, 708px to 959px, 900px to 1023px, 964px to 1135px, 910px to 1262px;
 * 1000px above that is the documents' own max-width. Below 480px the gutter alone sets it.
 * Applied to the content containers only; live's header and footer run full width.
 */
@media (min-width: 480px) and (max-width: 639px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 440px;
	}
}
@media (min-width: 640px) and (max-width: 767px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 600px;
	}
}
@media (min-width: 768px) and (max-width: 959px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 708px;
	}
}
@media (min-width: 960px) and (max-width: 1023px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 900px;
	}
}
@media (min-width: 1024px) and (max-width: 1135px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 964px;
	}
}
@media (min-width: 1136px) and (max-width: 1262px) {
	.elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-element.container {
		max-width: 910px;
	}
}

/*
 * Footer on a tablet, as live's WPBakery grid (measured 2026-10-27 at 768 and 1024): a 15px row
 * gutter and 15px column padding; 2/4/3/3 twelfths from 992px, two by two below it. The logo fills
 * its column. The document's tablet variant (every column 100%) only fits a phone.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-location-footer .elementor-element.elementor-element-ftr {
		padding-inline: 0;
		padding-block-start: 40px;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-inner {
		max-width: none;
		padding-inline: 15px;
		flex-wrap: wrap;
		gap: 0;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-brand,
	.elementor-location-footer .elementor-element.elementor-element-ftr-bolag,
	.elementor-location-footer .elementor-element.elementor-element-ftr-snabb,
	.elementor-location-footer .elementor-element.elementor-element-ftr-extern {
		padding-inline: 15px;
		flex: 0 0 auto;
	}
	.elementor-location-footer .elementor-element-ftr-brand img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	/* Live's text columns open with 20px above their heading; the logo column starts flush. */
	.elementor-location-footer .elementor-element.elementor-element-ftr-bolag,
	.elementor-location-footer .elementor-element.elementor-element-ftr-snabb,
	.elementor-location-footer .elementor-element.elementor-element-ftr-extern {
		padding-block-start: 20px;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-brand {
		padding-block-start: 0;
	}
}
@media (min-width: 992px) and (max-width: 1024px) {
	/* Live's bottom bar starts 286px down: 40 + its 209px company column + 37; ours is 186px tall. */
	.elementor-location-footer .elementor-element.elementor-element-ftr {
		padding-block-end: 60px;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-brand { width: 16.6667%; }
	.elementor-location-footer .elementor-element.elementor-element-ftr-bolag { width: 33.3333%; }
	.elementor-location-footer .elementor-element.elementor-element-ftr-snabb,
	.elementor-location-footer .elementor-element.elementor-element-ftr-extern { width: 25%; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.elementor-location-footer .elementor-element.elementor-element-ftr {
		padding-block-end: 50px;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-inner {
		row-gap: 29px;
	}
	/* Live's second row puts its headings 52px into the column, not 20. */
	.elementor-location-footer .elementor-element.elementor-element-ftr-snabb,
	.elementor-location-footer .elementor-element.elementor-element-ftr-extern {
		padding-block-start: 52px;
	}
	.elementor-location-footer .elementor-element.elementor-element-ftr-brand,
	.elementor-location-footer .elementor-element.elementor-element-ftr-bolag,
	.elementor-location-footer .elementor-element.elementor-element-ftr-snabb,
	.elementor-location-footer .elementor-element.elementor-element-ftr-extern {
		width: 50%;
	}
}

/* Front page news cards (Loop Item: Nyhet / Startsida): live clips the excerpt at 70px, three lines,
 * which only shows once the cards narrow below a desktop. */
.e-loop-item [data-id="nyhet-excerpt"] {
	max-height: 70px;
	overflow: hidden;
}

/* Utility: text for screen readers only. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* A section the lediga script hides when its area has no vacancies. [hidden] loses to e-con's display. */
.lediga-omrade[hidden] {
	display: none !important;
}

/* Lediga objekt: toolbar, tabs, filter and the object card. */
.lediga {
	display: flex;
	flex-direction: column;
	gap: var(--space-gap-md);
	width: 100%;
}
.lediga [hidden] {
	display: none !important;
}
.lediga__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-gap-xs);
}
.lediga .chip {
	min-height: var(--size-control);
	padding: 0 var(--space-inset-sm);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-accent-subtle);
	color: var(--text-primary);
	font-family: var(--font-family-secondary);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.lediga .chip:hover,
.lediga .chip[aria-pressed="true"] {
	background: var(--surface-accent);
	color: var(--text-primary-inverted);
}
.lediga__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-gap-sm);
}
.lediga__count {
	margin: 0;
	font-weight: 600;
}
.lediga__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-gap-sm);
}
.lediga__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.875rem;
	color: var(--text-secondary);
}
.lediga__field--inline {
	flex-direction: row;
	align-items: center;
	gap: var(--space-gap-xs);
}
.lediga__field input,
.lediga__field select {
	min-height: var(--size-control);
	padding: 0 var(--space-inset-sm);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface-primary);
	color: var(--text-primary);
	font: inherit;
	font-size: 1rem;
}
.lediga__filter-toggle,
.lediga__reset {
	min-height: var(--size-control);
	padding: 0 var(--space-inset-md);
	border: 1px solid var(--text-action-secondary);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-action-secondary);
	font-family: var(--font-family-secondary);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}
.lediga__filter-toggle[aria-expanded="true"],
.lediga__filter-toggle:hover,
.lediga__reset:hover {
	background: var(--surface-action-secondary-hover);
}
.lediga__filter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-gap-sm);
	padding: var(--space-inset-md);
	border-radius: var(--radius-lg);
	background: var(--surface-secondary);
}
.lediga__filter-actions {
	display: flex;
	align-items: flex-end;
}
.lediga__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-gap-xl) var(--space-gap-md);
}
.lediga__empty,
.lediga__error {
	margin: 0;
	padding: var(--space-inset-md);
	border-radius: var(--radius-md);
	background: var(--surface-secondary);
}
.lediga__error {
	background: var(--surface-warm);
}
@media (max-width: 1024px) {
	.lediga__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.lediga__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.lediga__field--inline {
		flex-direction: column;
		align-items: stretch;
	}
}

.object-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-gap-sm);
	height: 100%;
	color: var(--text-primary);
	text-decoration: none;
}
.object-card__media {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-secondary);
}
.object-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.object-card:hover .object-card__media img {
	transform: scale(1.03);
}
.object-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-gap-xs);
}
.object-card__label {
	margin: 0;
	padding: 2px var(--space-gap-xs);
	border-radius: var(--radius-pill);
	background: var(--surface-warm);
	font-family: var(--font-family-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.object-card__title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}
.object-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-gap-sm);
	margin: 0;
	color: var(--text-secondary);
}
.object-card__price {
	color: var(--text-primary);
}
.object-card__sub {
	margin: 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
	white-space: pre-line;
}
.object-card__cta {
	margin-top: auto;
	padding-top: var(--space-gap-xs);
	color: var(--text-link);
	font-family: var(--font-family-secondary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ News (block 5)
   Live's theme meta line under a news title: category links and date, Roboto at 1rem × .93.
   Addressed by element id: the paragraph widget strips the classes [nynasbo_postmeta] prints. */
.e-paragraph-base:is([data-id="nyhet-meta"], [data-id="kategori-meta"]) {
	font-family: Roboto, sans-serif;
	font-size: 10.21px;
	color: #949494;
}
.e-paragraph-base:is([data-id="nyhet-meta"], [data-id="kategori-meta"]) a {
	color: #262626;
	text-decoration: underline;
}
/* Live: the theme's separator glyph after the categories (an empty icon) leaves 22px. */
.e-paragraph-base:is([data-id="nyhet-meta"], [data-id="kategori-meta"]) > span > span:first-child:not(:last-child) {
	margin-right: 21px;
}

/* A news post's body: live's theme line height is relative, so Word's 14pt headings get 28px lines. */
body.single-post .elementor-widget-theme-post-content :is(p, li) {
	line-height: 1.5;
}

/* The category archive's "Nyare Inlägg" / "Äldre Inlägg": live's theme puts them at the column's
   edges and prints nothing where there is no page to go to. */
.elementor-element-b5a1c02 .elementor-pagination {
	display: flex;
	justify-content: space-between;
	margin-inline: -8px;
}
.elementor-element-b5a1c02 .elementor-pagination span.page-numbers {
	visibility: hidden;
}
@media (max-width: 767px) {
	.elementor-element-b5a1c02 .elementor-pagination {
		margin-inline: 0;
	}
}

/* /nyheter/ between 480 and 767px: live's theme puts its third-width columns two across, 20px
   apart, with 20px under each card and 20px over every card from the third (40px between rows). */
@media (min-width: 480px) and (max-width: 767px) {
	.elementor-element-b5a1c01 .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 40px;
		margin-bottom: 10px;
	}
}

/* /nyheter/ cards: live's title is an 18/22 underlined inline-block link inside a 22/26.4 h2,
   which is what gives a one-line title 30px and a two-line one 49px. */
.e-heading-base[data-id="arkiv-title"] > a {
	display: inline-block;
	font-size: 18px;
	line-height: 22px;
	font-weight: 400;
	color: #262626;
	text-decoration: underline;
}

/* Live's theme (responsive.css) gives body text .5px letter spacing at 1262px and below;
   headings set their own and stay at normal. It changes where lines break on a phone.
   The news pages take it whole; every other page takes it in its copy, with the heading
   scale above, so the two step together (on their own they moved Felanmälan 190px). */
@media (max-width: 1262px) {
	body:is(.single-post, .blog, .category),
	.elementor-widget-theme-post-content {
		letter-spacing: .5px;
	}
	body:is(.single-post, .blog, .category) :is(h1, h2, h3, h4, h5, h6),
	.elementor-widget-theme-post-content :is(h1, h2, h3, h4, h5, h6) {
		letter-spacing: normal;
	}
}