// variables based on tachyons classes
// set font family options from config with defaults
$textFontFamily: {{ .Site.Params.textFontFamily | default "sans-serif" }};
$headingFontFamily: {{ .Site.Params.headingFontFamily | default "sans-serif" }};
// set color options from config with defaults
$siteBgColor: {{ .Site.Params.siteBgColor | default "near-white" }};
$sidebarBgColor: {{ .Site.Params.sidebarBgColor | default "light-gray" }};
$textColor: {{ .Site.Params.textColor | default "near-black" }};
$sidebarTextColor: {{ .Site.Params.sidebarTextColor | default "dark-gray" }};
$headlineColor: {{ .Site.Params.headlineColor | default "black" }};
$headingColor: {{ .Site.Params.headingColor | default "near-black" }};
$bodyLinkColor: {{ .Site.Params.bodyLinkColor | default "blue" }};
$navLinkColor: {{ .Site.Params.navLinkColor | default "near-black" }};
$sidebarLinkColor: {{ .Site.Params.sidebarLinkColor | default "near-black" }};
$footerTextColor: {{ .Site.Params.footerTextColor | default "silver" }};
$buttonTextColor: {{ .Site.Params.buttonTextColor | default "near-white" }};
$buttonBgColor: {{ .Site.Params.buttonBgColor | default "black" }};
$buttonHoverTextColor: {{ .Site.Params.buttonHoverTextColor | default "white" }};
$buttonHoverBgColor: {{ .Site.Params.buttonHoverBgColor | default "blue" }};
$borderColor: {{ .Site.Params.borderColor | default "moon-gray" }};

// learn about Tachyons http://tachyons.io
@import 'tachyons';
// uncomment the import below to activate custom-colors
// add your own colors at the top of the imported file
// @import 'custom-colors';

// apply tachyons font family and color options from config
body {
  @extend .bg-#{$siteBgColor}, .#{$textFontFamily}, .#{$textColor};
}
h1, h2, h3, h4, h5, h6 {
  @extend .#{$headingFontFamily}, .#{$headingColor};
}
.f-headline,
.f-subheadline {
  @extend .#{$headlineColor} ;

  &-ns, &-m, &-l {
    @extend .#{$headlineColor} ;
  }
}
.site-brand,
.site-links a,
.site-header .social-icon-links a,
.site-footer .social-icon-links a {
  @extend .#{$navLinkColor};
}
.page-main a:not(.link),
.page-main .social-icon-links a {
  @extend .#{$bodyLinkColor};
}
.page-sidebar {
  @extend .bg-#{$sidebarBgColor}, .#{$sidebarTextColor};
}
.page-sidebar a:not(.link) {
  @extend .#{$sidebarLinkColor};
}
.site-footer {
  @extend .#{$footerTextColor};
}

