/************************
 * STYRKA – BLOCKS (THEMEABLE)
 * Gäller .tcxn-green-bg och .tcxn-blue-bg
 * – Variabler
 * – Bas (hörn, padding, typografi)
 * – Layout/gaps (desktop, iPad, mobil)
 * – Full width-override
 * – Fallbacks utan :has
 ************************/

/* ========= TEMA-VARIABLER ========= */
:root{
  --tcxn-radius: 24px;
  --tcxn-pad: 24px;
  --tcxn-gap: 32px;
  --tcxn-gutter-md: 16px; /* iPad sidgutter */

  --tcxn-heading: #000F3C;
  --tcxn-text:    #4C5366;

  --tcxn-green-bg: #F3F3F7;
  --tcxn-blue-bg:  #F3F3F7;
}

/* ========= BAS – BOX ========= */
.tcxn-green-bg,
.tcxn-blue-bg{
  border-radius: var(--tcxn-radius);
  overflow: hidden;
  background: transparent; /* sätts per färg nedan */
}
.tcxn-green-bg{ background: var(--tcxn-green-bg); }
.tcxn-blue-bg { background: var(--tcxn-blue-bg);  }

/* === CENTRERINGS-FIX FÖR BOXED CONTAINERS (Elementor Flex Container) ===
   Måla INTE bakgrund på yttercontainern (100% bred). Måla på .e-con-inner som är centrerad. */
.e-con.e-con-boxed.tcxn-green-bg,
.e-con.e-con-boxed.tcxn-blue-bg{
  background: transparent !important;   /* sluta måla utsidan */
  overflow: visible;                     /* låt pilar m.m. få sticka ut om de ligger utanför innern */
}

/* Måla den centrerade innern (den som har auto-marginaler) */
.e-con.e-con-boxed.tcxn-green-bg > .e-con-inner{
  background: var(--tcxn-green-bg);
  border-radius: var(--tcxn-radius);
  overflow: hidden;
  box-sizing: border-box;
  margin-inline: auto;                   /* säkerställ centrering */
}
.e-con.e-con-boxed.tcxn-blue-bg > .e-con-inner{
  background: var(--tcxn-blue-bg);
  border-radius: var(--tcxn-radius);
  overflow: hidden;
  box-sizing: border-box;
  margin-inline: auto;                   /* säkerställ centrering */
}

/* ========= INRE PAD – tcxn på KOLUMN/CONTAINER ========= */
.elementor .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-widget-wrap,
.elementor .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-element-populated,
.elementor .e-con:is(.tcxn-green-bg,.tcxn-blue-bg) > .e-con-inner{
  padding: var(--tcxn-pad) !important;
  box-sizing: border-box;
  margin-top: 0 !important;   /* rör ej sidogutter */
  margin-bottom: 0 !important;
  /* OBS: vi rör INTE margin-inline här – det behövs för centreringen i boxed containers */
}

/* ========= INRE PAD – tcxn på SEKTION ========= */
.elementor-section.tcxn-green-bg > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated,
.elementor-section.tcxn-green-bg > .elementor-container > .elementor-column > .elementor-element-populated,
.elementor-section.tcxn-blue-bg  > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated,
.elementor-section.tcxn-blue-bg  > .elementor-container > .elementor-column > .elementor-element-populated{
  padding: var(--tcxn-pad) !important;
  box-sizing: border-box;
  margin-top: 0 !important;   /* behåll sidogapet */
  margin-bottom: 0 !important;
}

/* ========= TYPOGRAFI ========= */
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-heading .elementor-heading-title{
  color: var(--tcxn-heading);
}
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget:not(.elementor-widget-heading),
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list .elementor-icon-list-item,
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list .elementor-icon-list-item > a,
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list .elementor-icon-list-text{
  color: var(--tcxn-text);
  font-size: 18px;
  line-height: 24px;
}

/* Widget-rytm i boxar */
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-heading-title{ margin: 0; }
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget{ margin-top: 32px; }
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget:first-child{ margin-top: 0; }

