/**
 * CCTRL CHILD THEME – CSS LAYER: ELEMENTOR INTEGRATION
 * Handle suggestion in WordPress: 'cctrl-elementor'
 *
 * PURPOSE
 * - Mappar Elementor-struktur till CCTRL CSS-klasser
 * - Säkerställer att Elementor-sektioner får rätt styling
 * - Integrerar Elementor med CCTRL design tokens
 *
 * LAYERING (LOAD ORDER)
 * - Depends on:
 *     cctrl-core.css
 *     cctrl-layout.css
 *     cctrl-components.css
 * - Load AFTER: Elementor's default styles
 *
 * RULES FOR FUTURE WORK (for humans + AI)
 * - Använd CCTRL design tokens (var(--*)) för alla värden
 * - Mappa Elementor-struktur till CCTRL-klasser, inte tvärtom
 * - Behåll Elementor's flexibilitet, applicera CCTRL-styling ovanpå
 */

/* ===================================================================
   ELEMENTOR + CCTRL INTEGRATION
   ================================================================== */

/* 0. Site-wide heading scale: Elementor titles use CCTRL vars so hero is not a one-off hack */
h1.elementor-heading-title { font-size: var(--h1-size); }
h2.elementor-heading-title { font-size: var(--h2-size); }
h3.elementor-heading-title { font-size: var(--h3-size); }
h4.elementor-heading-title { font-size: var(--h4-size); }
h5.elementor-heading-title { font-size: var(--h5-size); }
h6.elementor-heading-title { font-size: var(--h6-size); }

/* 1. Sections → cctrl-section */

.elementor-section {
  width: 100%;
  max-width: none; /* Säkerställ att sections inte har max-width som begränsar */
}

/* Hero-containers OCH sections - ska gå ut till kanterna */
/* Hero är en CONTAINER (.e-con), inte en section! */
.elementor-container.cctrl-hero,
.e-con.cctrl-hero,
.elementor-section.cctrl-hero,
.elementor-container[class*="hero"],
.e-con[class*="hero"],
.elementor-section[class*="hero"],
.elementor-container[data-hero-full-width="true"],
.e-con[data-hero-full-width="true"],
.elementor-section[data-hero-full-width="true"],
.elementor-section.cctrl-hero {
  background: var(--lav-900); /* Mörk bakgrund - samma färg som rubriker */
  color: #ffffff;
  padding-block: clamp(80px, 12vw, 160px);
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
  /* Hero ska gå ut till kanterna - använd viewport width och negativa margins */
  width: 100vw;
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  /* Ta bort mask-image fade */
  mask-image: none;
  -webkit-mask-image: none;
}

/* Hero-containers OCH sections ska ALDRIG ha max-width */
/* ÖVERSTYR alla regler som kan sätta max-width på hero */
.elementor-container.cctrl-hero,
.e-con.cctrl-hero,
.elementor-section.cctrl-hero,
.elementor-container.cctrl-hero.cctrl-container,
.e-con.cctrl-hero.cctrl-container,
.elementor-section.cctrl-hero.cctrl-section,
.public-page .elementor-container.cctrl-hero,
.public-page .e-con.cctrl-hero,
.public-page .elementor-section.cctrl-hero,
body:has(.public-page) .elementor-container.cctrl-hero,
body:has(.public-page) .e-con.cctrl-hero,
body:has(.public-page) .elementor-section.cctrl-hero,
.elementor-page-wrapper .elementor-container.cctrl-hero,
.elementor-page-wrapper .e-con.cctrl-hero,
.elementor-page-wrapper .elementor-section.cctrl-hero,
.cctrl-main .elementor-container.cctrl-hero,
.cctrl-main .e-con.cctrl-hero,
.cctrl-main .elementor-section.cctrl-hero {
  max-width: none;
  width: 100vw;
}

