/* iWater – Support */

.iw-sup {
	/* Hooked into Kadence's palette with the theme's real values as fallbacks.
	   Verified: palette1 #041a27, palette2 #123f5a, palette4 #334651,
	   palette7 #c3b6a1, palette8 #e8e4e1. The existing [iwater_faq] snippet uses
	   palette1 too — matching it keeps the two accordions pixel-identical while
	   both systems coexist. */
	--iwsup-navy: var(--global-palette1, #041a27);
	--iwsup-ink: var(--global-palette4, #334651);
	--iwsup-accent: var(--global-palette2, #123f5a);
	--iwsup-open: var(--global-palette7, #c3b6a1);
	--iwsup-closed: #ddd7cf;
	--iwsup-closed-hover: #d4cdc3;
	--iwsup-card: var(--global-palette8, #e8e4e1);
	--iwsup-body: #fff;
	--iwsup-muted: #6b7480;
	--iwsup-radius: 14px;
}

.iw-sup * {
	box-sizing: border-box;
}

.iw-sup [hidden] {
	display: none !important;
}

.iw-sup-h2 {
	margin: 0 0 18px;
	color: var(--iwsup-navy);
}

/* Two of our blocks stacked directly on each other — the product tab renders
   [iw_sup_manualer] and [iw_sup_faq] back to back — otherwise leave the second
   heading sitting flush against the accordion above it. Set on the following
   sibling rather than as a bottom margin on every block, so a block that ends a
   container adds no trailing space. Blocks placed separately in Kadence are not
   siblings and are unaffected. */
.iw-sup + .iw-sup {
	margin-top: 40px;
}

/* -------------------------------------------------------------- breadcrumbs */

.iw-sup-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	color: var(--iwsup-muted);
	font-size: 14px;
}

.iw-sup-crumbs a {
	color: var(--iwsup-muted);
	text-decoration: none;
}

.iw-sup-crumbs a:hover {
	color: var(--iwsup-navy);
	text-decoration: underline;
}

.iw-sup-crumb-current {
	color: var(--iwsup-navy);
}

/* ------------------------------------------------------------------ search */

.iw-sup-search {
	margin-bottom: 24px;
}

.iw-sup-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.iw-sup-search-icon {
	position: absolute;
	left: 18px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--iwsup-muted);
	border-radius: 50%;
	pointer-events: none;
}

.iw-sup-search-icon::after {
	content: "";
	position: absolute;
	top: 13px;
	left: 12px;
	width: 7px;
	height: 2px;
	background: var(--iwsup-muted);
	transform: rotate(45deg);
}

.iw-sup .iw-sup-search-input {
	width: 100%;
	padding: 16px 20px 16px 48px;
	border: 1px solid var(--iwsup-closed);
	border-radius: 999px;
	background: var(--iwsup-body);
	color: var(--iwsup-navy);
	font-size: 16px;
	line-height: 1.3;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.iw-sup .iw-sup-search-input:focus {
	border-color: var(--iwsup-accent);
	outline: none;
}

.iw-sup-search-input::-webkit-search-cancel-button {
	cursor: pointer;
}

.iw-sup-search--inline {
	margin-bottom: 16px;
}

/* ------------------------------------------------------- count / empty state */

.iw-sup-count,
.iw-sup-empty {
	margin: 12px 0 0;
	color: var(--iwsup-muted);
	font-size: 15px;
}

/* ------------------------------------------------------------------- grids */

.iw-sup-grid {
	display: grid;
	gap: 28px 24px;
	grid-template-columns: repeat(var(--iwsup-cols, 3), minmax(0, 1fr));
}

.iw-sup-cols-1 { --iwsup-cols: 1; }
.iw-sup-cols-2 { --iwsup-cols: 2; }
.iw-sup-cols-3 { --iwsup-cols: 3; }
.iw-sup-cols-4 { --iwsup-cols: 4; }
.iw-sup-cols-5 { --iwsup-cols: 5; }
.iw-sup-cols-6 { --iwsup-cols: 6; }

.iw-sup-group-title {
	margin: 0 0 10px;
	color: var(--iwsup-navy);
	font-size: 17px;
	line-height: 1.3;
}

.iw-sup .iw-sup-links {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.iw-sup .iw-sup-links li {
	margin: 0 0 6px;
	padding: 0;
	list-style: none !important;
}

.iw-sup-links a {
	color: var(--iwsup-ink);
	font-size: 15px;
	text-decoration: none;
}

.iw-sup-links a:hover {
	color: var(--iwsup-accent);
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.iw-sup-cols-4,
	.iw-sup-cols-5,
	.iw-sup-cols-6 { --iwsup-cols: 3; }
}

@media (max-width: 782px) {
	.iw-sup-grid { --iwsup-cols: 2 !important; }
}

@media (max-width: 560px) {
	.iw-sup-grid { --iwsup-cols: 1 !important; }
}

/* --------------------------------------------------------------- accordion */

.iw-sup-acc {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.iw-sup-acc-item {
	background: transparent;
}

.iw-sup .iw-sup-acc-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 22px 26px;
	border: 0;
	border-radius: var(--iwsup-radius);
	background: var(--iwsup-closed);
	color: var(--iwsup-navy);
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .2s ease;
}

.iw-sup .iw-sup-acc-q:hover {
	background: var(--iwsup-closed-hover);
	color: var(--iwsup-navy);
}

.iw-sup .iw-sup-acc-open .iw-sup-acc-q,
.iw-sup .iw-sup-acc-open .iw-sup-acc-q:hover,
.iw-sup .iw-sup-acc-open .iw-sup-acc-q:focus {
	background: var(--iwsup-open);
	color: var(--iwsup-navy);
}

.iw-sup .iw-sup-acc-q:focus-visible {
	outline: 2px solid var(--iwsup-navy);
	outline-offset: -2px;
}

.iw-sup-acc-icon {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .25s ease;
}

.iw-sup-acc-open .iw-sup-acc-icon {
	transform: translateY(2px) rotate(-135deg);
}

.iw-sup-acc-a {
	height: 0;
	overflow: hidden;
	border-radius: var(--iwsup-radius);
	background: var(--iwsup-body);
	transition: height .28s ease;
}

.iw-sup-acc-a:not([hidden]) {
	margin-top: 8px;
}

.iw-sup-acc-a-inner {
	padding: 20px 26px 24px;
	color: var(--iwsup-navy);
	font-size: 16px;
	line-height: 1.65;
}

.iw-sup-acc-a-inner > :first-child { margin-top: 0; }
.iw-sup-acc-a-inner > :last-child { margin-bottom: 0; }

.iw-sup-acc-a-inner a {
	color: var(--iwsup-navy);
	text-decoration: underline;
}

.iw-sup-acc-a-inner img,
.iw-sup-acc-a-inner iframe {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (max-width: 600px) {
	.iw-sup .iw-sup-acc-q { padding: 18px; font-size: 16px; }
	.iw-sup-acc-a-inner { padding: 4px 18px 20px; }
}

/* ------------------------------------------------------------------- chips */

.iw-sup-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.iw-sup .iw-sup-chip {
	/* Anchors now, so the theme's link styling has to be undone explicitly. */
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--iwsup-closed);
	border-radius: 999px;
	background: transparent;
	color: var(--iwsup-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.iw-sup .iw-sup-chip:hover,
.iw-sup .iw-sup-chip:focus-visible {
	border-color: var(--iwsup-accent);
	color: var(--iwsup-ink);
	text-decoration: none;
}

.iw-sup .iw-sup-chip.is-active:hover,
.iw-sup .iw-sup-chip.is-active:focus-visible {
	color: #fff;
}

.iw-sup .iw-sup-chip.is-active {
	border-color: var(--iwsup-navy);
	background: var(--iwsup-navy);
	color: #fff;
}

/* ----------------------------------------------------------- scroll-mål */

/* The header is sticky (top_main_bottom), so a block scrolled to the very top of
   the viewport lands underneath it. scroll-margin-top reserves that space —
   applied to .iw-sup rather than the FAQ block alone so every deep link the
   plugin can produce gets the same landing. */
.iw-sup {
	scroll-margin-top: var(--iwsup-scroll-offset, 160px);
}

@media (max-width: 720px) {
	.iw-sup { --iwsup-scroll-offset: 90px; }
}

/* ------------------------------------------------------- kategori-knapper */

.iw-sup-katbtns-grid {
	display: grid;
	/* Wide horizontally, tight vertically: the buttons should read as separate
	   choices side by side, but stacked rows still belong to one group. Below the
	   breakpoint the grid is single-column, so column-gap simply stops applying. */
	row-gap: 16px;
	column-gap: 4em;
	/* minmax(0, 1fr) rather than a bare 1fr: a long category name would otherwise
	   set the column's min-content width and blow the grid past its container. */
	grid-template-columns: repeat(var(--iwsup-katcols, 2), minmax(0, 1fr));
}

@media (max-width: 720px) {
	.iw-sup-katbtns-grid { grid-template-columns: 1fr; }
}

.iw-sup .iw-sup-katbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	padding: 18px 24px;
	border: 1px solid var(--iwsup-closed);
	border-radius: var(--iwsup-radius);
	background: #fff;
	color: var(--iwsup-navy);
	font-family: inherit;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.iw-sup .iw-sup-katbtn:hover,
.iw-sup .iw-sup-katbtn:focus-visible {
	border-color: var(--iwsup-navy);
	background: var(--iwsup-navy);
	color: #fff;
	text-decoration: none;
}

/* ------------------------------------------------------------------ video */

.iw-sup-video {
	position: relative;
	border-radius: var(--iwsup-radius);
	overflow: hidden;
	background: var(--iwsup-card);
}

.iw-sup-video--bunny .bunny-stream-video,
.iw-sup-video--bunny > div {
	border-radius: var(--iwsup-radius);
	overflow: hidden;
}

/* A definite height is what makes object-fit: cover meaningful — without it the
   box shrinks to the media's own height and there is nothing to cover. Scoped to
   --fil: the Bunny embed brings its own ratio wrapper and must not be boxed. */
.iw-sup-video--fil {
	aspect-ratio: var(--iwsup-ratio, 16 / 9);
	background: #000;
}

.iw-sup-video-el {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--iwsup-radius);
	/* Applies to the poster AND to the video frames — CSS cannot separate them.
	   With a matching ratio nothing is cropped; a square poster fills the box
	   instead of being letterboxed. */
	object-fit: cover;
}

/* ------------------------------------------------------------------ intro */

.iw-sup-intro {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	margin-bottom: 40px;
}

.iw-sup-intro--nomedia {
	grid-template-columns: 1fr;
}

@media (max-width: 782px) {
	.iw-sup-intro { grid-template-columns: 1fr; }
}

.iw-sup-beskrivelse > :first-child { margin-top: 0; }

/* ------------------------------------------------------------------- pdf */

.iw-sup-pdf {
	margin: 14px 0 0;
}

.iw-sup-pdf a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.iw-sup-pdf a:hover .iw-sup-pdf-text {
	text-decoration: underline;
}

.iw-sup-pdf-icon {
	flex: none;
	width: 16px;
	height: 20px;
	color: var(--iwsup-accent);
}

.iw-sup-pdf-size {
	color: var(--iwsup-muted);
	font-size: 14px;
}

/* ---------------------------------------------------------------- buttons */

.iw-sup .iw-sup-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid var(--iwsup-navy);
	border-radius: 999px;
	background: transparent;
	color: var(--iwsup-navy);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.iw-sup .iw-sup-btn:hover {
	background: var(--iwsup-navy);
	color: #fff;
}

.iw-sup .iw-sup-btn--primary {
	background: var(--iwsup-navy);
	color: #fff;
}

.iw-sup .iw-sup-btn--primary:hover {
	background: var(--iwsup-accent);
	border-color: var(--iwsup-accent);
}

/* --------------------------------------------------------------- language */

.iw-sup-lang-hint {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--iwsup-navy);
	color: #fff;
}

.iw-sup-lang-hint a {
	color: #fff;
	font-size: 15px;
	text-decoration: underline;
}

.iw-sup .iw-sup-lang-hint-close {
	flex: 0 0 auto;
	padding: 0 4px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
	box-shadow: none !important;
}

.iw-sup .iw-sup-lang-hint-close:hover {
	opacity: 1;
}

/* ----------------------------------------------------------- emne-nav */

.iw-sup-emne-nav {
	padding: 24px 26px;
	border-radius: var(--iwsup-radius);
	background: var(--iwsup-card);
}

.iw-sup-emne-nav-title {
	margin: 0 0 6px;
	color: var(--iwsup-navy);
	font-size: 18px;
	line-height: 1.3;
}

.iw-sup-emne-nav-desc {
	margin: 0 0 14px;
	color: var(--iwsup-muted);
	font-size: 14px;
	line-height: 1.5;
}

.iw-sup .iw-sup-emne-nav-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none !important;
}

.iw-sup .iw-sup-emne-nav-item {
	margin: 0 0 2px;
	padding: 0;
	list-style: none !important;
}

/* The current item is a white pill rather than a left bar, so every item carries
   the same padding and radius — otherwise the text would shift as you move
   between them. */
.iw-sup-emne-nav-item a {
	display: block;
	padding: 11px 14px;
	border-radius: 10px;
	color: var(--iwsup-ink);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.iw-sup-emne-nav-item a:hover {
	background: rgba(255, 255, 255, .5);
	color: var(--iwsup-navy);
}

.iw-sup-emne-nav-item.is-current a {
	background: #fff;
	color: var(--iwsup-navy);
	font-weight: 600;
}

.iw-sup-emne-nav-all {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(4, 26, 39, .1);
}

.iw-sup-emne-nav-all a {
	color: var(--iwsup-accent);
	font-size: 14px;
	text-decoration: underline;
}

/* ------------------------------------------------------------------- misc */

.iw-sup-tab-link {
	margin-top: 24px;
}

/* --------------------------------------------------------- produkt-knap */

/* Link back to the product a support page belongs to ([iw_sup_produkt]).
   The plugin's other buttons are pills; this one deliberately matches the
   site's Kadence buttons — a 10px radius — so it reads as one of the page's
   own buttons rather than a plugin element. Fill and colour already come from
   .iw-sup-btn--primary (var(--iwsup-navy) === the theme's #041a27). Appended
   last on purpose: same specificity as .iw-sup .iw-sup-btn, so source order
   is what makes 10px win over the pill. */
.iw-sup-produkt-knap .iw-sup-btn {
	border-radius: 10px;
}


/* --------------------------------------------------- FAQ results (front page) */
/* Block-level [hidden]: the plugin's generic [hidden] rule only covers descendants. */
.iw-sup.iw-sup-faqres-block[hidden] {
	display: none !important;
}
.iw-sup-faqres-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.iw-sup a.iw-sup-faqres {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px;
	border: 1px solid var(--iwsup-closed, #e3e6ea);
	border-radius: var(--iwsup-radius, 10px);
	background: #fff;
	color: var(--iwsup-navy, #041a27);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}
.iw-sup a.iw-sup-faqres:hover,
.iw-sup a.iw-sup-faqres:focus-visible {
	border-color: var(--iwsup-accent, #041a27);
	background: var(--iwsup-card, #f6f7f9);
	text-decoration: none;
}
.iw-sup-faqres-q {
	font-size: 16px;
	line-height: 1.35;
}
.iw-sup-faqres-meta {
	color: var(--iwsup-muted, #5b6670);
	font-size: 13px;
}
.iw-sup-faqres-qwrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.iw-sup-faqres-global {
	margin-top: 10px;
}

/* Per-FAQ deep link (#faq-{ID}) scrolls to + opens one question — give the item
   the same landing offset as .iw-sup so it clears the sticky header. */
.iw-sup-acc-item {
	scroll-margin-top: var(--iwsup-scroll-offset, 160px);
}