/*
 * Rasa June interaction system.
 * Clear enough to communicate clickability, restrained enough to preserve
 * the editorial design. No layout, typography hierarchy or content changes.
 */

/* Keyboard users receive a consistent, visible focus state. */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body [role="link"]:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Existing Tjenester introduction CTA, converted to a real link in PHP. */
body a.rjp-services-faq-link {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;
	padding: 7px 0;
	color: inherit;
	font-family: var(--rj-font-button);
	font-size: 16px;
	font-weight: var(--rj-weight-button);
	line-height: 1.45;
	text-decoration: none;
	pointer-events: auto;
	touch-action: manipulation;
	cursor: pointer;
	transition: color 180ms ease, transform 180ms ease;
}

/* Homepage About section: Elementor currently gives the image container its
 * full intrinsic width while preventing it from shrinking. That collapses the
 * neighbouring text container to 0px on desktop. Keep the intended editorial
 * split without changing the Elementor content or its tablet/mobile settings. */
@media (min-width: 1025px) {
	body.home #content .elementor-element-d6afe63 > .e-con-inner {
		flex-wrap: nowrap !important;
	}

	body.home #content .elementor-element-d6afe63 > .e-con-inner > .elementor-element-22166ab {
		--width: 39%;
		width: 39% !important;
		max-width: 39% !important;
		min-width: 0 !important;
		flex: 0 0 39% !important;
	}

	body.home #content .elementor-element-d6afe63 > .e-con-inner > .elementor-element-141ca5f {
		--width: 61%;
		width: 61% !important;
		max-width: none !important;
		min-width: 0 !important;
		flex: 1 1 0 !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	body a.rjp-services-faq-link:hover,
	body a.rjp-services-faq-link:focus-visible {
		color: #777777;
		transform: translateX(3px);
	}
}

@media (max-width: 1024px) {
	:root {
		--rj-responsive-gutter: 40px;
	}

	body a.rjp-services-faq-link {
		max-width: 100%;
		white-space: normal;
	}

	/* One Cure-inspired inset for Rasa June project media on iPad. Full-bleed
	 * remains available on desktop, but no image touches the viewport edge on
	 * tablet or mobile. */
	body #content .rjcs-width-contained,
	body #content .rjcs-width-wide,
	body #content .rjcs-width-full_bleed,
	body #content .rjcs-results--width-wide,
	body #content .rjcs-results--width-full_bleed {
		position: relative !important;
		left: 50% !important;
		/* Two-step subtraction is supported by iOS Safari. CSS multiplication
		 * inside calc() is not, and caused the right edge to overflow there. */
		width: calc(100vw - var(--rj-responsive-gutter) - var(--rj-responsive-gutter)) !important;
		width: calc(100dvw - var(--rj-responsive-gutter) - var(--rj-responsive-gutter)) !important;
		max-width: calc(100vw - var(--rj-responsive-gutter) - var(--rj-responsive-gutter)) !important;
		max-width: calc(100dvw - var(--rj-responsive-gutter) - var(--rj-responsive-gutter)) !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
		transform: translateX(-50%) !important;
	}
}

@media (max-width: 767px) {
	:root {
		--rj-responsive-gutter: 24px;
	}

	body a.rjp-services-faq-link {
		min-height: 48px;
	}
}

/* Primary Elementor and contact-form actions. */
body a.elementor-button,
body #wpforms-form-1993 button.wpforms-submit {
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

/* Service accordions communicate that the whole Les mer row is interactive. */
body .e-n-accordion-item-title {
	cursor: pointer;
	transition: color 180ms ease, transform 180ms ease;
}

body .e-n-accordion-item-title .e-n-accordion-item-title-icon {
	transition: transform 180ms ease;
}

/* Form lines become deliberately darker when the visitor is typing. */
body #wpforms-form-1993 input[type="text"],
body #wpforms-form-1993 input[type="email"],
body #wpforms-form-1993 textarea {
	transition: border-color 180ms ease, color 180ms ease;
}

/* Footer links and social icons receive feedback without changing spacing. */
body footer a.menu-link,
body footer a.footer-social-item {
	transition: opacity 180ms ease, transform 180ms ease;
}

