/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 9/2026
 * ===========================
 */

@media (min-width: 1200px) {
  header.page-header {
    z-index: 10000;
  }
}
main.content {
  .interior-layout__main {
    margin-bottom:0;
  }
}
.sticky-subnav {
  overflow:auto;
  box-shadow: 0 9px 9px rgba(0, 0, 0, 0.15);
  &.sticky {
    position:fixed;
    right:0;
    left:0;
    z-index:9999;
    margin:0 !important;
  }
}
.title-block {
  background:#569cb3;
  &::after {
    content:"";
    background:url(/images/default-source/site-images/resources---news/toolkits/toolkit-circles-for-banner.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:right top;
    position:absolute;
    width:calc(100% - 48px);
    max-width:1280px;
    height:calc(100% + 12rem);
    top:-6rem;
    left:50%;
    transform:translate(-50%, 0);
    @media screen and (min-width:768px) {
      width:calc(100% - 96px);
    }
  }
  .title-block__content {
    @media screen and (min-width:960px) {
      background:none;
    }
    h1.page-title {
      color:white;
    }
    .toolkit-subhead {
      font-size: 16pt;
      font-weight: bold;
      margin: 0 0 .5rem;
      padding: 0;
      border: none;
      text-transform: uppercase;
      letter-spacing: 15px;
      @media screen and (min-width:960px) {
        color: #154E65;
      }
    }
  }
}

/* ======= List Page ======= */
ul.toolkit-list {
  list-style: none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  align-items:stretch;
  grid-gap:24px;
  li.toolkit {
    margin:0;
    padding:0;
    height:100%;
    a {
      display:grid;
      grid-template-columns: auto 1fr;
      grid-gap:18px;
      justify-content: start;
      align-items: center;      
      height:100%;
      padding:24px;
      background-color:#D4EBF5;
      border-top:5px solid #00447c;
      .toolkit-icon {
        border-radius:50%;
        width:6rem;
        height:6rem;
        display:flex;
        justify-content: center;
        align-items:center;
        background-color:#00447c;
        img {
          filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(4%) hue-rotate(325deg) brightness(102%) contrast(100%);
          width:50px;
          
        }
      }
      h2.toolkit-title {
        font-size: 1.6rem;
        line-height: 1.2;
        font-weight:700;
        font-family: "Barlow Semi Condensed","Roboto",Helvetica,Arial,sans-serif;
        color:#00447c;        
      }      
    }
    &:nth-of-type(6n+1) a {
      background-color: #F9E3CE;
      border-color: #E27508;
      .toolkit-icon {
        background-color: #E27508;
      }
    }
    &:nth-of-type(6n+2) a {
      background-color: #D4EBF5;
      border-color: #2A9DCB;
      .toolkit-icon {
        background-color: #2A9DCB;
      }
    }
    &:nth-of-type(6n+3) a {
      background-color: #E5ECD7;
      border-color: #637D2C;
      .toolkit-icon {
        background-color: #637D2C;
      }
    }
    &:nth-of-type(6n+4) a {
      background-color: #DEDEEB;
      border-color: #58599B;
      .toolkit-icon {
        background-color: #58599B;
      }
    }
    &:nth-of-type(6n+5) a {
      background-color: #F0E8CF;
      border-color: #B58E0D;
      .toolkit-icon {
        background-color: #B58E0D;
      }
    }
    &:nth-of-type(6n+6) a {
      background-color: #EBE1ED;
      border-color: #9D6BA7;
      .toolkit-icon {
        background-color: #9D6BA7;
      }
    }
    a:hover, a:focus {
      background-color:white;
      .toolkit-title {
        color:#0072c6;
      }
    }
  }  
}

/* ======= Detail Page ======= */
h2#Intro {
  text-align:center;
}
.sticky-section {
  padding:72px 0;
  position:relative;
    &::before {
      content:"";
      position:absolute;
      display:block;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background-image: url(/images/default-source/site-images/logos/ifebp-globe-logo-white.svg);
      background-repeat:no-repeat;    
      background-attachment: fixed;
      background-size:400px;
      background-position:center bottom 24%;
      opacity:.5;
      @media (min-width:768px) {
        background-position-y:bottom 11%; 
        background-size:600px;
      }
    }
  .page-bounds {
    padding-left:24px;
    padding-right:24px;
    position:relative;
    @media (min-width:768px) {
      padding-left:48px;
      padding-right:48px;
    }
    @media (min-width:1376px) {
      padding-left:0;
      padding-right:0;
    }
  }
  &:nth-child(2n):not(:nth-child(4n)) {
    background: rgba(212,235,245,.45);    
    h2.resourceCategory {
      color:#00447c;
      border-color:#00447c;
    }
  }
  &:nth-child(4n) {
    background: rgba(240,215,127,.15);
    &::before {
      opacity:.6;
    }
  }
  ul {
    margin-left:0;
    list-style:none;
    li {
      margin:0 0 12px;
      &:last-of-type {
        margin-bottom:0;
      }
    }
  }
}
h2.resourceCategory {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight:700;
  margin: 0 0 48px 0;
  padding: 0 0 24px;
  color: #7B9B36;
  border-bottom: 2px solid #7B9B36;
  text-align:center;
  @media screen and (min-width:768px) {
    text-align:start;
  }
  &::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    display:block;
    margin:0 0 14px;
    @media screen and (min-width:768px) {
      display:inline;
      margin:0 14px 0 0;
    }
  }
}
a#conferences + h2::before { content: "\f0c0"; }
a#webcasts + h2::before { content: "\f0ac"; }
a#elearning + h2::before { content: "\f8cc"; }
a#tools + h2::before { content: "\f7d9"; }
a#blogs + h2::before { content: "\f14b"; }
a#articles + h2::before { content: "\f1ea"; }
a#surveys + h2::before { content: "\f681"; }
a#videos + h2::before { content: "\f03d"; }
a#podcasts + h2::before { content: "\f2ce"; }
a#stories + h2::before { content: "\f164"; }
a#quicklinks + h2::before { content: "\f0c1"; }
a#additional + h2::before { content: "\f61f"; }
a#courses + h2::before { content: "\f518"; }
a#calendars + h2::before { content: "\f133"; }
a#faq + h2::before { content: "\f059"; }

