/**
 * Basic Styling Rules
 * ===================
 * Basic styling and resets (beyond reboot.scss and normalize.scss) will be
 * defined below. Generally, these style will not apply to a specific class or
 * component; rather these are the foundational styles applied directly to
 * elements that other components will build off of.
 * It's important to note that this file will sometimes break the rule of not
 * defining `display :` styles in CSS. Because these styles may act as site-wide
 * resets, we will occasionally change the core behavior of an element (e.g.
 * <pre><code> blocks).
 *
 *TODO: Consider moving blockquotes, blocknotes, code blocks, etc. into
 *      individual components.
 */



/**
 * Basic font wrangling
 * 1. This overrides styles set in reboot.scss (setting a px-based root
 *    font-size) and allows us to properly use rem-based media queries.
 */
html {
  font-size : initial;  /* 1 */
}

body {
  @extend %serif;
  color : $primary-font;
}

main {
  font-size : 110%;
}



/**
 * Inline code
 * NB. <a><code> combinations are handled under <a> below to allow for cleaner
 * :hover behavior.
 */
code {
  @extend      %monospace;
  color       : $primary-font;
  background  : $light-background-cool;
  @include rounded-corners(.25rem);
  padding     : 0.1rem 0.25rem;

  transition : color 150ms ease-in;
}



/**
 * Color anchors
 * NB. The colors and transition rules need to be duplicated in the above
 *     in-line code style. :hover styles behave very strangely if the styles
 *     aren't properly duplicated.
 */
a {
  color : $link-font;
  text-decoration : underline;
  cursor : pointer;

  transition : color 150ms ease-in;

  /* Disable cursor :hover on anchors w/o an 'href' attr. */
  &:not([href]) {
    @include on-event {
      cursor : default;
    }
  }

  /* <code> block overrides */
  code {
    color      : $link-font;
    @include on-event {
    }
  }

  @include on-event {
    color : $link-font-em;
    text-decoration : underline;

    /* more <code> overrides */
    code {
      color : $link-font-em;
    }
  }

  @include when-inside('.main-article') {
    /**
     * Append a box-arrow image to links that send users off-site
     * 1. We currently don't have a way to programmatically add inline-images as
     *    CSS background rules, so... for now, do it manually.
     * 2. Width is actually 2px wider than the .png image. This is to give some
     *    space between the text and the appended image.
     * 3. Poor-man's kerning. The space between the icon and the next word was a
     *    hair too too much, and that one px pull helps w/ that.
     */
    &[href^="http://"],
    &[href^="https://"] {
      display : inline-block;
      &::after {
        content      : "";
        display      : inline-block;
        text-align   : left;
        width        : p2r(12px);  /* 2 */
        height       : p2r(10px);
        margin-right : p2r(-1px);  /* 3 */
        // background : inline-image('/images/elements/external.png') no-repeat right;  /* 1 */
        background   : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAUklEQVR42m3O0QkAMQgD0JvWNZzDndwpRz5SepcIQWof6APgk+5GiKOZwa8EHTMGqwp3ONzdDFUXYufbYES6WVCfHB7EuW5mF7R1goqgVYQhBl+awCunCZHg2gAAAABJRU5ErkJggg==') no-repeat right;
      }
    }

    /**
     * Append a pdf image to links that send users to a pdf.
     * 1. We currently don't have a way to programmatically add inline-images as
     *    CSS background rules, so... for now, do it manually.
     * 2. Width is actually 2px wider than the .png image. This is to give some
     *    space between the text and the appended image.
     */
    &[href$=".pdf"],
    &[href$=".PDF"] {
      display : inline-block;
      &::after {
        content       : "";
        display       : inline-block;
        width         : p2r(16px);  /* 2 */
        height        : p2r(16px);
        // background    : inline-image('/images/elements/pdf.png') no-repeat right;    /* 1 */
        background: url('data:image/png;base64,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') no-repeat right;
      }
    }
  }
}




/**
 * Titles and Headings
 * PRESENTATION ONLY -- See _wireframe.scss for additional structure.
 * 1. These styles are intentionally terrible. They're here to keep us honest
 *    and not use <h1> elements unless we're overriding the defaults.
 * 2. Set margin-bottom to 0 and use padding-bottom as the spacer s.t. the
 *    :hover mechanics for closely packed heading elements plays a little bit
 *    nicer with the banner padding.
 * 3. Override the inline code styling to keep the color consistent.
 * 4. If header is a link to another page, it will be wrapped in the local-ID
 *    anchor, and then the Markdown-rendered anchor. In this case, do change
 *    text color to the emphasized link.
 */
