@import '~ChillMainSass/custom/config/colors';

/*
*  PERSON CONTEXT
*/

div#header-person-name {
   background: none repeat scroll 0 0 $chill-green-dark;
   color: #FFF;
   padding-top: 1em;
   padding-bottom: 1em;
}

div#header-person-details {
   background: none repeat scroll 0 0 $chill-green;
   color: #FFF;
   padding-top: 1em;
   padding-bottom: 1em;
}

div#person_details_container {
   padding-top: 20px;
   padding-bottom: 20px;
}

div.person-view {
   figure.person-details {
      h2 {
         font-family: 'Open Sans';
         font-weight: 600;
         margin-bottom: 0.3em;
         font-variant: small-caps;
      }
      dl {
         margin-top: 0.3em;
      }
      dt {
         font-family: 'Open Sans';
         font-weight: 600;
      }
      dd {
         margin-left: 0;
      }
      /*
         a.sc-button { background-color: $black; padding-top: 0.2em; padding-bottom: 0.2em; }
      */
   }
   /* custom fields on the home page */
   div.custom-fields {
      figure.person-details {
         display: flex;
         flex-flow: row wrap;
         div.cf_title_box:nth-child(4n+1) h2 {
            @extend .chill-red;
         }
         div.cf_title_box:nth-child(4n+2) h2 {
            @extend .chill-green;
         }
         div.cf_title_box:nth-child(4n+3) h2 {
            @extend .chill-orange;
         }
         div.cf_title_box:nth-child(4n+4) h2 {
            @extend .chill-blue;
         }
         div.cf_title_box:nth-child(2n+1) {
            width: 50%;
            margin-right: 40px;
         }
         div.cf_title_box:nth-child(2n+2) {
            width: calc(50% - 40px);
         }
      }
   }
}

/*
 *  ACCOMPANYING_COURSE CONTEXT
 *  Header custom for Accompanying Course
 */

div#header-accompanying_course-name {
  background: none repeat scroll 0 0 #718596;
  color: #FFF;
  h1 {
    margin: 0.4em 0;
  }
  span {
    a {
      color: white;
    }
    a:hover {
      text-decoration: underline;
    }
  }
}
div#header-accompanying_course-details {
  background: none repeat scroll 0 0 #718596ab;
  color: #FFF;
  padding-top: 1em;
  padding-bottom: 1em;
}

/*
 *  HOUSEHOLD CONTEXT
 *  Header custom for Household
 */
 
div#header-household-name {
   background: none repeat scroll 0 0 #929d69; //#b97a7a;
   color: #FFF;
   h1 {
     margin: 0.4em 0;
   }
   span {
     a {
       color: white;
     }
     a:hover {
       text-decoration: underline;
     }
   }
}
div#header-household-details {
   background: none repeat scroll 0 0 #b0b984; //#d29791;
   color: #FFF;
   padding-top: 1em;
   padding-bottom: 1em;
   span.current-members-explain {
      font-weight: bold;
   }
}

/*
*  ADDRESS HISTORY
*  context person / household
*/
div.address-timeline.grid {
   display: grid;
   grid-template-rows: auto auto auto;
   grid-template-columns: auto 120px auto;
   
   @media only screen and (max-width: 750px) {
      grid-template-columns: auto 1em auto;
   }
   
   div.top {
      grid-column: 2;
      text-align: center;
      color: lightgrey;
      margin-bottom: -20px;
   }
   div.col-a {
      grid-column: 1;
      text-align: right;
   }
   div.col-b, 
   div.date {
      grid-column: 2;
      position: relative;
      &:after {
         position: absolute;
         content: '';
         top: 0; bottom: 0;
         left: 50%;
         margin: auto -5px;
         width: 10px;
         height: 100%;
         background-color: lightgrey;
         z-index: -5;
      }
   }
   div.col-c {
      grid-column: 3;
   }

   div.col-b,
   div.action,
   div.content {
      min-height: 30px;
      padding: 1em;
   }
   div.content {
      margin: 0.3em;
      border: 1px dashed #00000045;
      &.row1 { // current address
         border: 1px solid #000;
      }   
      div.address {
         font-variant: small-caps;
      }
   }   
   div.date {
      text-align: center;
      background-color: lightgrey;
      padding: 0.5em;
      border-radius: 0.3em;
   }
   
   div.span2 { grid-row: span 3; }
   div.span3 { grid-row: span 5; }
   div.span4 { grid-row: span 7; }
   div.span5 { grid-row: span 9; }
   
   ul.record_actions {
      margin: 0;
   }
   .fake {
      &:after {
         content: 'fake, just to test.. ';
         color: lightgrey;
         font-style: italic;
      }
   }
}