@import "../pages/mixins";

.about {

  /* typography & spacing defaults for headings */
  & h2, & h3, & h4, & h5, & h6, & th,
  & .heading, & .subhead, & .label {
    color: var(--white);
    margin-top: 1.75em;
    margin-bottom: 0.5em;
  }

  /* color defaults for paragraphs & list items */
  & p, & li {
    color: var(--light-2);
  }

  /* list defaults */
  & ul {
    list-style: disc; /* just in case */
    padding-left: 1.25rem;

    & li {
      line-height: 1.5;
    }
    & li + li {
      margin-top: 0.25em;
    }
  }


  /* fixes a bug caused by changing defaults to position: relative */
  &, & .intro {
    position: static;
  }

  /* intro */
  & .splash {
    height: 800px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: var(--background);

    & .image {
      background-image: url("/images/profile-bg/about.jpg");
      background-position: 75%;
      background-size: cover;
      filter: saturate(100%) contrast(80%);
      height: 800px;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    & .gradient {
      background: linear-gradient(0deg, var(--dark-2), rgba(0, 0, 0, 0.2));
      bottom: 0;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  /* anchor links */
  & .sublinks {
    text-align: center;
    margin: -2.5rem auto 0 auto;
    padding:
      3rem
      calc(var(--gutter)*0.75)
      var(--gutter-half)
      calc(var(--gutter)*0.75);
    color: var(--white);
    width: 100%;
    background-image: linear-gradient(
      color(var(--dark-1) a(0)),
      color(var(--dark-2) a(0.75))
    );

    /* individual anchor link */
    & .sublink {
      padding: 0.25em calc(var(--gutter)/4);
      display: inline-block;
      color: inherit;
      text-decoration: none;
      text-transform: uppercase;
      transition: opacity 0.2s;

      /* stacked layout on small screens */
      @add-mixin for-xs {
        display: block;
        text-align: left;
      }

      /* states & interactions */
      &.selected {
        @add-mixin body-font-bold;
        text-decoration: underline;
        margin: 0;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* main section layout and theming */
  & .section-container {
    lost-utility: clearfix;
    lost-flex-container: column;
    background-color: var(--dark-3);
  }

  /* individual sections */
  & .section {
    padding: 0 var(--gutter);
    margin-bottom: var(--gutter);
    lost-center: 2/3;
    width: 100%;
    max-width: var(--break-md);
    display: block;
  }

  /* table defaults;
  ** NOTE: used as-is by datasets TOC table, inherited by API tables */
  & table {
    border-collapse: collapse;
    text-align: left;

    /* cell padding & alignment */
    & th,
    & td {
      vertical-align: middle;
      padding:
        var(--gutter-third)
        var(--gutter)
        var(--gutter-third)
        0;

      &:last-of-type {
        padding-right: 0;
      }
    }

    /* font reset */
    & p {
      line-height: 1;
    }

    /* border between adjacent rows */
    & tr + tr {
      border-top: 1px solid var(--dark-1);
    }
  }


  /* documentation table */
  & .docs-table {
    background-color: var(--black);
    overflow: hidden;
    border-radius: 2px;

    & .description {
      color: var(--white);
    }

    & thead {
      background-color: var(--dark-2);
    }

    /* override default about table style */
    & th,
    & td {
      padding: var(--gutter-third);
    }
    & tbody tr {
      border-top-color: var(--dark-3);

      & td {
        vertical-align: top;
      }
    }
  }


  /* field list table */
  & .fixed-table {
    /* give table heading the appearence of being fixed above the table */
    & thead {
      box-shadow: 0 4px 0.5rem color(var(--black) a(0.75));
      z-index: 1;
    }
    /* equal width columns */
    & thead,
    & tbody tr {
      display: table;
      table-layout: fixed;
      width: 100%;
    }
    /* scrollable overflow */
    & tbody {
      display: block;
      overflow-y: scroll;
      overflow-x: hidden;
      max-height: 32rem;
    }
  }
}