h1 { @extend %sans-light;
     color          : red;          /* 1 */
     line-height    : initial;      /* 1 */
     font-size      : initial;      /* 1 */
     margin-top     : initial;      /* 1 */
     margin-bottom  : initial; }    /* 1 */
h2 { @extend %sans-light;
     color          : $brand-gray;
     line-height    : 1.2;
     font-size      : 2.30rem;
     margin-top     : 3.00rem;
     padding-bottom : 1.00rem; }    /* 2 */
h3 { @extend %sans;
     color          : $brand-gray;
     line-height    : 1.2;
     font-size      : 1.70rem;
     margin-top     : 1.75rem;
     padding-bottom : 0.50rem; }    /* 2 */
h4 { @extend %sans;
     color          : $brand-gray;
     line-height    : 1.2;
     font-size      : 1.50rem;
     margin-top     : 1.25rem;
     padding-bottom : 0.50rem; }    /* 2 */
h5 { @extend %sans;
     color          : $brand-gray;
     line-height    : 1.2;
     font-size      : 1.30rem;
     margin-top     : 0.00rem;
     padding-bottom : 0.50rem; }    /* 2 */
h6 { @extend %sans;
     color          : $brand-gray;
     line-height    : 1.2;
     font-size      : 1.25rem;
     margin-top     : 0.00rem;
     padding-bottom : 0.50rem; }    /* 2 */

h1, h2, h3, h4, h5, h6 {
  margin-bottom : 0;                /* 2 */

  a {
    color : $brand-gray;
    text-decoration : none;

    code   { color : $brand-gray; }  /* 3 */

    @include on-event {
      color : $brand-gray;
      text-decoration : none;

      code { color : $brand-gray; }  /* 3 */
    }

    a {                              /* 4 */
      @include on-event {
        color : $link-font-em;
      }
    }
  }
}


/**
 * Horizontal Rules
 */
hr {
  border-top : 1px dashed $gray-85;
}


/**
 * Block Quotes
 */
blockquote {
  font-size     : 90%;
  margin-left   : 2rem;
  border-left   : 0.25rem solid $gray-75;
  padding-left  : 1rem;
  margin-top    : 1.5rem;
  margin-right  : 1rem;
}


/**
 * Block Notes (shortcode)
 * 1. Normalize the bottom negative space for blocknotes; w/o this, plain text
 *    makes the note block significantly taller than desired.
 */
.blocknote {
  font-size  : 90%;
  background : $cyan-lightest;
  @include     rounded-corners();
  border     : 1px solid $cyan-light;
  padding    : 1rem 1rem 1rem 1rem;
  margin     : 1.5rem;

  p:last-of-type {
    margin-bottom : 0;  /* 1 */
  }

  .blocknote__title {
    @extend %sans;
    font-size : 110%;
    padding-bottom : 0.25rem;
  }

  @include wide-from('md') {
    margin-right : 1rem;
  }
}



/**
 * Basic Code Blocks
 * 1. When there are multiple <pre> blocks one after another, we only want to
 *    display the first. The others will be exposed through tab interactions.
 */
pre code {
  display    : block;
  overflow-x : auto;
  @include     rounded-corners(0.3rem);
  font-size  : 90%;
  color      : $primary-font;
  background : $light-background-warm;
  border     : 1px solid $gray-75;
  padding    : 0.5rem 1rem;
}

pre + pre {
  display    : none; /* 1 */
}



/**
 * Lists
 * NB. These tag lists are designed to override those in reboot.scss
 */
ol,
ul,
dt {
  margin-bottom : 1rem;
  padding-left  : 2.5rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  /* Currently no overrides for inner-list elements. */
}



/**
 * Tables
 * 1. Tightly packed, inline code was looking pretty awful with the background
 *    color and left/right padding that didn't apply to wrapped lines. To
 *    rectify this, we remove the background color, strip all padding, but
 *    increase the size of the text a bit to make it stand out against the serif
 *    prose surrounding it.
 */
table {
  margin-top    : 1rem;
  margin-bottom : 1rem;

  code {
    background : transparent;  /* 1 */
    padding    : 0;            /* 1 */
    font-size  : 95%;          /* 1 */
  }

  caption {
    color : $primary-font;
  }
}

thead {
  border-bottom : 1px solid $primary-font;
}

th {
  padding : 0.25rem 0.5rem;
}

td {
  padding : 0.5rem;
  vertical-align : top;
}



/**
 * Images
 */
img {
  @include when-inside('.main-article') {
    max-width : 100%;
  }
}



/**
 * Color selection regions
 */
::selection {
  background : $orange-lighter;
}
