/*
 * ================================
 * Title: Event Detail Page Styles
 * Author: Steve Gotthardt
 * Created: 7/2026
 * ================================
 */

:root {
  --box-maxwidth: 900px;
  --text-maxwidth: 100ch;
  
  --titanium: #adafb3;
  --titaniumRgb: 173, 175, 179;
  --titaniumMedium: 214, 215, 217;
  --titaniumLight: 247, 247, 248;

  --platinumPlus: #d7c8a6;
  --platinumPlusRgb: 215, 200, 166;
  --platinumPlusMedium: 235, 228, 211;
  --platinumPlusLight: 251, 250, 246;

  --platinum: #d7c8a6;
  --platinumRgb: 215, 200, 166;
  --platinumMedium: 235, 228, 211;
  --platinumLight: 251, 250, 246;

  --gold: #fdbe1f;
  --goldRgb: 253, 190, 31;
  --goldMedium: 254, 223, 143;
  --goldLight: 255, 249, 233;

  --silver: #adafb3;
  --silverRgb: 173, 175, 179;
  --silverMedium: 214, 215, 217;
  --silverLight: 247, 247, 248;

  --bronze: #ab866e;
  --bronzeRgb: 171, 134, 110;
  --bronzeMedium: 213, 195, 183;
  --bronzeLight: 247, 243, 241;
}

main.content {
  padding-bottom:0;
  h2, h3, h4, h5, h6,
  .h2, .h3, .h4, .h5, .h6 {
        font-family: "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;

    font-weight:600;
  }
  .interior-layout__main {
    margin-bottom:0;
  }
}
.event-subnav {
  overflow:auto;
  box-shadow: 0 9px 9px rgba(0, 0, 0, 0.15);
}
.event-subnav.sticky {
  position:fixed;
  right:0;
  left:0;
  z-index:9999;
  margin:0 !important;
}
.section-bg {
  position:relative;
  margin-left:-24px;
  margin-right:-24px;
  padding-left:24px;
  padding-right:24px;
  @media (min-width:768px) {
    margin-left:-48px;
    margin-right:-48px;
    padding-left:48px;
    padding-right:48px;
  }
  @media (min-width:1376px) {
    margin-left: calc(-50vw + 640px) !important;
    margin-right: calc(-50vw + 640px) !important;
    padding-left:0;
    padding-right:0;
  }
}
.section-bg:nth-of-type(even) {
  position:relative;
  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%;
  padding-top:50px;
  padding-bottom:50px;
  @media (min-width:768px) {
    background-position-y:bottom 11%; 
    background-size:600px;
  }
  &::before,
  &::after {
    content:"";
    position:absolute;
    width:100%;
    height:100px;
    top:-50px;
    left:0;
    background:white;
    border-radius:0 50%;
  }
  &::after {
    top:auto;
    bottom:-50px;
  }
  .section-container {
    padding-top: 96px;
    padding-bottom:96px;
    .card {
      background:white;    
    }
  }
}
.section-bg:nth-of-type(2){
  background-image: linear-gradient(rgba(0,68,124,.9), rgba(0,68,124,.9)), url(/images/default-source/site-images/logos/ifebp-globe-logo-white.svg);
  background-color:#00447c;
  color:white;
  .section-heading {
    color:white;
  }
}
.section-bg:nth-of-type(4){
  background-image: linear-gradient(rgba(239,233,211,.4), rgba(239,233,211,.4)), url(/images/default-source/site-images/logos/ifebp-globe-logo-white.svg);
  background-color:#EFE9D3;
  .section-heading {
    color:#262626;
  }
}
.section-bg:nth-of-type(6){
  background-image: linear-gradient(rgba(234,246,250,.3), rgba(234,246,250,.3)), url(/images/default-source/site-images/logos/ifebp-globe-logo-white.svg);
  background-color:#EAF6FA;
  .section-heading {
    color:#262626;
  }
}
.section-bg:last-of-type {
  padding-bottom:48px;
  &:nth-of-type(even) {
    padding-bottom:0;
    &::after {
      display:none;
    }
  }
}
.section-container {
  position: relative;
  padding-top:48px;
  padding-bottom:48px;
  z-index:1;
  * {    
    position:relative;
    z-index:1;    
  }
  .section-heading {
    font-family: "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;
    font-weight:600;
    font-size:60px;
    line-height:70px;
    margin:0 auto 48px;
    text-align:center;
    &::before {
      font-size:5rem;
      font-family: "Font Awesome 6 Pro";
      font-weight:100;
      display:block;
      padding-right:0;
      margin-bottom:18px;
    }
    & + p {
      margin-top:-18px;
    }
  } 
}
.section-container .interior-layout__aside .card, 
.additional-offerings-container {
  ul {
    list-style: none;
    margin:0;
    li:not(:last-of-type) {
      margin:0 0 18px;
    }
  } 
}
 .ce-container, .exhibitor-sponsor-container {
    & > p {
      max-width:var(--text-maxwidth);
      margin-left:auto;
      margin-right:auto;
    }
  }

/* ======== Overview ======== */
.event-video {
  margin:48px 0 36px;
  max-width:600px;
}

/* ======== Agenda ======== */
.agenda-container {
  max-width:var(--box-maxwidth);
  .section-heading {
    &::before {
      content:"\f46d";
    }
  }
  .agenda-list {
    margin:0 auto;
    background:white;  
    color:#262626;
    button.item-list__header {
      border:1px solid white;
      background:#00447c;
      text-align:center;
      padding:18px;
      .h6 {
        font:inherit;
        font-weight:600;
      }
    }
    .item-list--agenda:not(.is-active) {
      margin-bottom:12px;
    }
  }
}