/* H4/H5 direkt efter H3 (subhead) */
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-heading + .elementor-widget-heading :is(h4,h5).elementor-heading-title{
  font-size: 18px; line-height: 24px; color: var(--tcxn-text); font-weight: 400;
}
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-heading + .elementor-widget-heading{ margin-top: 4px; }

/* 8px mellan rubrik och text i boxarna */
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-heading + .elementor-widget-text-editor{
  margin-top: 8px !important;
}

/* ========= ICON LIST ========= */
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text,
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-icon-list-icon + .elementor-icon-list-text{
  padding-inline-start: 0;
}
.elementor :is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget .elementor-icon-list-item:not(:last-child){
  margin-bottom: 32px;
}
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list .elementor-icon-list-item > a{
  color: inherit; text-decoration: none;
}
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-heading + .elementor-widget-icon-list{ margin-top: 8px; }
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list + .elementor-widget-icon-list{ margin-top: 16px; }

/* Egen check-ikon */
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list.has-checks .elementor-icon-list-item{
  position: relative; padding-left: 44px;
}
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list.has-checks .elementor-icon-list-icon{ display: none; }
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list.has-checks .elementor-icon-list-item::before{
  content:""; position:absolute; left:0; top:50%;
  width:28px; height:28px; transform:translateY(-50%);
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'>\
<circle cx='14' cy='14' r='14' fill='%232D28CD'/>\
<path d='M8 14.5l4 4L20 10.5' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}
:is(.tcxn-green-bg,.tcxn-blue-bg) .elementor-widget-icon-list.has-checks .elementor-icon-list-item.no-icon::before{
  display:none; content:none;
}

/* ========= FULL WIDTH – utan rundade hörn ========= */
.elementor-section.elementor-section-full_width:is(.tcxn-green-bg, .tcxn-blue-bg),
.elementor-section.elementor-section-stretched:is(.tcxn-green-bg, .tcxn-blue-bg),
.e-con.e-con-full:is(.tcxn-green-bg, .tcxn-blue-bg),
.e-con[data-content-width="full"]:is(.tcxn-green-bg, .tcxn-blue-bg){
  border-radius: 0 !important;
}

/* ========= LAYOUT / GAPS ========= */

/* DESKTOP (≥1025) */
@media (min-width:1025px){

  /* FALL A: tcxn på SEKTIONEN */
  .elementor-section:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-container,
  .elementor-section.elementor-inner-section:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-container{
    padding-inline: 0 !important;
    gap: var(--tcxn-gap);
  }

  /* FALL B: tcxn på KOLUMNERNA – sätt gap på föräldern */
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)){
    gap: var(--tcxn-gap) !important;
  }

  /* undvik dubbelt gutter när gap används (endast tcxn‑kolumner) */
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg))
    > .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)
    > .elementor-element-populated,
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg))
    > .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)
    > .elementor-widget-wrap.elementor-element-populated{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* iPAD (768–1024) */
@media (min-width:768px) and (max-width:1024px){
  .elementor-section:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-container,
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)){
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--tcxn-gutter-md);
    row-gap: var(--tcxn-gap);
    padding-inline: var(--tcxn-gutter-md) !important;
  }

  /* 50/50 när minst två boxar */
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg) + .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg))
  > .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg){
    flex: 0 0 calc((100% - var(--tcxn-gutter-md)) / 2) !important;
    max-width: calc((100% - var(--tcxn-gutter-md)) / 2) !important;
    margin: 0 !important;
  }

  /* 100% när endast en box */
  .elementor-section > .elementor-container:not(:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg) + .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)))
  > .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg){
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* MOBIL (≤767) */
@media (max-width:767px){
  .elementor-section:is(.tcxn-green-bg,.tcxn-blue-bg) > .elementor-container,
  .elementor-section > .elementor-container:has(> .elementor-column:is(.tcxn-green-bg,.tcxn-blue-bg)){
    row-gap: var(--tcxn-gap);
    padding-inline: 16px !important;
  }
}

/* ========= FALLBACKS (utan :has) ========= */
@supports not (selector(:has(*))){
  @media (min-width:768px) and (max-width:1024px){
    .elementor .elementor-container > :is(.tcxn-green-bg,.tcxn-blue-bg),
    .e-con > :is(.tcxn-green-bg,.tcxn-blue-bg),
    .elementor-widget-wrap > :is(.tcxn-green-bg,.tcxn-blue-bg){
      flex: 0 0 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
    }
  }
}

/* ===== Utilities ===== */
.medium-gap-left{ margin-left:10px; }


/***** SLIDER-ONLY FIX (gäller enbart slidern i tcxn-bakgrund) *****/

/* A) BOXED CONTAINERS med tcxn + slider:
      - slå av 100vw-breakout (centrera)
      - måla bakgrund på innern (som är centrerad) och behåll rundade hörn */
.e-con.e-parent.tcxn-blue-bg.e-con-boxed:has(.e-widget-swiper),
.e-con.e-parent.tcxn-green-bg.e-con-boxed:has(.e-widget-swiper){
  width: auto !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible; /* pilar/pagination ska inte klippas av utsidan */
}

/* Måla inte utsidan på boxed; måla innern i stället (per färg) */
.e-con.e-con-boxed.tcxn-blue-bg:has(.e-widget-swiper){ background: transparent !important; }
.e-con.e-con-boxed.tcxn-green-bg:has(.e-widget-swiper){ background: transparent !important; }

.e-con.e-con-boxed.tcxn-blue-bg:has(.e-widget-swiper)  > .e-con-inner{
  background: var(--tcxn-blue-bg) !important;
  border-radius: var(--tcxn-radius);
  overflow: hidden;
  margin-inline: auto;
  padding: var(--tcxn-pad) !important;
  box-sizing: border-box;
}
.e-con.e-con-boxed.tcxn-green-bg:has(.e-widget-swiper) > .e-con-inner{
  background: var(--tcxn-green-bg) !important;
  border-radius: var(--tcxn-radius);
  overflow: hidden;
  margin-inline: auto;
  padding: var(--tcxn-pad) !important;
  box-sizing: border-box;
}

/* B) Icke-boxed tcxn‑SEKTION/CONTAINER med slider: undvik equal-height-stretch */
.elementor-section.tcxn-blue-bg:has(.e-widget-swiper)  > .elementor-container,
.elementor-section.tcxn-green-bg:has(.e-widget-swiper) > .elementor-container,
.e-con.tcxn-blue-bg:has(.e-widget-swiper)             > .e-con-inner,
.e-con.tcxn-green-bg:has(.e-widget-swiper)            > .e-con-inner{
  align-items: flex-start !important; /* gör att sliden inte dras ut till högra kolumnens höjd */
}

/* C) Själva Slides-widgeten i tcxn‑boxar: behåll sin egen höjd och rätt bredd */
.tcxn-blue-bg:has(.e-widget-swiper)  .e-widget-swiper,
.tcxn-green-bg:has(.e-widget-swiper) .e-widget-swiper{
  align-self: flex-start !important;
}
.tcxn-blue-bg:has(.e-widget-swiper)  .elementor-widget-wrap.e-swiper-container,
.tcxn-green-bg:has(.e-widget-swiper) .elementor-widget-wrap.e-swiper-container{
  width: 100% !important;
}

/* D) Pilar/pagination: säkerställ position/klickbarhet i dessa boxar */
.tcxn-blue-bg:has(.e-widget-swiper)  .elementor-swiper,
.tcxn-green-bg:has(.e-widget-swiper) .elementor-swiper{
  position: relative;
}
.tcxn-blue-bg:has(.e-widget-swiper)  .elementor-swiper .elementor-swiper-button,
.tcxn-green-bg:has(.e-widget-swiper) .elementor-swiper .elementor-swiper-button{
  z-index: 5; pointer-events: auto;
}

/* E) Lämna Swipers egna animationer/transitions i fred (ingen global blockering) */
/* (Se bara till att ni inte har en global regel som sätter transition-property:none på .elementor-swiper) */