/*
-------------------------------------------
wf-job-position.css
-------------------------------------------

	Beskrivning: Stilregler för Lediga jobb

	Skapad av: Webbfröken AB

------------------------------------------- */

/*
-------------------------------------------
Lokala variabler
------------------------------------------- */

.jobpositions-body {
  --job-position-line-height:1.5em;
}
  

/*
-------------------------------------------
Tabellen
------------------------------------------- */
  
.sv-proxy-portlet > div.jobpositions-body {
  width:100%;
  font-family:var(--env-font-family);
  margin-bottom: var(--wf-spacing-120);
}

.jobpositions-heading{
  display: none;
}

#JobPositionTitle {
  font-size: var(--wf-font-size-h2);
  line-height: 1.2;
  color: var(--env-ui-text-sectionheading-font-color);
  font-family: var(--env-ui-text-sectionheading-font-family);
  font-weight: var(--env-ui-text-sectionheading-font-weight);
  letter-spacing: var(--env-ui-text-sectionheading-letter-spacing);
  text-transform: var(--env-ui-text-sectionheading-text-transform);
  margin-bottom: var(--wf-spacing-20);
}


/*
-------------------------------------------
Listan
------------------------------------------- */

label[for="SummerJob"] {
  font-family: var(--env-font-family);
  font-size: var(--wf-font-size-normal-small);
  color: var(--env-font-color);
}

.jobpositions-header-row,
.jobpositions-row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  font-size: var(--wf-font-size-small);
  border-radius: var(--wf-radius-small);
  padding: 0.75em 2em !important;
}

.jobpositions-header-row {
  background-color:var(--june-mossa-70) !important; 
  color: #fff;
  font-size: var(--wf-font-size-normal-small);
  font-family:var(--wf-heading-font);
  font-weight: 500;
}  

.jobpositions-row:nth-child(even) {
    background:var(--june-sand-05)
}

.jobpositions-body .jobpositions-row > div {
  width: 100%;
  font-family: var(--env-font-family);
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

.jobpositions-row > div > a {
  font-size: var(--wf-font-size-normal-small);
  font-family: var(--wf-heading-font);
  font-weight: 500;
  color:var(--june-mossa-70) !important;
  margin-bottom: var(--wf-spacing-40);
}

.jobpositions-heading + .clearfix:has(input) {
  float: none;
  gap: 10px;
  display: flex;
  margin-bottom: var(--wf-spacing-40);
}


/*
-------------------------------------------
Vald tjänst
------------------------------------------- */

div:has(> #bmc-jobposition-left) {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--wf-spacing-80);
}

div:has(>#bmc-jobposition-left)>a {
  grid-column: span 2;
  width: 100%;
  background: var(--june-mossa-10);
  padding: var(--wf-spacing-30) var(--wf-spacing-40);
  border-radius: var(--wf-radius-large) 0;
  box-sizing: border-box;
  font-family: var(--wf-heading-font);
  font-weight: 500;
  font-size: var(--wf-font-size-normal-small);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--june-mossa-80);
  text-underline-offset: 0.15em;
}

div:has(>#bmc-jobposition-left)>a:hover {
  text-decoration-thickness:3px;
  background: var(--june-mossa-20);
}

div:has(>#bmc-jobposition-left)>a:before {
  content:"";
  height:1em;
  width:1em;
  background-size: contain;
  display:block;
  background-position:center center;
  background-image:var(--wf-chevron-right-june-mossa-70);
  background-repeat:no-repeat;
  transform: scaleX(-100%);
}

/*
-------------------------------------------
Vänstersidan
------------------------------------------- */

table#bmc-jobposition-techspec{
  display: none;
}

div#bmc-jobposition-left {
  width: 100%;
}

div#bmc-jobposition-techspec2{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

div#bmc-jobposition-techspec2 > div {
  display: grid;
  grid-template-columns: max-content 1fr;
}
div#bmc-jobposition-techspec2 > div > div{padding: 0.5em 0.25em 0.25em 0;}

