/* ==========================================================================
   Defaults (do not configure)
   ========================================================================== */
html {
  font-size: 10px;
}
body {
  font-size: var(--base-font-size);
  color: var(--color_text);
}

ul, p,
.type-preset--1, .type-preset--2, .type-preset--3, .type-preset--4, .type-preset--5, .type-preset--6, .type-preset--7 {
  margin-bottom: var(--vr);
}

/* ==========================================================================
   Configurations
   ========================================================================== */


/* Fonts: Primary + Secondary
   ==========================================================================
   ==========================================================================
    Your *primary* font is typically used for headings, buttons, labels, etc. Think short, symbolic text.
    Your *secondary* font is used for long form, readable, body content. Example, the WYSIWYG editor.

   Define the default family, line height, & weight 
   */

.font--primary {
  font-family: var(--font_primaryFamily);
  font-weight: var(--font_primaryWeight);
  line-height: var(--font_primaryLineHeight);
}
.font--secondary, body {
  font-family: var(--font_secondaryFamily);
  font-weight: var(--font_secondaryWeight);
  line-height: var(--font_secondaryLineHeight);
}


/* Type Presets
   ========================================================================== 
   ========================================================================== 
   
   Font sizings should be based off of a scale. These are well-tested systems that promote 
   consistency, rhythm, hierarchy, and contrast 
   
   Pick one here and apply it below: https://type-scale.com/
   */

.type-preset--1 { font-size: var(--type-preset-1__fontSize); }
.type-preset--2 { font-size: var(--type-preset-2__fontSize); }
.type-preset--3 { font-size: var(--type-preset-3__fontSize); }
.type-preset--4 { font-size: var(--type-preset-4__fontSize); }
.type-preset--5 { font-size: var(--type-preset-5__fontSize); }
.type-preset--6 { font-size: var(--type-preset-6__fontSize); }
.type-preset--7 { font-size: var(--type-preset-7__fontSize); }

/*
   Sometimes you need to modify the type based on a combo of the 
   font and the preset.

   Things such as:
   - text-transform
   - line-height 
   - font-weight OR font family (for cases where the various font weights 
    are actually different fonts (ex. Graphik-Regular + Graphik-Bold)

   Do that here.. 
   */


/* Other Type Elements
   ========================================================================== 
   ========================================================================== */

ol, ul {
  padding-left: 1.25em;
  list-style-type: unset;
}
ol li:not(:last-child),
ul li:not(:last-child) {
  margin-bottom: var(--vr);
}

.mb { margin-bottom: var(--vr); }
.mb--2x { margin-bottom: var(--vr2x); }
.mb--4x { margin-bottom: var(--vr4x); }
.pb { padding-bottom: var(--vr); }
.pb--2x { padding-bottom: var(--vr2x); }
.pb--4x { padding-bottom: var(--vr4x); }
.uppercase { text-transform: uppercase; }
/* @font-faces
   ==========================================================================
   ========================================================================== */

@font-face {
  font-family: 'Morandi';
  src: url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.eot'); /* IE9 Compat Modes */
  src: url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.woff2')
      format('woff2'),
    /* Super Modern Browsers */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.woff')
      format('woff'),
    /* Pretty Modern Browsers */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('/wp-content/themes/constructive/core/static/fonts/Morandi-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 400;
}

@font-face {
  font-family: 'Morandi';
  src: url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.eot'); /* IE9 Compat Modes */
  src: url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.eot?#iefix')
      format('embedded-opentype'),
    /* IE6-IE8 */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.woff2') format('woff2'),
    /* Super Modern Browsers */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.woff')
      format('woff'),
    /* Pretty Modern Browsers */ url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('/wp-content/themes/constructive/core/static/fonts/Morandi-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 700;
}

@font-face {
  font-family: 'Publico';
  src: url('/wp-content/themes/constructive/core/static/fonts/PublicoText-Roman.eot'); /* IE9 Compat Modes */
  src: url('/wp-content/themes/constructive/core/static/fonts/PublicoText-Roman.eot?#iefix')
      format('embedded-opentype'),
    /* Super Modern Browsers */
      url('/wp-content/themes/constructive/core/static/fonts/PublicoText-Roman.woff')
      format('woff'),
    /* Pretty Modern Browsers */
      url('/wp-content/themes/constructive/core/static/fonts/PublicoText-Roman.ttf')
      format('truetype'),
    /* Safari, Android, iOS */
      url('/wp-content/themes/constructive/core/static/fonts/PublicoText-Roman.svg#svgFontName')
      format('svg'); /* Legacy iOS */
  font-weight: 400;
}