// ELEMENTS
/* ==========================================================================
   #PAGE
   ========================================================================== */

/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */

html {
  font-size: ($inuit-global-font-size / 16px) * 1em; /* [1] */
  line-height: $inuit-global-line-height / $inuit-global-font-size; /* [1] */
  overflow-y: scroll; /* [2] */
  min-height: 100%; /* [3] */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */

/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */


// We have all of our heading font sizes defined here. Passing these pixel
// values into our `inuit-font-size()` mixin will generate a rem-based
// `font-size` with a pixel fallback, as well as generating a `line-height` that
// will sit on our baseline grid.

$inuit-font-size-h1:  36px !default;
$inuit-font-size-h2:  28px !default;
$inuit-font-size-h3:  24px !default;
$inuit-font-size-h4:  20px !default;
$inuit-font-size-h5:  18px !default;
$inuit-font-size-h6:  16px !default;


h1 {
  @include inuit-font-size($inuit-font-size-h1);
}

h2 {
  @include inuit-font-size($inuit-font-size-h2);
}

h3 {
  @include inuit-font-size($inuit-font-size-h3);
}

h4 {
  @include inuit-font-size($inuit-font-size-h4);
}

h5 {
  @include inuit-font-size($inuit-font-size-h5);
}

h6 {
  @include inuit-font-size($inuit-font-size-h6);
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */

/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */

img {
  max-width: 100%; /* [1] */
  font-style: italic; /* [2] */
  vertical-align: middle; /* [3] */
}


/**
 * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
 *    not make the image fluid.
 */

img[width], /* [1] */
img[height] {  /* [1] */
  max-width: none;
}

/* ==========================================================================
   #TABLES
   ========================================================================== */

/**
 * 1. Ensure tables fill up as much space as possible.
 */

table {
  width: 100%; /* [1] */
}