/*
 * Rasa June – Editorial FAQ widget
 * Structural CSS only. Colors, typography, spacing, divider and split
 * proportions are all controlled from the Elementor panel and injected
 * per-instance via Elementor's {{WRAPPER}} selectors / CSS custom
 * properties, so multiple FAQ widgets on one page never collide and
 * nothing here hard-codes a borrowed visual identity.
 *
 * No fixed heights, no absolute positioning for layout, no icon fonts,
 * no box/card styling, no shadows.
 */

.rjfaq {
	width: 100%;
	--rjfaq-row-padding: 32px;
	--rjfaq-qa-spacing: 16px;
	--rjfaq-toggle-color: currentColor;
	--rjfaq-toggle-size: 16px;
	--rjfaq-divider-color: rgba(29, 38, 43, 0.15);
	--rjfaq-divider-width: 1px;
	--rjfaq-split-left: 32%;
	--rjfaq-column-gap: 64px;
}

.rjfaq,
.rjfaq *,
.rjfaq *::before,
.rjfaq *::after {
	box-sizing: border-box;
}

.rjfaq__inner {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Head: heading + intro -------------------------------------------------- */

.rjfaq__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rjfaq__heading {
	margin: 0;
}

.rjfaq__intro {
	margin: 0;
	max-width: 60ch;
}

.rjfaq__body {
	margin-top: 32px;
}

/* List / rows -------------------------------------------------------------
 * Full-width editorial rows, no card, no box, no shadow. A thin rule
 * sits *between* items only (border-top on every item but the first) so
 * nothing wraps the component in a border.
 */

.rjfaq__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rjfaq__item {
	border-top: var(--rjfaq-divider-width) solid var(--rjfaq-divider-color);
}

.rjfaq__item:first-child {
	border-top: none;
}

.rjfaq__row-heading {
	margin: 0;
	font-weight: inherit;
}

/* The entire row is one real <button>, so it is clickable everywhere,
 * fully keyboard operable (Enter / Space) with no extra JS needed for
 * activation, and gets a native, visible focus outline. */

.rjfaq__trigger {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: var(--rjfaq-row-padding) 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
}

.rjfaq__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Some themes apply a generic `button:hover` text-color rule to every
 * <button> on the site. Since .rjfaq__trigger is a real <button>, it would
 * otherwise inherit that color on hover/focus/active — recoloring the
 * question text along with it. This keeps the row's own text color (and
 * anything using currentColor, like the toggle icon below) exactly as it
 * is at rest; only the dedicated toggle hover/open colors are allowed to
 * change anything visually. `.rjfaq__trigger:hover` is a class + pseudo
 * selector, so it already outweighs a plain `button:hover` type selector
 * regardless of stylesheet load order. */
.rjfaq__trigger:hover,
.rjfaq__trigger:focus,
.rjfaq__trigger:focus-visible,
.rjfaq__trigger:active {
	color: inherit;
}

/* Default hover / open accent for the toggle icon only — a violet a shade
 * darker than the site's pale lavender, kept subtle and editorial. Fully
 * overridable per-instance from the widget's Style panel (Plus / Minus
 * Icon → Hover / Open State). */
.rjfaq__trigger:hover .rjfaq__toggle,
.rjfaq__trigger:focus-visible .rjfaq__toggle {
	--rjfaq-toggle-color: #4F49B0;
}

.rjfaq__item.is-open .rjfaq__trigger .rjfaq__toggle {
	--rjfaq-toggle-color: #4F49B0;
}

.rjfaq__question-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Plus / minus — two thin lines, no icon font ----------------------------- */

.rjfaq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: var(--rjfaq-toggle-size);
	height: var(--rjfaq-toggle-size);
	margin-top: 0.25em;
}

.rjfaq__toggle-line {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--rjfaq-toggle-color);
	transition: transform 0.2s ease;
}

.rjfaq__toggle-line--h {
	width: 100%;
	height: 1.5px;
	transform: translate(-50%, -50%);
}

.rjfaq__toggle-line--v {
	width: 1.5px;
	height: 100%;
	transform: translate(-50%, -50%) scaleY(1);
}

.rjfaq__trigger[aria-expanded='true'] .rjfaq__toggle-line--v {
	transform: translate(-50%, -50%) scaleY(0);
}

/* Panel — CSS-only height animation, no fixed heights --------------------- */

