@use '../../_common/styles/brand-colors' as *;
@use 'uswds-core' as *;

/*----------------------------------------------------------
# Styles specific to the De-risking Government Tech guide
-----------------------------------------------------------*/

.derisking-government-tech {
  $user-story-color: #FAF3D1;
  $kick-off-session-time-color: #71767A;

  h4 {
    color: $brand-color-medium;
  }

  h5 {
    @include u-font('sans', 'sm');
    color: $brand-color-medium;
    font-weight: normal;
    text-transform: uppercase;
  }

  hr {
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  table {
    text-align: left;

    caption {
      @include typeset('body', 'md', 3);
    }

    thead {
      th {
        background-color: $brand-color-medium;
        border-color: $brand-color-dark;
        color: white;
        vertical-align: top;

        .scrum-table-subheader {
          @include u-font('sans', '2xs');
          font-weight: normal;
          margin: 0;
        }
      }

      th.evaluate-bids-what-header {
        width: 18.75%;
      }

      th.evaluate-bids-pro-con-header {
        width: 40.625%;
      }

      th.scrum-table-position-header {
        width: 33%;
      }

      th.scrum-table-people-header {
        width: 17%;
      }

      th.scrum-table-rate-header {
        width: 21%;
      }

      th.scrum-table-cost-header {
        width: 29%;
      }
    }

    tr {
      td {
        @include u-line-height('body', 4);
        background-color: white;
        border-color: $brand-color-medium;
        vertical-align: top;

        ul {
          margin: 0;
        }
      }

      td.numeric {
        text-align: right;
      }
    }

    tr.total-row td {
      background-color: $brand-color-light;
    }
  }

  table.evaluation-factor {
    width: 100%;

    tr {
      height: 170px;

      td {
        width: 50%;
      }
    }

    tr.short-row {
      height: 84px;
    }
  }

  table.kick-off-table {
    margin-top: 2rem;

    caption {
      background-color: $brand-color-medium;
      border-color: $brand-color-dark;
      border-style: solid;
      border-width: 1px;
      margin: 0;
      vertical-align: top;
      
      h2 {
        @include typeset('body', 'lg', 2);
        color: white;
        margin: 0.5rem 0 0.5rem 1rem;
      }
    }

    thead tr th {
      width: 50%;
    }

    tbody tr td {
      .session-name {
        margin-bottom: 0.25rem;
      }

      .session-time {
        color: $kick-off-session-time-color;
        font-size: size('body', 'sm');
        margin: 0 0 1rem 0;
      }
    }
  }

  .table-footnote {
    @include typeset('body', '2xs', 4);
    max-width: 100%;
  }

  .width-25-percent {
    width: 25%;
  }

  .width-33-percent {
    width: 33.333%;
  }

  .width-50-percent {
    width: 50%;
  }

  // Section headers within pages
  .section-image {
    background-color: $brand-color-light;

    img {
      height: 80%;
      max-height: 80%;
      max-width: 100%;
      object-fit: contain;
    }
  }

  .chapter-summary {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-top: 1rem;
  }

  // Card layout on the Introduction page
  .introduction-cards {
    .usa-card {
      .usa-card__container {
        border-style: none;
      }
  
      .usa-card__body {
        padding: 0;
  
        .introduction_card_header {
          font-size: 1.125rem;
          margin-bottom: 1rem;
          margin-top: 1rem;
        }
  
        ol {
          list-style-position: inside;
          margin: 0;
          padding: 0;
          padding-inline-start: 0;
  
          li {
            padding-bottom: 0.5rem;
          }
        }
      }
  
      .usa-card__img {
        border-radius: 0;
        display: flex;
  
        img {
          height: 72%;
          max-height: 72%;
          max-width: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .info-box {
    padding: 4%;

    .info-box-header {
      color: $brand-color-medium;

      .font-body-lg {
        color: $brand-color-medium;
        line-height: 1.3;
      }
      .usa-icon--size-4 {
        fill: $brand-color-medium;
        flex-shrink: 0;
      }
    }

    .info-box-content {
      h4 {
        margin: 0.5rem 0 0 0;
      }

      p {
        margin: 0.5rem 0 0 0;
      }

      ul {
        padding-inline-start: 6.5%;
      }
    }
  }

  // User story examples on the key principles page
  .user-story {
    @include typeset('body', 'sm', 4);

    background-color: $user-story-color;
    padding: 1rem;
  }

  // Customize the process list at the top of the market research page
  ol.market-research-summary-list {
    li::before {
      border-color: $brand-color-medium;
      color: $brand-color-medium;
    }

    li.usa-process-list__item {
      border-left-style: none;
      h3 {
        @include typeset('sans', 'lg', 2);
  
        .keyword {
          color: $brand-color-medium;
        }
      }
    }
  }

  // The workshop call-to-action at the bottom of some pages
  .workshop-cta {
    div div {
      img {
        height: 240px;
        width: auto;
      }

      p {
      max-width: measure(6);
      }
    }
  }
}
