/*
Styles scoped to the Landing page template (page_landing.php).
Only loaded when that template is active — see minimum_enqueue_scripts() in functions.php.

If you don't see a specific style here, it is applied directly to the row or widget and can
be edited in the SiteOrigin page editor.
---------------------------------------------------------------------------------------------------- */
:root {
   --light-blue: #02c8ec;
   --navy: #05367b;
   --dark-navy: #0F1729;
   --ultralight-grey: #FAF9F8;
   --light-grey: #D9D9D9;
   --medium-grey: #434751;
   --dark-grey: #3C3535;
   --inline-padding: 30px;
}

.page-template-page_landing-php {
   
   /* Normalize content width while keeping background colours full width */
   .site-inner .wrap {
      max-width: 100vw;
      padding: 0!important;
      
      .panel-grid .panel-row-style > *,
      .panel-grid.panel-no-style:not(:first-child),
      .two-column-text-image {
         max-width: 1175px;
         margin: 0 auto;
      }
   }

   /* Buttons */
   .sowb-button {
      min-width: 200px;
      padding-block: 15px;
      font-size: 16px;
   }

   /* Spacers */
   .spacer {
      margin-bottom: 150px;
      @media (max-width:780px) {
         margin-bottom: 50px;
      }
   }

   /* Badges */
   .subtitle-badge {
      p {
         text-transform: uppercase;
         font-size: 14px;
         font-weight: 500;
         border-radius: 16px;
         width: fit-content;
         padding: 2px 10px;
         color: var(--navy);
         margin-bottom: 0;
      }
      &.subtitle-badge--blue {
         p{
            background-color: #E5F9FD;
         }
      }
      &.subtitle-badge--grey {
         p {
            background-color: var(--ultralight-grey);
         }
      }
      &.subtitle-badge--navy {
         p {
            background-color: #EEF3FB;
         }
      }
   }
   /* Hero Section */
   .custom-html-widget .landing-banner {
      position: relative;
      width: 100%;
      min-height: 777px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 190px 0 85px;

      @media (max-width:991px) {
         padding-top: 220px;
      }
      @media (max-width:780px) {
         padding-top: 120px;
      }
      
      &::before{
         content: '';
         background: rgba(8, 55, 123, 0.5);
         height: 100%;
         width: 100%;
         position: absolute;
         left: 0px;
         top: 0px;
         z-index: 0;
      }

      .main-content {
         z-index: 9;
         display: flex;
         flex-direction: column;
         gap: 42px;
         max-width: 950px;
         padding-inline: var(--inline-padding);
         @media (max-width: 425px) {
            gap: 12px;
         }

         .title-pill {
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            position: relative;

            > span {
               border: 1px solid #F8FAFC;
               border-radius: 9999px;
               padding: 9px 17px 9px 27px;
               background: rgba(248, 250, 252, 0.10);
               white-space: nowrap;

               &::before {
                  content: "\2022";
                  color: var(--light-blue);
                  font-weight: 700;
                  font-size: 24px;
                  position: relative;
                  top: 2px;
                  right: 12px;
               }

            }
         }

         h1 {
            font-size: 74px;
            @media (max-width:780px) {
               font-size: 54px;
            }
            @media (max-width:425px) {
               font-size: 48px;
            }
         }

         .banner-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 28px;
            line-height: 1.3em;
            text-align: center;
            margin-bottom: 20px;

            @media (max-width: 425px) {
               font-size: 24px;
            }
         }

         .main-btn {
            display: flex!important;
            @media (max-width: 515px) {
               flex-direction: column;
               gap: 30px;
            }
            .button--wide {
               min-width: max-content;
            }
            .banner-btn-1, .banner-btn-2 {
               margin-bottom: 0;
               width: 270px;
               @media (max-width: 680px) {
                  width: 210px;
               }
               a {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 17px 78px;
                  @media (max-width: 680px) {
                     padding: 17px 50px;
                  }
                  &:hover {
                     background-color: var(--navy);
                     color: #fff!important;
                     cursor: pointer;
                     transition: none;
                     .sowm-regular::before {
                        background: url(/wp-content/themes/nelson_recruiting/images/next-white.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        transition: none;
                     }
                  }
               }
            }
         } 
         
      }
   }

   /* Two Icon grid section */
   .two-icon-grid {
      padding-block: 31px;
      ul {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-evenly;
         gap: 40px;
         max-width: 975px;
         margin: 0 auto;
         padding-inline: var(--inline-padding);
         
         li.sow-features-feature.sow-icon-container-position-right {
            align-items: center;
            font-size: 14px;
            width: max-content!important;
            text-align: center;
         }
      }
   }

   /* Video Feature section (How it Works) */
   .how-it-works {
      padding: 60px var(--inline-padding);
      .panel-grid-cell .widget_sow-headline.panel-first-child {
         h2 {
            font-weight: 700;
            font-size: 42px;
            margin-bottom: 8px;
            @media (max-width:780px) {
               font-size: 32px;
            }
         }
         p {
            margin-bottom: 18px;
         }
      }
      .custom-html-widget{
         .video-wrapper {
            max-width: 868px;
            margin: 0 auto;
            video {
               width: 868px;
            }
         }
      }
   }

   /* Two column section with Heading, Paragraph, checklist, button on left, and image on right */
   .two-column-text-image {
      padding-block: 157px;
      padding-inline: var(--inline-padding);
      align-items: center!important;
      gap: 80px;
      @media (max-width: 780px) {
         padding-block: 80px;
         gap: 40px;
      }
      h2 {
         font-size: 42px;
         font-weight: 700;
         margin-bottom: 28px;
         line-height: 1.1!important;
         @media (max-width:780px) {
            font-size: 32px;
         }
      }
      p.sow-sub-headline {
         line-height: 162%;
      }
      .my-new-icon {
         ul.checkmark-list li.check-icon{
            align-items: center;
            font-weight: 500;
            color: var(--dark-navy);
            margin-bottom: 12px;
            
            &::before {
               background: url(/wp-content/uploads/checkmark-icon.png) no-repeat center center;
               margin-right: 12px;
            }
         }
         p {
            padding-top: 32px;
            margin-bottom: 2px;
            color: var(--dark-navy);
            font-weight: 500;
         }
      } 
      
   }

   /* Full width centered title with two prize cards below */
   .prize-listing {
      padding-inline: var(--inline-padding);
      padding-block: 60px;
      h2 {
         font-size: 42px;
         font-weight: 700;
         margin-bottom: 25px;
         @media (max-width:780px) {
            font-size: 32px;
         }
      }
      .widget_sow-features {
         ul.sow-features-list {
            justify-content: center;
            li.sow-features-feature.sow-icon-container-position-top {
               padding: 22px 33px 22px;
               border-radius: 24px;

               
               &:nth-child(odd) {
                  background-color: #fff;
                  * {
                     color: var(--dark-navy)!important;
                  }
               }
               &:nth-child(even) {
                  background-color: var(--navy);
                  *:not(.sow-icon-fontawesome) {
                     color: var(--light-grey)!important;
                  }
               }
               
               /* icon badges */
               .sow-icon-container {
                  max-height: 36px;
                  width: 125px;
                  padding: 10px 5px 10px 16px;
                  background-color: var(--light-blue);
                  border-radius: 9999px;
                  display: flex;
                  align-items: center;
                  margin-left: 0;
                  &[title] > div::after,
                  &[title] > span::after {
                     content: attr(data-badge-label);
                     color: #FFF;
                     font-family: 'Montserrat';
                     font-size: 14px;
                     font-style: normal;
                     font-weight: 700;
                     line-height: 20px;
                  }
                  &[title] > div::after {
                     margin-left: 22px;
                  }
                  &[title] > span::after {
                     margin-left: 6px;
                  }
                  .sow-icon-image {
                     height: 16px;
                     width: 16px;
                     top: 10px;
                     display: flex;
                     justify-content: space-between;
                  }
               }

               .textwidget {
                  text-align: left;
                  .sow-features-feature-title {
                     text-align: left;
                     .big-text {
                        font-size: 60px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 1;
                        @media (max-width:900px) {
                           font-size: 42px;
                        }
                        @media (max-width:780px) {
                           display: block;
                        }
                     }
                  }
                  .sow-features-feature-text {
                     display: flex;
                     flex-direction: column;
                     gap: 16px;
                     img {
                        width: 20px;
                        height: 20px;
                        margin-right: 8px;
                     }
                     p {
                        margin-bottom: 0;
                        display: flex;
                        align-items: center;
                     }
                  }
               }
            }
         }
      }
   }

   /* Feature Highlights section with simple icon cards */
   .feature-highlights-icon-cards {
      padding-block: 80px;
      padding-inline: var(--inline-padding);
      .panel-grid-cell {
         display: flex;
         flex-direction: column;
         gap: 48px;
      }
      .widget_sow-headline {
         margin-bottom: 0!important;
         h2 {
            font-size: 48px;
            font-weight: 700;
            @media (max-width:780px) {
               font-size: 32px;
            }
         }
      }
      .widget_sow-features {
         margin-bottom: 0!important;
         ul.sow-features-list {
            gap: 15px;
            li {
               flex-basis: 200px;
               border-radius: 16px;
               border: 1px solid #E1E7EF;
               padding: 25px 15px;
               @media (max-width: 780px) {
                  flex-basis: 200px
               }
            }
         }
      }
      .widget_custom_html {
         p {
            margin-bottom: 0;
         }
      }
   }

   /* FAQ section styled for the landing page */
   .referral-faqs {
      padding: 102px var(--inline-padding);
      .widget_sow-headline {
         margin-bottom: 40px!important;
         h2 {
            font-weight: 700;
            font-size: 48px;
            line-height: 1.4!important;
            @media (max-width:780px) {
               font-size: 32px;
            }
         }
      }
      .sow-accordion{
         max-width: 801px;
         margin: 0 auto;
         .sow-accordion-panel {
            border-radius: 12px;
            border: 1px solid #E1E7EF;
            background: #FFF;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            .sow-accordion-panel-header-container {
               border-radius: inherit;
               &:hover {
                  .sow-accordion-open-close-button {
                     color: var(--dark-navy)!important;
                  }
               }
               .sow-accordion-panel-header {
                  box-shadow: none;
                  border: none;
                  border-radius: inherit;
                  background-color: #fff;
                  color: var(--dark-navy);
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 1.5;
                  padding: 23px 85px 16px 25px;
                  &:hover {
                     color: var(--dark-navy);
                  }
                  .sow-accordion-open-close-button {
                     color: var(--dark-navy);

                  }
               }
            }
            .sow-accordion-panel-content {
               div.sow-accordion-panel-border {
                  padding: 0 85px 20px 25px;
                  p {
                     font-size: 14px;
                     line-height: 1.5;
                     margin-bottom: 0;
                  }
               }
            }
         }
      }
   }

   /* CTA section with gradient background */
   .referral-cta {
      padding: 90px var(--inline-padding) 73px;
      h2 {
         font-size: 48px;
         font-weight: 700;
         line-height: 1.4!important;
         margin-bottom: 40px;
         @media (max-width:780px) {
            font-size: 32px;
         }
      }
      .sow-sub-headline {
         font-size: 20px;
         line-height: 1.4;
      }
      
      .textwidget.custom-html-widget p{
         margin-bottom: 0;
         font-size: 14px;
         line-height: 1.4;
      }
   }

   /*
   **************************************************
    Specific styles for the Partnership Landing Page 
   **************************************************
   */
   .partnership-landing-page__banner {
      &.landing-banner {
         padding-bottom: 126px;
         padding-top: 200px;
         @media (max-width: 980px) {
            padding-top: 250px;
         }
         @media (max-width: 780px) {
            padding-top: 150px;
            padding-bottom: 100px;
            min-height: 600px;
         }
         &::before {
            background: rgba(17, 55, 123, 0.66);
         }
         .main-content {
            gap: 32px;
            max-width: 1200px;
            .title-pill > span {
               background: #fff;
               color: var(--navy);
               border-radius: 16px;
               padding: 14px 17px;
               &::before {
                  content: none;
               }
            }
            h1 {
               font-size: 56px;
               @media (max-width: 780px) {
                  font-size: 38px;
               }
            }
            p.banner-text {
               font-size: 18px;
            }
         }
         .main-btn {
            @media (max-width: 650px) {
               flex-direction: column;
               gap: 20px;
            }
            .banner-btn-1, .banner-btn-2, .button--wide {
               @media (max-width: 650px) {
                  width: 294px!important;
               }
               a {
                  @media (max-width: 820px) {
                     padding-inline: 7vw!important;
                  }

               }
            }
         }
      }
   }

   .panel-grid:has(.partnership-landing-page__highlights) {
      padding: 56px var(--inline-padding);
      background-color: var(--ultralight-grey);
      .partnership-landing-page__highlights {
         margin: 0 auto;
         gap: 24px;
         flex-wrap: wrap!important;
         justify-content: center!important;
         flex-direction: row!important;
         > .panel-grid-cell {
            min-width: 290px;
            flex-basis: 290px;
            min-height: 192px;
            padding: 32px 33px!important;
            margin: 0!important;
            background-color: #fff;
            color: var(--navy);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 2px;
            border: 1px solid var(--light-grey);
            @media (max-width: 780px) {
               width: unset;
               min-height: 172px;
            }
            > div {
               margin-bottom: 0!important;
               * {
                  margin-bottom: 0;
               }
               .highlights__subtitle {
                  text-transform: uppercase;
                  font-size: 12px;
                  font-weight: 500;
               }
               .highlights__big-stats {
                  text-transform: uppercase;
                  font-size: 42px;
                  font-weight: 700;
                  letter-spacing: -1px;
                  line-height: 1;
                  @media (max-width: 780px) {
                     font-size: 36px;
                  }
               }
               .highlights__description {
                  font-size: 16px;
                  font-weight: 400;
                  color: var(--medium-grey);
               }
            }
            &:last-of-type {
               background-color: var(--navy);
               color: #fff;
               .highlights__description {
                  color: #fff;
               }
            }
         }
      }
   }
   .partnership-landing-page__two-column {
      padding: 97px var(--inline-padding) 43px;
      gap: 44px;
      align-items: center!important;
      max-width: 1235px;
      margin: 0 auto;

      .panel-grid-cell {
         flex-basis: 48%;
         &:first-of-type {
            display: flex;
            flex-direction: column;
            gap: 24px;
         }
      }
      p {
         margin-bottom: 24px;
      }
      p:last-of-type {
         margin-bottom: 0;
      }
      blockquote {
         margin: 0;
         border-left: 4px solid var(--light-blue);
         padding-left: 16px;
         color: var(--navy);
         font-size: 40px;
         font-weight: 700;
         line-height: 1.2;
         @media (max-width: 780px) {
            font-size: 30px;
         }
         &::before {
            content: none;
         }
         p {
            margin-bottom: 0;
         }
      }
      .stakeholders {
         border-radius: 2px;
         border: 1px solid #C4C6D2;
         background: var(--ultralight-grey);
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
         display: flex;
         padding: 49px 32px 32px 32px;
         flex-direction: column;
         align-items: flex-start;
         gap: 24px;
         .stakeholders__title {
            color: var(--navy);
            font-size: 24px;
            font-weight: 600;
            margin: 0;
         }
         .stakeholders__row {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            border-bottom: 1px solid #C4C6D2;
            padding-bottom: 12px;
            &:last-of-type {
               border-bottom: none;
            }
            :first-child {
               color: var(--navy);
               font-size: 16px;
               font-weight: 700;
            }
            :last-child {
               color: var(--dark-navy);
               font-size: 16px;
               font-weight: 400;
            }
         }
      }
      .sow-image-container > img {
         @media (max-width: 780px) {
            width: 100%;
         }
      }
      .quote-navy-background {
         background: var(--navy);
         padding: 50px 30px;
         blockquote {
            max-width: 504px;
            margin: 0 auto;
            border: none;
            color: #fff;
            font-size: 24px;
            font-style: italic;
            font-weight: 400;
            line-height: 1.1;
            > p:last-of-type {
               color: var(--light-blue);
               margin-top: 24px;
               font-size: 27px;
               font-weight: 700;
            }
         }
      }
   }
   .partnership-landing-page__in-the-media {
      max-width: 1235px;
      margin: 0 auto;
      padding-inline: var(--inline-padding);
      h2 {
         font-size: 36px;
         font-weight: 800;
      }
      p.sow-sub-headline {
         max-width: 750px;
         margin-bottom: 0;
      }
      .media-appearances {
         .media-appearances__row {
            display: grid;
            grid-template-columns: 125px 90px auto;
            align-items: center;
            gap: 50px;
            min-height: 103px;
            padding-block: 30px;
            border-bottom: 1px solid #E5E6E8;
            @media (max-width: 780px) {
               grid-template-columns: 80px 70px auto;
               gap: 15px;
            }
            @media (max-width: 480px) {
               display: flex;
               flex-direction: column;
               align-items: flex-start;
               padding-block: 15px;
            }
            .media-appearances__date {
               color: #6C6C6C;
               font-size: 12px;
               font-weight: 700;
               text-transform: uppercase;
               width: 100px;
            }
            .media-appearances__tag {
               color: #fff;
               font-size: 10px;
               font-weight: 700;
               text-transform: uppercase;
               padding: 5px 12px;
               background-color: var(--navy);
               width: max-content;
               @media (max-width: 780px) {
                  justify-self: center;
               
               }  
            }
            .media-appearances__tag--light-blue {
               background-color: var(--light-blue);
            }
            .media-appearances__description {
               font-size: 16px;
               font-weight: 500;
               span:not(:first-of-type) {
                  display: block;
                  color: #6C6C6C;
                  font-size: 14px;
                  font-style: italic;
                  font-weight: 400;
               }
            }
         }
      }
   }
   .panel-grid:has(.partnership-landing-page__icon-cards){
      margin-bottom: 0!important;
      .partnership-landing-page__icon-cards {
         background-color: var(--ultralight-grey);
         padding: 55px var(--inline-padding) 0;
         h2 {
            font-size: 36px;
            font-weight: 800;
            @media (max-width: 780px) {
               font-size: 24px;
            }
         }
         p.sow-sub-headline {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.6;
            max-width: 888px;
         }
         &.partnership-landing-page__icon-cards--full-width {
            padding: 64px 0 92px;
            @media (max-width: 780px) {
               padding-top: 0;
            }
            > .panel-grid-cell {
               max-width: 1440px!important;
            }
            ul.sow-features-list {
               flex-wrap: wrap!important;
               li {
                  flex-basis: 280px;
                  background-color: #fff;
                  justify-content: flex-start;
                  text-align: left;
                  padding: 24px;
                  .sow-icon-container.sow-container-rounded-square {
                     margin: 0;
                     .sow-icon-image {
                        background-size: auto!important;
                     }
                  }
                  h5 {
                     color: var(--dark-navy);
                     font-size: 24px;
                     font-weight: 700;
                     text-align: left!important;
                     @media (max-width: 780px) {
                        font-size: 20px;
                     }
                  }
               }
            }
         }
      }
   }
   .partnership-landing-page__cta {
      padding-inline: var(--inline-padding)!important;
      .panel-background-overlay {
         margin-inline: 0;
         max-width: unset!important;
      }
      h2 {
         color: #FFF;
         text-align: center;
         font-size: 36px;
         font-weight: 800;
         line-height: 1.5;
         max-width: 900px;
         margin: 0 auto 24px;
         @media (max-width: 780px) {
            font-size: 24px;
         }
      }
      p.sow-sub-headline {
         color: #FFF;
         font-size: 18px;
         font-weight: 400;
         line-height: 1.6;
         max-width: 900px;
         margin: 0 auto;
         @media (max-width: 780px) {
            font-size: 16px;
         }
      }
      .siteorigin-widget-tinymce.textwidget {
         text-align: center;
         color: #fff;
         max-width: 900px;
         margin: 0 auto;
         font-size: 12px;
         line-height: 2;
      }
   }
}