// apply tachyons classes to blog post markdown
.post-body {

  h1, h2, h3, h4, h5, h6 { @extend .lh-title ; }
  h1 { @extend .f1 ; }
  h2 { @extend .f2 ; }
  h3 { @extend .f3 ; }
  h4 { @extend .f4 ; }
  h5 { @extend .f5 ; }
  h6 { @extend .f6 ; }

  > p { @extend .lh-copy ; }

  > p > code {
    @extend .f6, .ph1, .bg-white-50 ;
  }

  blockquote {
    @extend .ml0, .pl3, .bl, .bw2, .measure-wide, .b--#{$borderColor} ;

    p, cite { @extend .lh-copy ; }
    cite { @extend .f6, .i ; }
  }

  ul, ol, dl { @extend .measure, .lh-copy ; }
  > dl dt { @extend .pl3, .b, .mb2 ; }

  hr { @extend .mv4, .ba, .b--#{$borderColor} ; }

  > table {
    @extend .collapse, .mv4, .w-100, .ba, .bw1, .b--#{$borderColor} ;

    tbody tr { @extend .stripe-dark ; }
    th { @extend .pa3, .f7, .fw7, .ttu, .tl, .v-btm ; }
    td { @extend .pa3, .f6, .v-top ; }
  }

  > .footnotes {
    @extend .f7 ;

    ol { @extend .mw-100 ; }
  }

  details {
    @extend .mt4 ;
  }
}

// apply tachyons classes to blog lists
.blog-content {
  article { @extend .b--#{$borderColor} ; }
}
.list-sidebar {
  article:first-of-type {
    @extend .mt4-l ;
  }
}

// make the ad unit sticky and pad details
.page-sidebar {
  .ad-unit {
    @extend .bg-#{$sidebarBgColor}, .top-0 ;
    position: -webkit-sticky;
    position: sticky;
  }
  details {
    @extend .ph4, .mv4 ;
  }
}

// SHORTCODES
// apply tachyons classes to highlight shortcode (and markdown codefence)
.highlight { @extend .f6, .lh-copy ; }

// apply tachyons classes to figure shortcode
figure {
  @extend .mr0, .ml0 ;

  figcaption p,
  figcaption h4 {
    @extend .f7 ;
  }
  figcaption p {
    @extend .fw4, .mv1 ;
  }
}

// FORMS
form {
  @extend .mb4 ;

  legend {
    @extend .ph0, .mh0, .fw6, .clip ;
  }
  fieldset {
    @extend .f5, .measure-wide, .ba, .bw0, .b--transparent, .pa0, .mv3, .mh0 ;
  }
  label {
    @extend .db, .f6, .lh-copy ;
  }
  select,
  [type="text"],
  [type="email"] {
    @extend .input-reset, .pa3, .mt2, .mb3, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ;
  }
  [type="button"],
  [type="reset"],
  [type="submit"] {
    @extend .input-reset, .ph4, .pv3, .mb3, .f6, .ttu, .tracked, .b, .bw1, .br0, .b--transparent, .link, .pointer, .bg-animate, .#{$buttonTextColor}, .hover-#{$buttonHoverTextColor}, .bg-#{$buttonBgColor}, .hover-bg-#{$buttonHoverBgColor} ;
  }
  input[type="radio"],
  input[type="checkbox"] {
    @extend .mv2, .mh1 ;
  }
  textarea {
    @extend .input-reset, .pa3, .mt2, .mb3, .mh0, .lh-copy, .ba, .br0, .b--#{$borderColor}, .bg-transparent, .w-100 ;
  }
  select:focus,
  textarea:focus,
  [type="text"]:focus,
  [type="email"]:focus {
    @extend .bg-white-50 ;
  }
}

// home page action jackson
.home {
  .action.button {
    @extend .input-reset, .ph4, .pv3, .mb3, .f6, .ttu, .tracked, .b, .bw1, .br0, .b--transparent, .link, .pointer, .bg-animate, .#{$buttonTextColor}, .hover-#{$buttonHoverTextColor}, .bg-#{$buttonBgColor}, .hover-bg-#{$buttonHoverBgColor} ;
  }
  .action.text {
    @extend .db, .mb4, .ttu, .tracked, .b, .link ;
  }
}


// CSS GRID SCAFFOLD
.grid-container {
  @extend .w-100 ;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: dense;
  grid-gap: 0px;
  margin: 0px auto;
  max-width: 1440px;
}
.site-header {
  grid-column: 1 / 7;
}
.page-main {
  grid-column: 1 / 7;
}
.site-footer {
  grid-column: 1 / 7;
}

.list-sidebar {
  .page-main {
    grid-column: 3 / 7;
  }
  .page-sidebar {
    grid-column: 1 / 3;
  }
}
.single-sidebar {
  .page-main {
    grid-column: 1 / 5;
  }
  .page-sidebar {
    grid-column: 5 / 7;
  }
}

// SCAFFOLD MEDIA QUERY
@media screen and (max-width: 768px) {
  .site-header {
    order: 1;
  }
  .page-main {
    order: 2;
  }
  .page-sidebar {
    order: 3;
  }
  .site-footer {
    order: 4;
  }
  .list-sidebar {
    .page-main,
    .page-sidebar {
      grid-column: 1 / 7;
    }
    .page-main {
      order: 3;
    }
    .page-sidebar {
      order: 2;
    }
  }
  .single-sidebar {
    .page-main,
    .page-sidebar {
      grid-column: 1 / 7;
    }
  }
}