/* Use the homepage off-white header color consistently on every page. */
body .site-header,
body .site-header .ast-primary-header-bar,
body .site-header .main-header-bar,
body header#masthead,
body header#masthead .ast-primary-header-bar {
	background-color: #f7f8f3 !important;
}

/* The header Book møte item is the primary navigation action. */
body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"],
body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rj-font-button) !important;
	font-weight: var(--rj-weight-button) !important;
	width: auto !important;
	min-width: 180px;
	height: 48px !important;
	min-height: 48px;
	padding: 0 24px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	box-sizing: border-box !important;
	border: 1px solid #1d1d1d !important;
	border-radius: 24px !important;
	background-clip: border-box;
	background-color: #dfe0ff !important;
	color: #1d1d1d !important;
	line-height: 1 !important;
	overflow: hidden;
	isolation: isolate;
	transition: color 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

body .site-header .main-header-menu > .menu-item:has(> a.menu-link[href*="calendly.com/rasajune/30min"]),
body header#masthead .main-header-menu > .menu-item:has(> a.menu-link[href*="calendly.com/rasajune/30min"]) {
	display: flex;
	align-items: center;
}

/* Keep the header navigation clean: no current-page or hover underlines. */
body .site-header .main-header-menu .menu-item > .menu-link,
body header#masthead .main-header-menu .menu-item > .menu-link,
body .site-header .main-header-menu .current-menu-item > .menu-link,
body .site-header .main-header-menu .current_page_item > .menu-link,
body header#masthead .main-header-menu .current-menu-item > .menu-link,
body header#masthead .main-header-menu .current_page_item > .menu-link {
	border-bottom: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

body .site-header .main-header-menu .menu-item > .menu-link::before,
body .site-header .main-header-menu .menu-item > .menu-link::after,
body header#masthead .main-header-menu .menu-item > .menu-link::before,
body header#masthead .main-header-menu .menu-item > .menu-link::after {
	display: none !important;
	content: none !important;
}

@media (min-width: 922px) {
	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"],
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"] {
		margin-left: 44px;
	}
}

@media (max-width: 767px) {
	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"],
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"] {
		min-width: 170px;
		height: 48px !important;
		min-height: 48px;
		padding: 0 22px !important;
	}
}