div#bmc-jobposition-techspec2 > div > div:first-child{font-weight: bold;}

div#bmc-jobposition-techspec2 {
  font-size: var(--wf-font-size-normal);
  color: var(--env-font-color);
  background: var(--june-mossa-10);
  padding: var(--wf-spacing-30) var(--wf-spacing-40);
  border-radius: var(--wf-radius-small);
  margin-bottom: var(--wf-spacing-40);
}

p#JobPositionTasks {
  font-family: var(--env-font-family);
  font-size: var(--wf-font-size-normal);
  max-width:60ch;
  line-height: var(--job-position-line-height);
}

p#JobPositionTasks b {
  display: inline-block;
  margin-bottom:var(--wf-spacing-20);
  font-family:var(--env-ui-text-subheading-font-family);
  color:var(--env-ui-text-subheading-font-color);
  font-size: var(--wf-font-size-h3);
  font-weight:var(--env-ui-text-subheading-font-weight);
  text-transform:var(--env-ui-text-subheading-text-transform);
  letter-spacing:var(--env-ui-text-subheading-letter-spacing);
}

div:has(> #bmc-jobposition-left) input[type="button"]{
  margin-top: var(--wf-spacing-40);
}


/*
-------------------------------------------
Högersidan
------------------------------------------- */

div#bmc-jobposition-right {
  width: 100%; 
  font-family: var(--env-font-family);
}

div#bmc-jobposition-right > div:first-child{
  padding: var(--wf-spacing-40);
  padding-bottom:0;
  background-color:var(--june-sand-05);
  font-family:var(--env-ui-text-overline-font-family);
  color:var(--env-ui-text-overline-font-color);
  font-size:var(--env-ui-text-overline-font-size);
  font-weight:var(--env-ui-text-overline-font-weight);
  text-transform:var(--env-ui-text-overline-text-transform);
  letter-spacing:var(--env-ui-text-overline-letter-spacing);
  border-radius:0;
}

div#bmc-jobposition-right > div:nth-child(2n) {
  background-color:var(--june-sand-05);
  border-radius: 0 0 var(--wf-radius-large) 0;
  box-sizing: border-box;
  padding: var(--wf-spacing-40);
  padding-top:var(--wf-spacing-10);
  font-size:var(--wf-font-size-normal-small);
  line-height: var(--job-position-line-height);
    
}
div#bmc-jobposition-right > div:nth-child(2n)> div{
  background-color:transparent;
  margin-bottom:var(--wf-spacing-20);
  font-family:var(--env-ui-text-subheading-font-family);
  color:var(--env-ui-text-subheading-font-color);
  font-size: var(--wf-font-size-h3);
  font-weight:var(--env-ui-text-subheading-font-weight);
  text-transform:var(--env-ui-text-subheading-text-transform);
  letter-spacing:var(--env-ui-text-subheading-letter-spacing);
  line-height: var(--job-position-line-height);
}

div#bmc-jobposition-right > div:nth-child(3n) p {
  font-size: var(--wf-font-size-small) !important;
  line-height: var(--job-position-line-height);
}


/*
-------------------------------------------
Mobil
------------------------------------------- */

@media screen and (max-width: 767px) {

  /* Listan */
  .jobpositions-header-row {
    display:flex;
    gap:0 20px;
    flex-flow:wrap;
  } 

  .jobpositions-header-row,
  .jobpositions-row {
    padding: 0.75em 1em;
  }
  
  .jobpositions-header-row > div {
    padding:14px 0;
  }

  .jobpositions-row {
    display: block;
  }

  .jobpositions-row > div {
    padding: 0.5em;
  }


  /* Vald tjänst */
  div:has(> #bmc-jobposition-left){
    display: block;
  }
  
  div#bmc-jobposition-techspec2{
    display: block;
  }

  div:has(> #bmc-jobposition-left) > a {
    margin-bottom: var(--wf-spacing-80);
  }

  div:has(> #bmc-jobposition-left) input[type="button"]{
    width:100%;
    display: block;
    margin-bottom: var(--wf-spacing-80);
  }

}