/* =========================================================================
   Enwell Produktsektioner – Frontend-styling
   =========================================================================

   Detta är ALL generell styling för produktsektionerna på frontend.
   Redigera fritt – ändringar slår igenom på alla produkter.

   VIKTIGT – detta styrs INTE här (utan via valen i admin per produkt):
     • Sektionens bakgrundsfärg  -> sätts inline per sektion (admin: "Bakgrund")
     • Kolumnens padding         -> sätts inline per kolumn  (admin: "Padding")
     • Kolumnens vertikala justering -> klass .enps-align-*  (admin: "Vertikal justering")
   Rör alltså inte dessa som inline-stilar; de är dynamiska per produkt.
   Du kan dock ändra STANDARDVÄRDEN/ramverket runt dem här nedan.

   Tips: FAQ-reglerna neutraliserar Elementors egna accordion-variabler
   (--n-accordion-*) på wrappern, så utseendet blir likadant oavsett tema
   eller sida. Ändra hellre variablerna under :root än enskilda regler.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. VARIABLER  (ändra färger och nyckeltal på ETT ställe)
   ---------------------------------------------------------------------- */
:root {
	/* Typsnitt – styr typsnittet för hela sektionen.
	   "inherit" = ärv temats typsnitt. Byt till t.ex. 'Poppins', sans-serif
	   för att tvinga ett eget typsnitt (måste laddas av temat eller separat). */
	--enps-font-family:       "Inter", sans-serif;
	--enps-faq-title-weight:  500;       /* tjocklek på frågan */

	/* FAQ-rubrik */
	--enps-faq-bg:            #1B4B66;   /* blå bakgrund på frågan */
	--enps-faq-text:          #FFFFFF;   /* text + ikon på frågan */
	--enps-faq-title-size:    20px;      /* frågans textstorlek (desktop) */
	--enps-faq-title-size-mobile: 18px;
	--enps-faq-icon-size:     20px;      /* storlek på chevron-ikonen */
	--enps-faq-title-padding: 1em 1em 1em 2em; /* padding i frågans rad */
	--enps-faq-icon-gap:      16px;      /* mellanrum text <-> ikon */

	/* FAQ-svar */
	--enps-faq-answer-font:    "Poppins", sans-serif; /* svarets typsnitt */
	--enps-faq-answer-padding: 1em;      /* padding i svaret */
	--enps-faq-answer-border: 1px solid #DADDE0; /* svarets ram (sidor + botten) */
	--enps-faq-answer-size:   16px;      /* svarets textstorlek */
	--enps-faq-answer-color:  #333333;   /* svarets textfärg */
	--enps-faq-answer-line-height: 1.6;  /* radavstånd i svaret */
	--enps-faq-answer-weight: 400;       /* tjocklek på svarstexten */
	--enps-faq-answer-link-color: var(--enps-faq-bg); /* länkfärg i svaret */
	--enps-faq-gap:           0.5em;     /* mellanrum mellan frågor */

	/* Layout (en/två kolumner) */
	--enps-max-width:         100%;      /* standardbredd – ärver containern. Sätt t.ex. 1140px för global gräns, eller ange per sektion i admin */
	--enps-col-gap:           40px;      /* mellanrum mellan kolumner */
	/* Sektions-padding styrs per sektion i admin (default 90/30).
	   Ändra standard globalt via ENPS_SECTION_PAD_* i PHP-filen. */
	--enps-widget-gap:        20px;      /* avstånd mellan widgets i en kolumn */
}


/* -------------------------------------------------------------------------
   2. KOLUMNSEKTIONER  (typ: En kolumn / Två kolumner)
   ---------------------------------------------------------------------- */
.enps-row {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--enps-font-family);
	/* OBS: background-color + padding sätts inline per sektion (admin-val) */
}

.enps-row .enps-row-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: var(--enps-col-gap);
	width: 100%;
	max-width: var(--enps-max-width);
	margin: 0 auto;
	box-sizing: border-box;
	align-items: stretch;
	/* padding sätts inline (sektions-padding, default 90/30) */
}

.enps-row.enps-layout-two > .enps-row-inner > .enps-col {
	flex: 1 1 0 !important;
	width: 50%;
	min-width: 0;
	box-sizing: border-box;
}