/* Elegant Astra drawer navigation for tablet and mobile. */
@media (max-width: 921px) {
	/* sticky-header.js adds .rj-sticky after the visitor begins scrolling. */
	body .site-header.rj-sticky,
	body header#masthead.rj-sticky {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99999;
		background-color: #f7f8f3 !important;
		border-bottom: 1px solid rgba(29, 29, 29, 0.12);
		box-shadow: none !important;
	}

	body.admin-bar .site-header.rj-sticky,
	body.admin-bar header#masthead.rj-sticky {
		top: 32px;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-inner,
	body .ast-mobile-popup-drawer .ast-mobile-popup-content {
		background-color: #f7f8f3 !important;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 86px clamp(28px, 8vw, 64px) 48px !important;
	}

	body .ast-mobile-popup-drawer .ast-builder-menu-mobile,
	body .ast-mobile-popup-drawer .ast-main-header-bar-alignment,
	body .ast-mobile-popup-drawer .main-header-bar-navigation,
	body .ast-mobile-popup-drawer .site-navigation,
	body .ast-mobile-popup-drawer .main-navigation,
	body .ast-mobile-popup-drawer .main-header-menu {
		width: 100% !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		margin: 0 !important;
		text-align: center;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
		position: relative;
		display: inline-flex;
		width: auto;
		height: auto;
		min-height: 0;
		padding: 0 !important;
		color: #1d1d1d !important;
		font-family: Inter, Arial, sans-serif;
		font-size: clamp(28px, 5vw, 32px) !important;
		font-weight: 400;
		line-height: 1.2 !important;
		text-align: center;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link,
	body .ast-mobile-popup-drawer .main-header-menu .current_page_item > .menu-link {
		color: #777777 !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link::before,
	body .ast-mobile-popup-drawer .main-header-menu .current_page_item > .menu-link::before {
		display: none !important;
		content: none !important;
	}

	/* Astra treats the homepage #prosjekter anchor as a second current page.
	 * It is an in-page destination, so it must not receive the active style. */
	body .ast-mobile-popup-drawer .main-header-menu .current-menu-item > a.menu-link[href*="#prosjekter"],
	body .ast-mobile-popup-drawer .main-header-menu .current_page_item > a.menu-link[href*="#prosjekter"] {
		color: #1d1d1d !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .current-menu-item > a.menu-link[href*="#prosjekter"]::before,
	body .ast-mobile-popup-drawer .main-header-menu .current_page_item > a.menu-link[href*="#prosjekter"]::before {
		display: none !important;
		content: none !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"] {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 170px;
		height: 48px !important;
		min-height: 48px;
		margin: 12px auto 0 !important;
		padding: 0 22px !important;
		box-sizing: border-box;
		border: 1px solid #1d1d1d;
		border-radius: 24px !important;
		background-color: #dfe0ff !important;
		color: #1d1d1d !important;
		font-family: var(--rj-font-button);
		font-size: 16px !important;
		line-height: 1 !important;
		text-align: center !important;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-header {
		position: absolute;
		top: 24px;
		right: clamp(24px, 6vw, 48px);
		padding: 0 !important;
	}

	body .ast-mobile-popup-drawer .menu-toggle-close {
		width: 36px;
		height: 36px;
		padding: 7px !important;
		color: #1d1d1d !important;
	}
}

/* One editable button type system across desktop, tablet and mobile.
 * Change it in Appearance > Customize > Rasa June Typography. */
body button,
body input[type="button"],
body input[type="submit"],
body a.elementor-button,
body .wpforms-submit,
body .rjp-mobile-header-cta,
body .rjp-mobile-drawer-cta,
body .rjp-services-faq-link,
body .rjfaq-topic-link__anchor,
body .rjfaq-all-link,
body .rjab-block__faq-link {
	font-family: var(--rj-font-button) !important;
	font-weight: var(--rj-weight-button) !important;
}

/* Cure-inspired mobile/tablet navigation: the information architecture and
 * Rasa June brand remain intact; desktop is deliberately outside this query. */
@media (max-width: 921px) {
	body #ast-mobile-header .ast-primary-header-bar {
		min-height: 96px;
		padding: 0 clamp(20px, 5vw, 44px) !important;
		background: #e7e7df !important;
	}

	body #ast-mobile-header .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) auto !important;
		width: 100%;
		column-gap: 12px;
	}

	body #ast-mobile-header .site-header-primary-section-right {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	body #ast-mobile-header .custom-logo {
		width: clamp(126px, 28vw, 170px) !important;
		height: auto !important;
	}

	body .rjp-mobile-header-cta,
	body .rjp-mobile-drawer-cta {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 116px;
		height: 52px;
		padding: 0 18px;
		border: 0;
		border-radius: 8px;
		background: #dffd95;
		color: #111 !important;
		font-family: Inter, Arial, sans-serif;
		font-size: 17px;
		font-weight: 400;
		line-height: 1;
		text-decoration: none !important;
		white-space: nowrap;
	}

	body #ast-mobile-header .main-header-menu-toggle,
	body .ast-mobile-popup-drawer .menu-toggle-close {
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 72px !important;
		height: 52px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 8px !important;
		background: transparent !important;
		color: #050505 !important;
	}

	body #ast-mobile-header .main-header-menu-toggle .ahfb-svg-iconset,
	body .ast-mobile-popup-drawer .menu-toggle-close .ahfb-svg-iconset {
		display: none !important;
	}

	body #ast-mobile-header .main-header-menu-toggle::before,
	body #ast-mobile-header .main-header-menu-toggle::after,
	body .ast-mobile-popup-drawer .menu-toggle-close::before,
	body .ast-mobile-popup-drawer .menu-toggle-close::after {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		height: 2px;
		background: #050505;
	}

	body #ast-mobile-header .main-header-menu-toggle::before,
	body .ast-mobile-popup-drawer .menu-toggle-close::before {
		top: 19px;
	}

	body #ast-mobile-header .main-header-menu-toggle::after,
	body .ast-mobile-popup-drawer .menu-toggle-close::after {
		bottom: 19px;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-overlay {
		background: transparent !important;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-inner {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100% !important;
		max-width: none !important;
		min-height: 100dvh;
		background: #e7e7df !important;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-header {
		position: static !important;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 96px;
		padding: 0 clamp(20px, 5vw, 44px) !important;
		box-sizing: border-box;
	}

	body .rjp-mobile-drawer-brand {
		display: block;
		line-height: 0;
	}

	body .rjp-mobile-drawer-brand img {
		display: block;
		width: clamp(126px, 28vw, 170px) !important;
		height: auto !important;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-content {
		display: block;
		width: 100%;
		padding: clamp(92px, 15vh, 150px) clamp(24px, 6vw, 56px) 36px !important;
		box-sizing: border-box;
	}

	body .ast-mobile-popup-drawer .main-header-menu {
		display: block !important;
		width: 100% !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item {
		display: block;
		width: 100% !important;
		margin: 0 !important;
		border-bottom: 1px solid rgba(17, 17, 17, 0.48);
		text-align: left;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100% !important;
		min-height: clamp(86px, 12vh, 116px);
		margin: 0 !important;
		padding: 18px 2px !important;
		box-sizing: border-box;
		color: #111 !important;
		font-family: Inter, Arial, sans-serif;
		font-size: clamp(34px, 6vw, 52px) !important;
		font-weight: 400;
		line-height: 1.06 !important;
		text-align: left !important;
		text-decoration: none !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link,
	body .ast-mobile-popup-drawer .main-header-menu .current_page_item > .menu-link {
		color: #777 !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link::before,
	body .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link::after {
		display: none !important;
		content: none !important;
	}

	body .rjp-mobile-menu__arrow {
		flex: 0 0 auto;
		width: clamp(26px, 4vw, 34px);
		height: clamp(26px, 4vw, 34px);
		margin-left: 22px;
		color: currentColor;
	}

	body .ast-mobile-popup-drawer .main-header-menu .rjp-mobile-menu__cta-source {
		display: none !important;
	}

	body .rjp-mobile-menu__footer {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		width: 100%;
		margin-top: auto;
		padding: 34px clamp(24px, 6vw, 56px) max(34px, env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	body .rjp-mobile-menu__footer a {
		color: #111 !important;
		font-family: Inter, Arial, sans-serif;
		font-size: clamp(16px, 2.6vw, 22px);
		font-weight: 400;
		line-height: 1.2;
		text-decoration: none;
	}

	body .rjp-mobile-menu__footer a:last-child {
		text-decoration: underline;
		text-underline-offset: 5px;
	}
}

@media (max-width: 480px) {
	body #ast-mobile-header .ast-primary-header-bar,
	body .ast-mobile-popup-drawer .ast-mobile-popup-header {
		min-height: 84px;
	}

	body .rjp-mobile-header-cta,
	body .rjp-mobile-drawer-cta {
		min-width: 96px;
		height: 46px;
		padding: 0 13px;
		font-size: 15px;
	}

	body #ast-mobile-header .main-header-menu-toggle,
	body .ast-mobile-popup-drawer .menu-toggle-close {
		width: 60px !important;
		height: 46px !important;
	}

	body #ast-mobile-header .main-header-menu-toggle::before,
	body #ast-mobile-header .main-header-menu-toggle::after,
	body .ast-mobile-popup-drawer .menu-toggle-close::before,
	body .ast-mobile-popup-drawer .menu-toggle-close::after {
		left: 17px;
		right: 17px;
	}

	body #ast-mobile-header .main-header-menu-toggle::before,
	body .ast-mobile-popup-drawer .menu-toggle-close::before {
		top: 16px;
	}

	body #ast-mobile-header .main-header-menu-toggle::after,
	body .ast-mobile-popup-drawer .menu-toggle-close::after {
		bottom: 16px;
	}

	body .ast-mobile-popup-drawer .ast-mobile-popup-content {
		padding-top: clamp(58px, 9vh, 88px) !important;
	}

	body .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
		min-height: 82px;
		font-size: clamp(31px, 9vw, 42px) !important;
	}

	body .rjp-mobile-menu__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .site-header.rj-sticky,
	body.admin-bar header#masthead.rj-sticky {
		top: 46px;
	}
}

/* Pointer-only effects: they cannot become stuck on iPad or mobile. */
@media (hover: hover) and (pointer: fine) {
	body .site-header .menu-link,
	body header .menu-link {
		position: relative;
	}

	body .site-header .menu-link::after,
	body header .menu-link::after {
		display: none !important;
		content: none !important;
	}

	body .site-header .menu-link:hover::after,
	body .site-header .menu-link:focus-visible::after,
	body header .menu-link:hover::after,
	body header .menu-link:focus-visible::after {
		display: none !important;
		content: none !important;
	}

	body a.elementor-button:hover,
	body a.elementor-button:focus-visible,
	body #wpforms-form-1993 button.wpforms-submit:hover,
	body #wpforms-form-1993 button.wpforms-submit:focus-visible {
		color: #777777 !important;
		transform: translateY(-1px);
	}

	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:hover,
	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:focus-visible,
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:hover,
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:focus-visible {
		background-color: #dfe0ff !important;
		color: #777777 !important;
		transform: translateY(-1px);
	}

	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]::after,
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]::after {
		display: none;
	}

	body .e-n-accordion-item-title:hover,
	body .e-n-accordion-item-title:focus-visible {
		transform: translateX(3px);
	}

	body .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon,
	body .e-n-accordion-item-title:focus-visible .e-n-accordion-item-title-icon {
		transform: rotate(8deg);
	}

	body footer a.menu-link:hover,
	body footer a.menu-link:focus-visible {
		opacity: 0.62;
	}

	body footer a.footer-social-item:hover,
	body footer a.footer-social-item:focus-visible {
		transform: translateY(-2px);
	}
}

/* Touch feedback for mobile and iPad: immediate, with no persistent hover. */
@media (hover: none), (pointer: coarse) {
	body a.elementor-button:active,
	body #wpforms-form-1993 button.wpforms-submit:active {
		color: #777777 !important;
		transform: scale(0.985);
	}

	body .site-header .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:active,
	body header#masthead .main-header-menu > .menu-item > a.menu-link[href*="calendly.com/rasajune/30min"]:active {
		background-color: #dfe0ff !important;
	}

	body .e-n-accordion-item-title:active,
	body footer a:active,
	body #prosjekter .rjp-project-card--linked:active {
		opacity: 0.68;
	}
}

