/*
 * 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.
 */

/* 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));
	}
}

/* Imported page copy: the ingress, text beside an image, and a lone figure. */
.ingress {
	font-size: 1.25rem;
	line-height: 1.5;
}
.content-row {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: start;
	gap: var(--space-gap-lg);
	margin-block: var(--space-gap-lg);
}
.content-row--reverse .content-row__media {
	order: -1;
}
.content-row--reverse {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}
.content-row__text > :first-child {
	margin-block-start: 0;
}
.content-row__media,
.content-figure {
	margin: 0;
}
.content-row__media img,
.content-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}
@media (max-width: 767px) {
	.content-row,
	.content-row--reverse {
		grid-template-columns: minmax(0, 1fr);
	}
	.content-row--reverse .content-row__media {
		order: 0;
	}
}

/* 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: the action buttons keep their label on one line; the menu is what gives way. */
.site-header .btn {
	white-space: nowrap;
}
/*
 * Just above the tablet breakpoint the six menu items, the logo and the queue button do not fit
 * at the menu's own padding and with the submenu arrows. A media query because the nav-menu widget's padding control has no
 * breakpoint between tablet and desktop (design-system note 15).
 */
@media (min-width: 1025px) and (max-width: 1199px) {
	.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main .elementor-item {
		padding-inline: 8px;
		font-size: 0.9375rem;
	}
	/* The submenus still open on hover and focus; only the arrow gives way. */
	.site-header .elementor-element.elementor-element-hdr-nav .elementor-nav-menu--main .sub-arrow {
		display: none;
	}
}

/* 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;
}