.enps-row.enps-layout-one > .enps-row-inner > .enps-col {
	flex: 1 1 100% !important;
	width: 100%;
	box-sizing: border-box;
}

/* Vertikal justering av innehållet i kolumnen (admin-val: .enps-align-*) */
.enps-col {
	display: flex;
	flex-direction: column;
	/* padding sätts inline per kolumn (admin-val) */
}
.enps-col.enps-align-top    { justify-content: flex-start; }
.enps-col.enps-align-center { justify-content: center; }
.enps-col.enps-align-bottom { justify-content: flex-end; }

/* Widgets inuti kolumnen */
.enps-col .elementor-widget {
	margin-bottom: var(--enps-widget-gap);
	width: 100%;
}
.enps-col .elementor-widget:last-child {
	margin-bottom: 0;
}
.enps-col .elementor-widget-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Mobil: stapla kolumner */
@media (max-width: 767px) {
	.enps-row .enps-row-inner {
		flex-direction: column !important;
		gap: 24px;
	}
	.enps-row.enps-layout-two > .enps-row-inner > .enps-col {
		flex: 1 1 100% !important;
		width: 100%;
	}
}


/* -------------------------------------------------------------------------
   3. FAQ-SEKTION  (typ: FAQ)
   ---------------------------------------------------------------------- */

/* Yttre wrapper.
   Här "matar" vi Elementors egna accordion-variabler med VÅRA värden, så att
   Elementors regel (.elementor-widget-n-accordion .e-n-accordion-item-title)
   producerar rätt utseende även för egenskaper vi inte överskriver direkt.
   Det gör pluginet självständigt – samma utseende oavsett tema/sida. */
.enps-faq-accordion {
	--n-accordion-border-width: 0;
	--n-accordion-border-color: transparent;
	--n-accordion-border-style: none;
	--n-accordion-border-radius: 0;
	--n-accordion-padding: var(--enps-faq-title-padding);
	--n-accordion-icon-gap: var(--enps-faq-icon-gap);
	--n-accordion-title-normal-color: var(--enps-faq-text);
	--n-accordion-title-hover-color: var(--enps-faq-text);
	--n-accordion-title-active-color: var(--enps-faq-text);
	--n-accordion-title-justify-content: space-between;
	--n-menu-title-flex-grow: initial;
	--n-accordion-icon-size: var(--enps-faq-icon-size);
	--n-accordion-icon-normal-color: var(--enps-faq-text);
	--n-accordion-icon-hover-color: var(--enps-faq-text);
	--n-accordion-icon-active-color: var(--enps-faq-text);
	font-family: var(--enps-font-family);
}
.enps-faq-accordion,
.enps-faq-accordion .e-n-accordion-item-title,
.enps-faq-accordion .e-n-accordion-item-title-text,
.enps-faq-accordion .e-con,
.enps-faq-accordion .e-con * {
	font-family: var(--enps-font-family);
}

/* Yttre wrapper */
.enps-faq {
	width: 100%;
	box-sizing: border-box;
	/* background-color + padding sätts inline per sektion (admin-val) */
}
.enps-faq .enps-faq-inner {
	max-width: var(--enps-max-width);
	margin: 0 auto;
	box-sizing: border-box;
	/* padding sätts inline (sektions-padding, default 90/30) */
}
.enps-faq .enps-faq-heading {
	margin: 0 0 24px;
	font-family: var(--enps-font-family);
}

/* Accordion-lista */
.enps-faq-accordion .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.enps-faq-accordion .e-n-accordion-item {
	border: 0 !important;
	border-radius: 0;
	overflow: hidden;
	background: transparent;
	margin-bottom: var(--enps-faq-gap) !important; /* avstånd mellan frågor */
}
.enps-faq-accordion .e-n-accordion-item:last-child {
	margin-bottom: 0 !important;
}

/* 3a. Frågans rad (blå, vit text, ikon till höger).
   Selektorn använder .elementor-widget-n-accordion för att matcha Elementors
   egen specificitet (två klasser) + !important där det krävs. */