/* Hero gradient overlay – backup 25-nov (wave-song radial) */
.elementor-container.cctrl-hero::before,
.e-con.cctrl-hero::before,
.elementor-section.cctrl-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(
    circle at 30% 30%,
    var(--wave-song-500, #7eb3d8) 0%,
    color-mix(in srgb, var(--wave-song-500, #7eb3d8) 80%, var(--lav-900, #3d3e66) 20%) 40%,
    color-mix(in srgb, var(--wave-song-500, #7eb3d8) 40%, var(--lav-900, #3d3e66) 60%) 70%,
    var(--lav-900, #3d3e66) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Hero inner container – backup 25-nov: var(--content-max-public), centrerad */
.elementor-container.cctrl-hero > .elementor-container,
.e-con.cctrl-hero > .elementor-container,
.elementor-section.cctrl-hero > .elementor-container {
  position: relative;
  z-index: 1;
  background: transparent;
  max-width: var(--content-max-public) !important;
  margin-inline: auto !important;
  padding-inline: var(--section-pad-x);
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Hero: bara färg och layout – storlek/vikt från cctrl-core (h1/h2), rubriker fungerar på hela siten */
.elementor-container.cctrl-hero .elementor-heading-title,
.e-con.cctrl-hero .elementor-heading-title,
.elementor-section.cctrl-hero .elementor-heading-title,
.elementor-section.cctrl-hero h1,
.elementor-section.cctrl-hero h2,
.e-con.cctrl-hero h1,
.e-con.cctrl-hero h2 {
  color: #ffffff !important;
  margin: 0 auto var(--space-4) !important;
  text-align: center !important;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

/* Hero text – backup 25-nov: 60ch, centrerad */
.elementor-container.cctrl-hero .elementor-widget-text-editor,
.e-con.cctrl-hero .elementor-widget-text-editor,
.elementor-section.cctrl-hero .elementor-widget-text-editor {
  font-size: clamp(1.125rem, 1.125rem + 0.5vw, 1.5rem);
  line-height: 1.6;
  color: color-mix(in srgb, #ffffff, transparent 10%);
  margin: 0 auto var(--space-3) !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 60ch !important;
}

.elementor-container.cctrl-hero .elementor-widget-text-editor p,
.e-con.cctrl-hero .elementor-widget-text-editor p,
.elementor-section.cctrl-hero .elementor-widget-text-editor p {
  color: color-mix(in srgb, #ffffff, transparent 10%);
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  width: 100% !important;
}

/* Säkerställ att alla widgets i hero är centrerade */
.elementor-container.cctrl-hero .elementor-widget,
.e-con.cctrl-hero .elementor-widget,
.elementor-section.cctrl-hero .elementor-widget {
  text-align: center !important;
  width: 100% !important;
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.elementor-container.cctrl-hero .elementor-widget-container,
.e-con.cctrl-hero .elementor-widget-container,
.elementor-section.cctrl-hero .elementor-widget-container {
  text-align: center !important;
  width: 100% !important;
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Containers → cctrl-container (en källa: cctrl-layout + denna fil; public.css överstyrar inte) */

.elementor-container,
.e-con {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

/* Inre containrar/kolumner ska INTE stapla sidopadding – bara sektionens direkta container.
   !important vinner över Elementors inline padding/content-width.
   UTAN .e-loop-item – loop-kort (byggstenar, blogg etc.) ska ha inre padding; de är .e-con. */
.public-page .cctrl-section > .e-con .e-con:not(.e-loop-item),
.public-page .cctrl-section > .e-con .elementor-container,
.public-page .cctrl-section > .elementor-container .e-con:not(.e-loop-item),
.public-page .cctrl-section > .elementor-container .elementor-container,
body:has(.public-page) .cctrl-section > .e-con .e-con:not(.e-loop-item),
body:has(.public-page) .cctrl-section > .e-con .elementor-container,
body:has(.public-page) .cctrl-section > .elementor-container .e-con:not(.e-loop-item),
body:has(.public-page) .cctrl-section > .elementor-container .elementor-container,
.cctrl-container .e-con:not(.e-loop-item),
.cctrl-container .elementor-container,
.cctrl-container .cctrl-container,
/* Sektion som ÄR container (cctrl-section.cctrl-container): bara direkta barn ska ha 0 */
.public-page .cctrl-section.cctrl-container > .e-con:not(.e-loop-item),
.public-page .cctrl-section.cctrl-container > .e-con .e-con:not(.e-loop-item),
.public-page .cctrl-section.cctrl-container > .e-con .cctrl-container,
body:has(.public-page) .cctrl-section.cctrl-container > .e-con:not(.e-loop-item),
body:has(.public-page) .cctrl-section.cctrl-container > .e-con .e-con:not(.e-loop-item),
body:has(.public-page) .cctrl-section.cctrl-container > .e-con .cctrl-container,
.public-page .cctrl-main .e-con .e-con:not(.e-loop-item),
.public-page .cctrl-main .e-con .elementor-container,
body:has(.public-page) .cctrl-main .e-con .e-con:not(.e-loop-item),
body:has(.public-page) .cctrl-main .e-con .elementor-container,
/* Samma för sektioner utan cctrl-section (t.ex. om klassen saknas i Elementor) */
.public-page .elementor-section > .e-con .e-con:not(.e-loop-item),
.public-page .elementor-section > .e-con .elementor-container,
.public-page .elementor-section > .elementor-container .e-con:not(.e-loop-item),
body:has(.public-page) .elementor-section > .e-con .e-con:not(.e-loop-item),
body:has(.public-page) .elementor-section > .e-con .elementor-container,
body:has(.public-page) .elementor-section > .elementor-container .e-con:not(.e-loop-item) {
  padding-inline: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Loop-kort padding: EN KÄLLA = cctrl-patterns.css (.e-loop-item .card .e-con-inner).
   CURSOR_WORK [loop-card-padding]: .e-con-inner ingår INTE i padding-inline: 0-blocket ovan. */

/* Kort som Elementor-container/sektion: säkerställ rundade hörn (Elementor kan annars åsidosätta) */
.e-con.card,
.elementor-container.card,
.elementor-section.card {
  border-radius: var(--radius-md, 16px) !important;
  overflow: hidden;
}

/* Public-sidor: Bredare container (1280px), tight (800px) under hero */
.public-page .elementor-container,
.public-page .e-con,
body:has(.public-page) .elementor-container,
body:has(.public-page) .e-con {
  max-width: var(--content-max-public);
}

/* Sektion (ej hero): backup 25-nov 1200px överallt – tight (800px) inaktiverad */
.public-page .elementor-section:not(.cctrl-hero) > .elementor-container,
.public-page .elementor-section:not(.cctrl-hero) > .e-con,
body:has(.public-page) .elementor-section:not(.cctrl-hero) > .elementor-container,
body:has(.public-page) .elementor-section:not(.cctrl-hero) > .e-con {
  max-width: var(--content-max-public);
}

/* Byggstenar-sektion: samma bredd som övriga (1200px) */
.public-page .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) > .e-con,
.public-page .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) > .elementor-container,
body:has(.public-page) .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) > .e-con,
body:has(.public-page) .cctrl-section:has(.e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"])) > .elementor-container {
  max-width: var(--content-max-public);
  width: 100%;
}

/* Rundade kanter på första sektionen efter hero - samma som korten */
/* VIKTIGT: overflow: hidden skapar en ny stacking context vilket förstör z-index mellan sektioner */
/* Använd border-radius på container istället för overflow: hidden */
.public-page .elementor-section.cctrl-hero + .elementor-section,
body:has(.public-page) .elementor-section.cctrl-hero + .elementor-section {
  margin-top: calc(var(--space-6) * -1);
  padding-top: var(--space-6);
  background: var(--bg); /* Använder CSS-variabel som ändras automatiskt i dark mode */
  background-color: var(--bg);
  position: relative;
  z-index: 0;
  /* Rundade kanter på section - samma som korten */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  overflow: hidden; /* För att hålla innehåll inom rundade kanter */
}

/* Säkerställ att container också har rundade kanter */
.public-page .elementor-section.cctrl-hero + .elementor-section > .elementor-container,
body:has(.public-page) .elementor-section.cctrl-hero + .elementor-section > .elementor-container {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

/* RSS Aggregator z-index rules removed - styling reset 2026-01-18 */

/* Fade borttagen - användaren vill inte ha fade */

/* Överstyr Elementor page wrapper begränsningar - tillåt hero att gå utanför */
.elementor-page-wrapper {
  overflow-x: visible;
  max-width: 100%;
  width: 100%;
  /* Säkerställ att wrapper inte begränsar bredden */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Hero-sektioner ska gå UTANFÖR .cctrl-main wrapper */
/* Main ska INTE begränsa hero - hero ska vara helt oberoende */
/* Använd samma teknik som navigeringen: positionera relativt till viewport */
.public-page .cctrl-main .elementor-section.cctrl-hero,
body:has(.public-page) .cctrl-main .elementor-section.cctrl-hero {
  /* Hero ska gå utanför main helt */
  /* Använd calc() för att gå från main's position till viewport's kanter */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
  max-width: none;
}

/* Överstyr body/html begränsningar för att tillåta hero full width */
body.public-page,
body:has(.public-page) {
  overflow-x: visible;
}

.public-page .cctrl-main,
body:has(.public-page) .cctrl-main {
  overflow-x: visible;
}

/* 3. Widgets → CCTRL styling */

/* Headings */
.elementor-widget-heading .elementor-heading-title {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--lav-900);
  margin: 0 0 var(--space-3);
  line-height: 1.15;
}

.elementor-widget-heading h1.elementor-heading-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.elementor-widget-heading h2.elementor-heading-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Text editor */
.elementor-widget-text-editor {
  color: var(--ink);
  line-height: 1.6;
}

.elementor-widget-text-editor p {
  margin: 0 0 var(--space-2);
}

.elementor-widget-text-editor.ingress {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Images */
.elementor-widget-image {
  margin: var(--space-4) 0;
}

/* Exception: No margin/border-radius for images inside cards */
.card .elementor-widget-image,
.card__media .elementor-widget-image {
  margin: 0;
}

.card__media .elementor-widget-image img {
  border-radius: 0;
}

/* Standard bilder - med rundade hörn */
.elementor-widget-image img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  display: block;
}

/* Elementor Image med figcaption - dekorativ bild (ingen lightbox) */
/* AGGRESSIVE OVERRIDE: Override ALL BuddyBoss and Elementor Kit styles */
.elementor-widget-image figure,
.elementor-widget-image figure.wp-caption,
.elementor-widget-image .wp-caption,
.elementor-widget-image figure.wp-caption.aligncenter,
.elementor-widget-image figure.wp-caption.alignleft,
.elementor-widget-image figure.wp-caption.alignright,
.elementor-widget-image figure.wp-caption.alignnone,
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.alignnone {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Centrera inline figcaption */
  text-align: center !important; /* Centrera text i figcaption */
  background: transparent !important; /* INGEN grå bakgrund - override BuddyBoss */
  background-color: transparent !important; /* INGEN grå bakgrund - override BuddyBoss #e6e6e6 */
  padding: 0 !important; /* Ingen padding som kan skapa bakgrund */
  border: none !important; /* Ingen border */
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important; /* Ingen shadow */
  max-width: 100% !important;
  overflow: visible !important; /* Visible så att figcaption kan ligga utanför om nödvändigt */
  width: 100% !important;
  position: relative !important; /* För att figcaption ska kunna positioneras relativt */
}

.elementor-widget-image figure img {
  border-radius: var(--radius-md) !important; /* Rundade kanter på alla hörn */
  width: 100%;
  height: auto;
  display: block;
  /* INGEN cursor: zoom-in - dekorativa bilder ska inte ha lightbox */
  cursor: default !important;
}

.elementor-widget-image figure figcaption,
.elementor-widget-image figure .widget-image-caption,
.elementor-widget-image figure .wp-caption-text,
.elementor-widget-image .widget-image-caption,
.elementor-widget-image .wp-caption-text,
.wp-caption-text,
.wp-caption .wp-caption-text,
figure figcaption,
figure .wp-caption-text {
  /* Highlighter-stil: bakgrund följer varje rad */
  font-size: clamp(0.95rem, 2.5vw, 1.15rem) !important;
  font-style: normal !important;
  font-family: "Bangers", "Comic Neue", "Comic Sans MS", cursive !important;
  font-weight: normal !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 2.2 !important; /* Mer radavstånd för tydlig separation mellan rader */
  /* Mörkblå bakgrund som följer texten */
  background: #1e2a5e !important; /* Mörkblå */
  background-color: #1e2a5e !important;
  /* Box-decoration-break gör att bakgrunden följer varje rad */
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  /* Padding runt varje rad av text */
  padding: 0.15rem 0.5rem !important;
  border: none !important;
  box-shadow: none !important;
  /* Centrerad under bilden */
  margin: 0.5rem auto 0 auto !important;
  /* Inline så bakgrunden bara täcker texten */
  width: auto !important;
  max-width: 90% !important;
  display: inline !important;
  /* INGA rundade hörn */
  border-radius: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Concept-bilder - INGA rundade hörn, transparent bakgrund */
.elementor-widget-image.cctrl-img-concept img,
.elementor-widget-image.cctrl-img-concept figure img {
  border-radius: 0 !important; /* INGA rundade hörn */
  background: transparent !important; /* Transparent bakgrund */
  width: 100%;
  height: auto;
  display: block;
  cursor: default !important;
}

.elementor-widget-image.cctrl-img-concept figure {
  background: transparent !important; /* Säkerställ att figure också är transparent */
}

.elementor-widget-image.cctrl-img-concept figure figcaption,
.elementor-widget-image.cctrl-img-concept figure .widget-image-caption,
.elementor-widget-image.cctrl-img-concept figure .wp-caption-text {
  /* Samma highlighter-stil som standard bilder */
  font-size: clamp(0.95rem, 2.5vw, 1.15rem) !important;
  font-style: normal !important;
  font-family: "Bangers", "Comic Neue", "Comic Sans MS", cursive !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 2.2 !important;
  background: #1e2a5e !important; /* Mörkblå */
  background-color: #1e2a5e !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  padding: 0.15rem 0.5rem !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0.5rem auto 0 auto !important;
  width: auto !important;
  max-width: 90% !important;
  display: inline !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Om bilden HAR data-lightbox attribut, då ska den ha lightbox (cursor: zoom-in) */
.elementor-widget-image figure img[data-lightbox],
.elementor-widget-image img[data-lightbox] {
  cursor: zoom-in !important;
}

/* Säkerställ att bilder utan data-lightbox INTE får zoom-in cursor */
.elementor-widget-image img:not([data-lightbox]) {
  cursor: default !important;
}

/* Buttons – mappning av Elementor Type till design
   Default → primär (lav-500)
   Info → sekundär (outline/nedtonad)
   btn-cta (CSS-klass i Advanced) → CTA (extra prominent)
   Success/Warning/Danger → feedback-färger
   */
.elementor-widget-button .elementor-button,
.elementor-button {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  padding: 14px 24px;
  min-height: 48px;
  border-radius: var(--radius-md, 16px); /* Fluid tema: --radius-md = 16px */
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
}

/* Primär (Default type) – lav-500, standardknapp */
.elementor-widget-button .elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger):not(.btn--accent):not(.btn-cta) {
  background: var(--lav-500, #6264a7) !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Sekundär (Info type) – outline, nedtonad */
.elementor-button-info {
  background: transparent !important;
  color: var(--lav-600, #55578f) !important;
  border: 2px solid var(--lav-400, #7b7dab) !important;
}

.elementor-button-info:hover {
  background: var(--lav-50, #f8f9ff) !important;
  border-color: var(--lav-500, #6264a7) !important;
  color: var(--lav-700, #4a4b80) !important;
}

/* CTA (class btn-cta i Advanced → CSS Classes) – extra prominent */
.elementor-widget-button .elementor-button.btn-cta {
  background: var(--lav-600, #4f5199) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-size: 1.125rem;
  padding: 16px 28px;
  box-shadow: 0 4px 16px rgba(79, 81, 153, 0.3);
}

.elementor-button-success {
  background: var(--success-color, #28a745) !important;
  color: #ffffff !important;
}

.elementor-button-warning {
  background: var(--warning-color, #ffc107) !important;
  color: #000000 !important;
}

.elementor-button-danger {
  background: var(--danger-color, #dc3545) !important;
  color: #ffffff !important;
}

/* Elementor buttons - följ style guide hover states */
.elementor-widget-button .elementor-button:hover,
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61, 62, 102, 0.15);
  transition: 
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
    background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================================================
   ELEMENTOR BUTTON OVERRIDES
   =================================================================== */
/* 
 * VIKTIGT: Elementor Kit CSS har högre specificitet (.elementor-kit-{id} .elementor-button)
 * Vår CSS laddas EFTER Elementor Kit CSS, så vi kan override med samma specificitet
 * Använder [class*="elementor-kit-"] för att fungera med alla Kit ID (staging och produktion)
 */

/* Ta bort alla borders/outlines från Elementor button wrappers och containers */
.elementor-widget-button,
.elementor-widget-button .elementor-button-wrapper,
.elementor-widget-button .elementor-button-link,
.elementor-button-content-wrapper,
.elementor-button-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ta bort borders från card buttons */
.card .elementor-widget-button,
.card .elementor-button-wrapper,
.card .elementor-button-content-wrapper {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ta bort card border när card innehåller knapp i footer */
/* Detta fixar "lavender linjen" runt card som syns mot lila bakgrund */
.card:has(.card__footer .elementor-widget-button),
.card:has(.card__footer .btn),
.card:has(.card__footer button) {
  border: none !important;
  outline: none !important;
}

/* Alternativ: Ta bort border från alla cards i carousel/sektioner med lila bakgrund */
.cctrl-section--bg-soft .card:has(.card__footer),
.cctrl-section--bg-lilac .card:has(.card__footer) {
  border: none !important;
  outline: none !important;
}

/* Ghost button - NY STRATEGI: Använd all: unset för att återställa alla styles */
/* Detta tar bort ALLA Elementor Kit styles, sedan applicerar vi tema-styling */
[class*="elementor-kit-"] .elementor-widget-button .elementor-button.btn--ghost,
[class*="elementor-kit-"] .elementor-button.btn--ghost,
[class*="elementor-kit-"] button.btn--ghost,
[class*="elementor-kit-"] input[type="button"].btn--ghost,
[class*="elementor-kit-"] input[type="submit"].btn--ghost,
.elementor-widget-button .elementor-button.btn--ghost,
.elementor-button.btn--ghost,
a.btn--ghost {
  /* Återställ ALLA styles från Elementor Kit */
  all: unset;
  /* Återställ display och box-sizing som behövs */
  display: inline-block;
  box-sizing: border-box;
  /* Applicera tema-styling från cctrl-components.css .btn--ghost */
  background: transparent;
  background-color: transparent;
  color: var(--lav-500);
  border: 1px solid var(--lav-300);
  border-color: var(--lav-300);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  outline: none;
  transform: none;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  min-height: 44px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

[class*="elementor-kit-"] .elementor-widget-button .elementor-button.btn--ghost:hover,
[class*="elementor-kit-"] .elementor-widget-button .elementor-button.btn--ghost:focus,
[class*="elementor-kit-"] .elementor-button.btn--ghost:hover,
[class*="elementor-kit-"] .elementor-button.btn--ghost:focus,
[class*="elementor-kit-"] button.btn--ghost:hover,
[class*="elementor-kit-"] button.btn--ghost:focus,
[class*="elementor-kit-"] input[type="button"].btn--ghost:hover,
[class*="elementor-kit-"] input[type="button"].btn--ghost:focus,
[class*="elementor-kit-"] input[type="submit"].btn--ghost:hover,
[class*="elementor-kit-"] input[type="submit"].btn--ghost:focus,
.elementor-widget-button .elementor-button.btn--ghost:hover,
.elementor-button.btn--ghost:hover,
a.btn--ghost:hover {
  /* Matchar cctrl-components.css .btn--ghost:hover styling */
  background: var(--lav-100);
  background-color: var(--lav-100);
  color: var(--lav-600);
  border-color: var(--lav-400);
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 2px 8px rgba(61, 62, 100, 0.1);
  outline: none;
  transform: none;
}

.elementor-widget-button .elementor-button.btn-cta:hover,
.elementor-button.btn-cta:hover {
  background: var(--lav-600);
  border-color: var(--lav-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61, 62, 102, 0.15);
}

/* Ghost i dark mode – vit text, ljus kant (WCAG AA) */
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-button .elementor-button.btn--ghost,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-button.btn--ghost,
html[data-theme="dark"] [class*="elementor-kit-"] button.btn--ghost,
html[data-theme="dark"] [class*="elementor-kit-"] input[type="button"].btn--ghost,
html[data-theme="dark"] [class*="elementor-kit-"] input[type="submit"].btn--ghost,
html[data-theme="dark"] .elementor-widget-button .elementor-button.btn--ghost,
html[data-theme="dark"] .elementor-button.btn--ghost,
html[data-theme="dark"] a.btn--ghost {
  color: #f3f4fb !important;
  border-color: #aeb3da !important;
}
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-button .elementor-button.btn--ghost:hover,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-button.btn--ghost:hover,
html[data-theme="dark"] [class*="elementor-kit-"] button.btn--ghost:hover,
html[data-theme="dark"] .elementor-widget-button .elementor-button.btn--ghost:hover,
html[data-theme="dark"] .elementor-button.btn--ghost:hover,
html[data-theme="dark"] a.btn--ghost:hover {
  background: rgba(98, 100, 167, 0.25) !important;
  color: #ffffff !important;
  border-color: #696aab !important;
}

/* "Boka möte" knapp - btn-cta - match styleguide - STÖRRE TEXT */
/* CSS handles default styling, JavaScript sets inline styles when Elementor Kit override */
.elementor-widget-button .elementor-button.btn-cta,
.elementor-button.btn-cta,
a.btn-cta,
.btn-cta,
.cctrl-contact-form__header .elementor-button,
.cctrl-contact-form__header .btn-cta,
.cctrl-contact-form__header a.btn-cta {
  padding: 14px 24px; /* Lite större padding */
  border-radius: var(--radius-md);
  border: 0;
  background: var(--lav-500);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem; /* STÖRRE TEXT - från 0.95rem */
  line-height: 1.4;
  min-height: 48px; /* Lite högre för större text */
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
}

.elementor-widget-button .elementor-button.btn-cta:hover,
.elementor-button.btn-cta:hover,
a.btn-cta:hover,
.btn-cta:hover {
  background: var(--lav-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(61, 62, 102, 0.15) !important;
}

/* Elementor Button with .btn.btn--accent - match styleguide exactly */
/* Matchar cctrl-components.css .btn--accent styling */
.elementor-widget-button .elementor-button.btn.btn--accent,
.elementor-button.btn.btn--accent,
.elementor-widget-button .elementor-button.btn--accent,
.elementor-button.btn--accent {
  /* Matchar styleguide .btn grundklass */
  padding: 12px 20px !important; /* Samma som .btn */
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--terracotta-500) !important; /* 1px border, inte 2px */
  background: var(--terracotta-500) !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important; /* 600, inte 700 - matchar .btn */
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  min-height: 44px !important;
  box-shadow: 0 2px 8px rgba(61, 62, 102, 0.1) !important; /* Samma som .btn */
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), background 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.elementor-widget-button .elementor-button.btn.btn--accent:hover,
.elementor-button.btn.btn--accent:hover,
.elementor-widget-button .elementor-button.btn--accent:hover,
.elementor-button.btn--accent:hover {
  background: var(--terracotta-600) !important;
  border-color: var(--terracotta-600) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(229, 122, 85, 0.3) !important; /* Matchar styleguide */
}

.elementor-widget-button .elementor-button.btn.btn--accent:active,
.elementor-button.btn.btn--accent:active,
.elementor-widget-button .elementor-button.btn--accent:active,
.elementor-button.btn--accent:active {
  transform: translateY(0) !important;
  background: var(--terracotta-500) !important;
  border-color: var(--terracotta-500) !important;
  color: #FFFFFF !important;
}

/* Columns */
.elementor-column {
  padding: var(--space-2);
}

/* 4. Dark mode support */
/* Dark mode använder CSS-variabler som ändras automatiskt via html[data-theme="dark"] */
/* Ingen !important behövs - CSS-variabler hanterar dark mode automatiskt */

html[data-theme="dark"] .elementor-widget-heading .elementor-heading-title {
  color: var(--text);
}

html[data-theme="dark"] .elementor-widget-text-editor {
  color: var(--text);
}

html[data-theme="dark"] .elementor-widget-text-editor.ingress {
  color: var(--muted);
}

/*
 * Elementor Site Kit (elementor-kit-*) sätter ofta fast textfärg med högre specificitet
 * än reglerna ovan – då ser rubriker/brödtext mörka på mörk bakgrund (t.ex. /priser).
 */
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-heading .elementor-heading-title a {
  color: var(--text) !important;
}

html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-text-editor,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-text-editor p,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-text-editor li {
  color: var(--text) !important;
}

html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-text-editor.ingress,
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-text-editor.ingress p {
  color: var(--muted) !important;
}

/* Shortcode-widget: kit färglägger ofta .elementor-widget-container */
html[data-theme="dark"] [class*="elementor-kit-"] .elementor-widget-shortcode .elementor-widget-container {
  color: var(--text) !important;
}

/*
 * Publik startsida: Elementor-kolumnkort (bild + rubrik + text, eller Image Box) har ofta vit bakgrund
 * medan globala dark mode-regler sätter ljus typografi → vit-på-vitt. Enhetlig mörk kortyta.
 * body.cctrl-front-public sätts i inc/setup.php (is_front_page + is_public_page).
 * Övriga sidor: lägg CSS-klassen cctrl-el-audience-cards på sektionen i Elementor.
 * :has(> .elementor-element…) = endast direkta widget-barn; annars träffar yttre wrapper kort om bild sitter i nästlade kort.
 */
html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .elementor-column > .elementor-widget-wrap:is(
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading),
  :has(> .elementor-element.elementor-widget-image-box)
),
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-column > .elementor-widget-wrap:is(
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading),
  :has(> .elementor-element.elementor-widget-image-box)
) {
  background-color: var(--bg-elev) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .e-con.e-parent > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
),
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .e-con.e-parent > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
) {
  background-color: var(--bg-elev) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/*
 * Samma målgruppskort / kolumnkort när layouten är ren flex-container (.e-con.cctrl-container)
 * under main – utan omslutande .elementor-section (Elementor 3+ container-baserad startsida).
 */
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero) .elementor-column > .elementor-widget-wrap:is(
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading),
  :has(> .elementor-element.elementor-widget-image-box)
),
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-column > .elementor-widget-wrap:is(
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading),
  :has(> .elementor-element.elementor-widget-image-box)
),
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero).e-parent > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
),
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero).e-parent > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
),
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero).e-parent > .e-con-inner > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
),
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero).e-parent > .e-con-inner > .e-con.e-child:is(
  :has(> .elementor-element.elementor-widget-image-box),
  :has(> .elementor-element.elementor-widget-image):has(> .elementor-element.elementor-widget-heading)
) {
  background-color: var(--bg-elev) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-title,
html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-description,
html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content,
html[data-theme="dark"] body.is-public.cctrl-front-public .elementor-section:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content p,
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-title,
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-description,
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content,
html[data-theme="dark"] body.is-public .elementor-section.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content p {
  color: var(--text) !important;
}

html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-title,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-description,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content p,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-title,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-description,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero) .elementor-widget-image-box .elementor-image-box-content p {
  color: var(--text) !important;
}

/* Rubrik + text-editor i samma cctrl-container-rad (utan image-box) – Site Kit kan tvinga mörk text */
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public.cctrl-front-public .e-con.cctrl-container:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor li,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public .e-con.cctrl-container.cctrl-el-audience-cards:not(.cctrl-hero):where(
  :has(.elementor-widget-heading):has(.elementor-widget-text-editor)
) .elementor-widget-text-editor li {
  color: var(--text) !important;
}

/*
 * Nästlade Elementor-containers med .card (t.ex. rad → cell med rubrik + text).
 * Site Kit sätter ofta mörk typografi; ytterligare .e-child/.card ligger utanför tidigare :has()-kortregler.
 */
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container .e-con.card,
html[data-theme="dark"] body.is-public #primary .e-con.card.cctrl-container {
  background-color: var(--bg-elev) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container .e-con.card .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public #primary .e-con.card.cctrl-container .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor li,
html[data-theme="dark"] body.is-public #primary .e-con.card.cctrl-container .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public #primary .e-con.card.cctrl-container .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public #primary .e-con.card.cctrl-container .elementor-widget-text-editor li {
  color: var(--text) !important;
}

html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.cctrl-container .e-con.card .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.card.cctrl-container .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.cctrl-container .e-con.card .elementor-widget-text-editor li,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.card.cctrl-container .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.card.cctrl-container .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public[class*="elementor-kit-"] #primary .e-con.card.cctrl-container .elementor-widget-text-editor li {
  color: var(--text) !important;
}

/*
 * Direkta .e-con.cctrl-container under Elementor-root: kortbakgrund endast när det ser ut som målgruppskort
 * (bild + rubrik / image box), INTE rena rubrik+text-rader som "Ledningen …".
 * Nästlade .e-con.e-child stylas av reglerna ovan; då ska inte ytterlådan vara kort.
 */
html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container.e-parent:not(.cctrl-hero):not(:has(.e-con.e-child)):where(
  :has(> .e-con-inner .elementor-widget-image-box),
  :has(> .e-con-inner .elementor-widget-image):has(> .e-con-inner .elementor-widget-heading)
) {
  background-color: var(--bg-elev) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-heading .elementor-heading-title,
html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-text-editor li,
html[data-theme="dark"] body.is-public.cctrl-front-public #primary .elementor > .e-con.cctrl-container:not(.cctrl-hero) .elementor-widget-theme-post-excerpt {
  color: var(--text) !important;
}

/*
 * cctrl-section på alla publika sidor: Elementor-gradient / bakgrund från widget-data förblir ofta ljus i dark mode
 * medan tema sätter ljus text → oläsbar yta. Åsidosätt gradient + ge mörk yta och tydlig typografi.
 * Undantag: hero, cctrl-dark (redan mörk), transparent variant.
 */
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--transparent),
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--transparent) {
  background-image: none !important;
  background-color: var(--bg-elev, #1e2132) !important;
  background: var(--bg-elev, #1e2132) !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section--bg-soft:not(.cctrl-hero):not(.cctrl-dark),
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section--bg-soft:not(.cctrl-hero):not(.cctrl-dark) {
  background-image: none !important;
  background-color: color-mix(in srgb, var(--lav-900, #2a2c48) 38%, var(--bg-elev, #1e2132) 62%) !important;
  background: color-mix(in srgb, var(--lav-900, #2a2c48) 38%, var(--bg-elev, #1e2132) 62%) !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none !important;
  background-color: transparent !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-heading-title,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-heading-title,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor li,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor p,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) .elementor-widget-text-editor li {
  color: var(--text, #f7f7ff) !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) a:not(.elementor-button):not(.btn):not(.elementor-post__read-more),
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section:not(.cctrl-hero):not(.cctrl-dark) a:not(.elementor-button):not(.btn):not(.elementor-post__read-more) {
  color: var(--lav-300, #cfd3ec) !important;
}

/*
 * cctrl-section + cctrl-container på samma e-con = innehållsbredd/layout, ingen egen panel (t.ex. "Ledarskap & kompetensutveckling").
 * Transparent i ljus + mörk; åsidosätter section-ytan ovan + Elementor-linjer/skuggor.
 */
body.is-public #primary .e-con.cctrl-section.cctrl-container.e-parent:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--bg-soft),
body.is-public #primary .elementor-section.cctrl-section.cctrl-container:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--bg-soft) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-section.cctrl-container.e-parent:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--bg-soft) > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html[data-theme="dark"] body.is-public #primary .elementor-section.cctrl-section.cctrl-container:not(.cctrl-hero):not(.cctrl-dark):not(.cctrl-section--bg-soft) > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none !important;
  background-color: transparent !important;
}

/*
 * Wrapper runt flera kort: ska vara layout-only (ingen ram/bakgrund). Säkerhetsnät om Elementor/Kit sätter yta.
 * #primary + .cctrl-container på e-child matchar startsidans inre container (t.ex. "Ledningen …").
 */
body.is-public #primary .e-con.cctrl-container.e-parent > .e-con.e-child.cctrl-container,
body.is-public #primary .e-con.cctrl-container.e-parent > .e-con-inner > .e-con.e-child.cctrl-container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container.e-parent > .e-con.e-child.cctrl-container,
html[data-theme="dark"] body.is-public #primary .e-con.cctrl-container.e-parent > .e-con-inner > .e-con.e-child.cctrl-container {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Hero: vit text även när Site Kit sätter !important (samma specificitet → ordning + html-tema) */
html[data-theme="dark"] .elementor-container.cctrl-hero .elementor-heading-title,
html[data-theme="dark"] .e-con.cctrl-hero .elementor-heading-title,
html[data-theme="dark"] .elementor-section.cctrl-hero .elementor-heading-title,
html[data-theme="dark"] .elementor-container.cctrl-hero .elementor-heading-title a,
html[data-theme="dark"] .e-con.cctrl-hero .elementor-heading-title a,
html[data-theme="dark"] .elementor-section.cctrl-hero .elementor-heading-title a,
html[data-theme="dark"] .elementor-container.cctrl-hero .elementor-widget-text-editor,
html[data-theme="dark"] .e-con.cctrl-hero .elementor-widget-text-editor,
html[data-theme="dark"] .elementor-section.cctrl-hero .elementor-widget-text-editor,
html[data-theme="dark"] .elementor-container.cctrl-hero .elementor-widget-text-editor p,
html[data-theme="dark"] .e-con.cctrl-hero .elementor-widget-text-editor p,
html[data-theme="dark"] .elementor-section.cctrl-hero .elementor-widget-text-editor p,
.elementor-container.cctrl-hero .elementor-heading-title,
.e-con.cctrl-hero .elementor-heading-title,
.elementor-section.cctrl-hero .elementor-heading-title,
.elementor-container.cctrl-hero .elementor-heading-title a,
.e-con.cctrl-hero .elementor-heading-title a,
.elementor-section.cctrl-hero .elementor-heading-title a,
.elementor-container.cctrl-hero .elementor-widget-text-editor,
.e-con.cctrl-hero .elementor-widget-text-editor,
.elementor-section.cctrl-hero .elementor-widget-text-editor,
.elementor-container.cctrl-hero .elementor-widget-text-editor p,
.e-con.cctrl-hero .elementor-widget-text-editor p,
.elementor-section.cctrl-hero .elementor-widget-text-editor p {
  color: #ffffff !important;
}

/* 5. Responsive adjustments */

@media (max-width: 768px) {
  .elementor-section.cctrl-hero {
    padding-block: clamp(60px, 10vw, 120px);
  }

  .elementor-section.cctrl-hero .elementor-heading-title {
    font-size: clamp(2rem, 2rem + 1.5vw, 3rem);
  }

  .elementor-section.cctrl-hero .elementor-widget-text-editor {
    font-size: clamp(1rem, 1rem + 0.4vw, 1.25rem);
  }

  .elementor-column {
    padding: var(--space-1);
  }
}

/* 6. Shortcode widgets (RSS Aggregator, etc.) */
/* ===================================================================
   RSS AGGREGATOR Z-INDEX RULES - RESET
   ===================================================================
   
   All custom RSS Aggregator z-index and layout rules have been
   removed/reset as of 2026-01-18.
   
   The plugin now uses its default styling and z-index behavior.
   
   Previous rules included:
   - Z-index adjustments for sections with .wpra-item-list
   - Contact form z-index layering
   - Section stacking order fixes
   
   If z-index issues occur, re-add rules for:
   - .elementor-section:has(.wpra-item-list)
   - .elementor-section:has(.cctrl-contact-form)
   
   ================================================================== */

/* Contact form z-index (kept - not RSS Aggregator specific) */
.elementor-section:has(.cctrl-contact-form) {
  position: relative;
  z-index: 10;
}

.elementor-section:has(.cctrl-contact-form) .cctrl-contact-form {
  position: relative;
  z-index: 10;
}

/* 7. ELEMENTOR TABS - Matchar styleguide design
   ================================================================== */

/* Elementor tabs wrapper - matchar .cctrl-tabs */
.elementor-tabs,
.elementor-widget-tabs .elementor-tabs {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Elementor tabs navigation - matchar .tabs-nav */
.elementor-tabs-wrapper,
.elementor-widget-tabs .elementor-tabs-wrapper {
  display: flex !important;
  gap: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap;
}

/* Elementor tab titles - matchar [role="tab"] */
.elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title,
.elementor-tab-desktop-title,
.elementor-widget-tabs .elementor-tab-desktop-title {
  flex: 0 1 auto !important;
  padding: var(--space-4) var(--space-5) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Understrykning för aktiv tab (som huvudmenyn) - matchar styleguide */
.elementor-tab-title::after,
.elementor-widget-tabs .elementor-tab-title::after,
.elementor-tab-desktop-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--lav-500) !important;
  border-radius: 999px 999px 0 0 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover - ljusare lila */
.elementor-tab-title:hover,
.elementor-widget-tabs .elementor-tab-title:hover,
.elementor-tab-desktop-title:hover {
  color: var(--lav-600) !important;
  background: transparent !important;
}

.elementor-tab-title:hover::after,
.elementor-widget-tabs .elementor-tab-title:hover::after,
.elementor-tab-desktop-title:hover::after {
  background: var(--lav-400) !important;
  transform: scaleX(1) !important;
}

/* Aktiv tab - stark lila (ingen bakgrund, bara understreck) */
.elementor-tab-title.elementor-active,
.elementor-widget-tabs .elementor-tab-title.elementor-active,
.elementor-tab-desktop-title.elementor-active {
  color: var(--lav-900) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.elementor-tab-title.elementor-active::after,
.elementor-widget-tabs .elementor-tab-title.elementor-active::after,
.elementor-tab-desktop-title.elementor-active::after {
  background: var(--lav-500) !important;
  transform: scaleX(1) !important;
}

/* Focus */
.elementor-tab-title:focus-visible,
.elementor-widget-tabs .elementor-tab-title:focus-visible {
  outline: 3px solid rgba(98, 100, 167, 0.3) !important;
  outline-offset: 2px !important;
  border-radius: 0 !important;
}

/* Elementor tabs content wrapper - matchar .tabs__panels */
.elementor-tabs-content-wrapper,
.elementor-widget-tabs .elementor-tabs-content-wrapper {
  padding: var(--space-5) 0 !important;
}

/* Elementor tab content - matchar [role="tabpanel"] */
.elementor-tab-content,
.elementor-widget-tabs .elementor-tab-content {
  padding: 0 !important;
}

/* CSS-klass för att tvinga styleguide-styling */
.cctrl-tabs-style .elementor-tabs,
.cctrl-tabs-style.elementor-tabs {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.cctrl-tabs-style .elementor-tabs-wrapper,
.cctrl-tabs-style .elementor-tab-title {
  /* Alla regler ovan appliceras automatiskt via mer specifika selektorer */
  /* Inga ytterligare regler behövs här */
}

/* Dark mode support för Elementor tabs */
html[data-theme="dark"] .elementor-tab-title {
  color: var(--muted) !important;
}

html[data-theme="dark"] .elementor-tab-title:hover {
  color: var(--lav-400) !important;
}

html[data-theme="dark"] .elementor-tab-title.elementor-active {
  color: var(--text) !important;
}

html[data-theme="dark"] .elementor-tab-title::after {
  background: var(--lav-500);
}

html[data-theme="dark"] .elementor-tab-title:hover::after {
  background: var(--lav-400);
}

/* 8. Editor-specific styling (för WYSIWYG) */
/* Hero och heading-styling behålls även i editor via tema CSS */

/* ===================================================================
   9. MATURITY MODEL FOR MICROSOFT 365 - STYLING
   ================================================================== */
/* 
   Denna CSS används för Maturity Model-sidan när HTML klistras in 
   i Elementor HTML-widgets. All styling är scoped till specifika 
   klasser för att undvika konflikter med andra Elementor-sektioner.
*/

/* Quote card med illustration (40/60 layout) - bild utanför citatet */
.quote-card-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.quote-card__image {
  flex: 0 0 40%;
  width: 40%;
}

.quote-card__image img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  aspect-ratio: 1 / 1;
}

.quote-card {
  flex: 0 0 60%;
  width: 60%;
  padding: var(--space-5);
  background: var(--lav-50);
  border-left: 4px solid var(--lav-500);
  border-radius: var(--radius-md);
  position: relative; /* For the speech bubble arrow */
}

.quote-card::before {
  content: '';
  position: absolute;
  left: -20px; /* Position arrow to the left of the card */
  top: 40px; /* Adjust vertical position */
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid var(--lav-50); /* Color of the speech bubble */
}

.quote-card__content {
  width: 100%;
}

@media (max-width: 640px) {
  .quote-card-wrapper {
    flex-direction: column;
  }
  
  .quote-card__image,
  .quote-card {
    flex: 0 0 100%;
    width: 100%;
  }
  
  .quote-card::before {
    display: none; /* Hide arrow on mobile */
  }
}

/* Storytelling Section */
.storytelling {
  max-width: 100%;
}

.storytelling__content {
  line-height: 1.8;
}

.storytelling h2 {
  text-align: center;
  margin-bottom: var(--space-6);
}

.storytelling h3 {
  color: var(--lav-900);
  font-size: 1.35rem;
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.storytelling p {
  color: var(--text);
}

.storytelling .card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* Process Timeline (Nivåer 100-500) */
.process-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-8);
  margin: var(--space-6) 0;
  position: relative;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 260px;
  margin: 0 auto;
}

.process-step:nth-child(3) {
  max-width: 320px;
}

/* Rad 1: 100-200 */
.process-step:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.process-step:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* Rad 2: 300 (centrerad) */
.process-step:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
}

/* Rad 3: 400-500 */
.process-step:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}

.process-step:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}

/* Badge för "bra ställe" på 300 */
.process-step__badge {
  position: absolute;
  top: -12px;
  right: -12px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  background: var(--lav-100);
  color: var(--lav-900);
  border: 1px solid var(--lav-300);
  white-space: nowrap;
  z-index: 3;
}

.process-step__box {
  background: var(--bg-elev);
  border: 2px solid var(--lav-300);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
  transition: all 250ms ease;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

/* 300-kortet grönt */
.process-step:nth-child(3) .process-step__box {
  background: #E8F5E9;
  border: 2px solid #81C784;
}

.process-step:nth-child(3) .process-step__number {
  color: #2E7D32;
}

.process-step:nth-child(3) .process-step__title {
  color: #1B5E20;
}

.process-step__box:hover {
  border-color: var(--lav-500);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.process-step__number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--lav-500);
  margin-bottom: var(--space-1);
  line-height: 1;
}

.process-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lav-900);
  margin: 0 0 var(--space-1);
}

.process-step__desc {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.process-step__text {
  font-size: 0.85rem;
  color: var(--text);
  margin-top: var(--space-2);
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 900px) {
  .process-timeline {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    gap: var(--space-4);
  }
  
  .process-step {
    max-width: 100%;
  }
  
  .process-step:nth-child(1),
  .process-step:nth-child(2),
  .process-step:nth-child(3),
  .process-step:nth-child(4),
  .process-step:nth-child(5) {
    grid-column: 1;
  }
  
  .process-step:nth-child(1) { grid-row: 1; }
  .process-step:nth-child(2) { grid-row: 2; }
  .process-step:nth-child(3) { grid-row: 3; }
  .process-step:nth-child(4) { grid-row: 4; }
  .process-step:nth-child(5) { grid-row: 5; }
  
  .process-step__box {
    min-height: auto;
  }
}

/* Background image section (scrollable) - full width */
.competence-bg-section {
  min-height: 80vh !important; /* Högre så man kan se hela bilden när man scrollar */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Ensure it works in Elementor sections - AGGRESSIVE OVERRIDE */
.elementor-section .competence-bg-section,
.elementor-widget-html .competence-bg-section,
.elementor-element .competence-bg-section,
.elementor-container .competence-bg-section,
.e-con .competence-bg-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Override Elementor section padding/margin that might interfere */
.elementor-section:has(.competence-bg-section) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Override Elementor container that might wrap it */
.elementor-container:has(.competence-bg-section),
.e-con:has(.competence-bg-section) {
  max-width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Also override any parent wrappers */
.elementor-section:has(.competence-bg-section),
.elementor-widget:has(.competence-bg-section),
.elementor-element:has(.competence-bg-section) {
  overflow: visible !important;
}

/* Make sure page wrapper doesn't limit it */
.elementor-page-wrapper:has(.competence-bg-section),
.elementor-location-header:has(.competence-bg-section),
.elementor-location-footer:has(.competence-bg-section) {
  overflow-x: visible !important;
}

/* ===================================================================
   MATURITY MODEL - ÅTERANVÄNDER STYLEGUIDE CSS
   ================================================================== */
/* 
   Använder befintliga klasser från styleguide:
   - .card (från cctrl-components.css)
   - .cctrl-tabs--vertical (från cctrl-components.css)
   - .tabs-nav--vertical (från cctrl-components.css)
   
   Lägger endast till minimala överrides för Elementor-specifika behov.
*/

/* ===================================================================
   COMPETENCE AREA WIDGET - CSS (JavaScript inline styles override Elementor Kit)
   ================================================================== */
/* VIKTIGT: Inline styles sätts via JavaScript (setCompetenceAreaInlineStyles)
   CSS här är fallback/default styling - JavaScript inline styles har högsta specificitet */

/* Kompetensområde - ÅTERANVÄNDER .card från styleguide */
.competence-area {
  margin-bottom: var(--space-6);
  scroll-margin-top: 140px; /* Space for sticky TOC */
  padding: var(--space-5); /* Padding för innehållet (inte headern) */
  max-width: 100%;
  box-sizing: border-box;
  min-height: 600px; /* Sätt minhöjd för att förhindra höjdändringar */
}

/* Header med bakgrundsbild - EXAKT matchar preview */
.competence-area__header {
  position: relative;
  padding: var(--space-5);
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.competence-area__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 0;
  pointer-events: none;
}

.competence-area__header > * {
  position: relative;
  z-index: 1;
}

.competence-area__header .competence-area__title,
.competence-area__header h3 {
  color: #ffffff;
  margin: 0 0 var(--space-3);
}

.competence-area__header .competence-area__description,
.competence-area__header p {
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Badge ska INTE visas på kortet - den finns bara i TOC */
.competence-area__badge {
  display: none;
}

/* Title och description INOM kortet (inte header) - mörk text */
.competence-area .competence-area__title:not(.competence-area__header .competence-area__title),
.competence-area h3:not(.competence-area__header h3) {
  color: var(--text);
  margin: 0 0 var(--space-3);
}

/* Description utanför header - mörk text */
.competence-area .competence-area__description:not(.competence-area__header .competence-area__description),
.competence-area p:not(.competence-area__header p) {
  color: var(--muted);
  margin: 0 0 var(--space-5);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Progress bar */
.competence-area__progress {
  margin-bottom: var(--space-5);
  display: block;
}

.competence-area__progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.competence-area__progress-value {
  display: none;
}

.competence-area__progress-bar {
  width: 100%;
  height: 16px;
  background: var(--lav-100);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  display: block;
}

.competence-area__progress-fill {
  height: 100%;
  background: var(--lav-500);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: block;
}

.competence-area__progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Tabs - ÅTERANVÄNDER från styleguide, endast minimal override för Elementor */
.competence-area .cctrl-tabs--vertical {
  /* Använder befintlig CSS från cctrl-components.css */
}

.competence-area .tabs__panels {
  /* Använder befintlig CSS från cctrl-components.css */
  padding: 0; /* Override för kompetensområden */
  position: relative;
  min-height: 400px; /* Sätt minhöjd för att förhindra höjdändringar */
}

.competence-area [role="tabpanel"] {
  display: block;
}

.competence-area [role="tabpanel"][hidden] {
  display: none;
}

.competence-area .level-content {
  padding: var(--space-4) 0;
}

/* Competence Levels - använder tabs, inte accordion */

.level-content__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lav-700);
  margin: 0 0 var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.competence-area .level-content p {
  margin-bottom: var(--space-3);
  line-height: 1.7;
}

/* Sticky Table of Contents */
.competence-toc {
  position: sticky;
  top: var(--space-4);
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  box-shadow: none;
  margin-bottom: var(--space-6);
  margin-top: var(--space-6);
  border: none;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  transition: all 300ms ease;
  overflow: visible;
}

.competence-toc:hover {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-4) var(--space-5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(213, 215, 227, 0.5);
  border-radius: var(--radius-md);
}

.competence-toc__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.competence-toc__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
  min-height: 40px;
  transition: all 300ms ease;
}

.competence-toc__badges .competence-toc__badge:not(.active) {
  display: none;
}

.competence-toc:hover .competence-toc__badge {
  display: inline-block;
}

.competence-toc__badge {
  display: none;
  padding: 6px 12px;
  background: var(--lav-100);
  color: var(--lav-600);
  border: 1px solid var(--lav-300);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 200ms ease;
  white-space: nowrap;
}

.competence-toc__badge.active {
  display: inline-block;
  background: var(--lav-500);
  color: #ffffff;
  border-color: var(--lav-500);
  box-shadow: 0 2px 8px rgba(98, 100, 167, 0.3);
}

.competence-toc__badge:hover {
  background: var(--lav-200);
  border-color: var(--lav-400);
  color: var(--lav-700);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .competence-toc {
    top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    max-width: 95%;
  }
  
  .competence-toc__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .competence-toc__badges {
    width: 100%;
  }
  
  .competence-toc__badge {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
  
  .competence-area {
    scroll-margin-top: 120px;
  }
  
  /* ÅTERANVÄNDER responsive tabs från styleguide */
  .competence-area .cctrl-tabs--vertical {
    flex-direction: column;
  }
  
  .competence-area .tabs-nav--vertical {
    min-width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
  
  .competence-area .tabs-nav--vertical [role="tab"] {
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    padding-left: var(--space-4);
  }
  
  .competence-area .tabs-nav--vertical [role="tab"]::after {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 3px;
    transform: translateY(0) scaleX(0);
    transform-origin: left;
  }
  
  .competence-area .tabs-nav--vertical [role="tab"]:hover::after,
  .competence-area .tabs-nav--vertical [role="tab"][aria-selected="true"]::after {
    transform: translateY(0) scaleX(1);
  }
}

/* ===================================================================
   Byggstenar (Elementor loop): måste ligga EFTER Site Kit i denna fil.
   Loop-items har type-cctrl_byggsten (post_class), inte attributet data-post_type.
   =================================================================== */
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) {
  background: var(--bg-elev, #1e2132) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]).elementor {
  background: var(--bg-elev, #1e2132) !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .e-con,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-wrap,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-container {
  background: transparent !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__title,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-heading-title,
html[data-theme="dark"] [class*="elementor-kit-"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-heading .elementor-heading-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .card__description,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-theme-post-excerpt,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor,
html[data-theme="dark"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor p,
html[data-theme="dark"] [class*="elementor-kit-"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor,
html[data-theme="dark"] [class*="elementor-kit-"] .e-loop-item:is(.type-cctrl_byggsten, [data-elementor-post-type="cctrl_byggsten"]) .elementor-widget-text-editor p {
  color: var(--muted, rgba(255, 255, 255, 0.75)) !important;
}