/* Keep interaction feedback accessible for visitors sensitive to motion. */
@media (prefers-reduced-motion: reduce) {
	body *,
	body *::before,
	body *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Homepage two-column rows - tablet and small laptop (768px - 1024px).
 * Both the About row and the Contact row are nowrap flex rows whose columns
 * add up to more than 100% (image 100% + text 61%; left 56% + form 500px).
 * That pushed the text column to 0px wide and overflowed the page sideways.
 * Let the rows wrap so the columns stack, exactly as they do on phones.
 * Desktop (>= 1025px) and phone (<= 767px) are untouched.
 */
@media (min-width: 768px) and (max-width: 1024px) {
	body.home .elementor-element-d6afe63 > .e-con-inner,
	body.home .elementor-element-469da29 > .e-con-inner {
		flex-wrap: wrap !important;
	}

	body.home .elementor-element-d6afe63 > .e-con-inner > .elementor-element-22166ab,
	body.home .elementor-element-d6afe63 > .e-con-inner > .elementor-element-141ca5f,
	body.home .elementor-element-469da29 > .e-con-inner > .e-con {
		--width: 100%;
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Keep the contact form at its normal reading width once it is full-row. */
	body.home .elementor-element-469da29 > .e-con-inner > .elementor-element-398cd61 {
		max-width: 500px !important;
	}
}

/* Homepage About + Contact rows - language-agnostic, no #content dependency.
 * Same element IDs exist in the NO, EN and LT copies, so this one rule set
 * covers all three. Desktop keeps the 39% / 61% editorial split; below 1025px
 * the rows wrap so the text column can never be squeezed to 0. */
@media (min-width: 1025px) {
	.elementor-element-d6afe63 > .e-con-inner { flex-wrap: nowrap !important; }
	.elementor-element-d6afe63 > .e-con-inner > .elementor-element-22166ab {
		--width: 39%; width: 39% !important; max-width: 39% !important; min-width: 0 !important; flex: 0 0 39% !important;
	}
	.elementor-element-d6afe63 > .e-con-inner > .elementor-element-141ca5f {
		--width: 61%; width: 61% !important; max-width: 61% !important; min-width: 0 !important; flex: 1 1 61% !important;
	}
}
@media (max-width: 1024px) {
	.elementor-element-d6afe63 > .e-con-inner,
	.elementor-element-469da29 > .e-con-inner { flex-wrap: wrap !important; }
	.elementor-element-d6afe63 > .e-con-inner > .e-con,
	.elementor-element-469da29 > .e-con-inner > .e-con {
		--width: 100%; width: auto !important; max-width: 100% !important; min-width: 0 !important;
		flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important;
	}
	.elementor-element-469da29 > .e-con-inner > .elementor-element-398cd61 { max-width: 500px !important; }
}
/* Image must never outgrow its column, and the heading must stay visible. */
.elementor-element-d6afe63 img { max-width: 100% !important; height: auto !important; }
.elementor-element-141ca5f .elementor-heading-title { display: block !important; visibility: visible !important; }


/* Homepage Services accordions (d843ea1, 4b9c9d5, bdac43f) - NO / EN / LT.
 * Two separate defects, one CSS fix:
 * 1) Elementor core sets .elementor-widget-container{height:100%} for widgets that are
 *    direct flex children of an .e-con. Combined with the widgets own -25px top margin
 *    the container resolves 25px shorter than the accordion, so expanded content spilled
 *    over the next service item. height:auto removes the circular percentage; the 25px
 *    bottom margin is added ONLY while an item is open, so collapsed spacing is unchanged.
 * 2) Elementor nested-accordion JS animates height 47px -> 47px (end height measured while
 *    the content is still display:none), leaving inline overflow:hidden;height:47px, so the
 *    Norwegian accordion never revealed its content. The [open] rule overrides that inline
 *    style so an open item always shows its full height. */
.elementor-element-d843ea1 > .elementor-widget-container,
.elementor-element-4b9c9d5 > .elementor-widget-container,
.elementor-element-bdac43f > .elementor-widget-container { height: auto !important; }

.elementor-element-d843ea1 > .elementor-widget-container:has(details[open]),
.elementor-element-4b9c9d5 > .elementor-widget-container:has(details[open]),
.elementor-element-bdac43f > .elementor-widget-container:has(details[open]) { margin-bottom: 25px !important; }

.elementor-element-d843ea1 details.e-n-accordion-item[open],
.elementor-element-4b9c9d5 details.e-n-accordion-item[open],
.elementor-element-bdac43f details.e-n-accordion-item[open] { height: auto !important; overflow: visible !important; }


/* Services accordion item 1 ("Visuell identitet") safety net.
 * Item 1 is the only one with an extra inner container (.elementor-element-322890f).
 * An older mobile rule hid that container on phones, so the item opened into an
 * almost empty area while items 2 and 3 were fine. The rule is gone, but any stale
 * cached copy of mobile-layout.css would bring the symptom back, so force the
 * content chain visible whenever the item is open. Higher specificity than the old
 * rule, and only inside an open <details>, so the collapsed state is untouched. */
body.rj-unified-mobile-layout #content .elementor-element-d843ea1 details.e-n-accordion-item[open] .elementor-element-322890f,
body.rj-unified-mobile-layout .elementor-element-d843ea1 details.e-n-accordion-item[open] .elementor-element-322890f,
.elementor-element-d843ea1 details.e-n-accordion-item[open] > .elementor-element-8537aae,
.elementor-element-d843ea1 details.e-n-accordion-item[open] .elementor-element-322890f {
	display: flex !important;
	height: auto !important;
	min-height: 0 !important;
}
