/*

* Ministry of Steel
* Vacancy Tabs
*
* Applies only to the vacancy tabs generated by
* steel-vacancy-tabs.js
  */

.steel-vacancy-tabs {
width: 100%;
margin: 25px 0 30px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 3px solid #005b96;
}

/* Individual tab */

.steel-vacancy-tabs__button {
appearance: none;
-webkit-appearance: none;

margin: 0;
padding: 13px 20px;

border: 1px solid #d7d7d7;
border-bottom: none;

background-color: #f2f2f2;
color: #333;

font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;

cursor: pointer;

transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}

/* Space between tabs */

.steel-vacancy-tabs__button + .steel-vacancy-tabs__button {
border-left: 0;
}

/* Hover */

.steel-vacancy-tabs__button:hover {
background-color: #e5e5e5;
color: #005b96;
}

/* Active tab */

.steel-vacancy-tabs__button.is-active {
background-color: #005b96;
border-color: #005b96;
color: #fff;
}

/* Keyboard focus */

.steel-vacancy-tabs__button:focus {
outline: 3px solid rgba(0, 91, 150, 0.25);
outline-offset: 2px;
position: relative;
z-index: 2;
}

/*

* Hide vacancy blocks.
*
* JS adds .steel-vacancy-block to the four
* existing Drupal blocks.
  */

.steel-vacancy-block {
display: none !important;
}

/*

* Show active vacancy block.
  */

.steel-vacancy-block.is-active {
display: block !important;
}

/*

* Make sure the first block doesn't inherit
* unexpected margins from the tab container.
  */

.steel-vacancy-tabs + .steel-vacancy-block {
margin-top: 0;
}

/*

* Tablet
  */

@media (max-width: 991px) {

.steel-vacancy-tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-bottom: 3px solid #005b96;
}

.steel-vacancy-tabs__button {
border: 1px solid #d7d7d7;
}

.steel-vacancy-tabs__button + .steel-vacancy-tabs__button {
border-left: 1px solid #d7d7d7;
}

}

/*

* Mobile
  */

@media (max-width: 575px) {

.steel-vacancy-tabs {
display: block;
border-bottom: 3px solid #005b96;
}

.steel-vacancy-tabs__button {
display: block;
width: 100%;
border: 1px solid #d7d7d7;
border-bottom: 0;

text-align: left;

}

.steel-vacancy-tabs__button:last-child {
border-bottom: 1px solid #d7d7d7;
}

}