.rjfaq__panel {
	display: grid;
	grid-template-rows: 0fr;
	overflow: hidden;
	transition: grid-template-rows 0.25s ease;
}

.rjfaq__item.is-open .rjfaq__panel {
	grid-template-rows: 1fr;
}

.rjfaq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.rjfaq__answer {
	padding-top: var(--rjfaq-qa-spacing);
	padding-bottom: var(--rjfaq-row-padding);
	max-width: 65ch;
}

.rjfaq__answer > *:first-child {
	margin-top: 0;
}

.rjfaq__answer > *:last-child {
	margin-bottom: 0;
}

/* Tablet & mobile — always a single stacked column ------------------------
 * The editorial split is a large-desktop-only arrangement; below that,
 * both layouts render identically (heading above, questions underneath),
 * intentionally designed rather than a shrunk desktop version.
 */

/* Desktop — editorial split layout ---------------------------------------- */

@media (min-width: 1025px) {

	.rjfaq--layout-split .rjfaq__layout {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--rjfaq-column-gap);
	}

	.rjfaq--layout-split .rjfaq__head {
		flex: 0 0 var(--rjfaq-split-left);
		max-width: var(--rjfaq-split-left);
	}

	.rjfaq--layout-split .rjfaq__body {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
	}
}

/* On iPad and mobile the Elementor page container already supplies the shared
 * Cure-inspired page gutter. Do not add a second inset here: the FAQ heading,
 * intro, rows and toggle must sit on the same vertical guides as the page H1. */
@media (max-width: 1024px) {
	.rjfaq__inner {
		max-width: none;
		padding-right: 0;
		padding-left: 0;
	}

	.rjfaq__question-text {
		font-family: "Inter", Arial, sans-serif !important;
		font-size: 24px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		letter-spacing: normal !important;
	}

	.rjfaq__trigger {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.rjfaq__inner {
		padding-right: 0;
		padding-left: 0;
	}

	.rjfaq__body {
		margin-top: 24px;
	}

	.rjfaq__question-text {
		font-size: 21px !important;
		line-height: 1.4 !important;
	}

	.rjfaq__trigger {
		align-items: center;
		gap: 16px;
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.rjfaq__toggle {
		margin-top: 0;
	}
}

/* Overflow safety on small screens ----------------------------------------- */

.rjfaq__trigger,
.rjfaq__answer {
	max-width: 100%;
}

/* Samarbeid: continuation link rendered after the complete local FAQ. */
.rjfaq-all-link-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 24px auto 0;
}

.rjfaq-all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 44px;
	padding: 8px 0;
	color: #1d1d1d;
	font-family: "Courier Prime", ui-monospace, "Courier New", monospace;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-decoration: none;
	transition: color 180ms ease, transform 180ms ease;
}

.rjfaq-all-link:hover,
.rjfaq-all-link:focus-visible {
	color: #666666;
	transform: translateX(3px);
}

.rjfaq-all-link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 5px;
}

@media (max-width: 767px) {
	.rjfaq-all-link-wrap {
		margin-top: 16px;
	}

	.rjfaq-all-link {
		max-width: 100%;
		min-height: 48px;
		padding: 10px 0;
		font-size: 15px;
		line-height: 1.5;
		white-space: normal;
	}
}


/* Eyebrow ------------------------------------------------------------------
 *
 * Optional small label above the heading (used for the category numbers on
 * the "Spørsmål og svar" page). Matches the editorial eyebrow already used
 * elsewhere on the site: Noto Serif Display Light, with restrained tracking.
 */

.rjfaq__eyebrow {
	margin: 0 0 16px;
	font-family: "Noto Serif Display", Georgia, serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgb(100, 102, 104);
}

/* Anchor targets -----------------------------------------------------------
 *
 * A FAQ widget given a CSS ID in Elementor becomes a link target, e.g.
 * /sporsmal-og-svar/#visuell-identitet. The site header pins itself to the
 * top on scroll, so offset the landing position with scroll-margin-top
 * (no JavaScript) to keep the category heading visible on arrival.
 */

.elementor-widget-rjfaq[id] {
	scroll-margin-top: 110px;
}

@media (max-width: 767px) {
	.rjfaq__eyebrow {
		margin-bottom: 12px;
		font-size: 14px;
	}

	.elementor-widget-rjfaq[id] {
		scroll-margin-top: 88px;
	}
}