.toolkit-items .toolkit-item,
.w-list-view__body .row-list .w-video-row,
.sticky-section.calendars-container,
.sticky-section.faq-container,
.sticky-section.quicklinks-container,
.sticky-section.additional-container {
  h3 {
    font-family: "Barlow Semi Condensed", sans-serif !important;
    font-weight:700 !important;
    color:#262626 !important;
    font-size:2rem  !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
  }
}

.toolkit-items .toolkit-item,
.w-list-view__body .row-list .w-video-row {
  @media (min-width:768px) {
    display:grid;
    grid-template-columns: 300px 1fr;
    grid-column-gap: 30px;
  }
  h3 {
    font-family: "Barlow Semi Condensed", sans-serif !important;
    font-weight:700 !important;
    color:#262626 !important;
    font-size:2rem  !important;
    line-height:1.2 !important;
    margin:0 0 12px !important;
  }
}
.toolkit-items,
.resourceList {
  display:flex;
  flex-direction: column;
  gap: 72px;  
}
.toolkit-items .toolkit-item {
  .toolkit-item-img {
      width:300px;
      height:300px;
      margin:0 0 24px;
      border-radius:50%;
      overflow:hidden;
      @media (min-width:768px) {
        margin-bottom:0;
      }  
    }
  .toolkit-item-text {
    align-self:center;
  }
}
.toolkit-items .toolkit-item .toolkit-item-img {
  &:hover, &:focus {
    opacity:.8;
    transition: opacity .15s ease-out;
  }
}

/* ======= Blogs and Articles ======= */
.resourceList.blogs,
.resourceList.articles {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap:24px;
  .resource a.resourceText,
  a.article {
    display: grid;    
    align-items:start;
    background:white;
    border:1px solid rgba(0,0,0,.1);
    padding:24px;
    height:100%;
    color:#262626;
    &:hover, &:focus {      
      text-decoration:none;
      img {
        opacity:.8;
        transition: opacity .15s ease-out;
      }
      h3 {
        text-decoration:underline;
        color: #0072c6;
        transition: text-decoration .15s ease-out,color .15s ease-out;
      }
    }
    & + p {
      display:none;
    }
    h3 {
      grid-area: title;
      font-family: "Barlow Semi Condensed", sans-serif;
      font-weight: 700;
      font-size:1.6rem;
      line-height:1.3;
      margin:0 0 12px;
      color:inherit;
    }
    img {
      height: auto;
      margin:0 !important;
    }
  }
}
.resourceList.blogs {
  .resource a.resourceText {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "thumbnail" "title" "description";
    p:nth-of-type(1) {
      grid-area: thumbnail;      
    }
    p:nth-of-type(2) {
      grid-area: description;
    } 
  }
}
.resourceList.articles {
  a.article {
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "thumbnail" "title" "publication" "description";
    .thumbnail-container {
      grid-area: thumbnail;
      img {
        padding-bottom:24px;
        &[src*="default-thumbnail"]{
          display:none;
        }
      }
    }
    .publication {
      grid-area: publication;
      font-size:16px;
      line-height:1.5;
      font-style:italic;
      color:#757575;
      margin:0 0 18px;
    }
    .description {
      grid-area: description;
      overflow:hidden;
      line-clamp:9;
      -webkit-line-clamp:9;
      display:-webkit-box;      
      -webkit-box-orient:vertical;
      text-overflow: ellipsis;
    }
  }
}

/* ======= Videos ======= */
.w-gallery-view {
  background:transparent !important;
  .w-list-view__body .row-list {
    gap:48px;
    a.w-video-row {
      background:transparent !important;
      margin:0 !important;
      align-items:center;
      &, div {
        opacity:1 !important;
        transition: none !important;
      }
      & > div:nth-of-type(1) {
        padding-right: 0 !important;
        transform:scale(1) !important;        
      }
      & > div:nth-of-type(2) {
        align-items: center;
        grid-template-areas:"title" "description" "duration";
        & > h3 {
          grid-area:title;
        }
        & > div {
          grid-area:duration;
        }
        & > p {
          grid-area:description;
        }
      }
      &:hover, &:focus {
        h3 {
          color:#0072c6 !important;
          text-decoration:underline !important;
        }
        img {
          opacity:.8 !important;
        }
      }
      .wistia_popover .w-bpb-wrapper { /* play button */
        display:none !important;
      }
    }
  }  
}

/* ======= Table Formatting ======= */
.toolkit-table {
  background: white;
  border-collapse: collapse;
  border-spacing: 0;
  td {
    border-color: #cecece;
    border-style: solid;
    border-width: 1px;
    padding: 10px 15px;
  }
  th {
    border-color: #cecece;
    border-style: solid;
    border-width: 1px;
    padding: 10px 15px;
    word-break: normal;
    text-align: left;
    background-color: #ededed;
  }
  thead th {
    background-color: #00447c;
    color: white;
    text-align: center;
  }
}

/* ======= Specific Toolkit Styles ======= */
.employee-benefits-in-canada {
  h2.resourceCategory {
    display:none;
  }
}