/* ======== Hotel/Travel ======== */
.hotel-container {
  .section-heading {
    &::before {
      content:"\f594";
    }
  }
  .hotel-description {
    font: 14pt/20pt "Roboto", Helvetica, Arial, sans-serif !important;
    color:#262626 !important;
    padding-bottom:48px;
    @media (min-width:960px) {
      padding-bottom:0;
    }
  }
}

/* ======== Continuing Education ======== */
.ce-container {
  text-align:center;
  .section-heading {
    &::before {
      content:"\f19d";
    }
  }
  a.button {
    margin-top:12px;
  }
}

/* ======== Exhibitors/Sponsors ======== */
.exhibitor-sponsor-container {
  text-align:center;
  .section-heading {
    &::before {
      content:"\f2b5";
    }
  }
  a.button {
    margin-top:12px;
  }
  .opportunities-container,
  .current-container {
    margin-top:72px;
  }
  .opportunities-container {
    text-align:start;
    max-width:var(--box-maxwidth);
    margin:0 auto;
    .accordion .accordion__label,
    .accordion .accordion__content {
      border-color:transparent;
    }
    .accordion .accordion__label {
      padding:18px 24px;
      font-family: "Barlow Semi Condensed", "Roboto", Helvetica, Arial, sans-serif;
      font-weight: 600;
      font-size:26px;
      line-height:30px;
      color:#262626;      
        &:hover, &:focus {
        text-decoration:underline;
      }
      &#Accordion-Titanium-Label { background:rgba(var(--titaniumMedium)); }
      &#Accordion-PlatinumPlus-Label { background:rgba(var(--platinumPlusMedium)); }
      &#Accordion-Platinum-Label { background:rgba(var(--platinumMedium)); }
      &#Accordion-Gold-Label { background:rgba(var(--goldMedium)); }
      &#Accordion-Silver-Label { background:rgba(var(--silverMedium)); }
      &#Accordion-Bronze-Label { background:rgba(var(--bronzeMedium)); }      
      i {
        margin-right:10px;
      }
    }
    .accordion__content {
      border-top:0;
      margin-top:-1px;
      &#Accordion-Titanium-Content { background:rgba(var(--titaniumLight)); }
      &#Accordion-PlatinumPlus-Content { background:rgba(var(--platinumPlusLight)); }
      &#Accordion-Platinum-Content { background:rgba(var(--platinumLight)); }
      &#Accordion-Gold-Content { background:rgba(var(--goldLight)); }
      &#Accordion-Silver-Content { background:rgba(var(--silverLight)); }
      &#Accordion-Bronze-Content { background:rgba(var(--bronzeLight)); }
    }
  }
  .current-container {
    display:flex;
    gap:48px;
    flex-direction:column;
    @media (min-width:768px) {
      flex-direction:row;
    }    
    .sponsor-container,
    .exhibitor-container {
      width:100%;
      h3 {
        margin-bottom:36px;
      }
    }
    .sponsor-container {      
      ul {
        list-style: none;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        gap:48px;
        justify-content: center;
        width:100%;
        li {
          width:100%;
          max-width:150px;
        }
      }
    }
    .exhibitor-container {
      ul, li {
        display: block;
      }
      ul {
        background-color: #ededed;
        margin: 0 auto;
        max-width:var(--box-maxwidth);
        text-align: start;
        li {
          padding: 0.5rem 1rem;
          display:grid;
          grid-template-columns: 1fr auto;
          justify-content: start;
          color: #262626;
          div:last-of-type {
            justify-self: end;
          }
        }
        & li:nth-of-type(even) {
          background-color: white;
        }
      }
    }  
  }  
}
.section-bg:nth-of-type(even) {
  .exhibitor-sponsor-container {
    .opportunities-container {
      .accordion .accordion__label {
        &#Accordion-Titanium-Label { border-color:var(--titanium); }
        &#Accordion-PlatinumPlus-Label { border-color:var(--platinumPlus); }
        &#Accordion-Platinum-Label { border-color:var(--platinum); }
        &#Accordion-Gold-Label { border-color:var(--gold); }
        &#Accordion-Silver-Label { border-color:var(--silver); }
        &#Accordion-Bronze-Label { border-color:var(--bronze); }
      }
      .accordion .accordion__content {
        background:white !important;
        &#Accordion-Titanium-Content { border-color:var(--titanium); }
        &#Accordion-PlatinumPlus-Content { border-color:var(--platinumPlus); }
        &#Accordion-Platinum-Content { border-color:var(--platinum); }
        &#Accordion-Gold-Content { border-color:var(--gold); }
        &#Accordion-Silver-Content { border-color:var(--silver); }
        &#Accordion-Bronze-Content { border-color:var(--bronze); }
      }
    }
    .exhibitor-container ul,
    .sponsor-container ul {
      border: 1px solid #cecece;
    }
    .sponsor-container ul {
      padding:24px;
      background:white;
    }
  }  
}

/* ======== Promotional Resources ======== */
.promo-container {
  .section-heading {
    &::before {
      content:"\f675";
    }
  }
  .promo-text {
    margin-bottom:36px;
    &:last-of-type {
      @media (min-width:960px) {      
        margin-bottom:0;
      } 
    }       
  }    
}  

/* ======== Recommended Events ======== */
.recommended-container {
  ul.schedule {
    list-style: none;
    margin:0 0 24px;
    padding:0 !important;
    li.education__item {
      box-shadow:none;
      border:1px solid #ededed;
    }
  }
  p {
    text-align:center;
  }
  a.button {
    margin-top:12px;
  }
}