.enps-faq-accordion.elementor-widget-n-accordion .e-n-accordion-item-title,
.enps-faq-accordion .e-n-accordion-item-title {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--enps-faq-icon-gap) !important;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
	background: var(--enps-faq-bg) !important;
	color: var(--enps-faq-text) !important;
	padding: var(--enps-faq-title-padding) !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0;
	list-style: none;
	font-family: var(--enps-font-family);
	font-weight: var(--enps-faq-title-weight);
	flex-grow: initial !important;
}
/* Dölj webbläsarens/Elementors egna markörer så bara vår ikon syns */
.enps-faq-accordion .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.enps-faq-accordion .e-n-accordion-item-title::marker { content: ""; }
.enps-faq-accordion summary.e-n-accordion-item-title::before,
.enps-faq-accordion summary.e-n-accordion-item-title::after {
	display: none !important;
	content: none !important;
}

/* Frågans text (vänster) */
.enps-faq-accordion .e-n-accordion-item-title-header {
	flex: 1 1 auto !important;
	order: 1 !important;
	min-width: 0;
}
.enps-faq-accordion .e-n-accordion-item-title-header,
.enps-faq-accordion .e-n-accordion-item-title-text {
	color: var(--enps-faq-text);
	font-size: var(--enps-faq-title-size);
	line-height: 1.3;
}

/* Ikonen (höger) */
.enps-faq-accordion .e-n-accordion-item-title-icon {
	color: var(--enps-faq-text) !important;
	display: flex !important;
	align-items: center;
	flex: 0 0 auto !important;
	order: 2 !important;
	margin-left: auto !important;
}
.enps-faq-accordion .e-n-accordion-item-title-icon i {
	color: var(--enps-faq-text) !important;
	font-size: var(--enps-faq-icon-size);
}
/* Matchar Elementors egen selektor (.elementor-widget-n-accordion ...
   .e-n-accordion-item-title-icon span>i) så ikonstorleken styrs härifrån. */
.enps-faq-accordion.elementor-widget-n-accordion .e-n-accordion-item-title-icon span > i,
.enps-faq-accordion .e-n-accordion-item-title-icon span > i {
	color: var(--enps-faq-text) !important;
	font-size: var(--enps-faq-icon-size) !important;
}

/* Visa rätt ikon (upp/ner) beroende på öppen/stängd */
.enps-faq-accordion .e-n-accordion-item-title-icon .e-opened { display: none; }
.enps-faq-accordion .e-n-accordion-item-title-icon .e-closed { display: inline-flex; }
.enps-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened { display: inline-flex; }
.enps-faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed { display: none; }

/* 3b. Svaret – transparent bakgrund, ram på sidor + botten men INTE topp
   (så det visuellt hänger ihop med den blå frågan ovanför) */
.enps-faq-accordion .e-n-accordion-item > .e-con {
	background: transparent;
	border: var(--enps-faq-answer-border) !important;
	border-top: 0 !important;
	margin-top: 0 !important;
	padding: var(--enps-faq-answer-padding);
}

/* Svarets text – styr typsnitt, storlek, färg, radavstånd och vikt.
   Träffar både direkt text och text inuti text-editor-widgeten. */
.enps-faq-accordion .e-n-accordion-item > .e-con,
.enps-faq-accordion .e-n-accordion-item > .e-con p,
.enps-faq-accordion .e-n-accordion-item > .e-con li,
.enps-faq-accordion .e-n-accordion-item .elementor-widget-text-editor,
.enps-faq-accordion .e-n-accordion-item .elementor-widget-text-editor p,
.enps-faq-accordion .e-n-accordion-item .elementor-widget-text-editor li {
	font-family: var(--enps-faq-answer-font);
	font-size: var(--enps-faq-answer-size);
	color: var(--enps-faq-answer-color);
	line-height: var(--enps-faq-answer-line-height);
	font-weight: var(--enps-faq-answer-weight);
}

/* Länkar i svaret */
.enps-faq-accordion .e-n-accordion-item > .e-con a {
	color: var(--enps-faq-answer-link-color);
}

.enps-faq-accordion .e-n-accordion-item .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Mobil */
@media (max-width: 767px) {
	.enps-faq-accordion .e-n-accordion-item-title {
		padding: 16px 20px;
	}
	.enps-faq-accordion .e-n-accordion-item-title-text {
		font-size: var(--enps-faq-title-size-mobile);
	}
	.enps-faq-accordion .e-n-accordion-item > .e-con {
		padding: 16px 20px 20px;
	}
}